@extends('ui-common.layouts.master')
@section('title')
@lang('Apply Leave')
@endsection
@section('css')   
<!-- select2@4.1.0 -->
<link href="{{ url('css/Select2_cdn/select2.min.css') }}" rel="stylesheet" />
<!-- font-awesome-6.7.2 -->
<link href="{{ url('css/font-awesome_cdn/font-awesome.min.css') }}" rel="stylesheet" />

<!-- timepickr themes -->
<link rel="stylesheet" href="{{ url('css/@simonwep/pickr/themes/classic.min.css')}}"/> <!-- 'classic' theme -->
<link rel="stylesheet" href="{{ url('css/@simonwep/pickr/themes/monolith.min.css')}}"/> <!-- 'monolith' theme -->
<link rel="stylesheet" href="{{ url('css/@simonwep/pickr/themes/nano.min.css')}}"/> <!-- 'nano' theme -->
<link rel="stylesheet" href="{{ url('js/libs/filepond/filepond.min.css') }}" type="text/css" />
<link rel="stylesheet" href="{{ url('js/libs/filepond-plugin-image-preview/filepond-plugin-image-preview.min.css') }}">
@endsection
@section('content')
<form>
    <div class="row">
        <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12 px-0 ctl-mar-bot-tim">
            <div class="card ctl-card-bor-rad ctl-pad-car-hea-bod mb-0">
                <div class="card-header ctl-bor-lne-col">
                    <div class="ctl-car-clo-hdr">
                        <h3>Apply Leave</h3>
                    </div>
                </div>
                <div class="card-body">             
                    <div class="row">
                        <div class="col-sm-12 col-md-12 col-lg-3 col-xl-3 col-xxl-3 mb-3 mb-lg-0">
                            <label for="report_to" class="ctl-lab-txt-frm">Reporting To</label>
                            <div class="ctl-pos-rel-ico">
                                <div class="select-checkbox multiSelCheckBoxSubGroup mb-0">
                                    <div class="input-field multiple-select-custom ctl-mul-sel-pol">
                                        <select class="form-select select-multiple" multiple name="report_to">
                                            <option value="Fumio">Fumio</option>
                                            <option value="Alice">Alice</option>
                                            <option value="Marcello">Marcello</option>
                                            <option value="Brayden">Brayden</option>
                                            <option value="Fumio">Fumio</option>
                                            <option value="Alice">Alice</option>
                                            <option value="Marcello">Marcello</option>
                                            <option value="Brayden">Brayden</option>
                                            <option value="Fumio">Fumio</option>
                                            <option value="Alice">Alice</option>
                                            <option value="Marcello">Marcello</option>
                                            <option value="Brayden">Brayden</option>
                                        </select>
                                        <span class="ctl-ico-lft">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15" fill="none">
                                                <path d="M7.57501 7.98828C7.53126 7.98203 7.47501 7.98203 7.42501 7.98828C6.32501 7.95078 5.45001 7.05078 5.45001 5.94453C5.45001 4.81328 6.36251 3.89453 7.50001 3.89453C8.63126 3.89453 9.55001 4.81328 9.55001 5.94453C9.54376 7.05078 8.67501 7.95078 7.57501 7.98828Z" stroke="#868C98" stroke-linecap="round" stroke-linejoin="round"></path>
                                                <path d="M11.7125 12.1121C10.6 13.1309 9.12501 13.7496 7.50001 13.7496C5.87501 13.7496 4.40001 13.1309 3.28751 12.1121C3.35001 11.5246 3.72501 10.9496 4.39376 10.4996C6.10626 9.36211 8.90625 9.36211 10.6063 10.4996C11.275 10.9496 11.65 11.5246 11.7125 12.1121Z" stroke="#868C98" stroke-linecap="round" stroke-linejoin="round"></path>
                                                <path d="M7.5 13.75C10.9518 13.75 13.75 10.9518 13.75 7.5C13.75 4.04822 10.9518 1.25 7.5 1.25C4.04822 1.25 1.25 4.04822 1.25 7.5C1.25 10.9518 4.04822 13.75 7.5 13.75Z" stroke="#868C98" stroke-linecap="round" stroke-linejoin="round"></path>
                                            </svg>
                                        </span>
                                    </div>
                                </div> 
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-12 col-lg-3 col-xl-3 col-xxl-3 mb-3 mb-lg-0">
                            <div class="cmp-com-sel-cus-blo">
                                <label for="leave_type" class="ctl-lab-txt-frm">Leave Type</label>
                                <select id="leave_type" name="leave_type" class="ctl-com-sel-blo">
                                    <option selected disabled>Please Select Leave Type</option>
                                    <option value="Sick Leave">Sick Leave</option>
                                    <option value="Casual Leave">Casual Leave</option>
                                    <option value="Maternity/Paternity Leave">Maternity/Paternity Leave</option>
                                    <option value="Compassionate Leave">Compassionate Leave</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-12 col-lg-3 col-xl-3 col-xxl-3 mb-3 mb-lg-0">
                            <div class="cmp-com-inp-cus-blo cmp-fla-pic-clk">
                                <label for="date_range" class="ctl-lab-txt-frm">Date Range </label>
                                <div class="ctl-pos-rel-ico">
                                    <input type="text" class="form-control  flatpicker-input ctl-pol-dat-ico" id="date_range" name="date_range" data-provider="flatpickr" data-date-format="d M, Y" readonly="readonly" placeholder="Select Date Range">
                                    <span class="ctl-ico-lft">
                                        <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M10.625 8.75C10.9702 8.75 11.25 8.47018 11.25 8.125C11.25 7.77982 10.9702 7.5 10.625 7.5C10.2798 7.5 10 7.77982 10 8.125C10 8.47018 10.2798 8.75 10.625 8.75Z" fill="#868C98"/>
                                            <path d="M10.625 11.25C10.9702 11.25 11.25 10.9702 11.25 10.625C11.25 10.2798 10.9702 10 10.625 10C10.2798 10 10 10.2798 10 10.625C10 10.9702 10.2798 11.25 10.625 11.25Z" fill="#868C98"/>
                                            <path d="M8.125 8.125C8.125 8.47018 7.84518 8.75 7.5 8.75C7.15482 8.75 6.875 8.47018 6.875 8.125C6.875 7.77982 7.15482 7.5 7.5 7.5C7.84518 7.5 8.125 7.77982 8.125 8.125Z" fill="#868C98"/>
                                            <path d="M8.125 10.625C8.125 10.9702 7.84518 11.25 7.5 11.25C7.15482 11.25 6.875 10.9702 6.875 10.625C6.875 10.2798 7.15482 10 7.5 10C7.84518 10 8.125 10.2798 8.125 10.625Z" fill="#868C98"/>
                                            <path d="M4.375 8.75C4.72018 8.75 5 8.47018 5 8.125C5 7.77982 4.72018 7.5 4.375 7.5C4.02982 7.5 3.75 7.77982 3.75 8.125C3.75 8.47018 4.02982 8.75 4.375 8.75Z" fill="#868C98"/>
                                            <path d="M4.375 11.25C4.72018 11.25 5 10.9702 5 10.625C5 10.2798 4.72018 10 4.375 10C4.02982 10 3.75 10.2798 3.75 10.625C3.75 10.9702 4.02982 11.25 4.375 11.25Z" fill="#868C98"/>
                                            <path fill-rule="evenodd" clip-rule="evenodd" d="M4.375 1.09375C4.63388 1.09375 4.84375 1.30362 4.84375 1.5625V2.0392C5.2575 2.03124 5.71333 2.03125 6.21466 2.03125H8.78526C9.2866 2.03125 9.7425 2.03124 10.1563 2.0392V1.5625C10.1563 1.30362 10.3661 1.09375 10.625 1.09375C10.8839 1.09375 11.0938 1.30362 11.0938 1.5625V2.07943C11.2562 2.09182 11.4101 2.10739 11.5556 2.12696C12.2884 2.22548 12.8815 2.43305 13.3492 2.90078C13.817 3.3685 14.0245 3.9616 14.123 4.69436C14.2188 5.40636 14.2188 6.31613 14.2188 7.46471V8.78526C14.2188 9.93384 14.2188 10.8436 14.123 11.5556C14.0245 12.2884 13.817 12.8815 13.3492 13.3492C12.8815 13.8169 12.2884 14.0245 11.5556 14.123C10.8436 14.2188 9.93387 14.2188 8.78529 14.2188H6.21474C5.06616 14.2188 4.15637 14.2188 3.44436 14.123C2.7116 14.0245 2.1185 13.8169 1.65078 13.3492C1.18305 12.8815 0.975477 12.2884 0.876959 11.5556C0.781233 10.8436 0.78124 9.93386 0.78125 8.78526V7.46474C0.78124 6.31614 0.781233 5.40637 0.876959 4.69436C0.975477 3.9616 1.18305 3.3685 1.65078 2.90078C2.1185 2.43305 2.7116 2.22548 3.44436 2.12696C3.58994 2.10739 3.74379 2.09182 3.90625 2.07943V1.5625C3.90625 1.30362 4.11612 1.09375 4.375 1.09375ZM3.56928 3.0561C2.94048 3.14064 2.5782 3.29918 2.31369 3.56369C2.04918 3.8282 1.89064 4.19047 1.8061 4.81928C1.79178 4.92577 1.77981 5.03788 1.7698 5.15625H13.2302C13.2202 5.03788 13.2082 4.92577 13.1939 4.81928C13.1094 4.19047 12.9508 3.8282 12.6863 3.56369C12.4218 3.29918 12.0595 3.14064 11.4307 3.0561C10.7884 2.96975 9.94176 2.96875 8.75 2.96875H6.25C5.05824 2.96875 4.21157 2.96975 3.56928 3.0561ZM1.71875 7.5C1.71875 6.96624 1.71895 6.50171 1.72693 6.09375H13.2731C13.2811 6.50171 13.2813 6.96624 13.2813 7.5V8.75C13.2813 9.94176 13.2803 10.7884 13.1939 11.4307C13.1094 12.0595 12.9508 12.4218 12.6863 12.6863C12.4218 12.9508 12.0595 13.1094 11.4307 13.1939C10.7884 13.2803 9.94176 13.2812 8.75 13.2812H6.25C5.05824 13.2812 4.21157 13.2803 3.56928 13.1939C2.94048 13.1094 2.5782 12.9508 2.31369 12.6863C2.04918 12.4218 1.89064 12.0595 1.8061 11.4307C1.71975 10.7884 1.71875 9.94176 1.71875 8.75V7.5Z" fill="#868C98"/>
                                        </svg>
                                    </span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-sm-12 col-md-12 col-lg-3 col-xl-3 col-xxl-3 mb-3 mb-lg-0">
                            <div class="cmp-com-inp-cus-blo">
                                <label for="leave_duration" class="ctl-lab-txt-frm">Leave Duration </label>
                                <input class="form-control" type="text" id="leave_duration" name="leave_duration" placeholder="" value="" >
                            </div>
                        </div>
                    </div>                                  
                </div>
            </div>
        </div>
        <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12 px-0 ctl-mar-bot-tim">
            <div class="card ctl-card-bor-rad ctl-pad-car-hea-bod mb-0">
                <div class="card-body">
                    <div class="row">
                        <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
                            <label for="leave_dates" class="ctl-lab-txt-frm">Leave Details</label>
                        </div>
                    </div>
                    <ul class="cmp-lev-det-uol list-unstyled ps-0 mb-0">
                        <li>
                            <div class="row">
                                <div class="col-sm-12 col-md-12 col-lg-3 col-xl-3 col-xxl-3">
                                    <div class="ctl-lev-det-txt-blo">
                                        <h4>27/03/2025</h4>
                                    </div>
                                </div>
                                <div class="col-sm-12 col-md-12 col-lg-5 col-xl-4 col-xxl-4">                           
                                    <div class="row">
                                        <div class="col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6">
                                            <div class="cmp-com-sel-cus-blo">
                                                <select class="form-control ctl-com-sel-blo ctl-select2 leave-type" data-id="1">
                                                    <option selected disabled>Please Select</option>
                                                    <option value="Full Day">Full Day</option>
                                                    <option value="Half Day">Half Day</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6 mt-3 mt-lg-0">
                                            <div class="cmp-com-sel-cus-blo">
                                                <select class="ctl-com-sel-blo ctl-select2 half-day-type" data-id="1" disabled>
                                                    <option selected disabled>Please Select</option>
                                                    <option value="Forenoon">Forenoon</option>
                                                    <option value="Afternoon">Afternoon</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="row">
                                <div class="col-sm-12 col-md-12 col-lg-3 col-xl-3 col-xxl-3">
                                    <div class="ctl-lev-det-txt-blo">
                                        <h4>28/03/2025</h4>
                                    </div>
                                </div>
                                <div class="col-sm-12 col-md-12 col-lg-5 col-xl-4 col-xxl-4">                           
                                    <div class="row">
                                        <div class="col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6">
                                            <div class="cmp-com-sel-cus-blo">
                                                <select class="ctl-com-sel-blo ctl-select2 leave-type" data-id="2">
                                                    <option selected disabled>Please Select</option>
                                                    <option value="Full Day">Full Day</option>
                                                    <option value="Half Day">Half Day</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6 mt-3 mt-lg-0">
                                            <div class="cmp-com-sel-cus-blo">
                                                <select class="ctl-com-sel-blo ctl-select2 half-day-type" data-id="2" disabled>
                                                    <option selected disabled>Please Select</option>
                                                    <option value="Forenoon">Forenoon</option>
                                                    <option value="Afternoon">Afternoon</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6 px-0 ctl-mar-bot-tim">
            <div class="card ctl-card-bor-rad ctl-pad-car-hea-bod mb-0">
                <div class="card-body">
                    <div class="row">
                        <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12 mb-3">
                              <div class="cmp-tex-are-cus">
                                 <label for="leave_reason" class="ctl-lab-txt-frm">Reason for Leave</label>
                                 <textarea class="form-control ctl-min-tex-hei ctl-tex-are-scr" id="s-leave_reason" rows="3" placeholder="Please enter reason"></textarea>
                              </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6 px-0 px-lg-2 pe-lg-0 ctl-mar-bot-tim">
            <div class="card ctl-card-bor-rad ctl-pad-car-hea-bod mb-0">
                <div class="card-body">
                    <div class="row">
                        <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12 mb-3">
                            <label for="inform_to" class="ctl-lab-txt-frm">Inform to whom</label>
                            <div class="ctl-pos-rel-ico">
                                <div class="select-checkbox multiSelCheckBoxSubGroup mb-0">
                                    <div class="input-field multiple-select-custom ctl-mul-sel-pol">
                                        <select class="form-select select-multiple" multiple name="inform_to">
                                            <option value="Fumio">Fumio</option>
                                            <option value="Alice">Alice</option>
                                            <option value="Marcello">Marcello</option>
                                            <option value="Brayden">Brayden</option>
                                            <option value="Fumio">Fumio</option>
                                            <option value="Alice">Alice</option>
                                            <option value="Marcello">Marcello</option>
                                            <option value="Brayden">Brayden</option>
                                            <option value="Fumio">Fumio</option>
                                            <option value="Alice">Alice</option>
                                            <option value="Marcello">Marcello</option>
                                            <option value="Brayden">Brayden</option>
                                        </select>
                                        <span class="ctl-ico-lft">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15" fill="none">
                                                <path d="M7.57501 7.98828C7.53126 7.98203 7.47501 7.98203 7.42501 7.98828C6.32501 7.95078 5.45001 7.05078 5.45001 5.94453C5.45001 4.81328 6.36251 3.89453 7.50001 3.89453C8.63126 3.89453 9.55001 4.81328 9.55001 5.94453C9.54376 7.05078 8.67501 7.95078 7.57501 7.98828Z" stroke="#868C98" stroke-linecap="round" stroke-linejoin="round"></path>
                                                <path d="M11.7125 12.1121C10.6 13.1309 9.12501 13.7496 7.50001 13.7496C5.87501 13.7496 4.40001 13.1309 3.28751 12.1121C3.35001 11.5246 3.72501 10.9496 4.39376 10.4996C6.10626 9.36211 8.90625 9.36211 10.6063 10.4996C11.275 10.9496 11.65 11.5246 11.7125 12.1121Z" stroke="#868C98" stroke-linecap="round" stroke-linejoin="round"></path>
                                                <path d="M7.5 13.75C10.9518 13.75 13.75 10.9518 13.75 7.5C13.75 4.04822 10.9518 1.25 7.5 1.25C4.04822 1.25 1.25 4.04822 1.25 7.5C1.25 10.9518 4.04822 13.75 7.5 13.75Z" stroke="#868C98" stroke-linecap="round" stroke-linejoin="round"></path>
                                            </svg>
                                        </span>
                                    </div>
                                </div> 
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12 px-0 ctl-mar-bot-tim">
            <div class="card ctl-card-bor-rad ctl-pad-car-hea-bod mb-0">
                <div class="card-body">
                    <div class="row">
                        
                        <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
                            <label for="supporting_document" class="ctl-lab-txt-frm">Supporting Documents</label>
                            <div>
                                <input type="file" class="filepond filepond-input-multiple" multiple name="" accept="image/png, image/jpeg, image/gif"
                                data-allow-reorder="true" data-max-file-size="3MB" data-max-files="5">
                                <div class="label-container d-flex flex-wrap gap-3 w-100 pt-2">
                                    <div class="label-item drag-drop-label-item d-flex align-items-center gap-3">
                                        <a target="_blank" href="javascript:void(0)">
                                            <span class="label text_wrap d-block"></span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12 px-0">
            <div class="d-flex align-items-center gap-2 justify-content-end">
                <button type="button" class="cmp-can-com-btn">
                    <a href="{{ url('ui/leavemanagement') }}">Back</a>
                </button>
                <button type="submit" class="cmp-sub-com-btn d-flex align-items-center justify-content-center gap-1"> Apply Leave
                </button>
            </div>
        </div>
    </div>
</form>

@endsection
@section('script')   
<script src="{{ url('js/jquery-3.6.0_cdn/jquery.min.js') }}"></script>
<script src="{{ url('js/select2@4.1.0/select2.min.js') }}"></script>
<script src="http://sat.localhost/ets-saas/public/js/app.js"></script>
<script src="{{ url('js/libs/flatpickr/flatpickr.min.js') }}"></script>
<script src="{{ url('js/jquery-validation/jquery.validate.min.js') }}"></script>
<script src="{{ url('js/libs/filepond/filepond.min.js') }}"></script>
<script src="{{ url('js/libs/filepond-plugin-image-preview/filepond-plugin-image-preview.min.js') }}"></script>
<script src="{{ url('js/libs/filepond-plugin-file-validate-size/filepond-plugin-file-validate-size.min.js') }}"></script>
<script src="{{ url('js/libs/filepond-plugin-image-exif-orientation/filepond-plugin-image-exif-orientation.min.js') }}"></script>
<script src="{{ url('js/libs/filepond-plugin-file-encode/filepond-plugin-file-encode.min.js') }}"></script>
<script>
$(document).ready(function(){
      $('.ctl-com-sel-blo').on('change', function() {
            $(this).valid();
      });
      $('#leave_type').select2({
         minimumResultsForSearch: Infinity,
      });
      $('.ctl-select2').select2({
         minimumResultsForSearch: Infinity,
      });

        flatpickr("#date_range", {
            mode: "range",
            dateFormat: "m/d/Y",
            allowInput: true
        });

      $(document).on('click' , '.cmp-fla-pic-clk input' , function(){
         $('.flatpickr-calendar').addClass('ctl-fla-pic-pop-zin')
      });

      $('select.leave-type').change(function() {
        var selectedValue = $(this).val(); // Get selected value
        var id = $(this).data('id'); // Get the dynamic ID (data-id attribute)

        var halfDaySelect = $('select.half-day-type[data-id="' + id + '"]'); // Find the corresponding half-day select

        if (selectedValue === 'Half Day') {
            halfDaySelect.prop('disabled', false); // Enable the half-day select
        } else {
            halfDaySelect.prop('disabled', true); // Disable the half-day select
        }
    });



    $('.select-multiple').select2();  
    // Initialize FilePond for file input with multiple file selection
    const pond = FilePond.create(document.querySelector('input.filepond-input-multiple'), {});

    // Register FilePond plugins
    FilePond.registerPlugin(
        FilePondPluginFileEncode,            // Encodes the file as base64 data
        FilePondPluginFileValidateSize,     // Validates the size of the file
        FilePondPluginImageExifOrientation, // Corrects mobile image orientation
        FilePondPluginImagePreview          // Previews dropped images
    );
});
function toggleCustomFocus(e, add = true) {
    const selection = e.target?.nextElementSibling?.querySelector('.select2-selection--single');
        if (selection) {
            selection.classList.toggle('custom-focus', add);
        }}
        $(document).on('select2:open', function (e) {
            toggleCustomFocus(e, true);
            requestAnimationFrame(() => {
                document.querySelector('.select2-container--open .select2-search__field')?.focus();
        });});
        $(document).on('select2:close', function (e) {
        toggleCustomFocus(e, false);
});
</script>
@endsection