@canany(['hr_manager_hq', 'sickness'])

    @extends('adminlte::page')

    @section('title', $title)

@section('content_header')
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6 m-0 text-dark">
                <h1>{{ $subtitle }}</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="/">Home</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.index') }}">Admin</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.sickness.index') }}">Sickness</a></li>
                    <li class="breadcrumb-item active">Edit</li>
                </ol>
            </div>
        </div>
    </div>
@stop

@section('content')
    @if (session('existFile'))
        <script>
            toastr.options = {
                "closeButton": true,
                "debug": false,
                "newestOnTop": false,
                "progressBar": true,
                "positionClass": "toast-top-right",
                "preventDuplicates": false,
                "onclick": null,
                "showDuration": "300",
                "hideDuration": "1000",
                "timeOut": "5000",
                "extendedTimeOut": "1000",
                "showEasing": "swing",
                "hideEasing": "linear",
                "showMethod": "fadeIn",
                "hideMethod": "fadeOut"
            };
            toastr.warning('{{ session('existFile') }}');
        </script>
    @endif
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            window.addEventListener('fileTooBig', event => {
                toastr.options = {
                    "closeButton": true,
                    "debug": false,
                    "newestOnTop": false,
                    "progressBar": true,
                    "positionClass": "toast-top-right",
                    "preventDuplicates": false,
                    "onclick": null,
                    "showDuration": "300",
                    "hideDuration": "1000",
                    "timeOut": "5000",
                    "extendedTimeOut": "1000",
                    "showEasing": "swing",
                    "hideEasing": "linear",
                    "showMethod": "fadeIn",
                    "hideMethod": "fadeOut"
                };
                toastr.error(event.detail.message);
            });
        });
    </script>

    <style>
        .iti {
            width: 100%;
        }
    </style>
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <form method="POST" action="{{ route('admin.sickness.update', $sickness->id) }}"
                        enctype="multipart/form-data">
                        @csrf
                        @method('PUT')

                        <div>

                            <div class="row mb-2">
                                <div class="col-12">
                                    <a href={{ route('admin.sickness.index') }} class="btn btn-secondary"><i
                                            class="fas fa-arrow-left"></i> Back</a>
                                </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>
                            <hr class="bg-secondary">
                            <div class="card border-light m-4">
                                <div class="card-header bg-light text-xl">Edit sickness details</div>
                                <div class="card-body text-lg">
                                    <div class="card-text">
                                        <div class="row">
                                            <div class="col-sm-6">
                                                <label id="namelab" for="name">Name <span
                                                        class="text-danger">*</span></label>
                                                <input type="text" class="form-control" name="namedis"
                                                    value="{{ $user->name }}" disabled>
                                                <input id="name" name="name" type="hidden" class="form-control"
                                                    value="{{ $sickness->employee_id }}">
                                            </div>

                                            <div class="col-sm-2">
                                                <label id="employeereflab" for="employeerefdis">Employee Ref<span
                                                        class="text-danger">*</span></label>
                                                <input id="employeerefdis" name="employeerefdis" type="text"
                                                    class="form-control" value="{{ $sickness->employeeref }}" disabled>
                                                <input id="employeeref" name="employeeref" type="hidden"
                                                    class="form-control" value="{{ $sickness->employeeref }}">
                                            </div>
                                            <div class="col-sm-4">
                                                <label id="persontypelab" for="persontypedis">Person Type<span
                                                        class="text-danger">*</span></label>
                                                <input id="persontypedis" name="persontypedis" type="text"
                                                    class="form-control" value="{{ $sickness->persontype }}" disabled>
                                                <input id="persontype" name="persontype" type="hidden" class="form-control"
                                                    value="{{ $sickness->persontype }}">
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-sm-4">
                                                <label id="deptpelab" for="departmentdis">Department<span
                                                        class="text-danger">*</span></label>
                                                <input id="departmentdis" name="departmentdis" type="text"
                                                    class="form-control" value="{{ $sickness->department }}" disabled>
                                                <input id="department" name="department" type="hidden" class="form-control"
                                                    value="{{ $sickness->department }}">
                                            </div>
                                            <div class="col-sm-4">
                                                <label id="divisionlab" for="division">Division</label>
                                                <input id="divisiondis" name="divisiondis" type="text"
                                                    class="form-control" value="{{ $sickness->division }}" disabled>
                                                <input id="division" name="division" type="hidden" class="form-control"
                                                    value="{{ $sickness->division }}">
                                            </div>
                                            <div class="col-sm-4">
                                                <label id="locationlab" for="locationdis">Location<span
                                                        class="text-danger">*</span></label>
                                                <input id="locationdis" name="locationdis" type="text"
                                                    class="form-control" value="{{ $sickness->location }}" disabled>
                                                <input id="location" name="location" type="hidden"
                                                    class="form-control" value="{{ $sickness->location }}">
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-sm-6">
                                                <label id="categorylab" for="category">Category<span
                                                        class="text-danger">*</span></label>
                                                <select class="custom-select" name="category" id="category">
                                                    <option value=""
                                                        {{ $sickness->category === '' ? 'selected' : '' }}>Select Category
                                                    </option>
                                                    <option value="Cough, Cold, Flu"
                                                        {{ $sickness->category === 'Cough, Cold, Flu' ? 'selected' : '' }}>
                                                        Cough, Cold, Flu</option>
                                                    <option value="Covid related"
                                                        {{ $sickness->category === 'Covid related' ? 'selected' : '' }}>
                                                        Covid related</option>
                                                    <option value="Digestive / Stomach"
                                                        {{ $sickness->category === 'Digestive / Stomach' ? 'selected' : '' }}>
                                                        Digestive / Stomach</option>
                                                    <option value="Headache / migraine"
                                                        {{ $sickness->category === 'Headache / migraine' ? 'selected' : '' }}>
                                                        Headache / migraine</option>
                                                    <option value="Non-work related injury"
                                                        {{ $sickness->category === 'Non-work related injury' ? 'selected' : '' }}>
                                                        Non-work related injury</option>
                                                    <option value="Psychiatric / Stress"
                                                        {{ $sickness->category === 'Psychiatric / Stress' ? 'selected' : '' }}>
                                                        Psychiatric / Stress</option>
                                                    <option value="Other"
                                                        {{ $sickness->category === 'Other' ? 'selected' : '' }}>Other
                                                    </option>
                                                </select>
                                            </div>
                                            <div class="col-sm-6">
                                                <label id="statuslab" for="status">Status<span
                                                        class="text-danger">*</span></label>
                                                <select class="custom-select" name="status" id="status">
                                                    <option value="1"
                                                        {{ old('status', $sickness->status) == '1' ? 'selected' : '' }}>
                                                        Open
                                                    </option>
                                                    <option value="0"
                                                        {{ old('status', $sickness->status) == '0' ? 'selected' : '' }}>
                                                        Closed</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-sm-4">
                                                <label id="startlab" for="start">Start Date<span
                                                        class="text-danger">*</span></label>
                                                <input type="date" class="form-control" name="start" id="start"
                                                    placeholder="D/M/YYY" value="{{ $sickness->start }}" readonly>
                                            </div>
                                            <div class="col-sm-4">
                                                <label id="endlab" for="end">End Date</label>
                                                <input type="date" class="form-control" name="end" id="end"
                                                    placeholder="D/M/YYY" value="{{ old('end', $sickness->end) }}">
                                            </div>
                                            <div class="col-sm-4">
                                                <label id="dayslab" for="days">Days</label>
                                                <input type="text" class="form-control" name="days" id="days"
                                                    placeholder="E.G. 1.5 for 1 and a half days"
                                                    value="{{ old('days', $sickness->days) }}">
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-sm-12">
                                                <label id="reasonlab" for="reason">Reason</label>
                                                <textarea id="reasond" class="form-control" name="reason" placeholder="E.G. for Digestive / Stomach, 24hrs bugs"
                                                    rows="3">{{ old('reason', $sickness->reason) }}</textarea>
                                            </div>
                                            <div class="col-sm-12">
                                                <label id="reviewlab" for="reviewnotes">Review Notes</label>
                                                <textarea id="reviewnotes" class="form-control" name="reviewnotes" placeholder="Review Notes..." rows="3">{{ old('reviewnotes', $sickness->reviewnotes) }}</textarea>
                                            </div>
                                        </div>

                                        <div wire:ignore>
                                            @livewire('document-upload', ['sid' => $sickness->id, 'getSection' => 'Sickness', 'empId' => $sickness->employee_id, 'empName' => $user->name], key('document-upload-' . $sickness->id))
                                        </div>

                                        <div class="row">
                                            <div class="col-sm-12 p-2">
                                                <input type="reset" class="btn btn-secondary mr-3" value="Reset">
                                                <button type="submit" class="btn btn-primary">Update</button>
                                            </div>
                                        </div>
                                        <script>
                                            document.getElementById('name').addEventListener('change', function() {
                                                const employeeId = this.value;

                                                if (employeeId == "") {
                                                    $('#employeerefdis').val('');
                                                    $('#persontypedis').val('');
                                                    $('#locationdis').val('');
                                                    $('#departmentdis').val('');
                                                    $('#divisiondis').val('');
                                                    $('#employeeref').val('');
                                                    $('#persontype').val('');
                                                    $('#location').val('');
                                                    $('#department').val('');
                                                    $('#division').val('');

                                                } else {
                                                    // Send an AJAX request to get employee information
                                                    fetch(`/get-employee-info?employee_id=${employeeId}`)
                                                        .then(response => response.json())
                                                        .then(data => {
                                                            //display
                                                            $('#employeerefdis').val(data.employeeref);
                                                            $('#persontypedis').val(data.persontype);
                                                            $('#locationdis').val(data.location.locationname);
                                                            $('#departmentdis').val(data.department.departmentname);
                                                            $('#divisiondis').val(data.division.divisionname);
                                                            //hidden
                                                            $('#employeeref').val(data.employeeref);
                                                            $('#persontype').val(data.persontype);
                                                            $('#location').val(data.location.locationname);
                                                            $('#department').val(data.department.departmentname);
                                                            $('#division').val(data.division.divisionname);
                                                        });
                                                }
                                            });
                                        </script>

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

                        </div>
                    </form>



                </div>
            </div>
        </div>
    </div>
@stop

@section('footer')
    &nbsp;
@stop

@endcan