@extends('layouts.app2')

@section('dynamic_css')
    <style>

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

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

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

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

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

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

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

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

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

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

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

        }

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

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

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

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

        }

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

        }

        .active {
            background-color: #EEEEEE;
        }

        }

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

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

        .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;
        }

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


        <div class="row justify-content-center container_layout">
            <div class="col-md-12">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item">
                            <a href="{{ route('adminhome')}}">
                                <i class="material-icons">home</i>
                            </a>
                        </li>
                        <li class="breadcrumb-item"><a href="{{route('employees')}}">Employees</a></li>
                        <li class="breadcrumb-item"><a href="{{route('employeelist')}}">Employee List</a></li>
                        <li class="breadcrumb-item active"><a href="">Add Employee</a></li>
                        {{--<li class="breadcrumb-item active"><a href="{{route('employeesdata')}}">Employee Details</a></li>--}}
                    </ol>
                </nav>
            </div>


        <!--            <div class="col-md-12 col-md-push-0 pt0"><a href="{{ route('employeelist') }}" class="btn btn-sm btn-info">Back</a>personal_view
            </div>-->
            <div class="col-md-12 col-md-push-0  pt0">

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

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

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

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


                    <div class="card-body pt0">

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

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

                                    <div class="tab-pane fade in active show " id="tab1" role="tabpanel">



                                        <div class="row" id="personal_view" style="display: none">
                                            <div class="col-md-12 text-right">
                                                @can('edit_personal_details')
                                                    <a href="" class="" id="personal_edit"><i class="fa fa-edit fa-2x"
                                                                                              aria-hidden="true"></i></a>
                                                @endcan
                                            </div>
                                            <div class="col-md-4 ">
                                                <div class="text-upper text_style">Employee Code</div>
                                                <p>
                                                    <span class="employee_code">{{$personal->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">{{$personal->name}}</span>
                                                </p>
                                            </div>
                                            <div class="col-md-4 ">
                                                <div class="text-upper text_style">Father's Name</div>
                                                <p>
                                                    <span class="father_name">{{$personal->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">{{$personal->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">{{$personal->gender}}</span>
                                                </p>
                                            </div>
                                            <div class="col-md-4 ">
                                                <div class="text-upper text_style">Date Of Birth</div>
                                                <p>
                                                    <span class="employee_dob">{{$personal->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">{{$personal->pan_number}}</span>
                                                </p>
                                            </div>
                                            <div class="col-md-4 ">
                                                <div class="text-upper text_style">Adhar Number</div>
                                                <p>
                                                    <span class="employee_adhar">{{$personal->adhar_number}}</span>
                                                </p>
                                            </div>
                                        </div>

                                        <div id="personal_entry" >

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




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

                                                    <div class="col-md-4">
                                                        <div class="form-group">
                                                            <label class="text-upper text_style">Employee Code</label>
                                                            <input type="text"  name="employee_code"
                                                                   id='employee_code'
                                                                   class="form-control form-control-sm"
                                                                   value="{{$employee_code_new}}"
                                                                   readonly="readonly"/>
                                                        </div>
                                                    </div>
                                                    <input type="hidden" id="level_code" name="level_code" value="{{$level->id}}">

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

                                                    <div class="col-md-4 form-group">
                                                        <label class="text-upper text_style">Mother's Name</label>
                                                        <input type="text"
                                                               class="form-control form-control-sm" name="mother_name"
                                                               id="mother_name" placeholder=""
                                                               value="{{$personal->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">
                                                            <option>Select</option>
                                                            <option value="Female" @if($personal->gender=="Female") {{"selected"}} @endif>
                                                                Female
                                                            </option>
                                                            <option value="Male" @if($personal->gender=="Male") {{"selected"}} @endif>
                                                                Male
                                                            </option>
                                                            <option value="Others" @if($personal->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="datepicker form-control form-control-sm"
                                                               name="employee_dob" id="employee_dob" placeholder=""
                                                                value="{{$personal->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="{{$personal->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="{{$personal->adhar_number}}"/>
                                                    </div>
                                                    <div class="col-md-12 text-right">
                                                        <button type="submit" class="btn btn-info" id='personalsave'>
                                                            Update
                                                        </button>
                                                        <button id="personal_cancel" class="btn btn-warning"
                                                                >
                                                            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" style="display: none">
                                            <div class="col-md-12 text-right">
                                                @can('edit_personal_details')
                                                    <a href="" class="" id="contact_edit"><i class="fa fa-edit fa-2x"
                                                                                             aria-hidden="true"></i></a>
                                                @endcan
                                            </div>
                                            <div class="col-md-4">
                                                <div class="text-upper text_style">Home District</div>
                                                <p class="text-capital employee_district">
                                                    @foreach($districts AS $li)
                                                        @if($li->district_code==$contact->home_district)

                                                                    {{$li->district_name}}

                                                        @endif
                                                    @endforeach</p>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="text-upper text_style">Home Block</div>
                                                <p class="text-capital employee_block">
                                                    @foreach($blocks AS $li)
                                                        @if($li->block_id==$contact->home_block)

                                                                  {{$li->block_name}}

                                                        @endif
                                                    @endforeach</p>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="text-upper text_style">Home Gram Panchayat</div>
                                                <p class="text-capital employee_gp">
                                                    @foreach($grampanchayats AS $li)
                                                        @if($li->gram_panchyat_id==$contact->home_gp)

                                                                    {{$li->gram_panchyat_name}}

                                                        @endif
                                                    @endforeach
                                                </p>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="text-upper text_style">Email</div>
                                                <p class="text-capital employee_email">{{$contact->email}}</p>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="text-upper text_style">Mobile Number</div>
                                                <p class="text-capital mobile_number">{{$contact->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">{{$contact->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">{{$contact->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">{{$contact->corespondance_address}}</p>
                                            </div>
                                        </div>
                                        <div id="contact_entry" class="">
                                            <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=""/>
                                                <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">
                                                            <option value="">--SELECT--</option>
                                                            @foreach($districts AS $li)
                                                                @if($li->district_code==$contact->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==$contact->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==$contact->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="{{$contact->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="{{$contact->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="{{$contact->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">{{$contact->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">{{$contact->corespondance_address}}</textarea>
                                                </div>
                                                <input type="hidden" name="employee_code" value="{{$employee_code_new}}">
                                                <div class="col-md-12 text-right">
                                                    <button type="submit" class="btn btn-info">Update</button>
                                                    <button id="contact_cancel" class="btn btn-warning"
                                                    >
                                                        Cancel
                                                    </button>
                                                </div>
                                            </form>
                                        </div>
                                        </div>


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

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

                                    <div class="tab-pane fade in " id="tab3" role="tabpanel">
                                        <div class="row main_div" id="qualification_view">
                                            <div class="col-md-12 text-right">
                                                <button type="button"
                                                        id="qualificationModal" class="btn btn-warning btn-sm waves-effect waves-light"
                                                        style="margin-right: -10px">
                                                    <i class="fa fa-plus" aria-hidden="true"></i> Add More
                                                </button>
                                            </div>
                                            <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 class="{{$key}}">
                                                                <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" style="display: none;">
                                            <div class="col-md-12 text-right">

                                                @can('edit_employment_details')
                                                    <a href="" class="" id="employment_edit"><i class="fa fa-edit fa-2x"
                                                                                                aria-hidden="true"></i></a>
                                                @endcan
                                            </div>
                                            <div class="col-md-4 ">
                                                <div class="text-upper text_style">Program</div>
                                                <p class="text-capital program_name">
                                                    @foreach($programs AS $li)
                                                        @if($li->program_code==$employment->program_code)

                                                                  {{$li->program_name}}

                                                        @endif
                                                    @endforeach

                                                </p>
                                            </div>
                                            <div class="col-md-4 ">
                                                <div class="text-upper text_style">Level</div>
                                                <p class="text-capital level_name">
                                                   {{$level->level_name}}


                                                </p>
                                            </div>
                                            <div class="col-md-4 ">
                                                <div class="text-upper text_style">Designation</div>
                                                <p class="text-capital designation_name">{{$designation->designation_name}}</p>
                                            </div>
                                            @if($level->name != 'STATE')

                                            <div class="col-md-4 ">
                                                <div class="text-upper text_style">District</div>
                                                <p class="text-capital employment_district">

                                                    @foreach($districts AS $li)
                                                        @if($li->district_code==$employment->district_code)

                                                            {{$li->district_name}}

                                                        @endif
                                                    @endforeach
                                                </p>
                                            </div>
                                            <div class="col-md-4 ">
                                                <div class="text-upper text_style">Block</div>
                                                <p class="text-capital employment_block">
                                                    @foreach($blocks AS $li)
                                                        @if($li->block_id==$employment->block_id)

                                                            {{$li->block_name}}

                                                        @endif
                                                    @endforeach</p>

                                                </p>
                                            </div>
                                            <div class="col-md-4 ">
                                                <div class="text-upper text_style">Gram Panchayat</div>
                                                <p class="text-capital employment_gp">
                                                    @foreach($grampanchayats AS $li)
                                                        @if($li->gram_panchyat_id==$employment->gram_panchyat_id)

                                                            {{$li->gram_panchyat_name}}

                                                        @endif
                                                    @endforeach

                                                </p>
                                            </div>
                                            @endif

                                            <div class="col-md-4 ">
                                                <div class="text-upper text_style">Date Of Joining</div>
                                                <p class="text-capital employee_doj">{{$employment->date_of_joining	}}</p>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="text-upper text_style">Salary</div>
                                                <p class="text-capital salary">{{$employment->salary}}</p>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="text-upper text_style">Contract Date</div>
                                                <p class="text-capital employee_contract_date">{{$employment->contract_date}}</p>
                                            </div>
                                            <div class="col-md-4 ">
                                                <div class="text-upper text_style">Service Status</div>
                                                <p class="text-capital">
                                                    @foreach($service_status AS $li)
                                                        @if($li->status_id==$employment->service_status)

                                                            {{$li->status_name}}

                                                        @endif
                                                    @endforeach

                                                </p>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="text-upper text_style">Contract Sign With</div>
                                                <p class="text-capital employee_contract_sign">{{$employment->contract_sign_with}}</p>
                                            </div>
                                        </div>

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

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



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

                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="form-group">
                                                        <label class="text-upper text_style">Level</label>
                                                        <input type="text" required="true" name="level"
                                                           id='level'
                                                           class="form-control form-control-sm"
                                                           value="{{$level->name}}"
                                                           readonly="readonly"/>
                                                    </div>
                                                </div>

                                                {{--<div class="col-md-4 form-group">--}}
                                                    {{--<label class="text-upper text_style">Level</label>--}}
                                                    {{--<input type="text"  readonly="readonly" value="{{$level->name}}">--}}
                                                    {{--<select class="form-control form-control-sm" id="level_name"--}}
                                                            {{--name="level_name">--}}
                                                        {{--@foreach($levels AS $li)--}}

                                    {{--<option value="{{$li->level_code}}">{{$li->level_name}}</option>--}}

                                                        {{--@endforeach--}}
                                                    {{--</select>--}}
                                                {{--</div>--}}

                                                <div class="col-md-4">
                                                    <div class="form-group">
                                                        <label class="text-upper text_style">Designation</label>
                                                        <input type="text" required="true" name="level"

                                                               class="form-control form-control-sm"
                                                               value="{{$designation->designation_name}}"
                                                               readonly="readonly"/>
                                                    </div>
                                                </div>
                                                <input type="hidden" name="employee_code" value="{{$employee_code_new}}">
                                                <input type="hidden" name="designation_code" value="{{$designation->designation_code}}">
                                                <input type="hidden" name="designation_id" value="{{$designation->id}}">
                                                <input type="hidden" name="level_code" value="{{$level->level_code}}">

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

                                                <div class="col-md-4 form-group">
                                                    <label class="text-upper text_style">Date Of Joining</label>
                                                    <input type="text" id="employee_doj" name="employee_doj"
                                                           class="form-control form-control-sm" placeholder=""
                                                           value="{{$employment->date_of_joining}}">
                                                </div>
                                                <div class="col-md-4 form-group">
                                                    <label class="text-upper text_style">Salary</label>
                                                    <input type="text" name="salary" id="salary"
                                                           class="form-control form-control-sm" placeholder=""
                                                           value="{{$employment->salary}}">
                                                </div>
                                                <div class="col-md-4 form-group">
                                                    <label class="text-upper text_style">Contract Date</label>
                                                    <input type="text" name="employee_contract_date"
                                                           id="employee_contract_date"
                                                           class="form-control form-control-sm"
                                                           value="{{$employment->contract_date}}"
                                                    >
                                                </div>
                                                <div class="col-md-4 form-group">
                                                    <label class="text-upper text_style">Service Status</label>
                                                    <input type="text" class="form-control form-control-sm" id="service_name"
                                                            name="service_name" disabled="disabled"
                                                            value="@foreach($service_status AS $li)@if($li->status_id==$employment->service_status){{$li->status_name}} @endif @endforeach">

                                                </div>
                                                <div class="col-md-8 form-group">
                                                    <label class="text-upper text_style">Contract Sign With</label>
                                                    <textarea id="employee_contract_sign" name="employee_contract_sign"
                                                              class="form-control form-control-sm">{{$employment->contract_sign_with}}</textarea>
                                                </div>
                                                <div class="col-md-12 text-right">
                                                    <button type="submit" class="btn btn-info">Update</button>
                                                    <button type="button" class="btn btn-warning"
                                                            id="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"  style="display: none">
                                            <div class="col-md-12 text-right">
                                                @can('edit_bank_details')
                                                    <a href="" class="" id="bank_edit"><i class="fa fa-edit fa-2x"
                                                                                          aria-hidden="true"></i></a>
                                                @endcan
                                            </div>
                                            <div class="col-md-4 ">
                                                <div class="text-upper text_style"> Bank Name</div>
                                                <p class="text-capital bank_name">{{$bank->bank_name}}</p>
                                            </div>
                                            <div class="col-md-4 ">
                                                <div class="text-upper text_style">IFSC Code</div>
                                                <p class="text-capital ifsc_code">{{$bank->ifsc_code}}</p>
                                            </div>
                                            <div class="col-md-4 ">
                                                <div class="text-upper text_style">Account No</div>
                                                <p class="text-capital account_no">{{$bank->account_no}}</p>
                                            </div>
                                            <div class="col-md-4 ">
                                                <div class="text-upper text_style">View Passbook</div>
                                                <p class="bank_passbook">
                                                    {{--@if($users->passbook_file)--}}
                                                        {{--<a target="_blank"--}}
                                                           {{--href="{{ $global_data['config']->image_url.$users->passbook_file }}"--}}
                                                           {{--class="btn btn-primary btn-sm" style="margin-left: 0px">Passbook</a>--}}
                                                    {{--@else--}}
                                                        {{--<a href="javascript:void(0)" class="btn btn-danger btn-sm"--}}
                                                           {{--style="margin-left: 0px">Passbook Not Uploaded</a>--}}
                                                    {{--@endif--}}
                                                </p>
                                            </div>
                                        </div>


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

                                            <form class="row" id="saveBankDetails" action="#" method="post"
                                                  enctype="multipart/form-data">


                                                <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="{{$bank->bank_name}}"/>
                                                    </div>
                                                    <input type="hidden" name="employee_code" value="{{$employee_code_new}}">
                                                </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="{{$bank->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="{{$bank->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">Update</button>
                                                    <button type="button" class="btn btn-warning " id="bank_cancel">
                                                        Cancel
                                                    </button>
                                                </div>
                                            </form>
                                        </div>
                                        </div>


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

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

                                        </div>

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

                                        </div>
                                    </div>

                                </div>
                            </div>

                        </div>
                    </div>

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

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

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

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

                        <div class="row">
                            <div class="col-md-12 form-group">
                                <label class="text-upper text_style">Select Qualification</label>
                                <select name="select_qualification" id="select_qualification"
                                        class="form-control form-control-sm" required>
                                    <option value="">--Select--</option>
                                      @foreach($emp_qualification_cats AS $li)
                                        <option value="{{$li->id}}">{{$li->emp_q_name}}</option>
                                    @endforeach



                                </select>
                            </div>
                        </div>
                         <input type="hidden" name="employee_code" value="{{$employee_code_new}}">

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

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

                    </div>

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

@section('dynamic_js')

<script src="{{ asset('js/custom/employee_personal_data.js') }}"></script>

    <script type="text/javascript">


//            $('#contact').bind('click', false);
//            $('#quali_detail').bind('click', false);
//            $('#emp_detail').bind('click', false);
//            $('#bank_detail').bind('click', false);


        /*$('#employee_dob').bootstrapMaterialDatePicker({weekStart: 0, time: false});*/
        
        $('#employee_dob').bootstrapMaterialDatePicker({
            weekStart: 0,
            format: 'YYYY-MM-DD',
            clearButton: true,
            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('add_personal_detail')}}",
                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);
                        toastr.success(data.msg);
                        $('#personal_view').show(500);
                        $('#personal_entry').hide(500);
                        //$('#contact').trigger('click');

                    }else {
                        if (data.msg == "VE") {
                            $('#savePersonalDetailValidation').append('<ul class="form-group f-600 f-13 v-errors" id="savePersonalDetailValidationstore"></ul>');

                            $.each(data.data, function (index, value) {
                                $('#savePersonalDetailValidationstore').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('add_contact_detail')}}",
                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);
                        toastr.success(data.msg);
                        $('#contact_view').show();
                        $('#contact_entry').hide();
                        $('#personal_view').show();
                        $('#personal_entry').hide();
                    } 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('add_qualification_detail')}}",
                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>');
                }
            });
        }
        //********************************* 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('add_employment_detail')}}",
                dataType: "json",
                data: new FormData(this),
                contentType: false,
                cache: false,
                processData: false,
                success: function (data) {
                    if (data.msgType == true) {


                        toastr.success(data.msg);

                        bind_employee_employment_details(data.data);
                        $('#contact_view').show();
                        $('#contact_entry').hide();
                        $('#personal_view').show();
                        $('#personal_entry').hide();
                        $('#employment_view').show();
                        $('#employment_entry').hide();


                    } 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();
    $('.salary').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();
    $('#salary').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);
    $('.salary').append(data.salary);


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

    $("#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('add_bank_detail')}}",
                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);
                        $('#contact_view').show();
                        $('#contact_entry').hide();
                        $('#personal_view').show();
                        $('#personal_entry').hide();
                        $('#employment_view').show();
                        $('#employment_entry').hide();
                        $('#bank_view').show();
                        $('#bank_entry').hide();

                        toastr.success(data.msg);
                    } else {
                        if (data.msg == "VE") {
                            $('#saveBankDetailValidation').append('<ul class="form-group f-600 f-13 v-errors" id="saveBankDetailValidationErrors"></ul>');

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

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

        });
function bind_bank_employment_details(data) {

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


    $('#bank_name').val();

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

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

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

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

}


        //******************************* SAVE BANK DETAILS ENDED ******************************************************
        
        
        //*******************************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