@extends('layouts.app2')

@section('dynamic_css')
    <style>

        .documant_name {
            background-color: #33b5e5 !important;
            color: #f9f9f9 !important;
            padding-top: .7rem;
            padding-bottom: 0.7rem;
            max-width: 18rem;
            text-align: center;
            padding-left: 3.7rem;
            padding-right: 3.7rem;
        }

        .file_view {
            border: 2px solid #4285f4 !important;
            background-color: transparent !important;
            color: #4285f4 !important;
            border-radius: 10em;
            padding: .54rem 1.14rem;
            font-size: 18px;
            text-align: center;
            max-width: 7rem;
        }

        .file_edit {
            border: 2px solid #c69500 !important;
            background-color: transparent !important;
            color: #c69500 !important;
            border-radius: 10em;
            padding: .54rem 1.14rem;
            font-size: 18px;
            text-align: center;
            max-width: 7rem;
        }

        .file_delete {
            border: 2px solid #ff3547 !important;
            background-color: transparent !important;
            color: #ff3547 !important;
            border-radius: 10em;
            padding: .54rem 1.14rem;
            font-size: 18px;
            text-align: center;
            max-width: 7rem;
        }

        .file-field input[type=file] {
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            width: 100%;
            margin: 0;
            padding: 0;
            cursor: pointer;
            opacity: 0;
        }

        /* ///  DECORATION CSS ///  */
        .cont_select_center {
            position: absolute;
            left: 50%;
            top: 50%;
            margin-top: -30px;
            margin-left: -150px;
        }

        .cont_heg_50 {
            position: absolute;
            height: 50%;
            left: 0;
            top: 0;
            width: 100%;
            background-color: #fd7b52;
        }

        /* ///  END DECORATION CSS  ///  */

        .icon_select_mate {
            position: absolute;
            top: 20px;
            right: 2%;
            font-size: 16px;
            height: 22px;
            transition: all 275ms;
        }

        .select_mate {
            position: relative;
            float: left;
            min-width: 300px;
            width: 300px;
            min-height: 60px;
            font-family: 'Roboto';
            color: #777;
            font-weight: 300;
            background-color: #fff;
            box-shadow: 1px 2px 10px -2px rgba(0, 0, 0, 0.3);
            border-radius: 3px;
            transition: all 375ms ease-in-out;

        /* Oculto el elemento select */
        select {
            position: absolute;
            overflow: hidden;
            height: 0px;
            opacity: 0;
            z-index: -1;
        }

        }

        .cont_list_select_mate {
            position: relative;
            float: left;
            width: 100%;
        }

        .cont_select_int {
            position: absolute;
            left: 0px;
            top: 0px;
            z-index: 999;
            overflow: hidden;
            height: 0px;
            width: 100%;
            background-color: #fff;
            padding: 0px;
            margin-bottom: 0px;
            margin-top: 0px;
            border-radius: 0px 0px 3px 3px;
            box-shadow: 1px 4px 10px -2px rgba(0, 0, 0, 0.2);
            transition: all 375ms ease-in-out;

        li {
            position: relative;
            float: left;
            width: 96%;
            border-bottom: 1px solid #E0E0E0;
            background-color: #F5F5F5;
            list-style-type: none;
            padding: 10px 2%;
            margin: 0px;
            transition: all 275ms ease-in-out;
            display: block;
            cursor: pointer;

        &
        :last-child {
            border-radius: 3px;
            border-bottom: 0px;

        }

        &
        :hover {
            background-color: #EEEEEE;
        }

        }

        .active {
            background-color: #EEEEEE;
        }

        }

        /* etiqueta <p> con la opcion selecionada  */
        .selecionado_opcion {
            padding: 20px 2%;
            width: 96%;
            display: block;
            margin: 0px;
            cursor: pointer;
        }

        .f-600 {
            font-weight: 600;
        }



        .v-errors {
            background-color: #eee;
            list-style: disc;
            border: 2px solid red;
            padding: 5px 20px;
            color: darkred;
        }

        .table td, .table th{
            padding: 5px;
        }

    </style>
    <link rel="stylesheet" href="{{ asset('css/tab.css') }}">
    <link href="{!! asset('/plugins/bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker.css') !!}"
          rel="stylesheet"/>

@endsection

@section('content')

    <div class="container" id="body1">
     

        <div class="row justify-content-center">

            <div class="col-md-12 col-md-push-0 p20 pt0">

                <div class="card testimonial-card animated zoomIn" style="min-width: 20rem;">

                    <!--Bacground color-->
                    <div class="card-up indigo lighten-1">
                    </div>

                     <!--Avatar-->
                    <div class="avatar mx-auto white"><img src="{!! asset('/images/user.jpg') !!}" 
                          class="rounded-circle" alt="" width="200px" height="182px">
                    </div>

                    {{--{{json_encode($users)}}--}}


                    <div class="card-body pt0">

                        <div class="row">
                            <!-- ============================================================== MAIN TABS =============================================================================== -->
                            <div class="col-md-3 wizard">
                                <ul class="nav flex-column  md-pills nav-justified pills-secondary steps">

                                    <li class="nav-item">
                                        <a class="nav-link active text-upper" data-toggle="tab" href="#tab1" role="tab">Personal
                                            Details</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link text-upper" data-toggle="tab" href="#tab2" role="tab">Contact
                                            Details</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link text-upper" data-toggle="tab" href="#tab3" role="tab">Qualification
                                            Details</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link text-upper" data-toggle="tab" href="#tab4" role="tab">Employment
                                            Details</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link text-upper" data-toggle="tab" href="#tab5" role="tab">Bank
                                            Details</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link text-upper" data-toggle="tab" href="#tab6" role="tab">Document
                                            Uploads</a>
                                    </li>
                                </ul>
                            </div>
                            <!-- ============================================================== MAIN TABS ENDED ========================================================================= -->
                            <div class="col-md-9 wizard">
                                <div class="tab-content">
                                    <hr class="mt0">
                                    <!-- ============================================================== PERSONAL DETAILS ======================================================================== -->

                                    <div class="tab-pane fade in show active" id="tab1" role="tabpanel">
                                        <div class="row" id="personal_view">
                                            <div class="col-md-12 text-right">
											   @can('edit_personal_details')
                                                 <a href="" class="" id="personal_edit"><i class="fa fa-edit fa-2x"
                                                                                          aria-hidden="true"></i></a>
											   @endcan
                                            </div>
                                            <div class="col-md-4 ">
                                                <div class="text-upper text_style">Employee Code</div>
                                                <p>
                                                    <span class="employee_code">{{$users->employee_code}}</span>
                                                </p>
                                            </div>
                                            <div class="col-md-4 ">
                                                <div class="text-upper text_style">Employee Name</div>
                                                <p class="text-capital">
                                                    <span class="employee_name">{{$users->y_name}}</span>
                                                </p>
                                            </div>
                                            <div class="col-md-4 ">
                                                <div class="text-upper text_style">Father's Name</div>
                                                <p>
                                                    <span class="father_name">{{$users->father_name}}</span>
                                                </p>
                                            </div>

                                            <div class="col-md-4 ">
                                                <div class="text-upper text_style">Mother's Name</div>
                                                <p class="text-capital">
                                                    <span class="mother_name">{{$users->mother_name}}</span>
                                                </p>
                                            </div>
                                            <div class="col-md-4 ">
                                                <div class="text-upper text_style">Gender</div>
                                                <p class="text-capital">
                                                    <span class="employee_gender">{{$users->gender}}</span>
                                                </p>
                                            </div>
                                            <div class="col-md-4 ">
                                                <div class="text-upper text_style">Date Of Birth</div>
                                                <p>
                                                    <span class="employee_dob">{{$users->date_of_birth}}</span>
                                                </p>
                                            </div>

                                            <div class="col-md-4 ">
                                                <div class="text-upper text_style">Pan Number</div>
                                                <p>
                                                    <span class="employee_pan">{{$users->pan_number}}</span>
                                                </p>
                                            </div>
                                            <div class="col-md-4 ">
                                                <div class="text-upper text_style">Adhar Number</div>
                                                <p>
                                                    <span class="employee_adhar">{{$users->adhar_number}}</span>
                                                </p>
                                            </div>
                                        </div>

                                        <div id="personal_entry" style="display: none">
                                            <div class="row">
                                                <div class="col-md-12" id="savePersonalDetailValidation"></div>
                                            </div>

                                            <form action="#" id="savePersonalDetails" method="POST">
                                                <div class="row">
                                                    <input type="hidden" value="{{$users->employee_code}}"
                                                           name="pEmpCode" id="pEmpCode"/>
                                                    <div class="col-md-4">
                                                        <div class="form-group">
                                                            <label class="text-upper text_style">Employee Code</label>
                                                            <input type="text" required="true" name="employee_code"
                                                                   id='employee_code'
                                                                   class="form-control form-control-sm"
                                                                   value="{{$users->employee_code}}"
                                                                   readonly="readonly"/>
                                                        </div>
                                                    </div>

                                                    <div class="col-md-4 form-group">
                                                        <label class="text-upper text_style">Employee Name</label>
                                                        <input type="text" required="true"
                                                               class="form-control form-control-sm" name="employee_name"
                                                               id="employee_name" value="{{$users->y_name}}"/>
                                                    </div>
                                                    <div class="col-md-4 form-group">
                                                        <label class="text-upper text_style">Father's Name</label>
                                                        <input type="text" required="true"
                                                               class="form-control form-control-sm" name="father_name"
                                                               id="father_name" placeholder=""
                                                               value="{{$users->father_name}}">
                                                    </div>

                                                    <div class="col-md-4 form-group">
                                                        <label class="text-upper text_style">Mother's Name</label>
                                                        <input type="text" required="true"
                                                               class="form-control form-control-sm" name="mother_name"
                                                               id="mother_name" placeholder=""
                                                               value="{{$users->mother_name}}">
                                                    </div>
                                                    <div class="col-md-4 form-group">
                                                        <label class="text-upper text_style">Gender</label>
                                                        <select class="form-control form-control-sm"
                                                                name="employee_gender"
                                                                id="employee_gender" required="true">
                                                            <option value="Female" @if($users->gender=="Female") {{"selected"}} @endif>
                                                                Female
                                                            </option>
                                                            <option value="Male" @if($users->gender=="Male") {{"selected"}} @endif>
                                                                Male
                                                            </option>
                                                            <option value="Others" @if($users->gender=="Others") {{"selected"}} @endif>
                                                                Others
                                                            </option>
                                                        </select>
                                                    </div>
                                                    <div class="col-md-4 form-group">
                                                        <label class="text-upper text_style">Date Of Birth</label>
                                                        <input type="text" class="form-control form-control-sm"
                                                               name="employee_dob" id="employee_dob" placeholder=""
                                                               required="true" value="{{$users->date_of_birth}}"/>
                                                    </div>

                                                    <div class="col-md-4 form-group">
                                                        <label class="text-upper text_style">Pan Number</label>
                                                        <input type="text" class="form-control form-control-sm"
                                                               name="employee_pan" id="employee_pan" placeholder=""
                                                               value="{{$users->pan_number}}"/>
                                                    </div>
                                                    <div class="col-md-4 form-group">
                                                        <label class="text-upper text_style">Adhar Number</label>
                                                        <input type="text" class="form-control form-control-sm"
                                                               name="employee_adhar" id="employee_adhar" placeholder=""
                                                               value="{{$users->adhar_number}}"/>
                                                    </div>
                                                    <div class="col-md-12 text-right">
                                                        <button type="submit" class="btn btn-info" id='personalsave'>
                                                            Update
                                                        </button>
                                                        <button type="button" class="btn btn-warning"
                                                                id="personal_cancel">
                                                            Cancel
                                                        </button>
                                                    </div>
                                                </div>
                                            </form>

                                        </div>
                                    </div>

                                    <!-- ============================================================== PERSONAL DETAILS ENDED ================================================================= -->

                                    <!-- ============================================================== CONTACT DETAILS ======================================================================== -->

                                    <div class="tab-pane fade in " id="tab2" role="tabpanel">
                                        <div class="row" id="contact_view">
                                            <div class="col-md-12 text-right">
											  @can('edit_personal_details')
                                                <a href="" class="" id="contact_edit"><i class="fa fa-edit fa-2x"
                                                                                         aria-hidden="true"></i></a>
											  @endcan
                                            </div>
                                            <div class="col-md-4">
                                                <div class="text-upper text_style">Home District</div>
                                                <p class="text-capital employee_district">{{$users->home_district_name}}</p>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="text-upper text_style">Home Block</div>
                                                <p class="text-capital employee_block">{{$users->home_block_name}}</p>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="text-upper text_style">Home Gram Panchayat</div>
                                                <p class="text-capital employee_gp">{{$users->home_gram_panchyat_name}}</p>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="text-upper text_style">Email</div>
                                                <p class="text-capital employee_email">{{$users->email}}</p>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="text-upper text_style">Mobile Number</div>
                                                <p class="text-capital mobile_number">{{$users->mobile}}</p>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="text-upper text_style">Alternate Mobile Number</div>
                                                <p class="text-capital alt_mobile_number">{{$users->alternate_mobile}}</p>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="text-upper text_style">Permanent Address</div>
                                                <p class="text-capital employee_pa_address">{{$users->permanent_address}}</p>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="text-upper text_style">Corespondance Address</div>
                                                <p class="text-capital employee_co_address">{{$users->corespondance_address}}</p>
                                            </div>
                                        </div>

                                        <div id="contact_entry" class="" style="display:none;">
                                            <div class="row">
                                                <div class="col-md-12" id="saveContactDetailValidation"></div>
                                            </div>
                                            <form class="row" id="saveContactDetails" action="#" method="POST">
                                                <input type="hidden" name="employee_code" value="{{$employee_code}}"/>
                                                <div class="col-md-4">
                                                    <div class="form-group">
                                                        <label class="text-upper text_style">Home District</label>
                                                        <select class="form-control form-control-sm"
                                                                id="employee_district" name="employee_district">
                                                            @foreach($districts AS $li)
                                                                @if($li->district_code==$users->home_district)
                                                                    <option value="{{$li->district_code}}"
                                                                            selected>{{$li->district_name}}</option>
                                                                @else
                                                                    <option value="{{$li->district_code}}">{{$li->district_name}}</option>
                                                                @endif
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-4 form-group">
                                                    <label class="text-upper text_style">Home Block</label>
                                                    <select class="form-control form-control-sm" id="employee_block"
                                                            name="employee_block">
                                                        <option value="">--SELECT--</option>
                                                        @foreach($blocks AS $li)
                                                            @if($li->block_id==$users->home_block)
                                                                <option value="{{$li->block_id}}"
                                                                        selected>{{$li->block_name}}</option>
                                                            @else
                                                                <option value="{{$li->block_id}}">{{$li->block_name}}</option>
                                                            @endif
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="col-md-4 form-group">
                                                    <label class="text-upper text_style">Home Gram Panchayat</label>
                                                    <select class="form-control form-control-sm" id="employee_gp"
                                                            name="employee_gp">
                                                        <option value="">--SELECT--</option>
                                                        @foreach($grampanchayats AS $li)
                                                            @if($li->gram_panchyat_id==$users->home_gp)
                                                                <option value="{{$li->gram_panchyat_id}}"
                                                                        selected>{{$li->gram_panchyat_name}}</option>
                                                            @else
                                                                <option value="{{$li->gram_panchyat_id}}">{{$li->gram_panchyat_name}}</option>
                                                            @endif
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="col-md-4 form-group">
                                                    <label class="text-upper text_style">Email</label>
                                                    <input type="email" name="employee_email" id="employee_email"
                                                           class="form-control form-control-sm"
                                                           value="{{$users->email}}"/>
                                                </div>
                                                <div class="col-md-4 form-group">
                                                    <label class="text-upper text_style">Mobile Number</label>
                                                    <input type="text" name="mobile_number" id="mobile_number"
                                                           class="form-control form-control-sm"
                                                           value="{{$users->mobile}}"/>
                                                </div>
                                                <div class="col-md-4 form-group">
                                                    <label class="text-upper text_style">Alternate Mobile Number</label>
                                                    <input type="text" name="alt_mobile_number" id="alt_mobile_number"
                                                           class="form-control form-control-sm"
                                                           value="{{$users->alternate_mobile}}"/>
                                                </div>
                                                <div class="col-md-6 form-group">
                                                    <label class="text-upper text_style">Permanent Address</label>
                                                    <textarea class="form-control form-control-sm"
                                                              name="employee_pa_address" id="employee_pa_address"
                                                              rows="3">{{$users->permanent_address}}</textarea>
                                                </div>
                                                <div class="col-md-6 form-group">
                                                    <label class="text-upper text_style">Corespondance Addres</label>
                                                    <textarea class="form-control form-control-sm"
                                                              name="employee_co_address" id="employee_co_address"
                                                              rows="3">{{$users->corespondance_address}}</textarea>
                                                </div>
                                                <div class="col-md-12 text-right">
                                                    <button type="submit" class="btn btn-info">Update</button>
                                                    <button type="button" class="btn btn-warning" id="contact_cancel">
                                                        Cancel
                                                    </button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>

                                    <!-- ============================================================== CONTACT DETAILS ENDED ======================================================================== -->

                                    <!-- ============================================================== QUALIFICATION DETAILS ======================================================================== -->

                                    <div class="tab-pane fade in " id="tab3" role="tabpanel">
                                        <div class="row" id="qualification_view">
                                         @can('edit_qualification_details')
                                            <div class="col-md-12 text-right">
                                                <button type="button"
                                                        class="btn btn-warning btn-sm waves-effect waves-light"
                                                        style="margin-right: -10px" data-toggle="modal"
                                                        data-target="#fluidModalRightSuccessDemo">
                                                    <i class="fa fa-plus" aria-hidden="true"></i> Add More
                                                </button>
                                            </div>
                                          @endcan
                                            <p class="text-info f-600 f-13">
                                                Add Education Qualificatioins / Other Professional Qualificatioins /
                                                Diploma Details / Computer Certifications Onwards.
                                            </p>

                                            <table class="table table-bordered table-responsive f-13" style="width:100%">
                                                <tbody id="qualification_table">
                                                    @foreach($emp_qualifications AS $key => $val)
                                                        <tr class="bg-info" style="color:#eee;font-weight: 700">
                                                            <td colspan="7">{{$key}}</td>
                                                        </tr>
                                                        @if($key=="Education Qualificatioins" || $key=="Other Professional Qualificatioins")
                                                            <tr class="f-13" style="background-color:#eee;color:#333;font-weight:600">
                                                                <th>#</th>
                                                                <th>Exam Passed</th>
                                                                <th>Stream/Horours/Specialization</th>
                                                                <th>Board/University/Institute</th>
                                                                <th>Duration</th>
                                                                <th>Div/Grade/%</th>
                                                                <th>Action</th>
                                                            </tr>
                                                        @elseif($key=="Diploma Details")
                                                            <tr class="f-13" style="background-color:#eee;color:#333;font-weight:600">
                                                                <th>#</th>
                                                                <th>Diploma In</th>
                                                                <th>Specialization</th>
                                                                <th>University/Institute</th>
                                                                <th>Duration</th>
                                                                <th>Div/Grade/%</th>
                                                                <th>Action</th>
                                                            </tr>
                                                        @elseif($key=="Computer Certifications")
                                                            <tr class="f-13" style="background-color:#eee;color:#333;font-weight:600">
                                                                <th>#</th>
                                                                <th>Certification On</th>
                                                                <th>Specialization</th>
                                                                <th>University/Institute</th>
                                                                <th>Duration</th>
                                                                <th>Div/Grade/%</th>
                                                                <th>Action</th>
                                                            </tr>
                                                        @endif

                                                        @php $i=1; @endphp
                                                        @if(count($val)==0)
                                                            <tr>
                                                                <td colspan="7" style="text-align: center">No Data Available</td>
                                                            </tr>
                                                        @else
                                                            @foreach($val AS $item)
                                                                <tr>
                                                                    <td>{{$i}}</td>
                                                                    <td>{{$item->exam_passed_dip_cer}}</td>
                                                                    <td>{{$item->st_hor_sp}}</td>
                                                                    <td>{{$item->board_u_ins}}</td>
                                                                    <td>
                                                                        @if($item->duration_years ==1)
                                                                            {{$item->duration_years. " yr "}}
                                                                        @elseif($item->duration_years>1)
                                                                            {{$item->duration_years. " yrs "}}
                                                                        @endif

                                                                        @if($item->duration_months==1)
                                                                            {{$item->duration_months. " month"}}
                                                                        @elseif($item->duration_months>1)
                                                                            {{$item->duration_months. " months"}}
                                                                        @endif
                                                                    </td>
                                                                    <td>{{$item->div_grade_percentage}}</td>
                                                                    <td style="display:flex">
															@can('edit_qualification_details')
                                                                        @if($item->q_doc)
                                                                            <a target="_blank" href="{{$global_data['config']->image_url.$item->q_doc}}" class="btn btn-primary btn-xs">
                                                                                <i class="fa fa-file-pdf-o"></i>
                                                                            </a>
                                                                        @endif

                                                                        <a type="button" class="btn btn-primary btn-xs">
                                                                            <i class="fa fa-edit"></i>
                                                                        </a>
                                                                        <a type="button" class="btn btn-danger btn-xs">
                                                                            <i class="fa fa-trash"></i>
                                                                        </a>
															 @endcan
                                                                    </td>
                                                                </tr>
                                                                @php $i++; @endphp
                                                            @endforeach
                                                        @endif
                                                    @endforeach
                                                </tbody>
                                            </table>

                                        </div>
                                    </div>

                                    <!-- ============================================================== QUALIFICATION DETAILS ENDED ======================================================================== -->

                                    <!-- ============================================================== EMPLOYMENT DETAILS ======================================================================== -->

                                    <div class="tab-pane fade in " id="tab4" role="tabpanel">
                                        <div class="row" id="employment_view">
                                            <div class="col-md-12 text-right">
											  
											@can('edit_employment_details')
                                                <a href="" class="" id="employment_edit"><i class="fa fa-edit fa-2x"
                                                                                            aria-hidden="true"></i></a>
											@endcan
                                            </div>
                                            <div class="col-md-4 ">
                                                <div class="text-upper text_style">Program</div>
                                                <p class="text-capital program_name">{{$users->program_name}}</p>
                                            </div>
                                            <div class="col-md-4 ">
                                                <div class="text-upper text_style">Level</div>
                                                <p class="text-capital level_name">{{$users->level_name}}</p>
                                            </div>
                                            <div class="col-md-4 ">
                                                <div class="text-upper text_style">Designation</div>
                                                <p class="text-capital designation_name">{{$users->designation_name}}</p>
                                            </div>

                                            <div class="col-md-4 ">
                                                <div class="text-upper text_style">District</div>
                                                <p class="text-capital employment_district">{{$users->district_name}}</p>
                                            </div>
                                            <div class="col-md-4 ">
                                                <div class="text-upper text_style">Block</div>
                                                <p class="text-capital employment_block">{{$users->block_name}}</p>
                                            </div>
                                            <div class="col-md-4 ">
                                                <div class="text-upper text_style">Gram Panchayat</div>
                                                <p class="text-capital employment_gp">{{$users->gram_panchyat_name}}</p>
                                            </div>

                                            <div class="col-md-4 ">
                                                <div class="text-upper text_style">Date Of Joining</div>
                                                <p class="text-capital employee_doj">{{$users->date_of_joining}}</p>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="text-upper text_style">Salary</div>
                                                <p class="text-capital">{{$users->salary}}</p>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="text-upper text_style">Contract Date</div>
                                                <p class="text-capital employee_contract_date">{{$users->contract_date}}</p>
                                            </div>
                                            <div class="col-md-4 ">
                                                <div class="text-upper text_style">Service Status</div>
                                                <p class="text-capital">{{$users->status_name}}</p>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="text-upper text_style">Contract Sign With</div>
                                                <p class="text-capital employee_contract_sign">{{$users->contract_sign_with}}</p>
                                            </div>
                                        </div>

                                        <div id="employment_entry" class="" style="display: none">

                                            <div class="row">
                                                <div class="col-md-12" id="saveEmploymentDetailValidation"></div>
                                            </div>

                                            <form class="row" id="saveEmploymentDetails" action="#" method="POST">

                                                <input type="hidden" name="employee_code" value="{{$employee_code}}">

                                                <div class="col-md-4">
                                                    <div class="form-group">
                                                        <label class="text-upper text_style">Program</label>
                                                        <select class="form-control form-control-sm" id="program_name"
                                                                name="program_name">
                                                            @foreach($programs AS $li)
                                                                @if($li->program_code==$users->program_code)
                                                                    <option value="{{$li->program_code}}"
                                                                            selected>{{$li->program_name}}</option>
                                                                @else
                                                                    <option value="{{$li->program_code}}">{{$li->program_name}}</option>
                                                                @endif
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="col-md-4 form-group">
                                                    <label class="text-upper text_style">Level</label>
                                                    <select class="form-control form-control-sm" id="level_name"
                                                            name="level_name">
                                                        @foreach($levels AS $li)
                                                            @if($li->level_code==$users->level_code)
                                                                <option value="{{$li->level_code}}"
                                                                        selected>{{$li->level_name}}</option>
                                                            @else
                                                                <option value="{{$li->level_code}}">{{$li->level_name}}</option>
                                                            @endif
                                                        @endforeach
                                                    </select>
                                                </div>

                                                <div class="col-md-4 form-group">
                                                    <label class="text-upper text_style">Designation</label>
                                                    <select class="form-control form-control-sm" id="designation_name"
                                                            name="designation_name">
                                                        @foreach($designations AS $li)
                                                            @if($li->designation_code==$users->designation_code)
                                                                <option value="{{$li->designation_code}}"
                                                                        selected>{{$li->designation_name}}</option>
                                                            @else
                                                                <option value="{{$li->designation_code}}">{{$li->designation_name}}</option>
                                                            @endif
                                                        @endforeach
                                                    </select>
                                                </div>

                                                <div class="col-md-4 form-group">
                                                    <label class="text-upper text_style">District</label>
                                                    <select class="form-control form-control-sm"
                                                            id="employment_district" name="employment_district">
                                                        @foreach($districts AS $li)
                                                            @if($li->district_code==$users->district_code)
                                                                <option value="{{$li->district_code}}"
                                                                        selected>{{$li->district_name}}</option>
                                                            @else
                                                                <option value="{{$li->district_code}}">{{$li->district_name}}</option>
                                                            @endif
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="col-md-4 form-group">
                                                    <label class="text-upper text_style">Block</label>
                                                    <select class="form-control form-control-sm" id="employment_block"
                                                            name="employment_block">
                                                        <option value="">--SELECT--</option>
                                                        @foreach($employment_blocks AS $li)
                                                            @if($li->block_id==$users->block_id)
                                                                <option value="{{$li->block_id}}"
                                                                        selected>{{$li->block_name}}</option>
                                                            @else
                                                                <option value="{{$li->block_id}}">{{$li->block_name}}</option>
                                                            @endif
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="col-md-4 form-group">
                                                    <label class="text-upper text_style">Gram Panchayat</label>
                                                    <select class="form-control form-control-sm" id="employment_gp"
                                                            name="employment_gp">
                                                        <option value="">--SELECT--</option>
                                                        @foreach($employment_grampanchayats AS $li)
                                                            @if($li->gram_panchyat_id==$users->gram_panchyat_id)
                                                                <option value="{{$li->gram_panchyat_id}}"
                                                                        selected>{{$li->gram_panchyat_name}}</option>
                                                            @else
                                                                <option value="{{$li->gram_panchyat_id}}">{{$li->gram_panchyat_name}}</option>
                                                            @endif
                                                        @endforeach
                                                    </select>
                                                </div>

                                                <div class="col-md-4 form-group">
                                                    <label class="text-upper text_style">Date Of Joining</label>
                                                    <input type="text" id="employee_doj" name="employee_doj"
                                                           class="form-control form-control-sm" placeholder=""
                                                           value="{{$users->date_of_joining}}">
                                                </div>
                                                <div class="col-md-4 form-group">
                                                    <label class="text-upper text_style">Salary</label>
                                                    <input type="text" name="salary"
                                                           class="form-control form-control-sm" placeholder=""
                                                           value="{{$users->salary}}" disabled="disabled">
                                                </div>
                                                <div class="col-md-4 form-group">
                                                    <label class="text-upper text_style">Contract Date</label>
                                                    <input type="text" name="employee_contract_date"
                                                           id="employee_contract_date"
                                                           class="form-control form-control-sm" placeholder=""
                                                           value="{{$users->contract_date}}">
                                                </div>
                                                <div class="col-md-4 form-group">
                                                    <label class="text-upper text_style">Service Status</label>
                                                    <select class="form-control form-control-sm" id="service_name"
                                                            name="service_name" disabled="disabled">
                                                        @foreach($employee_service_statuses AS $li)
                                                            @if($li->status_id==$users->status_id)
                                                                <option value="{{$li->status_id}}"
                                                                        selected>{{$li->status_name}}</option>
                                                            @else
                                                                <option value="{{$li->status_id}}">{{$li->status_name}}</option>
                                                            @endif
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="col-md-8 form-group">
                                                    <label class="text-upper text_style">Contract Sign With</label>
                                                    <textarea id="employee_contract_sign" name="employee_contract_sign"
                                                              class="form-control form-control-sm">{{$users->contract_sign_with}}</textarea>
                                                </div>
                                                <div class="col-md-12 text-right">
                                                    <button type="submit" class="btn btn-info">Save</button>
                                                    <button type="button" class="btn btn-warning"
                                                            id="employment_cancel">Cancel
                                                    </button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>

                                    <!-- ============================================================== EMPLOYMENT DETAILS ENDED ======================================================================== -->

                                    <!-- ============================================================== BANK DETAILS ==================================================================================== -->

                                    <div class="tab-pane fade in " id="tab5" role="tabpanel">
                                        <div class="row" id="bank_view">
                                            <div class="col-md-12 text-right">
											@can('edit_bank_details')
                                                <a href="" class="" id="bank_edit"><i class="fa fa-edit fa-2x"
                                                                                      aria-hidden="true"></i></a>
											@endcan
                                            </div>
                                            <div class="col-md-4 ">
                                                <div class="text-upper text_style"> Bank Name</div>
                                                <p class="text-capital bank_name">{{$users->bank_name}}</p>
                                            </div>
                                            <div class="col-md-4 ">
                                                <div class="text-upper text_style">IFSC Code</div>
                                                <p class="text-capital ifsc_code">{{$users->ifsc_code}}</p>
                                            </div>
                                            <div class="col-md-4 ">
                                                <div class="text-upper text_style">Account No</div>
                                                <p class="text-capital account_no">{{$users->account_no}}</p>
                                            </div>
                                            <div class="col-md-4 ">
                                                <div class="text-upper text_style">View Passbook</div>
                                                <p class="bank_passbook">
                                                    @if($users->passbook_file)
                                                        <a target="_blank"
                                                           href="{{ $global_data['config']->image_url.$users->passbook_file }}"
                                                           class="btn btn-primary btn-sm" style="margin-left: 0px">Passbook</a>
                                                    @else
                                                        <a href="javascript:void(0)" class="btn btn-danger btn-sm"
                                                           style="margin-left: 0px">Passbook Not Uploaded</a>
                                                    @endif
                                                </p>
                                            </div>
                                        </div>

                                        <div id="bank_entry" class="" style="display: none">
                                            <div class="row">
                                                <div class="col-md-12" id="saveBankDetailValidation"></div>
                                            </div>

                                            <form class="row" id="saveBankDetails" action="#" method="post"
                                                  enctype="multipart/form-data">
                                                <input type="hidden" name="employee_code" value="{{$employee_code}}"/>

                                                <div class="col-md-4">
                                                    <div class="form-group">
                                                        <label class="text-upper text_style">Bank Name</label>
                                                        <input type="text" id="bank_name" name="bank_name"
                                                               class="form-control form-control-sm"
                                                               value="{{$users->bank_name}}"/>
                                                    </div>
                                                </div>
                                                <div class="col-md-4 form-group">
                                                    <label class="text-upper text_style">IFSC Code</label>
                                                    <input type="text" id="ifsc_code" name="ifsc_code"
                                                           class="form-control form-control-sm"
                                                           value="{{$users->ifsc_code}}"/>
                                                </div>
                                                <div class="col-md-4 form-group">
                                                    <label class="text-upper text_style">Account No</label>
                                                    <input type="text" id="account_no" name="account_no"
                                                           class="form-control form-control-sm"
                                                           value="{{$users->account_no}}"/>
                                                </div>
                                                <div class="col-md-12 form-group">
                                                    <label class="text-upper text_style">Choose Passbook</label>
                                                    <input type="file" id="bank_passbook" name="bank_passbook"
                                                           class="form-control form-control-sm"/>
                                                </div>
                                                <div class="col-md-12 text-right">
                                                    <button type="submit" class="btn btn-info">Save</button>
                                                    <button type="button" class="btn btn-warning " id="bank_cancel">
                                                        Cancel
                                                    </button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>

                                    <!-- ============================================================== BANK DETAILS ENDED ============================================================================== -->

                                    <div class="tab-pane fade in " id="tab6" role="tabpanel">
                                        <div class="row" id="document_view">

                                        </div>

                                        <div id="document_entry" class="display_none">

                                        </div>
                                    </div>

                                </div>
                            </div>

                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <!-- =================================================== ADD QUALIFICATION DETAILS =============================================== -->
    <div class="modal fade right" id="fluidModalRightSuccessDemo" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" data-backdrop="false" aria-hidden="true" style="display: none;">
        <div class="modal-dialog modal-full-height modal-right modal-notify modal-warning" role="document">
            <!--Content-->
            <div class="modal-content">
                <!--Header-->
                <div class="modal-header">
                    <p class="heading lead">Qualification Details</p>

                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true" class="white-text">×</span>
                    </button>
                </div>

                <!--Body-->
                <form id="saveQualificationDetails" action="#" method="POST">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-12" id="saveQualificationDetailValidation"></div>
                        </div>

                        <div class="row">
                            <div class="col-md-12 form-group">
                                <label class="text-upper text_style">Select Qualification</label>
                                <select name="select_qualification" id="select_qualification"
                                        class="form-control form-control-sm" required>
                                    <option value="">--Select--</option>
                                    @foreach($emp_qualification_cats AS $li)
                                        <option value="{{$li->id}}">{{$li->emp_q_name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div id="q_div" class="row" style="display: none">
                            <input type="hidden" name="employee_code" id="employee_code" value="{{$employee_code}}"/>
                            <div class="col-md-12 form-group">
                                <label class="text-upper text_style" id="ex_dip_cer_label">Exam Passed</label>
                                <input type="text" name="exam_passed" id="exam_passed"
                                       class="form-control form-control-sm"/>
                            </div>
                            <div class="col-md-12 form-group">
                                <label class="text-upper text_style" id="s_h_s_label">Stream / Honours /
                                    Specialization</label>
                                <input type="text" name="stream_honours_specialization"
                                       id="stream_honours_specialization" class="form-control form-control-sm"/>
                            </div>
                            <div class="col-md-12 form-group">
                                <label class="text-upper text_style" id="b_u_i_label">Board / University /
                                    Institute</label>
                                <input type="text" name="board_university_institute" id="board_university_institute"
                                       class="form-control form-control-sm"/>
                            </div>
                            <div class="col-md-12 form-group mb-0">
                                <label class="text-upper text_style">Duration</label>
                            </div>
                            <div class="col-md-6 form-group">
                                <label class="text-upper text_style">In Years</label>
                                <select name="duration_years" id="duration_years" class="form-control form-control-sm">
                                    <option value="">--Select Year--</option>
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                    <option value="6">6</option>
                                    <option value="7">7</option>
                                    <option value="8">8</option>
                                    <option value="9">9</option>
                                    <option value="10">10</option>
                                </select>
                            </div>
                            <div class="col-md-6 form-group">
                                <label class="text-upper text_style">In Months</label>
                                <select name="duration_months" id="duration_months"
                                        class="form-control form-control-sm">
                                    <option value="">--Select Months--</option>
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                    <option value="6">6</option>
                                    <option value="7">7</option>
                                    <option value="8">8</option>
                                    <option value="9">9</option>
                                    <option value="10">10</option>
                                    <option value="11">11</option>
                                </select>
                            </div>
                            <div class="col-md-12 form-group">
                                <label class="text-upper text_style">Division / Grade / Percentage</label>
                                <input type="text" name="division_grade_percentage" id="division_grade_percentage"
                                       class="form-control form-control-sm"/>
                            </div>
                            <div class="col-md-12 form-group">
                                <label class="text-upper text_style" id="u_doc_label">Upload Document</label>
                                <input type="file" name="q_doc" id="q_doc" class="form-control form-control-sm"/>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12 form-group">
                                <button type="submit" class="btn btn-primary btn-sm waves-effect waves-light">Save Details
                                    <i class="fa fa-save ml-1"></i>
                                </button>
                                <button type="button" class="btn btn-outline-success btn-sm waves-effect"
                                        data-dismiss="modal">Close</button>
                            </div>
                        </div>

                    </div>

                </form>
            </div>
            <!--/.Content-->
        </div>
    </div>
@endsection

@section('dynamic_js')
    <script src="{{ asset('js/lib/moment.min.js') }}"></script>
    <script src="{{ asset('plugins/bootstrap-material-datetimepicker/js/bootstrap-material-datetimepicker.js') }}"></script>
    <script src="{{ asset('js/custom/employee_personal_data.js') }}"></script>

    <script type="text/javascript">

        $('#employee_dob').bootstrapMaterialDatePicker({weekStart: 0, time: false});
        $('#employee_contract_date').bootstrapMaterialDatePicker({weekStart: 0, time: false});
        $('#employee_doj').bootstrapMaterialDatePicker({weekStart: 0, time: false});

        $('#select_qualification').on('change', function (e) {
            e.preventDefault();

            $('#saveQualificationDetailValidation').empty();

            var id = $('#select_qualification').val();

            $('#ex_dip_cer_label').text('');
            $('#s_h_s_label').text('');
            $('#b_u_i_label').text('');
            $('#u_doc_label').text('');

            $('#q_div').hide();

            if (id == 1 || id == 2) {
                $('#ex_dip_cer_label').text('EXAM PASSED');
                $('#s_h_s_label').text('STREAM / HONOURS / SPECIALIZATION');
                $('#b_u_i_label').text('BOARD / UNIVERSITY / INSTITUDE');
                $('#u_doc_label').text('UPLOAD DOCUMENT');

                $('#q_div').show(400);
            } else if (id == 3) {
                $('#ex_dip_cer_label').text('DIPLOMA IN');
                $('#s_h_s_label').text('SPECIALIZATION');
                $('#b_u_i_label').text('UNIVERSITY / INSTITUTE');
                $('#u_doc_label').text('UPLOAD DIPLOMA');

                $('#q_div').show(400);
            } else if (id == 4) {
                $('#ex_dip_cer_label').text('CERTIFICATION ON');
                $('#s_h_s_label').text('SPECIALIZATION');
                $('#b_u_i_label').text('UNIVERSITY / INSTITUTE');
                $('#u_doc_label').text('UPLOAD CERTIFICATE');

                $('#q_div').show(400);
            }
        });

        //============================== DISTRICTS ON CHANGE ===========================================================
        $('#employee_district').on('change', function (e) {
            e.preventDefault()
            var selected_district = $(this).val();
            $('#employee_block').empty();
            $('.page-loader-wrapper').fadeIn();
            $.ajax({
                type: "GET",
                url: "{{ route('get_block_list')}}",
                data: {
                    district_code: selected_district
                },
                dataType: "json",
                success: function (data) {
                    $('#employee_block').append('<option value=""  selected>--SELECT--</option>');
                    if (data.msgType == true) {
                        $.each(data.data, function (key, value) {
                            $('#employee_block').append('<option value="' + value.block_id + '">' + value.block_name + '</option>');
                        });
                    } else {
                        toastr.error(data.msg);
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    callAjaxErrorFunction(jqXHR, textStatus, errorThrown);
                },
                complete: function (data) {
                    $('.page-loader-wrapper').fadeOut();
                }
            });
        });

        $('#employment_district').on('change', function (e) {
            e.preventDefault()
            var selected_district = $(this).val();
            $('#employment_block').empty();
            $('.page-loader-wrapper').fadeIn();
            $.ajax({
                type: "GET",
                url: "{{ route('get_block_list')}}",
                data: {
                    district_code: selected_district
                },
                dataType: "json",
                success: function (data) {
                    $('#employment_block').append('<option value=""  selected>--SELECT--</option>');
                    if (data.msgType == true) {
                        $.each(data.data, function (key, value) {
                            $('#employment_block').append('<option value="' + value.block_id + '">' + value.block_name + '</option>');
                        });
                    } else {
                        toastr.error(data.msg);
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    callAjaxErrorFunction(jqXHR, textStatus, errorThrown);
                },
                complete: function (data) {
                    $('.page-loader-wrapper').fadeOut();
                }
            });
        });
        //============================== DISTRICTS ON CHANGE ENDED =====================================================

        //============================== BLOCKS ON CHANGE ==============================================================
        $('#employee_block').on('change', function (e) {
            e.preventDefault()
            var selected_gp = $(this).val();
            $('#employee_gp').empty();
            $('.page-loader-wrapper').fadeIn();
            $.ajax({
                type: "GET",
                url: "{{ route('get_gp_list')}}",
                data: {
                    gp_code: selected_gp
                },
                dataType: "json",
                success: function (data) {

                    $('#employee_gp').append('<option value=""  selected>--SELECT--</option>');
                    if (data.msgType == true) {
                        $.each(data.data, function (key, value) {
                            $('#employee_gp').append('<option value="' + value.gram_panchyat_id + '">' + value.gram_panchyat_name + '</option>');
                        });
                    } else {
                        toastr.error(data.msg);
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    callAjaxErrorFunction(jqXHR, textStatus, errorThrown);
                },
                complete: function (data) {
                    $('.page-loader-wrapper').fadeOut();
                }
            });
        });

        $('#employment_block').on('change', function (e) {
            e.preventDefault()
            var selected_gp = $(this).val();
            $('#employment_gp').empty();
            $('.page-loader-wrapper').fadeIn();
            $.ajax({
                type: "GET",
                url: "{{ route('get_gp_list')}}",
                data: {
                    gp_code: selected_gp
                },
                dataType: "json",
                success: function (data) {

                    $('#employment_gp').append('<option value=""  selected>--SELECT--</option>');
                    if (data.msgType == true) {
                        $.each(data.data, function (key, value) {
                            $('#employment_gp').append('<option value="' + value.gram_panchyat_id + '">' + value.gram_panchyat_name + '</option>');
                        });
                    } else {
                        toastr.error(data.msg);
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    callAjaxErrorFunction(jqXHR, textStatus, errorThrown);
                },
                complete: function (data) {
                    $('.page-loader-wrapper').fadeOut();
                }
            });
        });
        //============================== BLOCKS ON CHANGE ENDED ========================================================

        //=============================== SAVE PERSONAL DETAILS ========================================================

        $('#savePersonalDetails').on('submit', function (e) {
            e.preventDefault();
            $('#savePersonalDetailValidation').empty();
            $('.page-loader-wrapper').fadeIn();
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                type: "POST",
                url: 'updatepersonaldetails',
                dataType: "json",
                data: new FormData(this),
                contentType: false,
                cache: false,
                processData: false,
                success: function (data) {
                    if (data.msgType == true) {
                        bind_employee_personal_details(data.data);
                        $('#personal_entry').hide();
                        $('#personal_view').show(400);
                    } else {
                        if (data.msg == "VE") {
                            $('#savePersonalDetailValidation').append('<ul class="form-group f-600 f-13 v-errors" id="savePersonalDetailValidationErrors"></ul>');

                            $.each(data.data, function (index, value) {
                                $('#savePersonalDetailValidationErrors').append('<li>' + value + '</li>');
                            });
                        } else {
                            toastr.error(data.msg);
                        }
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {

                    callAjaxErrorFunction(jqXHR, textStatus, errorThrown);
                },
                complete: function (data) {
                    $('.page-loader-wrapper').fadeOut();
                }
            });

        });

        function bind_employee_personal_details(data) {

            $('.employee_code').empty();
            $('.employee_name').empty();
            $('.father_name').empty();
            $('.mother_name').empty();
            $('.employee_gender').empty();
            $('.employee_dob').empty();
            $('.employee_pan').empty();
            $('.employee_adhar').empty();

            $('#employee_code').val();
            $('#employee_name').val();
            $('#father_name').val();
            $('#mother_name').val();
            $('#employee_gender').val();
            $('#employee_dob').val();
            $('#employee_pan').val();
            $('#employee_adhar').val();


            $('.employee_code').append(data.employee_code);
            $('.employee_name').append(data.name);
            $('.father_name').append(data.father_name);
            $('.mother_name').append(data.mother_name);
            $('.employee_gender').append(data.gender);
            $('.employee_dob').append(data.date_of_birth);
            $('.employee_pan').append(data.pan_number);
            $('.employee_adhar').append(data.adhar_number);

            $('#employee_code').val(data.employee_code);
            $('#employee_name').val(data.name);
            $('#father_name').val(data.father_name);
            $('#mother_name').val(data.mother_name);
            $('#employee_dob').val(data.date_of_birth);
            $('#employee_pan').val(data.pan_number);
            $('#employee_adhar').val(data.adhar_number);

            $("#employee_gender > option").each(function () {

                if (data.gender == this.value) {
                    $(this).attr('selected', true);
                }

            });

        }

        //=============================== SAVE PERSONAL DETAILS ENDED ==================================================

        /*
         ---------------------------------------------------------------------------------------------------------------
         ---------------------------------- SAVE CONTACT DETAILS -------------------------------------------------
         ---------------------------------------------------------------------------------------------------------------
         */

        $('#saveContactDetails').on('submit', function (e) {
            e.preventDefault();
            $('#saveContactDetailValidation').empty();
            $('.page-loader-wrapper').fadeIn();
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                type: "POST",
                url: 'updatecontactdetails',
                dataType: "json",
                data: new FormData(this),
                contentType: false,
                cache: false,
                processData: false,
                success: function (data) {
                    if (data.msgType == true) {
                        bind_employee_contact_details(data.data);
                        $('#contact_entry').hide();
                        $('#contact_view').show(400);
                        toastr.success(data.msg);
                    } else {
                        if (data.msg == "VE") {
                            $('#saveContactDetailValidation').append('<ul class="form-group f-600 f-13 v-errors" id="saveContactDetailValidationErrors"></ul>');

                            $.each(data.data, function (index, value) {
                                $('#saveContactDetailValidationErrors').append('<li>' + value + '</li>');
                            });
                        } else {
                            toastr.error(data.msg);
                        }
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {

                    callAjaxErrorFunction(jqXHR, textStatus, errorThrown);
                },
                complete: function (data) {
                    $('.page-loader-wrapper').fadeOut();
                }
            });

        });

        function bind_employee_contact_details(data) {

            $('.employee_district').empty();
            $('.employee_block').empty();
            $('.employee_gp').empty();
            $('.employee_email').empty();
            $('.mobile_number').empty();
            $('.alt_mobile_number').empty();
            $('.employee_pa_address').empty();
            $('.employee_co_address').empty();

            $('#employee_district').val();
            $('#employee_block').val();
            $('#employee_gp').val();
            $('#employee_email').val();
            $('#mobile_number').val();
            $('#alt_mobile_number').val();
            $('#employee_pa_address').val();
            $('#employee_co_address').val();

            $('.employee_district').append(data.district_name);
            $('.employee_block').append(data.block_name);
            $('.employee_gp').append(data.gram_panchyat_name);
            $('.employee_email').append(data.email);
            $('.mobile_number').append(data.mobile);
            $('.alt_mobile_number').append(data.alternate_mobile);
            $('.employee_pa_address').append(data.permanent_address);
            $('.employee_co_address').append(data.corespondance_address);

            $('#employee_email').val(data.email);
            $('#mobile_number').val(data.mobile);
            $('#alt_mobile_number').val(data.alternate_mobile);
            $('#employee_pa_address').val(data.permanent_address);
            $('#employee_co_address').val(data.corespondance_address);

            $("#employee_district > option").each(function () {
                if (data.home_district == this.value) {
                    $(this).attr('selected', true);
                }
            });

            $("#employee_block > option").each(function () {
                if (data.home_block == this.value) {
                    $(this).attr('selected', true);
                }
            });

            $("#employee_gp > option").each(function () {
                if (data.home_gp == this.value) {
                    $(this).attr('selected', true);
                }
            });

        }

        //******************************* SAVE CONTACT DETAILS ENDED ***************************************************

        /*
         ---------------------------------------------------------------------------------------------------------------
         ---------------------------------- SAVE QUALIFICATION DETAILS -------------------------------------------------
         ---------------------------------------------------------------------------------------------------------------
         */

        $('#saveQualificationDetails').on('submit', function (e) {
            e.preventDefault();
            $('#saveQualificationDetailValidation').empty();
            $('.page-loader-wrapper').fadeIn();
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                type: "POST",
                url: 'updatequalificationdetails',
                dataType: "json",
                data: new FormData(this),
                contentType: false,
                cache: false,
                processData: false,
                success: function (data) {
                    if (data.msgType == true) {
                        bind_employee_qualification_details(data.data);

                        toastr.success(data.msg);
                    } else {
                        if (data.msg == "VE") {

                            $('.modal-full-height').css('height','auto');
                            $('#saveQualificationDetailValidation').append('<ul class="form-group f-600 f-13 v-errors" id="saveQualificationDetailValidationErrors"></ul>');

                            $.each(data.data, function (index, value) {
                                $('#saveQualificationDetailValidationErrors').append('<li>' + value + '</li>');
                            });
                        } else {
                            toastr.error(data.msg);
                        }
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {

                    callAjaxErrorFunction(jqXHR, textStatus, errorThrown);
                },
                complete: function (data) {
                    $('.page-loader-wrapper').fadeOut();
                }
            });

        });

        function bind_employee_qualification_details(data) {

            $.each(data, function( index, value ) {

                $('#qualification_table').append('<tr class="bg-primary"><td colspan="7" style="padding:5px">'+index+'</td></tr>');

                var i=1;

                $.each(value, function( index1, item ) {
                    var item_url_data='#';
                    if(item.q_doc){
                        item_url_data='http://103.210.73.41/PNRDSERVER/storage/app/'+item.q_doc;
                    }


                    $('#qualification_table').append('<tr>' +
                        '<td>'+i+'</td>' +
                        '<td>'+item.exam_passed_dip_cer+'</td>' +
                        '<td>'+item.st_hor_sp+'</td>' +
                        '<td>'+item.board_u_ins+'</td>' +
                        '<td>'+item.duration_years+'yrs'+item.duration_months+'months</td>' +
                        '<td>'+item.div_grade_percentage+'</td>' +
                        '<td style="display:flex">' +
                        '<a href="'+item_url_data+'" class="btn btn-primary btn-xs">' +
                        '<i class="fa fa-file-pdf-o"></i>' +
                        '</a> ' +
                        '<a type="button" class="btn btn-primary btn-xs">' +
                        '<i class="fa fa-edit"></i>' +
                        '</a> ' +
                        '<a type="button" class="btn btn-danger btn-xs">' +
                        '<i class="fa fa-trash"></i>' +
                        '</a>' +
                        '</td>' +
                        '</tr>');
                    i++;
                });
            });
        }

        //********************************* SAVE QUALIFICATION DETAILS ENDED *******************************************

        /*
         ----------------------------------------------------------------------------------------------------------------
         ---------------------------------- SAVE EMPLOYMENT DETAILS -----------------------------------------------------
         ----------------------------------------------------------------------------------------------------------------
         */

        $('#saveEmploymentDetails').on('submit', function (e) {
            e.preventDefault();
            $('#saveEmploymentDetailValidation').empty();
            $('.page-loader-wrapper').fadeIn();
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                type: "POST",
                url: 'updateemploymentdetails',
                dataType: "json",
                data: new FormData(this),
                contentType: false,
                cache: false,
                processData: false,
                success: function (data) {
                    if (data.msgType == true) {
                        bind_employee_employment_details(data.data);
                        $('#employment_entry').hide();
                        $('#employment_view').show(400);
                        toastr.success(data.msg);
                    } else {
                        if (data.msg == "VE") {
                            $('#saveEmploymentDetailValidation').append('<ul class="form-group f-600 f-13 v-errors" id="saveEmploymentDetailValidationErrors"></ul>');

                            $.each(data.data, function (index, value) {
                                $('#saveEmploymentDetailValidationErrors').append('<li>' + value + '</li>');
                            });
                        } else {
                            toastr.error(data.msg);
                        }
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {

                    callAjaxErrorFunction(jqXHR, textStatus, errorThrown);
                },
                complete: function (data) {
                    $('.page-loader-wrapper').fadeOut();
                }
            });

        });

        function bind_employee_employment_details(data) {

            $('.program_name').empty();
            $('.level_name').empty();
            $('.designation_name').empty();
            $('.employment_district').empty();
            $('.employment_block').empty();
            $('.employment_gp').empty();
            $('.employee_doj').empty();
            $('.employee_contract_date').empty();
            $('.employee_contract_sign').empty();

            $('#program_name').val();
            $('#level_name').val();
            $('#designation_name').val();
            $('#employment_district').val();
            $('#employment_block').val();
            $('#employment_gp').val();
            $('#employee_doj').val();
            $('#employee_contract_date').val();
            $('#employee_contract_sign').val();


            $('.program_name').append(data.program_name);
            $('.level_name').append(data.level_name);
            $('.designation_name').append(data.designation_name);
            $('.employment_district').append(data.district_name);
            $('.employment_block').append(data.block_name);
            $('.employment_gp').append(data.gram_panchyat_name);
            $('.employee_doj').append(data.date_of_joining);
            $('.employee_contract_date').append(data.contract_date);
            $('.employee_contract_sign').append(data.contract_sign_with);


            $('#employee_doj').val(data.date_of_joining);
            $('#employee_contract_date').val(data.contract_date);
            $('#employee_contract_sign').val(data.contract_sign_with);

            $("#program_name > option").each(function () {
                if (data.program_code == this.value) {
                    $(this).attr('selected', true);
                }
            });

            $("#level_name > option").each(function () {
                if (data.level_code == this.value) {
                    $(this).attr('selected', true);
                }
            });

            $("#designation_name > option").each(function () {
                if (data.designation_code == this.value) {
                    $(this).attr('selected', true);
                }
            });

            $("#employment_district > option").each(function () {
                if (data.district_code == this.value) {
                    $(this).attr('selected', true);
                }
            });

            $("#employment_block > option").each(function () {
                if (data.block_id == this.value) {
                    $(this).attr('selected', true);
                }
            });

            $("#employment_gp > option").each(function () {
                if (data.gram_panchyat_id == this.value) {
                    $(this).attr('selected', true);
                }
            });

        }

        //******************************** SAVE CONTACT DETAILS ENDED **************************************************

        /*
         ----------------------------------------------------------------------------------------------------------------
         ---------------------------------- SAVE BANK DETAILS -----------------------------------------------------------
         ----------------------------------------------------------------------------------------------------------------
         */

        $('#saveBankDetails').on('submit', function (e) {
            e.preventDefault();
            $('#saveBankDetailValidation').empty();
            $('.page-loader-wrapper').fadeIn();
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                type: "POST",
                url: 'updatebankdetails',
                dataType: "json",
                data: new FormData(this),
                contentType: false,
                cache: false,
                processData: false,
                success: function (data) {
                    if (data.msgType == true) {
                        bind_bank_employment_details(data.data);
                        $('#bank_entry').hide();
                        $('#bank_view').show(400);
                        toastr.success(data.msg);
                    } else {
                        if (data.msg == "VE") {
                            $('#saveBankDetailValidation').append('<ul class="form-group f-600 f-13 v-errors" id="saveBankDetailValidationErrors"></ul>');

                            $.each(data.data, function (index, value) {
                                $('#saveBankDetailValidationErrors').append('<li>' + value + '</li>');
                            });
                        } else {
                            toastr.error(data.msg);
                        }
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {

                    callAjaxErrorFunction(jqXHR, textStatus, errorThrown);
                },
                complete: function (data) {
                    $('.page-loader-wrapper').fadeOut();
                }
            });

        });

        function bind_bank_employment_details(data) {

            $('.bank_name').empty();
            $('.ifsc_code').empty();
            $('.account_no').empty();
            $('.bank_passbook').empty();

            $('#bank_name').val();
            $('#ifsc_code').val();
            $('#account_no').val();
            $('#bank_passbook').attr("href", '');

            $('.bank_name').append(data.bank_name);
            $('.ifsc_code').append(data.ifsc_code);
            $('.account_no').append(data.account_no);

            if (data.passbook_file) {
                $('.bank_passbook').append('<a target="_blank" href="http://103.210.73.41/PNRDSERVER/storage/app/' + data.passbook_file + '" class="btn btn-primary btn-sm" style="margin-left:0px">Passbook</a>');
            } else {
                $('.bank_passbook').append('<a target="_blank" href="javascript:void(0)" class="btn btn-danger btn-sm" style="margin-left:0px">Passbook Not Uploaded</a>');
            }

            $('#bank_name').val(data.bank_name);
            $('#ifsc_code').val(data.ifsc_code);
            $('#account_no').val(data.account_no);

        }

        //******************************* SAVE BANK DETAILS ENDED ******************************************************
        /*Profile picture upload start*/
         var datafiles=null;
        function previewPic(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $('#previewPic').attr('src', e.target.result);
                }
                reader.readAsDataURL(input.files[0]);
            }
        }


        $(document).on('click','#middle', function(){
            $('#profile_pic').trigger('click');
       }); 


        $(document).on('change','#profile_pic', function(){
                previewPic(this);
                var val = $("#profile_pic").val();
                if (!val.match(/(?:jpg|png)$/)) {

                    $('#responseUploadModal .modal-body #responseUpload').html("File format is not an image");
                    $('#responseUploadModal').modal('show');
                    
                }else{
                    $('#selectedPic').modal('show');
                    datafiles=this.files[0];
                }
                
        });

        

    </script>

@endsection