@extends('master')
@section('content')
    <style>
        .tabs {
            display: flex;
            flex-wrap: wrap;
            border-radius: 5px;
            border-bottom: 2px solid #333;
        }

        .tab {
            flex: 1;
            text-align: center;
            padding: 12px 15px;
            cursor: pointer;
            font-weight: bold;
            color: #333;
            transition: color 0.3s, border-bottom 0.3s;
        }

        .tab.active {
            color: #fff;
            border-bottom: 3px solid #fff;
        }

        .tab:hover {
            color: #fff;
        }

        .tab-content {
            display: none;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .tab-content.active {
            display: block;
        }

        .navigation-buttons {
            display: flex;
            justify-content: space-between;
            padding: 15px;
            background-color: #f8f9fa;
            border-top: 1px solid #dee2e6;
        }
    </style>
    <div class="page-wrapper">
        <div class="content">
            <div class="page-header">
                <div class="page-title">
                    <h4>{{ __('sitelabel.CreatenewRegisterEmployee') }}</h4>
                </div>
            </div>
            <form method="post" action="{{ url('/') }}/registeremployeeprocess" enctype="multipart/form-data">
                @csrf
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.Code') }}<span class="text-danger">*</span></label>
                                    <input type="text" id="txtCode" name="txtCode" value="{{ $RegisterEmployeeCode }}">
                                    <span class="text-danger">
                                        @error('txtCode')
                                            {{ $message }}
                                        @enderror
                                    </span>
                                </div>
                            </div>
                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.FirstName') }}<span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="txtFirstName" name="txtFirstName"
                                        value="{{ old('txtFirstName', '') }}">
                                    <span class="text-danger">
                                        @error('txtFirstName')
                                            {{ $message }}
                                        @enderror
                                    </span>
                                </div>
                            </div>
                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.LastName') }}</label>
                                    <input type="text" class="form-control" id="txtLastName" name="txtLastName"
                                        value="{{ old('txtLastName', '') }}">
                                </div>
                            </div>
                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.DOB') }}</label>
                                    <input type="date" class="form-control" id="txtDateOfBirth" name="txtDateOfBirth"
                                        value="{{ old('txtDateOfBirth', '') }}">
                                </div>
                            </div>
                            @php
                                $nextOfKinOptions = [
                                    'Father',
                                    'Mother',
                                    'Brother',
                                    'Sister',
                                    'Son',
                                    'Daughter',
                                    'Uncle',
                                    'Aunt',
                                    'Cousin',
                                    'Nephew',
                                    'Niece',
                                    'Grandfather',
                                    'Grandmother',
                                    'Husband',
                                    'Wife',
                                ];
                            @endphp
                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.NextOfKin') }}</label>
                                    <select class="form-select" id="cmbNextOfKin" name="cmbNextOfKin">
                                        <option value="0">{{ __('sitelabel.SelectNextOfKin') }}</option>
                                        @foreach ($nextOfKinOptions as $kin)
                                            <option value="{{ $kin }}">{{ $kin }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.NextOfKinName') }}</label>
                                    <input type="text" class="form-control" id="txtNextOfKinName" name="txtNextOfKinName"
                                        value="{{ old('txtNextOfKinName', '') }}">
                                </div>
                            </div>
                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.PhoneNo') }}</label>
                                    <input type="text" class="form-control" id="txtEmployeeNumber"
                                        name="txtEmployeeNumber" value="{{ old('txtEmployeeNumber', '') }}">
                                </div>
                            </div>
                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.SecurityCardNo') }}</label>
                                    <input type="text" class="form-control" id="txtSecurityCardNo"
                                        name="txtSecurityCardNo" value="{{ old('txtSecurityCardNo', '') }}">
                                </div>
                            </div>
                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.Email') }}</label>
                                    <input type="email" class="form-control" id="txtEmail" name="txtEmail"
                                        value="{{ old('txtEmail', '') }}">
                                </div>
                            </div>
                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.BloodGroup') }}</label>
                                    <input type="text" class="form-control" id="txtBloodGroup" name="txtBloodGroup"
                                        value="{{ old('txtBloodGroup', '') }}">
                                    <span class="text-danger">
                                        @error('txtBloodGroup')
                                            {{ $message }}
                                        @enderror
                                    </span>
                                </div>
                            </div>
                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.AttendanceMachNo') }}</label>
                                    <input type="text" class="form-control" id="txtAttendanceMachNo"
                                        name="txtAttendanceMachNo" value="{{ old('txtAttendanceMachNo', '') }}">
                                    <span class="text-danger">
                                        @error('txtAttendanceMachNo')
                                            {{ $message }}
                                        @enderror
                                    </span>
                                </div>
                            </div>
                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.CNIC') }}</label>
                                    <input type="text" class="form-control" id="txtCNIC" name="txtCNIC"
                                        value="{{ old('txtCNIC', '') }}">
                                    <span class="text-danger">
                                        @error('txtCNIC')
                                            {{ $message }}
                                        @enderror
                                    </span>
                                </div>
                            </div>
                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.MobileNumber') }}</label>
                                    <input type="text" class="form-control" id="txtMobileNo" name="txtMobileNo"
                                        value="{{ old('txtMobileNo', '') }}">
                                </div>
                            </div>
                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.LandlineNo') }}</label>
                                    <input type="text" class="form-control" id="txtEmergencyNo" name="txtEmergencyNo"
                                        value="{{ old('txtEmergencyNo', '') }}">
                                    <span class="text-danger">
                                        @error('txtEmergencyNo')
                                            {{ $message }}
                                        @enderror
                                    </span>
                                </div>
                            </div>
                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <label for="txtPicture">{{ __('sitelabel.Picture') }}</label>
                                    <input type="file" name="txtPicture" id="txtPicture">
                                </div>
                            </div>
                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <label for="chkStatus">{{ __('sitelabel.Status') }}</label>
                                    <input class="form-check-input" type="checkbox" id="chkStatus" name="chkStatus"
                                        checked>
                                </div>
                            </div>
                            <div class="col-lg-12 col-sm-12 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.CurrentAddress') }}</label>
                                    <textarea class="form-control" id="txtPresentAddress" name="txtPresentAddress">{{ old('txtPresentAddress', '') }}</textarea>
                                </div>
                            </div>
                            <div class="col-lg-12 col-sm-12 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.PermanentAddress') }}</label>
                                    <textarea class="form-control" id="txtPermanentAddress" name="txtPermanentAddress">{{ old('txtPermanentAddress', '') }}</textarea>
                                </div>
                            </div>
                            <div class="col-lg-12 col-sm-12 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.AddressOfNative') }}</label>
                                    <textarea class="form-control" id="txtAddressOfNative" name="txtAddressOfNative">{{ old('txtAddressOfNative', '') }}</textarea>
                                </div>
                            </div>
                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.Nationality') }}</label>
                                    <select class="form-select" id="cmbNationality" name="cmbNationality">
                                        <option value="0">{{ __('sitelabel.SelectNationality') }}</option>
                                        @foreach ($nationality as $item)
                                            <option value="{{ $item->Id }}">{{ $item->Name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.Religion') }}</label>
                                    <select class="form-select" id="cmbReligion" name="cmbReligion">
                                        <option value="0">{{ __('sitelabel.SelectReligion') }}</option>
                                        @foreach ($religion as $item)
                                            <option value="{{ $item->Id }}">{{ $item->Name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            @php
                                $maritalStatusOptions = [
                                    'Single',
                                    'Married',
                                    'Divorced',
                                    'Widowed',
                                    'Separated',
                                    'Engaged',
                                ];
                            @endphp
                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.MaritalStatus') }}</label>
                                    <select class="form-select" id="cmbMaritalStatus" name="cmbMaritalStatus">
                                        <option value="0">{{ __('sitelabel.SelectMaritalStatus') }}</option>
                                        @foreach ($maritalStatusOptions as $status)
                                            <option value="{{ $status }}">{{ $status }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.Gender') }}</label>
                                    <select class="form-select" id="cmbGender" name="cmbGender">
                                        <option value="-1">{{ __('sitelabel.SelectGender') }}</option>
                                        <option value="Male">{{ __('sitelabel.Male') }}</option>
                                        <option value="Female">{{ __('sitelabel.Female') }}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-2 col-sm-4 col-6">
                                <div class="form-group">
                                    <label for="chkEOBI">{{ __('sitelabel.EOBI') }}</label>
                                    <input class="form-check-input" type="checkbox" id="chkEOBI" name="chkEOBI">
                                </div>
                            </div>
                            <div class="col-lg-2 col-sm-4 col-6">
                                <div class="form-group">
                                    <label for="chkNTN">{{ __('sitelabel.NTN') }}</label>
                                    <input class="form-check-input" type="checkbox" id="chkNTN" name="chkNTN">
                                </div>
                            </div>
                            <div class="col-lg-2 col-sm-4 col-6">
                                <div class="form-group">
                                    <label for="chkSSN">{{ __('sitelabel.SocialSecurity') }}</label>
                                    <input class="form-check-input" type="checkbox" id="chkSSN" name="chkSSN">
                                </div>
                            </div>
                            <div class="col-lg-2 col-sm-4 col-6">
                                <div class="form-group">
                                    <label for="chkPF">{{ __('sitelabel.PF') }}</label>
                                    <input class="form-check-input" type="checkbox" id="chkPF" name="chkPF">
                                </div>
                            </div>
                            <div class="col-lg-2 col-sm-4 col-6">
                                <div class="form-group">
                                    <label for="chkOvertime">{{ __('sitelabel.Overtime') }}</label>
                                    <input class="form-check-input" type="checkbox" id="chkOvertime" name="chkOvertime">
                                </div>
                            </div>
                            <div class="col-lg-2 col-sm-4 col-6">
                                <div class="form-group">
                                    <label for="chkHolidayOvertime">{{ __('sitelabel.HolidayOvertime') }}</label>
                                    <input class="form-check-input" type="checkbox" id="chkHolidayOvertime"
                                        name="chkHolidayOvertime">
                                </div>
                            </div>
                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.EOBINumber') }}</label>
                                    <input type="text" class="form-control" id="txtEOBINumber" name="txtEOBINumber"
                                        value="{{ old('txtEOBINumber', '') }}">
                                </div>
                            </div>
                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.NTNNumber') }}</label>
                                    <input type="text" class="form-control" id="txtNTNNumber" name="txtNTNNumber"
                                        value="{{ old('txtNTNNumber', '') }}">
                                </div>
                            </div>
                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.SSNumber') }}</label>
                                    <input type="text" class="form-control" id="txtSSNumber" name="txtSSNumber"
                                        value="{{ old('txtSSNumber', '') }}">
                                </div>
                            </div>
                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.BookingAccountNumber') }}</label>
                                    <input type="text" class="form-control" id="txtBookingAccountNumber"
                                        name="txtBookingAccountNumber" value="{{ old('txtBookingAccountNumber', '') }}">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="tabs" style="background-color: #1649FF">
                            <div class="tab active" data-tab="Job">{{ __('sitelabel.Job') }}</div>
                            <div class="tab" data-tab="Education">{{ __('sitelabel.Education') }}</div>
                            <div class="tab" data-tab="Family">{{ __('sitelabel.Family') }}</div>
                            <div class="tab" data-tab="Reference">{{ __('sitelabel.Reference') }}</div>
                            <div class="tab" data-tab="Skills">{{ __('sitelabel.Skills') }}</div>
                            <div class="tab" data-tab="Salary">{{ __('sitelabel.Salary') }}</div>
                            <div class="tab" data-tab="Leave">{{ __('sitelabel.Leave') }}</div>
                            <div class="tab" data-tab="Bank">{{ __('sitelabel.Bank') }}</div>
                        </div>
                        <div class="tab-container">
                            <div class="tab-content active" id="Job">
                                <div class="card-body">
                                    <h4 style="margin-bottom:1rem">{{ __('sitelabel.JobInfo') }}</h4>
                                    <div class="row">
                                        <div class="col-lg-4 col-sm-6 col-12">
                                            <div class="form-group">
                                                <label>{{ __('sitelabel.Company') }}</label>
                                                <select class="form-select" id="cmbCompany" name="cmbCompany">
                                                    <option value="0">{{ __('sitelabel.SelectCompany') }}</option>
                                                    @foreach ($company as $item)
                                                        <option value="{{ $item->Id }}">{{ $item->Name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-lg-4 col-sm-6 col-12">
                                            <div class="form-group">
                                                <label>{{ __('sitelabel.Group') }}</label>
                                                <select class="form-select" id="cmbGroup" name="cmbGroup">
                                                    <option value="0">{{ __('sitelabel.SelectGroup') }}</option>
                                                    @foreach ($groups as $item)
                                                        <option value="{{ $item->Id }}">{{ $item->Name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-lg-4 col-sm-6 col-12">
                                            <div class="form-group">
                                                <label>{{ __('sitelabel.Department') }}</label>
                                                <select class="form-select" id="cmbDepartment" name="cmbDepartment">
                                                    <option value="0">{{ __('sitelabel.SelectDepartment') }}
                                                    </option>
                                                    @foreach ($department as $item)
                                                        <option value="{{ $item->Id }}">{{ $item->Name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-lg-4 col-sm-6 col-12">
                                            <div class="form-group">
                                                <label>{{ __('sitelabel.Designation') }}</label>
                                                <select class="form-select" id="cmbDesignation" name="cmbDesignation">
                                                    <option value="0">{{ __('sitelabel.SelectDesignation') }}
                                                    </option>
                                                    @foreach ($designation as $item)
                                                        <option value="{{ $item->Id }}">{{ $item->Name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-lg-4 col-sm-6 col-12">
                                            <div class="form-group">
                                                <label>{{ __('sitelabel.Grade') }}</label>
                                                <select class="form-select" id="cmbGrade" name="cmbGrade">
                                                    <option value="0">{{ __('sitelabel.SelectGrade') }}</option>
                                                    @foreach ($grades as $item)
                                                        <option value="{{ $item->Id }}">{{ $item->Name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-lg-4 col-sm-6 col-12">
                                            <div class="form-group">
                                                <label>{{ __('sitelabel.Category') }}</label>
                                                <select class="form-select" id="cmbCategory" name="cmbCategory">
                                                    <option value="0">{{ __('sitelabel.SelectCategory') }}</option>
                                                    @foreach ($category as $item)
                                                        <option value="{{ $item->Id }}">{{ $item->Name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-lg-4 col-sm-6 col-12">
                                            <div class="form-group">
                                                <label>{{ __('sitelabel.PaymentType') }}</label>
                                                <select class="form-select" id="cmbPaymentType" name="cmbPaymentType">
                                                    <option value="0">{{ __('sitelabel.SelectPaymentType') }}
                                                    </option>
                                                    @foreach ($paymenttype as $item)
                                                        <option value="{{ $item->Id }}">{{ $item->Name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-lg-4 col-sm-6 col-12">
                                            <div class="form-group">
                                                <label>{{ __('sitelabel.DOJ') }}</label>
                                                <input type="date" class="form-control" id="txtDateOfJoining"
                                                    name="txtDateOfJoining" value="{{ old('txtDateOfJoining', '') }}">
                                                <span class="text-danger">
                                                    @error('txtDateOfJoining')
                                                        {{ $message }}
                                                    @enderror
                                                </span>
                                            </div>
                                        </div>
                                        <div class="col-lg-4 col-sm-6 col-12">
                                            <div class="form-group">
                                                <label>{{ __('sitelabel.EmployeeType') }}</label>
                                                <select class="form-select" id="cmbEmployeeType" name="cmbEmployeeType">
                                                    <option value="0">{{ __('sitelabel.SelectEmployeeType') }}
                                                    </option>
                                                    @foreach ($employeetype as $item)
                                                        <option value="{{ $item->Id }}">{{ $item->Name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-lg-4 col-sm-6 col-12">
                                            <div class="form-group">
                                                <label>{{ __('sitelabel.ReportingTo') }}</label>
                                                <select class="form-select" id="cmbReportingTo" name="cmbReportingTo">
                                                    <option value="0">{{ __('sitelabel.SelectReportingTo') }}
                                                    </option>
                                                    @foreach ($reportingto as $item)
                                                        <option value="{{ $item->Id }}">{{ $item->FullName }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-lg-4 col-sm-6 col-12">
                                            <div class="form-group">
                                                <label>{{ __('sitelabel.WorkHrs') }}</label>
                                                <input type="number" class="form-control" name="txtWorkHrs"
                                                    id="txtWorkHrs">
                                            </div>
                                        </div>
                                    </div>
                                    <button type="button" class="btn btn-secondary prev-tab" disabled>Previous</button>
                                    <button type="button" class="btn btn-primary next-tab">Next</button>
                                </div>
                            </div>
                            <div class="tab-content" id="Education">
                                <div class="card-body">
                                    <h4 style="margin-bottom:1rem">{{ __('sitelabel.EducationInfo') }}</h4>
                                    <input type="hidden" name="rowsEduData" id="rowsEduData">
                                    <div class="row mt-1">
                                        <div class="col-lg-12">
                                            <table class="table table-bordered" id="degreeTable1">
                                                <thead style="background-color: #1649FF">
                                                    <tr>
                                                        <th style="color: #fff">{{ __('sitelabel.DegreeName') }}</th>
                                                        <th style="color: #fff">{{ __('sitelabel.DegreeTitle') }}</th>
                                                        <th style="color: #fff">{{ __('sitelabel.MajorSubject') }}</th>
                                                        <th style="color: #fff">{{ __('sitelabel.InstituteName') }}</th>
                                                        <th style="color: #fff; width:100px">
                                                            {{ __('sitelabel.CompletionYear') }}</th>
                                                        <th style="color: #fff">{{ __('sitelabel.DegreeLevel') }}</th>
                                                        <th style="color: #fff">{{ __('sitelabel.Action') }}</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr style="background-color: #C0C0C0">
                                                        <td><input type="text" class="form-control"
                                                                id="txtDegreeName">
                                                        </td>
                                                        <td><input type="text" class="form-control"
                                                                id="txtDegreeTitle">
                                                        </td>
                                                        <td><input type="text" class="form-control"
                                                                id="txtMajorSubject">
                                                        </td>
                                                        <td><input type="text" class="form-control"
                                                                id="txtInstituteName">
                                                        </td>
                                                        <td><input type="number" class="form-control"
                                                                id="txtCompletionYear"></td>
                                                        <td><input type="text" class="form-control"
                                                                id="txtDegreeLevel">
                                                        </td>
                                                        <td><button type="button" class="btn btn-success"
                                                                id="addEduButton">{{ __('sitelabel.Add') }}</button></td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="row mt-4">
                                        <div class="col-lg-12">
                                            <table class="table table-bordered" id="degreeTable2">
                                                <thead style="background-color: #C0C0C0">
                                                    <tr>
                                                        <th>{{ __('sitelabel.DegreeName') }}</th>
                                                        <th>{{ __('sitelabel.DegreeTitle') }}</th>
                                                        <th>{{ __('sitelabel.MajorSubject') }}</th>
                                                        <th>{{ __('sitelabel.InstituteName') }}</th>
                                                        <th>{{ __('sitelabel.CompletionYear') }}</th>
                                                        <th>{{ __('sitelabel.DegreeLevel') }}</th>
                                                        <th>{{ __('sitelabel.Action') }}</th>
                                                    </tr>
                                                </thead>
                                                <tbody></tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <button type="button" class="btn btn-secondary prev-tab">Previous</button>
                                    <button type="button" class="btn btn-primary next-tab">Next</button>
                                </div>
                            </div>
                            <div class="tab-content" id="Family">
                                <div class="card-body">
                                    <h4 style="margin-bottom:1rem">{{ __('sitelabel.FamilyInfo') }}</h4>
                                    <input type="hidden" name="rowsFamData" id="rowsFamData">
                                    <div class="row mt-1">
                                        <div class="col-lg-12">
                                            <table class="table table-bordered" id="familyTable1">
                                                <thead style="background-color: #1649FF">
                                                    <tr>
                                                        <th style="color: #fff">{{ __('sitelabel.FamilyMemberName') }}
                                                        </th>
                                                        <th style="color: #fff">{{ __('sitelabel.Relation') }}</th>
                                                        <th style="color: #fff">{{ __('sitelabel.Address') }}</th>
                                                        <th style="color: #fff">{{ __('sitelabel.Profession') }}</th>
                                                        <th style="color: #fff">{{ __('sitelabel.BirthYear') }}</th>
                                                        <th style="color: #fff">{{ __('sitelabel.SupportHim') }}</th>
                                                        <th style="color: #fff">{{ __('sitelabel.Living') }}</th>
                                                        <th style="color: #fff">{{ __('sitelabel.Designation') }}</th>
                                                        <th style="color: #fff">{{ __('sitelabel.Action') }}</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr style="background-color: #C0C0C0">
                                                        <td><input type="text" class="form-control"
                                                                id="txtFamilyMemberName"></td>
                                                        <td>
                                                            <select class="form-select" name="cmbFamilyRelation"
                                                                id="cmbFamilyRelation">
                                                                <option value="0">
                                                                    {{ __('sitelabel.SelectRelation') }}</option>
                                                                @foreach ($nextOfKinOptions as $kin)
                                                                    <option value="{{ $kin }}">
                                                                        {{ $kin }}</option>
                                                                @endforeach
                                                            </select>
                                                        </td>
                                                        <td><input type="text" class="form-control"
                                                                id="txtFamilyAddress"></td>
                                                        <td><input type="text" class="form-control"
                                                                id="txtFamilyProfession"></td>
                                                        <td><input type="number" class="form-control"
                                                                id="txtFamilyBirthYear"></td>
                                                        <td>
                                                            <select class="form-select" name="cmbFamilySupportHim"
                                                                id="cmbFamilySupportHim">
                                                                <option value="0">
                                                                    {{ __('sitelabel.SelectSupportHim') }}</option>
                                                                <option value="Yes">Yes</option>
                                                                <option value="No">No</option>
                                                            </select>
                                                        </td>
                                                        <td><input type="text" class="form-control"
                                                                id="txtFamilyLiving"></td>
                                                        <td><input type="text" class="form-control"
                                                                id="txtFamilyDesignation"></td>
                                                        <td><button type="button" class="btn btn-success"
                                                                id="addFamButton">{{ __('sitelabel.Add') }}</button></td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="row mt-4">
                                        <div class="col-lg-12">
                                            <table class="table table-bordered" id="familyTable2">
                                                <thead style="background-color: #C0C0C0">
                                                    <tr>
                                                        <th>{{ __('sitelabel.FamilyMemberName') }}</th>
                                                        <th>{{ __('sitelabel.Relation') }}</th>
                                                        <th>{{ __('sitelabel.Address') }}</th>
                                                        <th>{{ __('sitelabel.Profession') }}</th>
                                                        <th>{{ __('sitelabel.BirthYear') }}</th>
                                                        <th>{{ __('sitelabel.SupportHim') }}</th>
                                                        <th>{{ __('sitelabel.Living') }}</th>
                                                        <th>{{ __('sitelabel.Designation') }}</th>
                                                        <th>{{ __('sitelabel.Action') }}</th>
                                                    </tr>
                                                </thead>
                                                <tbody></tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <button type="button" class="btn btn-secondary prev-tab">Previous</button>
                                    <button type="button" class="btn btn-primary next-tab">Next</button>
                                </div>
                            </div>
                            <div class="tab-content" id="Reference">
                                <div class="card-body">
                                    <h4 style="margin-bottom:1rem">{{ __('sitelabel.ReferenceInfo') }}</h4>
                                    <input type="hidden" name="rowsRefData" id="rowsRefData">
                                    <div class="row mt-1">
                                        <div class="col-lg-12">
                                            <table class="table table-bordered" id="referenceTable1">
                                                <thead style="background-color: #1649FF">
                                                    <tr>
                                                        <th style="color: #fff">{{ __('sitelabel.Name') }}</th>
                                                        <th style="color: #fff">{{ __('sitelabel.PhoneNo') }}</th>
                                                        <th style="color: #fff">{{ __('sitelabel.MobileNo') }}</th>
                                                        <th style="color: #fff">{{ __('sitelabel.Address') }}</th>
                                                        <th style="color: #fff">{{ __('sitelabel.Action') }}</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr style="background-color: #C0C0C0">
                                                        <td><input type="text" class="form-control"
                                                                id="txtReferenceName"></td>
                                                        <td><input type="text" class="form-control"
                                                                id="txtReferencePhoneNo"></td>
                                                        <td><input type="text" class="form-control"
                                                                id="txtReferenceMobileNo"></td>
                                                        <td><input type="text" class="form-control"
                                                                id="txtReferenceAddress"></td>
                                                        <td><button type="button" class="btn btn-success"
                                                                id="addRefButton">{{ __('sitelabel.Add') }}</button></td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="row mt-4">
                                        <div class="col-lg-12">
                                            <table class="table table-bordered" id="referenceTable2">
                                                <thead style="background-color: #C0C0C0">
                                                    <tr>
                                                        <th>{{ __('sitelabel.Name') }}</th>
                                                        <th>{{ __('sitelabel.PhoneNo') }}</th>
                                                        <th>{{ __('sitelabel.MobileNo') }}</th>
                                                        <th>{{ __('sitelabel.Address') }}</th>
                                                        <th>{{ __('sitelabel.Action') }}</th>
                                                    </tr>
                                                </thead>
                                                <tbody></tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <button type="button" class="btn btn-secondary prev-tab">Previous</button>
                                    <button type="button" class="btn btn-primary next-tab">Next</button>
                                </div>
                            </div>
                            <div class="tab-content" id="Skills">
                                <div class="card-body">
                                    <h4 style="margin-bottom:1rem">{{ __('sitelabel.SkillsInfo') }}</h4>
                                    <input type="hidden" name="rowsSkillData" id="rowsSkillData">
                                    <div class="row mt-1">
                                        <div class="col-lg-12">
                                            <table class="table table-bordered" id="skillTable1">
                                                <thead style="background-color: #1649FF">
                                                    <tr>
                                                        <th style="color: #fff">{{ __('sitelabel.Name') }}</th>
                                                        <th style="color: #fff; width:20%">
                                                            {{ __('sitelabel.Action') }}</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr style="background-color: #C0C0C0">
                                                        <td>
                                                            <select class="form-select" name="cmbSkillName"
                                                                id="cmbSkillName">
                                                                <option value="-1">
                                                                    {{ __('sitelabel.SelectSkill') }}</option>
                                                                @foreach ($skills as $item)
                                                                    <option value="{{ $item->Id }}">
                                                                        {{ $item->Name }}</option>
                                                                @endforeach
                                                            </select>
                                                        </td>
                                                        <td><button type="button" class="btn btn-success"
                                                                id="addSkillButton">{{ __('sitelabel.Add') }}</button>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="row mt-4">
                                        <div class="col-lg-12">
                                            <table class="table table-bordered" id="skillTable2">
                                                <thead style="background-color: #C0C0C0">
                                                    <tr>
                                                        <th>{{ __('sitelabel.Name') }}</th>
                                                        <th style="width:20%">{{ __('sitelabel.Action') }}</th>
                                                    </tr>
                                                </thead>
                                                <tbody></tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <button type="button" class="btn btn-secondary prev-tab">Previous</button>
                                    <button type="button" class="btn btn-primary next-tab">Next</button>
                                </div>
                            </div>
                            <div class="tab-content" id="Salary">
                                <div class="card-body">
                                    <h4 style="margin-bottom:1rem">{{ __('sitelabel.SalaryInfo') }}</h4>
                                    <div class="d-flex gap-5">
                                        <div class="salary-allowance" style="width: 100%;">
                                            <h5 style="margin-bottom:1rem">{{ __('sitelabel.Allowance') }}</h5>
                                            <div class="row mt-1">
                                                <div class="col-lg-12">
                                                    <table class="table table-bordered">
                                                        <thead style="background-color: #1649FF">
                                                            <tr>
                                                                <th style="color: #fff">
                                                                    {{ __('sitelabel.SerialNumber') }}</th>
                                                                <th style="color: #fff">{{ __('sitelabel.Code') }}</th>
                                                                <th style="color: #fff">{{ __('sitelabel.Name') }}</th>
                                                                <th style="color: #fff">{{ __('sitelabel.Amount') }}</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            @foreach ($allowance as $item)
                                                                <tr>
                                                                    <td>{{ $loop->iteration }}</td>
                                                                    <td>
                                                                        <input type="hidden" class="form-control"
                                                                            name="allowance[{{ $loop->index }}][id]"
                                                                            value="{{ $item->Id }}">{{ $item->Code }}
                                                                    </td>
                                                                    <td>{{ $item->Name }}</td>
                                                                    <td>
                                                                        <input type="number" class="form-control amount"
                                                                            name="allowance[{{ $loop->index }}][amount]"
                                                                            step="0.01" value="0">
                                                                    </td>
                                                                </tr>
                                                            @endforeach
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="salary-deduction" style="width: 100%;">
                                            <h5 style="margin-bottom:1rem">{{ __('sitelabel.Deduction') }}</h5>
                                            <div class="row mt-1">
                                                <div class="col-lg-12">
                                                    <table class="table table-bordered">
                                                        <thead style="background-color: #1649FF">
                                                            <tr>
                                                                <th style="color: #fff">
                                                                    {{ __('sitelabel.SerialNumber') }}</th>
                                                                <th style="color: #fff">{{ __('sitelabel.Code') }}</th>
                                                                <th style="color: #fff">{{ __('sitelabel.Name') }}</th>
                                                                <th style="color: #fff">{{ __('sitelabel.Amount') }}</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            @foreach ($deduction as $item)
                                                                <tr>
                                                                    <td>{{ $loop->iteration }}</td>
                                                                    <td>
                                                                        <input type="hidden" class="form-control"
                                                                            name="deduction[{{ $loop->index }}][id]"
                                                                            value="{{ $item->Id }}">{{ $item->Code }}
                                                                    </td>
                                                                    <td>{{ $item->Name }}</td>
                                                                    <td>
                                                                        <input type="number" class="form-control amount"
                                                                            name="deduction[{{ $loop->index }}][amount]"
                                                                            step="0.01" value="0">
                                                                    </td>
                                                                </tr>
                                                            @endforeach
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <button type="button" class="btn btn-secondary prev-tab">Previous</button>
                                    <button type="button" class="btn btn-primary next-tab">Next</button>
                                </div>
                            </div>
                            <div class="tab-content" id="Leave">
                                <div class="card-body">
                                    <h4 style="margin-bottom:1rem">{{ __('sitelabel.LeaveInfo') }}</h4>
                                    <div class="row mt-1">
                                        <div class="col-lg-12">
                                            <table class="table table-bordered">
                                                <thead style="background-color: #1649FF">
                                                    <tr>
                                                        <th style="color: #fff">
                                                            {{ __('sitelabel.SerialNumber') }}</th>
                                                        <th style="color: #fff">{{ __('sitelabel.Code') }}</th>
                                                        <th style="color: #fff">{{ __('sitelabel.Name') }}</th>
                                                        <th style="color: #fff">{{ __('sitelabel.AllowedLeaves') }}</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach ($leave as $item)
                                                        <tr>
                                                            <td>{{ $loop->iteration }}</td>
                                                            <td>
                                                                <input type="hidden" class="form-control"
                                                                    name="leave[{{ $loop->index }}][id]"
                                                                    value="{{ $item->Id }}">{{ $item->Code }}
                                                            </td>
                                                            <td>{{ $item->Name }}</td>
                                                            <td>
                                                                <input type="number" class="form-control allowedleave"
                                                                    name="leave[{{ $loop->index }}][allowedleave]"
                                                                    step="0.01" value="0">
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <button type="button" class="btn btn-secondary prev-tab">Previous</button>
                                    <button type="button" class="btn btn-primary next-tab">Next</button>
                                </div>
                            </div>
                            <div class="tab-content" id="Bank">
                                <div class="card-body">
                                    <h4 style="margin-bottom:1rem">{{ __('sitelabel.BankInfo') }}</h4>
                                    <div class="row">
                                        <div class="col-lg-4 col-sm-6 col-12">
                                            <div class="form-group">
                                                <label>{{ __('sitelabel.Bank') }}</label>
                                                <input type="text" class="form-control" id="txtBank" name="txtBank"
                                                    value="{{ old('txtBank', '') }}">
                                            </div>
                                        </div>
                                        <div class="col-lg-4 col-sm-6 col-12">
                                            <div class="form-group">
                                                <label>{{ __('sitelabel.Branch') }}</label>
                                                <input type="text" class="form-control" id="txtBranch"
                                                    name="txtBranch" value="{{ old('txtBranch', '') }}">
                                            </div>
                                        </div>
                                        <div class="col-lg-4 col-sm-6 col-12">
                                            <div class="form-group">
                                                <label>{{ __('sitelabel.BranchCode') }}</label>
                                                <input type="text" class="form-control" id="txtBranchCode"
                                                    name="txtBranchCode" value="{{ old('txtBranchCode', '') }}">
                                            </div>
                                        </div>
                                        <div class="col-lg-4 col-sm-6 col-12">
                                            <div class="form-group">
                                                <label>{{ __('sitelabel.AccountTitle') }}</label>
                                                <input type="text" class="form-control" id="txtAccountTitle"
                                                    name="txtAccountTitle" value="{{ old('txtAccountTitle', '') }}">
                                            </div>
                                        </div>
                                        <div class="col-lg-4 col-sm-6 col-12">
                                            <div class="form-group">
                                                <label>{{ __('sitelabel.AccountNumber') }}</label>
                                                <input type="text" class="form-control" id="txtAccountNumber"
                                                    name="txtAccountNumber" value="{{ old('txtAccountNumber', '') }}">
                                            </div>
                                        </div>
                                    </div>
                                    <button type="button" class="btn btn-secondary prev-tab">Previous</button>
                                    <button type="button" class="btn btn-primary next-tab" disabled>Next</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-12">
                        <button type="submit" class="btn btn-primary">{{ __('sitelabel.Save') }}</button>
                        <button type="button" onclick="javascript:window.location='{{ url('/employee') }}';"
                            class="btn btn-dark">{{ __('sitelabel.Back') }}</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection
@section('script')