@canany(['hr_manager_hq', 'isadmin'])
    <div>
        <style>
            #container {
                max-width: 550px;
            }

            .step-container {
                position: relative;
                text-align: center;
                transform: translateY(-43%);
            }

            .step-circle {
                width: 30px;
                height: 30px;
                border-radius: 50%;
                background-color: #fff;
                border: 2px solid #007bff;
                line-height: 30px;
                font-weight: bold;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-bottom: 10px;
                cursor: pointer;
                /* Added cursor pointer */
            }

            .step-line {
                position: absolute;
                top: 16px;
                left: 50px;
                width: calc(100% - 100px);
                height: 2px;
                background-color: #007bff;
                z-index: -1;
            }

            #multi-step-form {
                overflow-x: hidden;
            }
        </style>
        @php
            $authCheck = Auth::user();
        @endphp
        @if ($authCheck->add_employee || $authCheck->is_hr_manager || $authCheck->is_hr_hq)
            <form>
                <div x-data="{ currentStep: 1, totalSteps: 2 }">

                    <div class="row mb-2 pt-4">
                        <div class="col-sm-12">
                            <div class="progress px-1" style="height: 3px;">
                                <div class="progress-bar" role="progressbar"
                                    :style="{ width: `${(currentStep - 1) * (100 / totalSteps )}%` }" aria-valuenow="66"
                                    aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <div class="step-container d-flex justify-content-between">
                                <div class="step-circle" @click="currentStep = 1" wire:click="SaveDraft"
                                    @if ($errors->has('data.name') || $errors->has('data.email')) style="border: 2px solid #ff0000;" @endif>1</div>
                                <div class="step-circle" @click="currentStep = 2" wire:click="SaveDraft"
                                    @if (
                                        $errors->has('data.jobtitle') ||
                                            $errors->has('data.employee_type') ||
                                            $errors->has('data.person_type') ||
                                            $errors->has('data.is_director') ||
                                            $errors->has('data.company') ||
                                            $errors->has('data.department') ||
                                            $errors->has('data.division') ||
                                            $errors->has('data.role') ||
                                            $errors->has('data.team') ||
                                            $errors->has('data.location') ||
                                            $errors->has('data.fullparttime') ||
                                            $errors->has('data.weeklyhours') ||
                                            $errors->has('data.holiday_assign') ||
                                            $errors->has('data.holiday_max') ||
                                            $errors->has('data.holiday_increasement') ||
                                            $errors->has('data.receive_statutory_holidays') ||
                                            $errors->has('data.join_date')) style="border: 2px solid #ff0000;" @endif>2</div>
                                <div class="step-circle" @click="currentStep = 3" wire:click="SaveDraft">3</div>
                            </div>
                        </div>
                    </div>


                    <div class="row mb-2">
                        <div class="col-sm-12">
                            <div class="text-right small">
                                Asterisk (<span class="text-danger">*</span>) is required fields
                            </div>
                        </div>
                    </div>

                    <div x-show="currentStep === 1">
                        <h2>Personal</h2>
                        <div class="row mb-2 p-2">
                            <div class="col-sm-12">
                                <button type="button" class="btn btn-secondary" wire:click="createVacancy">New
                                    Vacancy</button>
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-sm-3">
                                <label for="titleID">Title:</label>
                                <select id="titleID" name="title" wire:model="data.title" class="custom-select">
                                    <option value="N/A">Please select title</option>
                                    <option value="Mr">Mr</option>
                                    <option value="Mrs">Mrs</option>
                                    <option value="Miss">Miss</option>
                                    <option value="Ms">Ms</option>
                                    <option value="Dr">Dr</option>
                                    <option value="Prof">Prof</option>
                                </select>

                            </div>
                            <div class="col-sm-9">
                                <label for="nameID">Full Names:<span class="text-danger">*</span></label>
                                <input id="nameID" type="text"
                                    class="form-control @error('data.name') is-invalid @enderror" wire:model="data.name"
                                    placeholder="Full Names or New vacancy" value="{{ $data['name'] }}">
                                <div class="text-danger">
                                    @error('data.name')
                                        {{ $message }}
                                    @enderror
                                </div>
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-sm-12">
                                <label id="emailIDLabel" class="w-100">Email:<span class="text-danger">*</span>
                                    <input type="email" id="emailID"
                                        class="form-control @error('data.email') is-invalid @enderror"
                                        wire:model="data.email" placeholder="Email address" value="{{ $data['email'] }}">
                                </label>
                                <input type=checkbox name="email_change" id="email_change" value="1"
                                    wire:model="data.email_change" wire:change="useEXT"> <label for="email_change">use
                                    #EXT#</label>
                                <div class="text-danger">
                                    @error('data.email')
                                        {{ $message }}
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>

                    <div x-show="currentStep === 2">
                        <h2>Job</h2>
                        <div class="row mb-2">
                            <div class="col-sm-3">
                                <label for="jobtitleID">Job Title:</label>
                                <input id="jobtitleID" wire:model="data.jobtitle"
                                    class="form-control @error('data.jobtitle') is-invalid @enderror"
                                    placeholder="E.G. Project Manager" type="text" value="">
                                <div class="text-danger">
                                    @error('data.jobtitle')
                                        {{ $message }}
                                    @enderror
                                </div>
                            </div>

                            <div class="col-sm-3">
                                <label for="employeetypeID">Employee Type:</label>
                                <select id="employeetypeID"
                                    class="custom-select @error('data.employee_type') is-invalid @enderror"
                                    wire:model="data.employee_type">
                                    <option value="" selected>Please select employee type</option>
                                    <option value="Permanent">Permanent</option>
                                    <option value="Temporary">Temporary</option>
                                    <option value="Contract">Contract</option>
                                    <option value="Intern">Intern</option>
                                    <option value="Volunteer">Volunteer</option>
                                </select>
                                <div class="text-danger">
                                    @error('data.employee_type')
                                        {{ $message }}
                                    @enderror
                                </div>
                            </div>

                            <div class="col-sm-3">
                                <label for="persontypeID">Person Type:</label>
                                <select id="persontypeID"
                                    class="custom-select @error('data.person_type') is-invalid @enderror"
                                    wire:model="data.person_type">
                                    <option value="" selected>Please select person type</option>
                                    <option value="Employee">Employee</option>
                                    <option value="Contractor">Contractor</option>
                                    <option value="Employer">Employer</option>
                                </select>
                                <div class="text-danger">
                                    @error('data.person_type')
                                        {{ $message }}
                                    @enderror
                                </div>
                            </div>

                            <div class="col-sm-3">
                                <label for="isdirectorID">Is Director?</label>
                                <select id="isdirectorID"
                                    class="custom-select @error('data.is_director') is-invalid @enderror"
                                    wire:model="data.is_director">
                                    <option value="" selected>Please select is director</option>
                                    <option value="0">No</option>
                                    <option value="1">Yes</option>
                                </select>
                                <div class="text-danger">
                                    @error('data.is_director')
                                        {{ $message }}
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row mb-2">
                            <div class="col-sm-3">
                                <label for="companyID">Company:</label>
                                <select id="companyID" wire:model="data.company"
                                    class="custom-select @error('data.company') is-invalid @enderror">
                                    <option value="" selected>Please select company</option>
                                    @foreach ($companies as $id => $comp)
                                        <option value="{{ $id }}">{{ $comp }}</option>
                                    @endforeach
                                    </option>
                                </select>
                                <div class="text-danger">
                                    @error('data.company')
                                        {{ $message }}
                                    @enderror
                                </div>
                            </div>

                            <div class="col-sm-3">
                                <label for="deptID">Department:</label>
                                <select id="deptID" wire:model="data.department"
                                    class="custom-select @error('data.department') is-invalid @enderror">
                                    <option value="" selected>Please select department</option>
                                    @foreach ($departments as $id => $dept)
                                        <option value="{{ $id }}">{{ $dept }}</option>
                                    @endforeach
                                </select>
                                <div class="text-danger">
                                    @error('data.department')
                                        {{ $message }}
                                    @enderror
                                </div>
                            </div>

                            <div class="col-sm-3">
                                <label for="diviID">Division:</label>
                                <select id="diviID" wire:model="data.division"
                                    class="custom-select @error('data.division') is-invalid @enderror">
                                    <option value="" selected>Please select division</option>
                                    @foreach ($divisions as $id => $divi)
                                        <option value="{{ $id }}">{{ $divi }}</option>
                                    @endforeach
                                </select>
                                <div class="text-danger">
                                    @error('data.division')
                                        {{ $message }}
                                    @enderror
                                </div>
                            </div>

                            <div class="col-sm-3">
                                <label for="roleID">Role:</label>
                                <select id="roleID" wire:model="data.role"
                                    class="custom-select @error('data.role') is-invalid @enderror">
                                    <option value="">Please select role</option>
                                    @foreach ($roles as $id => $role)
                                        <option value="{{ $id }}">{{ $role }}</option>
                                    @endforeach
                                </select>
                                <div class="text-danger">
                                    @error('data.role')
                                        {{ $message }}
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-sm-3">
                                <label for="teamID">Team:</label>
                                <select id="teamID" wire:model="data.team"
                                    class="custom-select @error('data.team') is-invalid @enderror">
                                    <option value="">Please select the team</option>
                                    @foreach ($teams as $id => $team)
                                        <option value="{{ $id }}">{{ $team }}</option>
                                    @endforeach
                                </select>
                                <div class="text-danger">
                                    @error('data.team')
                                        {{ $message }}
                                    @enderror
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <label for="LevelID">Level:</label>
                                <select id="LevelID" wire:model="data.level"
                                    class="custom-select @error('data.level') is-invalid @enderror">
                                    <option value="">Please select level</option>
                                    <option value="Director">Director</option>
                                    <option value="Middle Manager">Middle Manager</option>
                                    <option value="Senior Manager">Senior Manager</option>
                                    <option value="Snr Planner">Snr Planner</option>
                                    <option value="Team Leader">Team Leader</option>
                                    <option value="Team Member">Team Member</option>
                                    <option value="Apprentice">Apprentice</option>
                                </select>
                                <div class="text-danger">
                                    @error('data.level')
                                        {{ $message }}
                                    @enderror
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <label for="line_managerID">Line Manager:</label>
                                <select id="line_managerID" wire:model="data.line_manager"
                                    class="custom-select @error('data.line_manager') is-invalid @enderror">
                                    <option value="">Please select line manager</option>
                                    @foreach ($line_manager as $id => $name)
                                        <option value="{{ $id }}">{{ $name }}</option>
                                    @endforeach
                                </select>
                                <div class="text-danger">
                                    @error('data.reportto')
                                        {{ $message }}
                                    @enderror
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <label for="locationID">Location:</label>
                                <select id="locationID" wire:model="data.location"
                                    class="custom-select @error('data.location') is-invalid @enderror">
                                    <option value="">Please select Location</option>
                                    @foreach ($locations as $id => $loc)
                                        <option value="{{ $id }}">{{ $loc }}</option>
                                    @endforeach
                                </select>
                                <div class="text-danger">
                                    @error('data.location')
                                        {{ $message }}
                                    @enderror
                                </div>
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-sm-6">
                                <label for="fullparttimeID">Full Time/Part Time:</label>
                                <select id="fullparttimeID" wire:model="data.fullparttime"
                                    class="custom-select @error('data.fullparttime') is-invalid @enderror"
                                    wire:change="updateWorkingDays">
                                    <option value="" selected>Please select full/part time</option>
                                    <option value="Full Time">Full Time</option>
                                    <option value="Part Time">Part Time</option>
                                </select>
                                <div class="text-danger">
                                    @error('data.fullparttime')
                                        {{ $message }}
                                    @enderror
                                </div>

                                <div id="montofriID" class="row" style="display:d-flex;">

                                    @foreach (range(1, 7) as $day)
                                        <div class="col-sm-1">
                                            <label for="day{{ $day }}">
                                                @php
                                                    // Get the actual weekday label based on the day
                                                    $dayLabel = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'][
                                                        $day - 1
                                                    ];
                                                @endphp
                                                {{ $dayLabel }}
                                            </label><br>
                                            <input id="day{{ $day }}"
                                                class="@error('data.workingdays') is-invalid @enderror" type="checkbox"
                                                wire:model="data.workingdays" value="{{ $day }}"
                                                @checked(in_array($day, $data['workingdays']))>
                                        </div>
                                    @endforeach

                                </div>
                                @script
                                    <script>
                                        $wire.on('update-checkboxes', (data) => {

                                            // Get all the checkboxes
                                            let checkboxes = document.querySelectorAll('#montofriID input[type="checkbox"]');

                                            // Loop through each checkbox and check/uncheck based on whether the value exists in the workingDays array
                                            checkboxes.forEach((checkbox) => {
                                                const dayValue = parseInt(checkbox.value);

                                                // Check if this checkbox value exists in the workingDays array
                                                checkbox.checked = data[0].workingdays.includes(dayValue);
                                            });
                                        });
                                    </script>
                                @endscript

                                <div class="text-danger">
                                    @error('data.workingdays')
                                        {{ $message }}
                                    @enderror
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <label for="weeklyID">Weekly Hours?</label>
                                <input id="weeklyID" type="text"
                                    class="form-control @error('data.weeklyhours') is-invalid @enderror"
                                    wire:model="data.weeklyhours" placeholder="Weekly Hours" value="">
                                <div class="text-danger">
                                    @error('data.weeklyhours')
                                        {{ $message }}
                                    @enderror
                                </div>
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-sm-6">
                                <label for="holidayID">Holiday:</label>
                                <select id="holidayID" wire:model="data.holiday_assign"
                                    class="custom-select @error('data.holiday_assign') is-invalid @enderror">
                                    <option value="" selected>Please select holiday</option>
                                    <option value="10">10</option>
                                    <option value="14">14</option>
                                    <option value="20">20</option>
                                    <option value="21">21</option>
                                    <option value="22">22</option>
                                    <option value="23">23</option>
                                    <option value="24">24</option>
                                    <option value="25">25</option>
                                    <option value="26">26</option>
                                    <option value="other">Other</option>
                                </select>
                                <div class="text-danger">
                                    @error('data.holiday_assign')
                                        {{ $message }}
                                    @enderror
                                </div>
                            </div>
                            {{-- JavaScript --}}

                            <div id="otherholidayID" class="col-sm-6" style="display: none;">
                                <label for="otherID">Other Holiday:</label>
                                <input id="otherID" type="text"
                                    class="form-control @error('data.holidayother') is-invalid @enderror"
                                    placeholder="Enter the number for the holiday" wire:model="data.holidayother"
                                    value="">
                                <div class="text-danger">
                                    @error('data.holidayother')
                                        {{ $message }}
                                    @enderror
                                </div>
                            </div>

                            <script>
                                $(document).ready(function() {
                                    $('#holidayID').change(function() {
                                        if ($('#holidayID').val() === 'other') {
                                            $('#otherholidayID').show();
                                        } else {
                                            $('#otherholidayID').hide();
                                        }
                                    });
                                });
                            </script>
                        </div>
                        <div class="row mb-2">
                            <div class="col-sm-4">
                                <label for="holidaymaxID">Holiday max:</label>
                                <input id="holidaymaxID" type="number" wire:model="data.holiday_max"
                                    class="form-control @error('data.holiday_max') is-invalid @enderror"
                                    placeholder="Enter max holiday e.g. 25">
                                <div class="text-danger">
                                    @error('data.holiday_max')
                                        {{ $message }}
                                    @enderror
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <label for="holiday_incID">Holiday Increment</label>
                                <select id="holiday_incID" wire:model="data.holiday_increasement"
                                    class="custom-select @error('data.holiday_increasement') is-invalid @enderror">
                                    <option value="" selected>Please select holiday increment</option>
                                    <option value="1">Yes</option>
                                    <option value="0">No</option>
                                </select>
                                <div class="text-danger">
                                    @error('data.holiday_increasement')
                                        {{ $message }}
                                    @enderror
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <label for="recholidayID">Receive Statutory Holidays</label>
                                <select id="recholidayID" wire:model="data.receive_statutory_holidays"
                                    class="custom-select @error('data.receive_statutory_holidays') is-invalid @enderror">
                                    <option value="" selected>Please select Receive Statutory Holidays</option>
                                    <option value="1">Yes</option>
                                    <option value="0">No</option>
                                </select>
                                <div class="text-danger">
                                    @error('data.receive_statutory_holidays')
                                        {{ $message }}
                                    @enderror
                                </div>
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-sm-4">
                                <label for="JoinDateID">Start Date:</label>
                                <input id="JoinDateID" type="date" wire:model="data.join_date"
                                    class="form-control @error('data.join_date') is-invalid @enderror">
                                <div class="text-danger">
                                    @error('data.join_date')
                                        {{ $message }}
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>

                    <div x-show="currentStep === 3">
                        <h2>Summary</h2>

                        <div class="row p-2">
                            <div class="col-sm-12 bg-light text-center">
                                <h3>Personal</h3>
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-sm-6">
                                <b>Full name:</b> {{ $data['title'] }} {{ $data['name'] }}
                            </div>
                            <div class="col-sm-6">
                                <b>Email:</b> {{ $data['email'] }}
                            </div>
                        </div>
                        <div class="row p-2">
                            <div class="col-sm-12 bg-light text-center">
                                <h3>Job</h3>
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-sm-3">
                                <b>Job title:</b> {{ $data['jobtitle'] }}
                            </div>
                            <div class="col-sm-3">
                                <b>Employee type:</b> {{ $data['employee_type'] }}
                            </div>
                            <div class="col-sm-3">
                                <b>Person type:</b> {{ $data['person_type'] }}
                            </div>
                            <div class="col-sm-3">
                                <b>Is director?</b>
                                @if ($data['is_director'] == 1)
                                    Yes
                                @else
                                    No
                                @endif
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-sm-3">
                                <b>Company:</b>
                                @if ($this->data['company'])
                                    {{ $companies[$this->data['company']] }}
                                @else
                                    Not Selected
                                @endif
                            </div>
                            <div class="col-sm-3">
                                <b>Department:</b>
                                @if ($this->data['department'])
                                    {{ $departments[$this->data['department']] }}
                                @else
                                    Not Selected
                                @endif
                            </div>
                            <div class="col-sm-3">
                                <b>Division:</b>
                                @if ($this->data['division'])
                                    {{ $divisions[$this->data['division']] }}
                                @else
                                    Not Selected
                                @endif
                            </div>
                            <div class="col-sm-3">
                                <b>Role:</b>
                                @if ($this->data['role'])
                                    {{ $roles[$this->data['role']] }}
                                @else
                                    Not Selected
                                @endif
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-sm-3">
                                <b>Team:</b>
                                @if ($this->data['team'])
                                    {{ $teams[$this->data['team']] }}
                                @else
                                    Not Selected
                                @endif
                            </div>
                            <div class="col-sm-3">
                                <b>Level:</b>
                                @if ($this->data['level'])
                                    {{ $this->data['level'] }}
                                @else
                                    Not Selected
                                @endif
                            </div>
                            <div class="col-sm-3">
                                <b>Line manager:</b>
                                @if ($this->data['line_manager'])
                                    {{ $line_manager[$this->data['line_manager']] }}
                                @else
                                    Not Selected
                                @endif
                            </div>
                            <div class="col-sm-3">
                                <b>Location:</b>
                                @if ($this->data['location'])
                                    {{ $locations[$this->data['location']] }}
                                @else
                                    Not Selected
                                @endif
                            </div>

                            <div class="col-sm-3">
                                <b>Full time/Part time:</b> {{ $data['fullparttime'] }}
                                {{-- @if ($data['fullparttime'] === 'Part Time') --}}
                                <br /><b>Working days:</b>
                                @php
                                    $dayNames = [
                                        1 => 'Mon',
                                        2 => 'Tue',
                                        3 => 'Wed',
                                        4 => 'Thu',
                                        5 => 'Fri',
                                        6 => 'Sat',
                                        7 => 'Sun',
                                    ];
                                @endphp
                                @foreach ($data['workingdays'] as $dayNumber)
                                    {{ $dayNames[$dayNumber] }} ,
                                @endforeach
                                {{-- @endif --}}
                            </div>
                            <div class="col-sm-3">
                                <b>Weekly hours:</b>
                                {{ $data['weeklyhours'] }}
                            </div>
                        </div>

                        <div class="row mb-2">
                            <div class="col-sm-3">
                                <b>Holiday:</b>
                                @if ($data['holiday_assign'] === 'other')
                                    {{ $data['holidayother'] }}
                                @else
                                    {{ $data['holiday_assign'] }}
                                @endif
                            </div>
                            <div class="col-sm-3">
                                <b>Holiday max:</b> {{ $data['holiday_max'] }}
                            </div>
                            <div class="col-sm-3">
                                <b>Holiday increment:</b>
                                @if ($data['holiday_increasement'] == 1)
                                    Yes
                                @else
                                    No
                                @endif
                            </div>
                            <div class="col-sm-3">
                                <b>Receive statutory holidays:</b>
                                @if ($data['receive_statutory_holidays'] == 1)
                                    Yes
                                @else
                                    No
                                @endif
                            </div>
                        </div>
                        <hr class="bg-secondary">
                        <div class="row mb-2">
                            <div class="col-sm-12 text-center">
                                <b>Once you click submit this employee will become active and live. </b>
                            </div>
                        </div>
                    </div>


                    <button type="button" class="btn btn-secondary mr-2" x-on:click="currentStep--"
                        :disabled="currentStep === 1" wire:click="SaveDraft">Prev Step
                    </button>
                    <button type="button" class="btn btn-secondary mr-2" x-on:click="currentStep++"
                        :disabled="currentStep === 3" wire:click="SaveDraft">Next Step
                    </button>
                    <button type="button"
                        class="btn @if ($saveDraftStatus == true) btn-success @else btn-primary @endif mr-2"
                        wire:dirty.class.add="btn-primary" wire:dirty.class.remove="btn-success" wire:click="SaveDraft">
                        <i class="fas fa-spinner fa-spin" wire:loading wire:target="SaveDraft"></i>
                        <span wire:loading.remove>

                            @if ($saveDraftStatus == true)
                                <i class="fas fa-check" wire:dirty.class.remove="fas fa-check"></i>
                            @else
                            @endif
                            Save as draft
                        </span>
                    </button>
                    <button type="submit" wire:click.prevent="submit()" class="btn btn-primary"
                        :disabled="currentStep !== 3"> Submit</button>

                </div>
            </form>
        @else
            <div class="alert alert-danger text-center">
                <h1> You do not have permission to access this page</h1>
            </div>
        @endif
    </div>
@endcan