@extends('layouts.appuser')

@section('dynamic_css')
    <style>
        .user-prof-pic {
            width: 100%;
            /* padding: 2px; */
            border-radius: 12px;
            margin-right: 23px;
            overflow: hidden;
            height: 100%;
        }

        .testimonial-card .avatar.custom-height {
            border: 2px solid #fafafa;
            height: 12rem;
        }
        
        
        .user-prof-pic img {
            /*object-fit: cover;*/
            height: 100%;
            width: 100%;
        }
        
        .middle{
            position: absolute;
            /* top: 0; */
            margin-top: -105px;
            /* right: 0; */
            margin-left: 77px;
            opacity: 0;
            font-size: 12px;
            font-weight: 600;
            font-variant: petite-caps;
        }
        
        .mobile-view-outer{
           opacity: 0;
           height: 0px !important;
           margin-top: 3px;
        }
        
        .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;
        }

        .f-13 {
            font-size: 13px !important;
        }

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

        .table td, .table th{
            padding: 5px;
        }
/*        .middle {    
            position: absolute;
            top: 17%;
            right: 48%;
            opacity: 0;
            font-size: 16px;
            font-weight: 600;
            font-variant: petite-caps;
    
        }*/

        
        .avatar:hover .middle {
          opacity: 1;
        }

        .text {
          /*background-color: #4CAF50;*/
          color: white;
          font-size: 16px;
          padding: 16px 32px;
          cursor: pointer;
        }


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

@section('content')

    <div class="container" id="body1">
        
           <!-- Modal For preview th selected profile picture -->                

    <!-- Response on photo upload -->
    <div class="modal fade" id="responseUploadModal" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title pull-left" >Preview Profile picture </h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                        <div class="modal-body">
                            <div id="responseUpload">
                                
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Close</button>
                        </div>
                </div>
            </div>
        </div>



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

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

                <div class="card testimonial-card animated zoomIn" style="">

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

                   
                    <!--Avatar-->
                    <div class="avatar mx-auto white custom-height">
                        <div class="user-prof-pic">
                                @if($users->photo_file)
                                  <img src="{!! asset('/images/profilePic/'.$users->employee_code.'/'.$users->photo_file) !!}" class="rounded-circle  profile_image" alt="GFFGFGF" id="picDisplayed" class="picDisplayed">
                                @else
                                  <img src="{!! asset('/images/user.jpg') !!}" class="rounded-circle" alt="" id="picDisplayed" class="picDisplayed profile_image">
                                @endif

                        </div>
                        <div class="mobile-view-inner">
                            <label class="middle text-center" >
                                 <i class="fa fa-camera-retro fa-3x" id="middle" style="color: #00a6bc;" aria-hidden="true"></i>
                            </label>                     
                        </div>

                        <!--<i id="loading" class="fa fa-spinner fa-spin fa-3x fa-fw" style="position: absolute;left: 530px;top: 110px; color: white;display: none;"></i>-->
<!--                        @if($users->photo_file)
                          <img src="{!! asset('/images/profilePic/'.$users->employee_code.'/'.$users->photo_file) !!}" class="rounded-circle  profile_image" alt="" id="picDisplayed" class="picDisplayed">
                        @else
                          <img src="{!! asset('/images/user.jpg') !!}" class="rounded-circle" alt="" id="picDisplayed" class="picDisplayed profile_image">
                        @endif
                        
                        <label class="middle text-center" >
                            <i class="fa fa-camera-retro fa-3x" id="middle" style="color: #00a6bc;" aria-hidden="true"></i>
                        </label-->>
                    </div>
       
                    <div class="card-up mobile-view-outer" style="">
                        <div class="text-center" style="opacity:2000;">
                             <i class="fa fa-camera-retro fa-2x" id="middle" style="color: #00a6bc;" aria-hidden="true"></i>
                        </div>                     
                    </div>

                    <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">
                                <hr class="">
                                <div class="tab-content">
                                    
                                    <!-- ============================================================== 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('user_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 btn-sm" id='personalsave'>
                                                            Update
                                                        </button>
                                                        <button type="button" class="btn btn-warning btn-sm"
                                                                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('user_edit_contact_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 btn-sm">Update</button>
                                                    <button type="button" class="btn btn-warning btn-sm" 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('user_edit_qualification_details')
                                            <div class="col-md-12 text-right">
                                                <button type="button"
                                                        class="btn btn-warning btn-sm waves-effect waves-light"
                                                        id="qualificationModal" style="margin-right: -10px" >
                                                    <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

                                                                        
                                                                        <button class="deleteData btn btn-danger btn-xs" data-id="{{ $item->id }}"  data-token="{{ csrf_token() }}" ><i class="fa fa-trash"></i></button>
															 @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-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>
                                           @if($users->level!=1)
                                            <div class="col-md-4 ">
                                                <div class="text-upper text_style">District</div>
                                                <p class="text-capital employment_district">{{$users->district_name}}</p>
                                            </div>
                                            @if($users->level!=2)
                                              <div class="col-md-4 ">
                                                <div class="text-upper text_style">Block</div>
                                                <p class="text-capital employment_block">{{$users->block_name}}</p>
                                              </div>
                                              @if($users->level!=3)
                                                  <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>
                                               @endif
                                            @endif
                                           @endif
                                            <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">Service Status</div>
                                                <p class="text-capital">{{$users->status_name}}</p>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="text-upper text_style">Salary</div>
                                                <p class="text-capital"><i class="fa fa-inr" aria-hidden="true"></i> {{$users->salary}}.00</p>
                                            </div>
                                            <div class="col-md-12">
                                                <hr>
                                            </div>
                                            <div class="col-md-12 text-right">
                                                @can('user_edit_employment_details')
                                                    <a href="" class="" id="employment_edit">
                                                        <i class="fa fa-plus-square-o fa-2x" aria-hidden="true"></i>
                                                       <!-- <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">Contract From</div>
                                                <p class="text-capital employee_contract_date">{{$users->contract_from}}</p>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="text-upper text_style">Contract Upto</div>
                                                <p class="text-capital employee_contract_date">{{$users->contract_to}}</p>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="text-upper text_style">Contract Sign With</div>
                                                <p class="text-capital employee_contract_sign">{{$users->contract_sign_with}}</p>
                                            </div>
<!--                                            <div class="col-md-4">
                                                <div class="text-upper text_style">Contract Sign With</div>
                                                <p class="text-capital employee_contract_sign">{{$users->contract_sign_with}}</p>
                                            </div>-->
                                            <div class="col-md-4 ">
                                                <div class="text-upper text_style">Contract File</div>
                                                <p class="bank_passbook_view">
                                                    @if($users->contract_file)
                                                        <a target="_blank"
                                                           href="{{ $global_data['config']->image_url.$users->contract_file }}"
                                                           class="btn btn-primary btn-sm bankDocView" style="margin-left: 0px">
                                                            <i class="fa fa-eye" aria-hidden="true"></i> Contract
                                                         </a>
                                                    @else
                                                        <a href="javascript:void(0)" class="btn btn-danger btn-sm"
                                                           style="margin-left: 0px">Contract Not Uploaded</a>
                                                    @endif
                                                </p>
                                            </div>
                                        </div>

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

                                           
                                            <div class="row " id="employment_entry_message" style="@if($contract_pending_request==0) {{'display:none'}}  @endif">
                                                <div class="col-md-12" id="addContractDetailsValidation">
                                                  <i class="fa fa-angle-double-right fa-lg" aria-hidden="true"></i>
                                                    <span class="text-danger">Your last submitted contract details is waiting for approval.</span>
                                                </div>
                                                
                                
<!--                                                <div class="col-md-12 text-right">
                                                    <button type="button" class="btn btn-warning btn-sm"
                                                            id="employment_cancel"><i class="fa fa-times" aria-hidden="true"></i> Cancel
                                                    </button>
                                                </div>-->
                          
                                            </div>
                                           
                                            <div class="row">
                                                <div class="col-md-12 text-right">
                                                    <button type="button" class="btn btn-info btn-sm" data-employee_code="{{$employee_code}}"
                                                            id="view_submited_contract"><i class="fa fa-eye" aria-hidden="true"></i> View
                                                    </button>
                                                    <button type="button" class="btn btn-warning btn-sm"
                                                            id="employment_cancel"><i class="fa fa-times" aria-hidden="true"></i> Cancel
                                                    </button>
                                                </div>
                                            </div>
                                           
                                            <form class="row" id="addContractDetails" action="#" method="POST" style="@if($contract_pending_request!=0) {{'display:none'}} @endif">

                                                <input type="hidden" name="employee_code" value="{{$employee_code}}">
                                                <div class="col-md-6 form-group">
                                                    <label class="text-upper text_style">Contract Form</label>
                                                    <input type="text" id="contract_from" name="contract_from"
                                                           class="form-control form-control-sm" placeholder="YYYY-MM-DD"
                                                           value="">
                                                </div>
                                                <div class="col-md-6 form-group">
                                                    <label class="text-upper text_style">Contract Upto</label>
                                                    <input type="text" name="contract_to"
                                                           id="contract_to"
                                                           class="form-control form-control-sm" placeholder="YYYY-MM-DD"
                                                           value="">
                                                </div>
                                                <div class="col-md-6 form-group">
                                                    <label class="text-upper text_style">Contract Sign With</label>
                                                    <select class="form-control form-control-sm" id="employee_contract_sign"
                                                            name="employee_contract_sign">
                                                        <option value="" selected disabled>======= Select =======</option>
                                                        <option value="Director SIPRD">Director SIPRD</option>
                                                        <option value="Commissioner PNRD">Commissioner PNRD</option>
                                                        @if($users->level!=1)
                                                               <option value="CEO">CEO</option>
                                                               <option value="PD">PD</option>
                                                           @if($users->level==3)
                                                               <option value="BDO">BDO</option>
                                                           @endif
                                                           @if($users->level==4)
                                                               <option value="GP Secretary">GP Secretary</option>
                                                           @endif
                                                         @endif
                                                    </select>
                                                </div>
                                                
                                                <div class="col-md-6 form-group">
                                                     <label class="text-upper text_style">Choose Contract File</label>
                                                     <input type="file" id="contract_file" name="contract_file"
                                                               class="form-control form-control-sm"/>
                                                </div>
                                                
                                                <div class="col-md-12 text-right">
                                                    <button type="submit" class="btn btn-success btn-sm">Save</button>
<!--                                                    <button type="button" class="btn btn-warning btn-sm"
                                                            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('user_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 ">{{$users->bank_name}}</p>
                                            </div>
                                            <div class="col-md-4 ">
                                                <div class="text-upper text_style">IFSC Code</div>
                                                <p class="text-capital ">{{$users->ifsc_code}}</p>
                                            </div>
                                            <div class="col-md-4 ">
                                                <div class="text-upper text_style">Account No</div>
                                                <p class="text-capital ">{{$users->account_no}}</p>
                                            </div>
                                            <div class="col-md-4 ">
                                                <div class="text-upper text_style">View Passbook</div>
                                                <p class="bank_passbook_view">
                                                    @if($users->passbook_file)
                                                        <a target="_blank"
                                                           href="{{ $global_data['config']->image_url.$users->passbook_file }}"
                                                           class="btn btn-primary btn-sm bankDocView" 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>
                                          
                                            <div id="bank_entry_edit_div">
                                              @if(!$bank_details_update)
                                                  <div class="col-md-12">
                                                      <h6 class="text-danger">
                                                          @if($bank_details_change_request_status)
                                                             Your last bank information update request is canceled.Please update again.
                                                          @endif
                                                      </h6>
                                                    
                                                  </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 btn-sm">Request For Update</button>
                                                        <button type="button" class="btn btn-warning btn-sm" id="bank_cancel">
                                                            Cancel
                                                        </button>
                                                    </div>
                                                </form>
                                              @else
                                                <div class="row">
                                                    <div class="col-md-12">
                                                      <h6 class="text-default">Your bank information update request is in under process.</h6>
                                                      <hr>
                                                    </div>

                                                    <div class="col-md-4 ">
                                                        <div class="text-upper text_style"> Bank Name</div>
                                                        <p class="text-capital">@if($bank_details_update){{$bank_details_update->bank_name}} @endif</p>
                                                    </div>
                                                    <div class="col-md-4 ">
                                                        <div class="text-upper text_style">IFSC Code</div>
                                                        <p class="text-capital">@if($bank_details_update){{$bank_details_update->ifsc_code}} @endif</p>
                                                    </div>
                                                    <div class="col-md-4 ">
                                                        <div class="text-upper text_style">Account No</div>
                                                        <p class="text-capital">@if($bank_details_update){{$bank_details_update->account_no}} @endif</p>
                                                    </div>
                                                    <div class="col-md-4 ">
                                                        <div class="text-upper text_style">View Passbook</div>
                                                        <p class="bank_passbook">
                                                           @if($bank_details_update)
                                                             @if($bank_details_update->passbook_file)
                                                                <a target="_blank"
                                                                   href="{{ $global_data['config']->image_url.$bank_details_update->passbook_file }}"
                                                                   class="btn btn-primary btn-sm bankDocView" 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
                                                          @endif
                                                        </p>
                                                    </div>
                                                </div>
                                                 <div class="col-md-12 text-right">
                                                        <button type="button" class="btn btn-warning btn-sm" id="bank_cancel">
                                                            Cancel
                                                        </button>
                                                 </div>
                                              @endif
                                                <div class="row" id="bank_entry_display">
                                                    <div class="col-md-12">
                                                      <h6 class="text-default">Your bank information update request is in under process.</h6>
                                                      <hr>
                                                    </div>

                                                    <div class="col-md-4 ">
                                                        <div class="text-upper text_style"> Bank Name</div>
                                                        <p class="text-capital bank_name"></p>
                                                    </div>
                                                    <div class="col-md-4 ">
                                                        <div class="text-upper text_style">IFSC Code</div>
                                                        <p class="text-capital ifsc_code"></p>
                                                    </div>
                                                    <div class="col-md-4 ">
                                                        <div class="text-upper text_style">Account No</div>
                                                        <p class="text-capital account_no"></p>
                                                    </div>
                                                    <div class="col-md-4 ">
                                                        <div class="text-upper text_style">View Passbook</div>
                                                        <p class="bank_passbook">
                                                        </p>
                                                    </div>
                                                    <div class="col-md-12 text-right">
                                                        <button type="button" class="btn btn-warning " id="bank_cancel_again">
                                                            Cancel
                                                        </button>
                                                    </div>
                                                    
                                                </div>

                                            </div>
                                        </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>


<!-- Modal For preview th selected profile picture -->                
        <div class="modal fade" id="selectedPic" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title text-center" >Upload Profile Picture </h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <form method="POST" action="#" enctype="multipart/form-data" id="formReset">
                        <div class="modal-body text-center">
                            <input type="file" name="profile_pic" id="profile_pic" style="display: none">
                            <div id="preview">
                                <img id="previewPic" src="#" alt="Your image" height="50%" width="50%" class="img-thumbnail" />
                            </div>
                        </div>
                        <div class="modal-footer" style="padding: 0rem .5rem 0rem 1.7rem;">
                          
                              <button type="button" class="col-md-6 btn btn-outline-warning waves-effect btn-sm" data-dismiss="modal">no</button>
                              <button type="button" class="col-md-6 btn btn-outline-info waves-effect btn-sm" data-dismiss="modal" name="Uploadprofile_pic" id="UploadBtn">yes</button>                          
                            
                            
                        </div>
                    </form>
                </div>
            </div>
        </div>
    <!-- Response on photo upload -->
    <div class="modal fade" id="responseUploadModal" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title pull-left" >Preview Profile picture </h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                        <div class="modal-body">
                            <div id="responseUpload">
                                
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                </div>
            </div>
        </div>

<!-- Modal -->
<div class="modal fade" id="docView" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
  aria-hidden="true">
  <div class="modal-dialog modal-lg " role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel"><strong>Bank Document</strong></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" style="background-color:#a2a2a2;">
          <div class="text-center" style="padding:0px 50px 0px 50px;">
             <img src="" class="img-fluid" id="imgUrl">
          </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Ok</button>
       <!-- <button type="button" class="btn btn-primary">Save changes</button>-->
      </div>
    </div>
  </div>
</div>



<!-- Central Modal Small -->
<div class="modal fade" id="submitted_contract_list" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
  aria-hidden="true">

  <!-- Change class .modal-sm to change the size of the modal -->
  <div class="modal-dialog modal-lg" role="document">


    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title w-100" id="myModalLabel">
            <i class="fa fa-th-list" aria-hidden="true"></i> Submitted Contract Details
        </h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
         <table id="dtBasicExample" class="table table-striped table-bordered table-sm" cellspacing="0" width="100%">
          <thead>
            <tr>
              <th class="th-sm">Sl.No.
              </th>
              <th class="th-sm">Contract Form
              </th>
              <th class="th-sm">Contract Upto
              </th>
              <th class="th-sm">Contract Sign With
              </th>
              <th class="th-sm">Status
              </th>
              <th class="th-sm">Contract File
              </th>
            </tr>
          </thead>
          <tbody id="contract_list_data">
            <tr>
              <td>1</td>
              <td>System Architect</td>
              <td>Edinburgh</td>
              <td>61</td>
              <td>2011/04/25</td>
              <td>$320,800</td>
            </tr>
            <tr>
              <td>2</td>
              <td>Accountant</td>
              <td>Tokyo</td>
              <td>63</td>
              <td>2011/07/25</td>
              <td>$170,750</td>
            </tr>

          </tbody>

        </table>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>









<!--Avatar-->

@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">
       
        $('#bank_entry_display').hide();
        
        $('#contract_to').bootstrapMaterialDatePicker({
            weekStart: 0,
            format: 'YYYY-MM-DD',
            clearButton: true,
            time: false,
            minDate:new Date(moment(new Date()).add(1, 'day').format())
        }).on('change', function (e, date) {
        /*    var new_date=new Date(date);
            var maxDate=new Date(new_date.setDate(new_date.getDate() + 364));*/
            var newminDate=new Date(moment(date).subtract(363, 'day').format());
            console.log(newminDate);
            $('#contract_from').bootstrapMaterialDatePicker('setMaxDate',date );
            $('#contract_from').bootstrapMaterialDatePicker('setMinDate', newminDate);
        });
        
        
        
        $('#contract_from').bootstrapMaterialDatePicker({
            weekStart: 0,
            format: 'YYYY-MM-DD',
            clearButton: true,
            time: false,
            minDate:new Date(moment(new Date()).subtract(362, 'day').format())
        }).on('change', function (e, date) {
        /*    var new_date=new Date(date);
            var maxDate=new Date(new_date.setDate(new_date.getDate() + 364));*/
            var newmaxDate=new Date(moment(date).add(364, 'day').format());
         /*   console.log(newmaxDate);*/
            $('#contract_to').bootstrapMaterialDatePicker('setMaxDate',newmaxDate );
            $('#contract_to').bootstrapMaterialDatePicker('setMinDate', new Date(moment(new Date()).add(1, 'day').format()));
        });
        
        

        $('#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: "{{route('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: "{{route('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: "{{ route('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);
                        $('#fluidModalRightSuccessDemo').modal('hide');
                        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) {
            $('#qualification_table').empty();
            
            $.each(data, function( index, value ) {

                $('#qualification_table').append('<tr class="bg-info"><td colspan="7" style="color:#eee;font-weight: 700">'+index+'</td></tr>');
                
                $('#qualification_table').append('<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>');
     
                
                var i=1;
                if(value.length>0){
                    $.each(value, function( index1, item ) {
                        var item_url_data='#';
                        if(item.q_doc){
                            item_url_data=image_url+item.q_doc;
                        }
                        var cource_duration='';
                        if(item.duration_years){
                            cource_duration=item.duration_years+' yrs';
                        }
                        
                        if(item.duration_months){
                            cource_duration=cource_duration+' '+item.duration_months+' months';
                        }
                        
                        
                        $('#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>'+cource_duration+'</td>' +
                            '<td>'+item.div_grade_percentage+'</td>' +
                            '<td style="display:flex">' +
                            '<a target="_blank" href="'+item_url_data+'" class="btn btn-primary btn-xs">' +
                            '<i class="fa fa-file-pdf-o"></i>' +
                            '</a> ' +
                            '<button class="deleteData btn btn-danger btn-xs" data-id="'+item.id+'" data-token="{{ csrf_token() }}">' +
                            '<i class="fa fa-trash"></i>' +
                            '</button>' +
                            '</td>' +
                            '</tr>');
                        i++;
                    }); 
                }else{                          
                    $('#qualification_table').append('<tr><td colspan="7" style="text-align: center">No Data Available</td></tr>');
                }
            });
        }
        
        
        
        
        
        /* ----------------------------------------------------------------------------------------------------------------
         ---------------------------------- add contract details -----------------------------------------------------
         ----------------------------------------------------------------------------------------------------------------
         */
 


       
$("#addContractDetails").validate({
    rules: {
        contract_from:{
            required: true,     
        },
        contract_to:{
            required: true,
        },
        employee_contract_sign:{
            required: true,
        },
        contract_file:{
            required: true,
            extension: "pdf|doc|docx|jpeg|jpg",
			filesize: 800,    
        }
    },
    messages: { 
		contract_from: {
            required: "This field is mandatory",
        }, 
        contract_to: {
            required: "This field is mandatory",
        },
        employee_contract_sign: {
            required: "This field is mandatory",
        },
        contract_file: {
            required: "Contract document is mandatory",
            extension: "Select only file with pdf or doc or docx or jpeg or jpg extension",
        }  
    }
}); 

$.validator.addMethod('filesize', function (value, element, param) {
    param=param*1024;
    return this.optional(element) || (element.files[0].size <= param)
}, 'File size must be less than {0} KB');
        
        
        
        

        $('#addContractDetails').on('submit', function (e) {
            e.preventDefault();
            
            $("#addContractDetails").validate();
            if($("#addContractDetails").valid()){  
                $('.page-loader-wrapper').fadeIn();
                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    type: "POST",
                    url:"{{ route('addemployeecontract') }}",
                    dataType: "json",
                    data: new FormData(this),
                    contentType: false,
                    cache: false,
                    processData: false,
                    success: function (data) {
                        if (data.msgType == true) {
                            $('#employment_entry_message').show();
                            $('#addContractDetails').hide();
                            toastr.success(data.msg);
                        } else {
                            if(data.data.contract_from){
                                if($("#contract_from-error").length != 0) {
                                  $("#contract_from-error").remove();
                                }
                                $('#contract_from').after('<label id="contract_from-error" class="error active" for="contract_from">'+data.data.contract_from+'</label>');
                            }
                            if(data.data.contract_to){
                                if($("#contract_to-error").length != 0) {
                                  $("#contract_to-error").remove();
                                }
                                $('#contract_to').after('<label id="contract_to-error" class="error active" for="contract_to">'+data.data.contract_to+'</label>');
                            }
                            if(data.data.employee_contract_sign){
                                 if($("#employee_contract_sign-error").length != 0) {
                                   $("#employee_contract_sign-error").remove();
                                 }
                                $('#employee_contract_sign').after('<label id="employee_contract_sign-error" class="error active" for="employee_contract_sign">'+data.data.employee_contract_sign+'</label>');
                            }
                            if(data.data.contract_file){
                                 if($("#contract_file-error").length != 0) {
                                   $("#contract_file-error").remove();
                                 }
                                 $('#contract_file').after('<label id="contract_file-error" class="error active" for="contract_file">'+data.data.contract_file+'</label>'); 
                            }
                            toastr.error(data.msg);
                        }
                    },
                    error: function (jqXHR, textStatus, errorThrown) {

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

        //********************************* 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:"{{ route('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:"{{ route('userupdatebankdetails') }}",
                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);
                        $('#saveBankDetails').hide();
                        $('#bank_entry_display').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) {
                var img_url=$('#image_url').val();
               
                $('.bank_passbook').append('<a target="_blank" href="' +img_url+data.passbook_file + '" class="btn btn-primary btn-sm bankDocView" 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 ******************************************************
        $(document).on('click','#UploadBtn', function(e){
            
            e.preventDefault();

            $('#loading').css('display', 'block');

            var form_data = new FormData();
            var success = "Successfully Updated.";
            var format = "File format is not an image!"
            form_data.append('profile_pic', datafiles);
            form_data.append('_token', '{{csrf_token()}}');
            // $('#loading').css('display', 'block');
            $.ajax({
                url: "{{url('profile_picture-upload')}}",
                data: form_data,
                type: 'POST',
                contentType: false,
                processData: false,
                success: function (data) {
                    if (data.fail) {
                        $('#selectedPic').modal('hide');
                        toastr.error('Failed!!'+format);
                       /* $('#responseUpload').html(data.errors['profile_pic']).modal('show');*/
                    }
                    else {
             
                        $('#responseUploadModal .modal-body #responseUpload').html(success);
                        $('#selectedPic').modal('hide');
                        /*$('#responseUploadModal').modal('show');*/
                        toastr.success('Profile picture successfully changed.');
                        $('#picDisplayed').attr('src', '{!! asset('/images/profilePic/'.$users->employee_code.'/') !!}/' + data);
                    }
                    $('#loading').css('display', 'none');
                },
                error: function (xhr, status, error) {
                    // formReset
                    alert(xhr.responseText);
                    // $('#responseUploadModal .modal-body #responseUpload').html(xhr.responseText);
                    // $('#selectedPic').modal('hide');
                    // $('#responseUploadModal').modal('show');
                    $('#picDisplayed').attr('src', '{!! asset('/images/profilePic/'.$users->employee_code.'/'.$users->photo_file) !!}');
                    
                }
            });
        });
        
        
        
        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)$/)) {
                      toastr.error('Failed!! File format is not an image.');
/*                    $('#responseUploadModal .modal-body #responseUpload').html("File format is not an image");
                    $('#responseUploadModal').modal('show');*/
                    
                }else{
                    $('#selectedPic').modal('show');
                    datafiles=this.files[0];
                }
                
        });
        
        
    $(document).on('click','.bankDocView',function(e){
       
        
        var url=$(this).attr('href');
        var extension=url.split('.').pop();
        var logo = document.getElementById('imgUrl');
       
        if(extension!='pdf'){
            e.preventDefault();
            logo.src = url;
            $('#docView').modal('show');
        }  
        
    })
        
    $('#bank_cancel_again').on('click',function(e){
        e.preventDefault();
        $('#bank_view').show(500)
        $('#bank_entry').hide(500)   
    })

    $(document).on('click','#view_submited_contract',function(e){
         e.preventDefault();
        
        var employee_code=$(this).data('employee_code');
     
        
        
            $.ajax({
                type: "GET",
                url:"{{ route('getEmployeesUploadedContractList') }}",
                dataType: "json",
                contentType: false,
                data:{'employee_code':employee_code},
                success: function (data) {
                    if (data.msgType == true) {
                        if(data.data.length>0){
                            var i=1;
                              $('#contract_list_data').empty();
                            $.each(data.data,function(index,value){
                                var contract_status='';
                                
                                if(value.status==0){
                                    contract_status='<span class="text-warning">Pending</span>';
                                }else if(value.status==1){
                                    contract_status='<span class="text-success">Approved</span>';
                                }else{
                                    contract_status='<span class="text-danger">Rejected</span>';
                                }
                               
                                $('#contract_list_data').append('<tr>'+
                                                                '<td>'+i+'</td>'+
                                                                 '<td>'+value.contract_form+'</td>'+
                                                                 '<td>'+value.contract_to+'</td>'+
                                                                 '<td>'+value.contract_sign_with+'</td>'+
                                                                 '<td>'+contract_status+'</td>'+
                                                                 '<td><a href="'+img_url+''+value.contract_file+'" target="_blank" class=""><i class="fa fa-file-o fa-lg" aria-hidden="true"></i></a></td>'+
                                                                '</tr>');
                                i=i+1;
                            });
                        }else{
                            $('#contract_list_data').empty();
                            $('#contract_list_data').append('<tr><td colspan="6" class="text-center"> No Data Found </td></tr>');
                        }
                        $('#submitted_contract_list').modal('show');

                    } else {

                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {

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


$(document).on('click','.deleteData',function(){

    var id_delete = $(this).data("id");
    swal({
        title: 'Are you sure?',
        text: "You want to delete this!",
        type: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Yes',
        closeOnConfirm: false
    }).then((result) => {
        if (result.value)
    {

        $.ajax(
            {
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: "{{url('/employees/deleteQualification/')}}" + '/' + id_delete,
                {{--            url: "{{route('add_qualification_detail')}}",--}}
                type: 'delete',
                dataType: "JSON",
                data: {
                    "id": id_delete
                },
                success: function (data) {
                    if (data.msgType == true) {
                        bind_employee_qualification_details(data.data);
                        swal("Done!", "It was succesfully deleted!", "success");
                    }
                },
                error: function (xhr) {
                    swal("Woops!", "Something Wrong!", "failed");
                }
            });
    }
    });
});
        
$(document).on('click','#qualificationModal',function(e){
    e.preventDefault();
    $('#saveQualificationDetails')[0].reset();
    $('#fluidModalRightSuccessDemo').modal('show');
})

//*******************************End delete qualification detail*************************************//
        
        
        
    </script>

@endsection