{{-- leave modal start --}}

<div class="modal bg-body fade" tabindex="-1" id="leave_modal">
    <div class="modal-dialog modal-fullscreen">
        <div class="modal-content shadow-none">
            <div class="modal-header">
                <h5 class="modal-title">Leave</h5>


            </div>

            <div class="modal-body">

                <div class="card shadow">
                    <div class="card-body">
                        @if (Auth::user()->remcasual_Leave != 0 && Auth::user()->remsick_Leave != 0 && Auth::user()->remannual_Leave != 0)
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Select Type of leave to avail</label>
                            <select id="leave_request_type" class="form-control">
                                <option value="">Select Leave Type To Avail</option>
                                <option @if (Auth::user()->remcasual_Leave < 1) disabled @endif value="2">CASUAL LEAVE
                                </option>
                                <option @if (Auth::user()->remsick_Leave < 1)  @endif value="3">SICK LEAVE</option>
                                <option @if (Auth::user()->remannual_Leave < 1)  @endif value="1">ANNUAL LEAVE</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Select Date On Which Leaves Are Requested</label>
                            <input class="form-control " type="text" placeholder="Pick dates"
                                id="take_leave_input" autofocus="false" />
                        </div>
                    </div>
                    <input type="hidden" id="leave_from_date" />
                    <input type="hidden" id="leave_to_date" />
                    <input type="hidden" id="no_of_days" />
                    <div class="col-md-5">
                        <div class="form-group">
                            <label>Reason for Leave</label>
                            <input type="text" class="form-control" placeholder="Reason For Leave"
                                id="reason_for_leave" />
                        </div>
                    </div>
                    <div class="col-md-1"><label
                            class="mt-5 btn btn-block btn-outline btn-outline-dashed btn-outline-success btn-active-light-success"
                            tabindex="0" id="add_leave_request">Apply</label>
                    </div>
                </div>
            @else
                <h2 class="text-center text-warning">Oh No !!!! You have already availed all your leaves</h2>
                @endif
            </div>
        </div>


        <div class="card shadow mt-5">
            <div class="card-title">
                <div class="row my-5">
                    <div class="col-md-4"></div>
                    <div class="col-md-4">
                        <label for="" class="form-label">Search Data</label>
                        <input class="form-control form-control-solid" placeholder="Pick a date"
                            id="leaves_data_search" />

                          <input type="hidden" value="{{date('Y-m-1')}}" id="hr_hidden_leave_application_start_date" />  
                          <input type="hidden" value="{{date('Y-m-t')}}" id="hr_hidden_leave_application_end_date" />  

                    </div>
                    <div class="col-md-4"></div>
                </div>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-12" style="overflow-y: auto">
                        <table class="table  table-striped table-bordered">
                            <thead class="thead-dark">
                                <tr>
                                    <th scope="col"><strong>Applicant</strong></th>
                                    <th scope="col" class='w-25px'><strong>Reason</strong></th>
                                    <th scope="col"><strong>Leave Type</strong></th>
                                    <th scope="col"><strong>No of Days</strong></th>
                                    <th scope="col"><strong>Date From</strong></th>
                                    <th scope="col"><strong>Date To</strong></th>
                                    <th scope="col"><strong>Status</strong></th>
                                    <th scope="col"><strong>Decision By</strong></th>
                                    <th scope="col"><strong>Application Date</strong></th>


                                </tr>
                            </thead>

                            <tbody id="leaves_table">
                                @if (isset($leaves) && count($leaves) > 0)
                                    @foreach ($leaves as $leave)
                                        @php
                                            $user = App\Models\User::where('UserID', $leave->ResponseBy)
                                                ->withTrashed()
                                                ->first();
                                            $user_count = App\Models\User::where('UserID', $leave->ResponseBy)
                                                ->withTrashed()
                                                ->count();
                                            $response_by = 'N/A';
                                            if ($user_count > 0) {
                                                $response_by = $user->FullName;
                                            }

                                            $applicant= App\Models\User::where('UserID',$leave->UserID)->withTrashed()->first();
                                            $applicant_count= App\Models\User::where('UserID',$leave->UserID)->withTrashed()->count();
                                            $application_by='N/A';
                                            if( $applicant_count>0 )
                                            {
                                                $application_by =$applicant->FullName;
                                            }

                                            if(date('Y-m-d')> date('Y-m-d',strtotime($leave->Date))   ){
                                                    $status=leave_status($leave->Status);
                                                }
                                                else{
                                                    $status=leave_application_status($leave->Status,$leave->id);
                                                }
                                        @endphp
                                        <tr>
                                            <td>{{ $application_by }}</td>
                                            <td>{{ $leave->Text }}</td>
                                            <td>{{ leave_name($leave->Type) }}</td>
                                            <td>{{ $leave->Days }} Days</td>
                                            <td>{{ date('d F Y', strtotime($leave->DateFrom)) }}</td>
                                            <td>{{ date('d F Y', strtotime($leave->DateTo)) }}</td>
                                            <td>{!! $status !!}</td>
                                            <td>{{ $response_by }}</td>
                                            <td>{{ date('d F Y', strtotime($leave->Date)) }}</td>


                                        </tr>
                                    @endforeach
                                @else
                                    <tr>
                                        <td colspan='8' class="text-center">No Data Found</td>
                                    </tr>
                                @endif

                            </tbody>

                        </table>
                    </div>



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



    </div>

    <div class="modal-footer">
        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>

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

</div>

{{-- leave modal ended --}}

<script>

 


    $('#leave_image').click(function() {
        $('#leave_button').click();
    });

    $('#take_leave_input').daterangepicker({
        startDate: moment().add(2, 'days'), // Set the initial start date (optional)
        endDate: moment().add(2, 'days'), // Set the initial end date (optional)
        minDate: moment().add(2, 'days'), // Set the initial end date (optional)
        locale: {
            format: 'YYYY-MM-DD',
        }

    });

    $('#add_leave_request').keypress(function(e) {
        var key = e.which;
        if (key == 13) // the enter key code
        {
            $('#add_leave_request').trigger('click');
            return false;
        }
    });

    $('#take_leave_input').on('apply.daterangepicker', function(ev, picker) {
        var startDate = picker.startDate.format('YYYY-MM-DD');
        var endDate = picker.endDate.format('YYYY-MM-DD');
        $('#leave_from_date').val(startDate);
        $('#leave_to_date').val(endDate);

        var startDate = new Date(startDate);
        var endDate = new Date(endDate);



        // Calculate the difference in milliseconds
        var timeDifference = endDate - startDate;

        // Convert the time difference to days
        var daysDifference = Math.ceil(timeDifference / (1000 * 60 * 60 * 24)) + 1;

        $('#no_of_days').val(daysDifference);

    });



    $("#leaves_data_search").flatpickr({
        altInput: true,
        altFormat: "F j, Y",
        dateFormat: "Y-m-d",
        altFormat: "Y-m-d",
        mode: "range",

        onClose: function(selectedDates, dateStr, instance) {

            var dateStart = instance.formatDate(selectedDates[0], "Y-m-d");
            var dateEnd = instance.formatDate(selectedDates[1], "Y-m-d");
            $('#leave_from_date').val(dateStart);
            $('#leave_to_date').val(dateEnd);


        }
    });

    $("#leaves_data_search").flatpickr({
        altInput: true,
        altFormat: "F j, Y",
        dateFormat: "Y-m-d",
        altFormat: "Y-m-d",
        mode: "range",

        onClose: function(selectedDates, dateStr, instance) {

            var dateStart = instance.formatDate(selectedDates[0], "Y-m-d");
            var dateEnd = instance.formatDate(selectedDates[1], "Y-m-d");
            $('#hr_hidden_leave_application_start_date').val(dateStart);
            $('#hr_hidden_leave_application_end_date').val(dateEnd);

            $.ajax({
                url: '/hr-leaves-search',
                type: 'GET',
                data: {
                    start_date: dateStart,
                    end_date: dateEnd,

                },
                success: function(response) {
                    // Hide loader
                    // $("#attendance_table").destroy();

                    $('#leaves_table').empty();
                    $('#leaves_table').append(response);

                },
                error: function(xhr) {
                    // Hide loader
                    console.log(xhr);


                }
            });
        }
    });

    function leave_application_status(selectElement,id){
        
        let record_id= id;
        let start_date=   $('#hr_hidden_leave_application_start_date').val();
        let end_date=    $('#hr_hidden_leave_application_end_date').val();
        var selectedOption = selectElement.options[selectElement.selectedIndex];
        let status_id=selectedOption;
          const inputElement = $('#leaves_data_search');

            inputElement.flatpickr().close();

             inputElement.flatpickr().destroy();
  
  
        Swal.fire({
            html: 'Confirm Update Status',
            icon: "warning",
            buttonsStyling: false,
            showCancelButton: true,

            confirmButtonText: "Yes Update Application Status!",
            cancelButtonText: 'Nope, cancel it',
            customClass: {
                confirmButton: "btn btn-primary",
                cancelButton: 'btn btn-danger'
            }
        }).then((willDelete) => {

 
            if (willDelete.isConfirmed == true) {

                $.ajax({
                    url: 'hr-update-leave-request-status',
                    method: 'POST',
                    data: {

                        'status_id': status_id.value,
                        'record_id': record_id,
                        'start_date': start_date,
                        'end_date': end_date,
                    },
                    success: function(response) {

                        $('#leaves_table').empty();
                    $('#leaves_table').append(response);
                   


                    },
                    error: function(xhr, status, error) {
                        console.log(error);

                    }
                });

            }

            inputElement.flatpickr({
            altInput: true,
            altFormat: "F j, Y",
            dateFormat: "Y-m-d",
            mode: "range",
                            onClose: function(selectedDates, dateStr, instance) {

                var dateStart = instance.formatDate(selectedDates[0], "Y-m-d");
                var dateEnd = instance.formatDate(selectedDates[1], "Y-m-d");
                $('#hr_hidden_leave_application_start_date').val(dateStart);
                $('#hr_hidden_leave_application_end_date').val(dateEnd);

                $.ajax({
                    url: '/hr-leaves-search',
                    type: 'GET',
                    data: {
                        start_date: dateStart,
                        end_date: dateEnd,

                    },
                    success: function(response) {
                        // Hide loader
                        // $("#attendance_table").destroy();

                        $('#leaves_table').empty();
                        $('#leaves_table').append(response);

                    },
                    error: function(xhr) {
                        // Hide loader
                        console.log(xhr);


                    }
                });
                }
        });


        });
        
      
    }
    

    
    // leave script



</script>