@extends('layout.default')

@section('styles')
    <style type="text/css">
        .input-group > .select2-container--default {
            width: auto !important;
            flex: 1 1 auto !important;
        }

        .input-group > .select2-container--default .select2-selection--single {
            height: 100% !important;
            border-radius: 0.42rem 0 0 0.42rem !important;
            line-height: inherit !important;
        }

        .nowrap {
            white-space: nowrap;
        }

        table .select2-selection__rendered {
            line-height: 10px !important;
        }

        table .select2-container .select2-selection--single {
            width: 225px !important;
            height: 30px !important;
            font-size: 1rem !important;
        }

        table .select2-selection__arrow {
            height: 30px !important;
        }

        .btn-group > .select2-container--default {
            width: auto !important;
            flex: 1 1 auto !important;
        }

        .btn-group > .select2-container--default .select2-selection--single {
            height: 100% !important;
            border-radius: 0.42rem 0 0 0.42rem !important;
            line-height: inherit !important;
        }

        .card.card-custom > .card-body {
            padding: 1rem 1rem 0 1rem;
        }
    </style>
@endsection
@section('subheaderRightToolbar')
    @PermissionsCan('employee.index')
    <a href="{{ route('employee.index') }}" class="btn btn-light-primary font-weight-bolder mr-2">
        <i class="ki ki-long-arrow-back icon-sm"></i>Back(ESC)</a>
    @endPermissionsCan
    @PermissionsCan('employee.store')
    <div class="btn-group">
        <button type="submit" class="btn btn-primary font-weight-bolder" form="employee_form">
            <i class="ki ki-check icon-sm"></i><u>S</u>ave & Continue
        </button>
    </div>
    @endPermissionsCan
@endsection
@section('content')
    <div class="card card-custom card-sticky" id="kt_page_sticky_card">
        <div class="card-body" id="load-section-js">
            <form class="form" id="employee_form" data-method="post" data-url="{{ route('employee.store') }}"
                  enctype="multipart/form-data">
                <div class="row">
                    <div class="col-md-12 mb-2">
                        <div class="card card-custom card-border card-shadow" data-card="true" id="kt_card_3">
                            <div class="card-header bg-secondary">
                                <div class="card-title">
                                    <h3 class="card-label">Upload Profile</h3>
                                </div>
                                <div class="card-toolbar">
                                    <a href="#" class="btn btn-icon btn-circle btn-sm btn-light-primary mr-1"
                                       data-card-tool="toggle">
                                        <i class="ki ki-arrow-down icon-nm"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="card-body" kt-hidden-height="384">
                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="form-group ">
                                            <label>Avatar</label>
                                            <div class="col-lg-9 col-xl-9">
                                                <div class="image-input image-input-outline" id="kt_user_add_avatar">
                                                    <div class="image-input-wrapper"
                                                         style="background-image: url( {{ ($profileImage)?:"/media/users/blank.png" }} )"></div>
                                                    <label
                                                            class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow"
                                                            data-action="change" data-toggle="tooltip" title=""
                                                            data-original-title="Change avatar">
                                                        <i class="fa fa-pen icon-sm text-muted"></i>
                                                        <input type="file" name="avatar" id="avatar"
                                                               accept=".png, .jpg, .jpeg"/>
                                                        <input type="hidden" name="avatar_remove"/>
                                                    </label>
                                                    <span
                                                            class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow"
                                                            data-action="cancel" data-toggle="tooltip"
                                                            title="Cancel avatar">
                                                        <i class="ki ki-bold-close icon-xs text-muted"></i>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12 mb-2">
                        <div class="card card-custom card-border card-shadow" data-card="true" id="kt_card_3">
                            <div class="card-header bg-secondary">
                                <div class="card-title">
                                    <h3 class="card-label">Basic Details</h3>
                                </div>
                                <div class="card-toolbar">
                                    <a href="#" class="btn btn-icon btn-circle btn-sm btn-light-primary mr-1"
                                       data-card-tool="toggle">
                                        <i class="ki ki-arrow-down icon-nm"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="card-body" kt-hidden-height="384">
                                <div class="row">
                                    <div class="col-md-3 mb-6">
                                        <div class="form-group mb-1">
                                            <label>Branch <b class="text-danger">*</b></label>
                                            <select class="form-control branch-select2-js"
                                                    name="branch_id" id="branch_id"
                                                    data-action="{{ route('branch.autocomplete') }}">
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="radio-inline">
                                            <label class="radio radio-solid">
                                                <input type="radio" name="salutation" checked="checked" value="Mr."/>
                                                <span></span>
                                                Mr.
                                            </label>
                                            <label class="radio radio-solid">
                                                <input type="radio" name="salutation" value="Mrs."/>
                                                <span></span>
                                                Mrs.
                                            </label>
                                            <label class="radio radio-solid">
                                                <input type="radio" name="salutation" value="Ms."/>
                                                <span></span>
                                                Ms.
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>Name <b class="text-danger">*</b></label>
                                            <input class="form-control" type="text" name="name" id="name"
                                                   placeholder="Name"
                                                   value="{{ (isset($candidateresume->name) and !empty($candidateresume->name)) ? $candidateresume->name : '' }}"/>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>Code <b class="text-danger">*</b></label>
                                            <input class="form-control" type="text"
                                                   name="code" id="code" placeholder="Code" value="{{ $employee_code }}"
                                                   readonly/>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>Mobile No <b class="text-danger">*</b></label>
                                            <input type="text" class="form-control" name="mobile_no"
                                                   placeholder="Mobile number" data-inputmask='"mask": "9999999999"'
                                                   data-mask pattern="^\[0-9]{5}\s[0-9]{5}$" id="mobile_no"
                                                   value="{{ (isset($candidateresume->phone) and !empty($candidateresume->phone)) ? $candidateresume->phone : '' }}">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12 mb-2">
                        <div class="card card-custom card-border card-shadow" data-card="true" id="kt_card_3">
                            <div class="card-header bg-secondary">
                                <div class="card-title">
                                    <h3 class="card-label">Employee Details</h3>
                                </div>
                                <div class="card-toolbar">
                                    <a href="#" class="btn btn-icon btn-circle btn-sm btn-light-primary mr-1"
                                       data-card-tool="toggle">
                                        <i class="ki ki-arrow-down icon-nm"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="card-body" kt-hidden-height="384">
                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>Date Of Joining <b class="text-danger">*</b></label>
                                            <input class="form-control" type="date" name="date_of_joining"
                                                   id="date_of_joining"
                                                   value="{{ \Carbon\Carbon::now()->format('Y-m-d') }}"/>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>Date Of Resign</label>
                                            <input class="form-control" type="date" name="date_of_resign"
                                                   id="date_of_resign"
                                                   value=""/>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>Probation Start Date</label>
                                            <input class="form-control" type="date"
                                                   name="probation_start_date" id="probation_start_date"/>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>Probation Period</label>
                                            <select class="form-control probation_period-select2-js"
                                                    name="month" id="month">
                                                <option value=""> Select Month</option>
                                                <option value="3">3 Month</option>
                                                <option value="6">6 Month</option>
                                                <option value="9">9 Month</option>
                                                <option value="12">12 Month</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>Probation End Date</label>
                                            <input class="form-control" type="date"
                                                   name="probation_end_date" id="probation_end_date" readonly/>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>Email <b class="text-danger">*</b></label>
                                            <input class="form-control" type="email"
                                                   name="email" id="email"
                                                   placeholder="Email"
                                                   value="{{ (isset($candidateresume->email) and !empty($candidateresume->email)) ? $candidateresume->email : '' }}"/>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>Employee Type</label>
                                            <select class="form-control employee_type-select2-js"
                                                    name="employee_type" id="employee_type">
                                                <option value="">Select</option>
                                                <option value="permanent">Permanent</option>
                                                <option value="contract">Contract</option>
                                                <option value="intern">Intern</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>Designation<b class="text-danger">*</b></label>
                                            <select class="form-control designation-select2-js"
                                                    name="designation_id" id="designation_id"
                                                    data-action="{{ route('designation.autocomplete') }}"
                                            >
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>Department<b class="text-danger">*</b></label>
                                            <select class="form-control department-select2-js"
                                                    name="department_id" id="department_id"
                                                    data-action="{{ route('department.autocomplete') }}"
                                            >
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>Attendance Type</label>
                                            <select class="form-control attendance_type-select2-js"
                                                    name="attendance_type" id="attendance_type">
                                                <option value="">Select</option>
                                                <option value="Mobile">Mobile</option>
                                                <option value="Web">Web</option>
                                                <option value="Both">Both</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>Grade</label>
                                            <select class="form-control grade-select2-js"
                                                    name="grade" id="grade">
                                                <option value="">Select Grade</option>
                                                <option value="A">A</option>
                                                <option value="B">B</option>
                                                <option value="A+">A+</option>
                                                <option value="B+">B+</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>Fingerprint Code</label>
                                            <input class="form-control" type="text"
                                                   name="fingerprint_code" id="fingerprint_code"
                                                   placeholder="Fingerprint Code"/>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>Training Start Date</label>
                                            <input class="form-control" type="date"
                                                   name="training_start_date" id="training_start_date"/>
                                        </div>
                                    </div>
                                    <div class="col-md-3 mt-7">
                                        <div class="form-group row">
                                            <div class="col-9">
                                                <div class="checkbox-inline">
                                                    <label class="checkbox">
                                                        <input type="checkbox" name="is_allow_geo_fancying"
                                                               id="is_allow_geo_fancying"
                                                               value="1" checked>
                                                        <span></span>
                                                        is Allow GEO Fancing?
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12 mb-2">
                        <div class="card card-custom card-border card-shadow" data-card="true" id="kt_card_3">
                            <div class="card-header bg-secondary">
                                <div class="card-title">
                                    <h3 class="card-label">Personal Details</h3>
                                </div>
                                <div class="card-toolbar">
                                    <a href="#" class="btn btn-icon btn-circle btn-sm btn-light-primary mr-1"
                                       data-card-tool="toggle">
                                        <i class="ki ki-arrow-down icon-nm"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="card-body" kt-hidden-height="384">
                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>Address</label>
                                            <textarea class="form-control" type="text" name="address"
                                                      id="address"></textarea>Basic Details
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>Country</label>
                                            <select class="form-control form-control-lg country-select2-js"
                                                    name="country_id" id="country_id"
                                                    data-action="{{ route('countries.autocomplete') }}">
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>State</label>
                                            <select class="form-control form-control-lg state-select2-js"
                                                    name="state_id" id="state_id"
                                                    data-action="{{ route('states.autocomplete') }}"
                                                    data-depended="country_id">
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>City</label>
                                            <select class="form-control form-control-lg city-select2-js"
                                                    name="city_id" id="city_id"
                                                    data-action="{{ route('cities.autocomplete') }}"
                                                    data-depended="state_id">
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>Gender</label>
                                            <select class="form-control form-control-lg gender-select2-js"
                                                    name="gender" id="gender">
                                                <option value="">Select</option>
                                                <option value="Male">Male</option>
                                                <option value="Female">Female</option>
                                                <option value="Other">Other</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>Date Of Birth</label>
                                            <input class="form-control" type="date"
                                                   name="date_of_birth" id="date_of_birth"/>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>Father Name</label>
                                            <input class="form-control" type="text" placeholder="Father Name"
                                                   name="father_name" id="father_name"/>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>Mother Name</label>
                                            <input class="form-control" type="text" placeholder="Mother Name"
                                                   name="mother_name" id="mother_name"/>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>Martial Status</label>
                                            <select class="form-control form-control-lg martial_status-select2-js"
                                                    name="martial_status" id="martial_status">
                                                <option value="">Select</option>
                                                <option value="Single">Single</option>
                                                <option value="Married">Married</option>
                                                <option value="Divorced">Divorced</option>
                                                <option value="Widow">Widow</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>Blood Group</label>
                                            <input class="form-control" type="text" placeholder="Blood Group"
                                                   name="blood_group" id="blood_group"/>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>Height</label>
                                            <input class="form-control" type="text" placeholder="Height"
                                                   name="height" id="height"/>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>Religion</label>
                                            <select class="form-control form-control-lg religion-select2-js"
                                                    name="religion" id="religion">
                                                <option value="">Select</option>
                                                <option value="Indian">Indian</option>
                                                <option value="Islam">Islam</option>
                                                <option value="Sikhism">Sikhism</option>
                                                <option value="Christianity">Christianity</option>
                                                <option value="Buddhism">Buddhism</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>Cast</label>
                                            <select class="form-control form-control-lg cast-select2-js"
                                                    name="cast" id="cast">
                                                <option value="">Select</option>
                                                <option value="Brahmins">Brahmins</option>
                                                <option value="Kshatriyas">Kshatriyas</option>
                                                <option value="Vaishyas">Vaishyas</option>
                                                <option value="Shudras">Shudras</option>
                                                <option value="Pariahs">Pariahs</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>Skill Type</label>
                                            <select class="form-control form-control-lg skill_type-select2-js"
                                                    name="skill_type" id="skill_type">
                                                <option value="">Select</option>
                                                <option value="Problem Solving Skills">Problem Solving Skills</option>
                                                <option value="Flexibility">Flexibility</option>
                                                <option value="Critical Thinking Skills">Critical Thinking Skills
                                                </option>
                                                <option value="Communication Skills">Communication Skills</option>
                                                <option value="Teamwork">Teamwork</option>
                                                <option value="Organization Skills">Organization Skills</option>
                                                <option value="Creativity">Creativity</option>
                                                <option value="Emotional Intelligence">Emotional Intelligence</option>
                                                <option value="Attention to Detail">Attention to Detail</option>
                                                <option value="Responsibility">Responsibility</option>
                                                <option value="Digital Skills">Digital Skills</option>
                                                <option value="Design">Design</option>
                                                <option value="Mathematics">Mathematics</option>
                                                <option value="Project Management">Project Management</option>
                                                <option value="Marketing">Marketing</option>
                                                <option value="Administrative">Administrative</option>
                                                <option value="Writing Skills">Writing Skills</option>
                                                <option value="Foreign Languages">Foreign Languages</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>Aadhar Number</label>
                                            <input class="form-control" type="text" placeholder="Aadhar Number"
                                                   name="aadhar_number" id="aadhar_number"/>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>Pan Number</label>
                                            <input class="form-control" type="text" placeholder="Pan Number"
                                                   name="pan_number" id="pan_number"/>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>Ration Card Type</label>
                                            <select class="form-control form-control-lg ration_card_type-select2-js"
                                                    name="ration_card_type" id="ration_card_type">
                                                <option value="">Select</option>
                                                <option value="APL">APL</option>
                                                <option value="BPL">BPL</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>Ration Card Number</label>
                                            <input class="form-control" type="text" placeholder="Ration Card Number"
                                                   name="ration_card_number" id="ration_card_number"/>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>Family Doctor</label>
                                            <select class="form-control form-control-lg family_doctor-select2-js"
                                                    name="family_doctor" id="family_doctor">
                                                <option value="">Select</option>
                                                <option value="Yes">Yes</option>
                                                <option value="No">No</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>Dispensary Address</label>
                                            <textarea class="form-control" type="text" name="dispensary_address"
                                                      id="dispensary_address"></textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12 mb-10">
                        <div class="card card-custom card-border card-shadow" data-card="true" id="kt_card_3">
                            <div class="card-header bg-secondary">
                                <div class="card-title">
                                    <h3 class="card-label">Bank Details</h3>
                                </div>
                                <div class="card-toolbar">
                                    <a href="#" class="btn btn-icon btn-circle btn-sm btn-light-primary mr-1"
                                       data-card-tool="toggle">
                                        <i class="ki ki-arrow-down icon-nm"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="card-body" kt-hidden-height="384">
                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>Bank Ac No</label>
                                            <input class="form-control" type="text" placeholder="Bank Ac No"
                                                   name="bank_ac_no" id="bank_ac_no"/>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>Bank Ac Name</label>
                                            <input class="form-control" type="text" placeholder="Bank Ac Name"
                                                   name="bank_ac_name" id="bank_ac_name"/>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>Bank Name</label>
                                            <input class="form-control" type="text" placeholder="Bank Name"
                                                   name="bank_name" id="bank_name"/>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>Branch Name</label>
                                            <input class="form-control" type="text" placeholder="Branch Name"
                                                   name="branch_name" id="branch_name"/>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>Ifsc Code</label>
                                            <input class="form-control" type="text" placeholder="Ifsc Code"
                                                   name="ifsc_code" id="ifsc_code"/>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>Micr Code</label>
                                            <input class="form-control" type="text" placeholder="Micr Code"
                                                   name="micr_code" id="micr_code"/>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>Aadhaar Card</label>
                                            <div class="input-group">
                                                <div class="custom-file">
                                                    <input type="file" class="custom-file-input" id="aadhaar_card_file"
                                                           name="aadhaar_card_file">
                                                    <label class="custom-file-label" for="documents">Choose File</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>PAN Card</label>
                                            <div class="input-group">
                                                <div class="custom-file">
                                                    <input type="file" class="custom-file-input" id="pan_card_file"
                                                           name="pan_card_file">
                                                    <label class="custom-file-label" for="documents">Choose File</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>Cancelled cheque</label>
                                            <div class="input-group">
                                                <div class="custom-file">
                                                    <input type="file" class="custom-file-input" id="bank_file"
                                                           name="bank_file">
                                                    <label class="custom-file-label" for="documents">Choose File</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12 mb-10">
                        <div class="card card-custom card-border card-shadow" data-card="true" id="kt_card_3">
                            <div class="card-header bg-secondary">
                                <div class="card-title">
                                    <h3 class="card-label">Family Detail</h3>
                                </div>
                                <div class="card-toolbar">
                                    <a href="#" class="btn btn-icon btn-circle btn-sm btn-light-primary mr-1"
                                       data-card-tool="toggle">
                                        <i class="ki ki-arrow-down icon-nm"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="card-body" kt-hidden-height="384">
                                <div class="row">
                                    <div class="col-xl-12">
                                        <div class="tab-content">
                                            <div class="table-responsive" id="kt_repeater_1">
                                                <table class="table table-sm table-foot-custom table-foot-bg table-bordered"
                                                       id="kt_table_repeater">
                                                    <thead class="thead-light">
                                                    <tr class="text-left">
                                                        <th scope="col">Relation</th>
                                                        <th scope="col">Name</th>
                                                        <th scope="col" style="min-width: 150px;">Contact No</th>
                                                        <th scope="col" style="min-width: 50px;">Delete</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody data-repeater-list="family_details">
                                                    <tr data-repeater-item data-tr_count="0" class="table_tr">
                                                        <td>
                                                            <div class="btn-group" role="group"
                                                                 aria-label="Button group with nested dropdown">
                                                                <div class="btn-group" role="group">
                                                                    <select name="relation_id" id="relation_id_0"
                                                                            style="width: 50%"
                                                                            class="form-control form-control-sm form-control-solid relation-select2-js"
                                                                            data-count="0"
                                                                            data-action="{{ route('relation.autocomplete') }}"
                                                                            data-placeholder="Select Relation type">
                                                                    </select>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <div class="input-group">
                                                                <input class="form-control form-control-sm"
                                                                       type="text" name="name" id="name_0"/>
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <div class="input-group">
                                                                <input class="form-control form-control-sm"
                                                                       type="text" name="contact_no" id="contact_no_0"/>
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <button type="button" class="btn btn-sm btn-clean btn-icon"
                                                                    data-repeater-delete>
                                                                <i class="fas fa-trash-alt text-danger icon-md"></i>
                                                            </button>
                                                        </td>
                                                    </tr>
                                                    </tbody>
                                                    <tfoot>
                                                    <tr>
                                                        <td colspan="8">
                                                            <button type="button"
                                                                    class="btn btn-block btn-light-primary btn-sm repeater-create-btn-js"
                                                                    data-repeater-create>
                                                                <i class="ki ki-plus icon-1x"></i> Add More Item (ALT+I)
                                                            </button>
                                                        </td>
                                                    </tr>
                                                    </tfoot>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12 mb-2">
                        <div class="card card-custom card-border card-shadow" data-card="true" id="kt_card_3">
                            <div class="card-header bg-secondary">
                                <div class="card-title">
                                    <h3 class="card-label">Attachments</h3>
                                </div>
                                <div class="card-toolbar">
                                    <a href="#" class="btn btn-icon btn-circle btn-sm btn-light-primary mr-1"
                                       data-card-tool="toggle">
                                        <i class="ki ki-arrow-down icon-nm"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="card-body" kt-hidden-height="384">
                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>Attachments</label>
                                            <div class="input-group">
                                                <div class="custom-file">
                                                    <input type="file" class="custom-file-input" id="attachment_files"
                                                           name="attachment_files[]" multiple>
                                                    <label class="custom-file-label" for="documents">Choose File</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection


@section('scripts')
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

    <script type="text/javascript" src="{{ asset('js/modules/employee/create.js?v='.time()) }}"></script>
@endsection