@extends('layouts.userapp')

@section('content')
 
            @php
                use Carbon\Carbon;
            @endphp

            @if ($message = Session::get('success'))
                <div class="alert alert-success" role="alert">
                    {{ $message }}
                </div>
            @endif

            @if ($message = Session::get('error'))
                <div class="alert alert-danger" role="alert">
                    {{ $message }}
                </div>
            @endif


<div class="card" style="border-radius: 20px;  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);">
    <div class="card-header">
        <h5>Leave Application Form</h5>
    </div>
    <div class="card-body">
            <form  action="{{ route('apply.leaves') }}"  method="POST" enctype="multipart/form-data" >
                @csrf
       

               <div class="form-group mb-3">
                    Leave Entitled: 
                    AL : <b>{{ $leaves->AL}}</b>, 
                    ML : <b>{{ $MCtotal}}</b>,
                    Carry Forward : <b>{{ $leaves->carry_forward}}</b>
                    <!-- &nbsp; &nbsp; <a class="right" href="{{ route('checkins.myleavesdetails') }}" style="color: blue; text-decoration: underline;">View Details</a> -->
                    <span type="button" readonly="" class="right" value="" data-toggle="modal" data-target="#viewDetails">&nbsp; &nbsp;View Details</span>
                </div>

                 <!-- Modal -->
            <div class="modal fade" id="viewDetails" tabindex="-1" role="dialog" aria-labelledby="viewDetailsLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="staffLeaveModalLabel">View Details</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="table-responsive">
                                <table class="table table-sm table-bordered table-hover">
                                    <thead class="thead-dark">
                                        <tr>
                                            <th>Type</th>
                                            <th>Entitled</th>
                                            <th>Taken</th>
                                            <th>Balance</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <th>Carried Forward</th>
                                            <td>{{ $leaves->carry_forward ?? '0' }}</td>
                                            <td>N/A</td>
                                            <td>N/A</td>
                                        </tr>
                                        <tr>
                                            <th>AL</th>
                                            <td>{{ ($leaves->AL ?? 0) + $ALtaken }}</td>
                                            <td>{{ $ALtaken }}</td>
                                            <td>{{ $leaves->AL ?? 0 }}</td>

                                        </tr>
                                        <tr>
                                            <th>RL</th>
                                            <td>{{ (($leaves->RL ?? 0)) + $RLtaken }}</td>
                                            <td>{{ $RLtaken }}</td>
                                            <td>{{ $leaves->RL ?? 0 }}</td>
                                        </tr>
                                        <tr>
                                            <th>Total AL</th>
                                            <td>{{ (($leaves->AL ?? '0')  + $ALtaken) + ($leaves->carry_forward ?? 0) }}</td>
                                            <td>N/A</td>
                                            <td>N/A</td>
                                        </tr>
                                        <tr>
                                            <th>EL</th>
                                            <td>{{ (($leaves->EL ?? '0')) + $ELtaken }}</td>
                                            <td>{{ $ELtaken }}</td>
                                            <td>{{ $leaves->EL ?? 0 }}</td>
                                        </tr>
                                        <tr>
                                            <th>ML</th>
                                            <td>{{ (($leaves->ML ?? '0')) + $MCtaken }}</td>
                                            <td>{{ $MCtaken }}</td>
                                            <td>{{ $leaves->ML ?? 0 }}</td>
                                        </tr>
                                        <tr>
                                            <th>HOSP</th>
                                            <td>{{ ($leaves->HOSP ?? '0') + $HOSPtaken }}</td>
                                            <td>{{ $HOSPtaken }}</td>
                                            <td>{{ $leaves->HOSP ?? 0 }}</td>
                                        </tr>
                                        <tr>
                                            <th>MTL</th>
                                            <td>{{ ($leaves->MTL ?? '0') + $MTLtaken }}</td>
                                            <td>{{ $MTLtaken }}</td>
                                            <td>{{ $leaves->MTL ?? 0 }}</td>
                                        </tr>
                                        <tr>
                                            <th>PTL</th>
                                            <td>{{ ($leaves->PTL ?? '0') + $PTLtaken }}</td>
                                            <td>{{ $PTLtaken }}</td>
                                            <td>{{ $leaves->PTL ?? 0 }}</td>
                                        </tr>
                                        <tr>
                                            <th>CL</th>
                                            <td>{{ ($leaves->CL ?? '0') + $CLtaken }}</td>
                                            <td>{{ $CLtaken }}</td>
                                            <td>{{ $leaves->CL ?? 0}}</td>
                                        </tr>
                                        <tr>
                                            <th>CML</th>
                                            <td>{{ ($leaves->CML ?? '0') + $CMLtaken }}</td>
                                            <td>{{ $CMLtaken }}</td>
                                            <td>{{ $leaves->CML ?? 0 }}</td>
                                        </tr>
                                        <tr>
                                            <th>MGL</th>
                                            <td>{{ ($leaves->MGL ?? '0') + $MGLtaken }}</td>
                                            <td>{{ $MGLtaken }}</td>
                                            <td>{{ $leaves->MGL ?? 0 }}</td>
                                        </tr>
                                        <tr>
                                            <th>PI</th>
                                            <td>{{ ($leaves->PI ?? '0') + $PItaken }}</td>
                                            <td>{{ $PItaken }}</td>
                                            <td>{{ $leaves->PI ?? 0 }}</td>
                                        </tr>
                                        <tr>
                                            <th>UPL</th>
                                            <td>N/A</td>
                                            <td>{{ $UPLtaken }}</td>
                                            <td>N/A</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>



                <hr class="col-xs-12">

                <div class="form-group mb-3">
                    Leave Taken & Balance : 
                </div>

                <div class="form-group mb-2">
                    <div class="table-responsive">
                        <table class="table text-center table-bordered">

                            <tr>
                                <th colspan='3'>Annual Leave Taken</th>
                                <th colspan='2'>MC</th>
                                <th>UPL</th>
                            </tr>

                            <tr>
                                <th data-toggle="popover" title="AL" data-content="Annual Leave">AL</th>
                                <th data-toggle="popover" title="EL" data-content="Emergency Leave">EL</th>
                                <!-- <th data-toggle="popover" title="Hint" data-content="Total AL & EL">T</th> -->
                                <th data-toggle="popover" title="BAL" data-content="Balance AL">BAL</th>
                                <th data-toggle="popover" title="MC" data-content="ML Taken">MC</th>
                                <th data-toggle="popover" title="BAL" data-content="ML Balance">BAL</th>
                                <th data-toggle="popover" title="UPL" data-content="UPL Taken">UPL</th>
                            </tr>

                            <tr>
                                <td>{{ $ALtaken}}</td>
                                <td>{{ $ELtaken}}</td>
                                <!-- <td></td> -->
                                <td>{{ $leaves->total_AL }}</td>
                                <td>{{ $MCtaken}}</td>
                                <td>{{ $leaves->ML }}</td>
                                <td>{{ $UPLtaken}}</td>
                            </tr>


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

                <div class="form-row mb-3">
                    <div class="col-md-6 offset-md-3">
                        <select class="form-control" id="leave_type_id" name="leave_type_id" required>
                            <option value="" disabled selected>Select leave type</option>
                            @if ($leaves->AL > 0)
                            <option value="1">ANNUAL LEAVE</option>
                            @endif
                            @if ($leaves->EL > 0)
                            <option value="2">EMERGENCY LEAVE</option>
                            @endif
                            @if ($leaves->ML > 0)
                            <option value="3">MEDICAL LEAVE</option>
                            @endif
                            @if ($leaves->HOSP > 0)
                            <option value="4">HOSPITALIZATION</option>
                            @endif
                            @if ($leaves->RL > 0)
                            <option value="5">REPLACEMENT LEAVE</option>
                            @endif
                            @if ($leaves->MTL > 0)
                            <option value="6">MATERNITY LEAVE</option>
                            @endif
                            @if ($leaves->PTL > 0)
                            <option value="7">PATERNITY LEAVE</option>
                            @endif
                            @if ($leaves->CL > 0)
                            <option value="8">COMPASSIONATE LEAVE</option>
                            @endif
                            @if ($leaves->CML > 0)
                            <option value="9">CALAMITY LEAVE</option>
                            @endif
                            @if ($leaves->MGL > 0)
                            <option value="10">MARRIAGE LEAVE</option>
                            @endif
                            @if ($leaves->PI > 0)
                            <option value="11">PROLONGED ILLNESS</option>
                            @endif
                            @if ($leaves->TS > 0)
                            <option value="13">TIMESLIP</option>
                            @endif
                            <option value="12">UNPAID LEAVE</option>
                        </select>
                    </div>
                </div>


         

            <input type="hidden" id="days_type" name="days_type" value="">
                
                <div class="form-row mb-3" style="display:none;">
                    <div class="col-md-6 offset-md-3">
                        <select class="form-control" id="toapproveby" name="toapproveby">
                        @if($verifier->isEmpty())
                            <option value="">No Verifier</option>
                        @else
                            @foreach($verifier as $verifierItem)
                                <option value="{{ $verifierItem->id }}">{{ $verifierItem->userfirstname }}</option>
                            @endforeach
                        @endif
                        </select>
                        <input type="hidden" name="user_employee_emails" value="" />
                        <input type="hidden" name="toapprovebyemail" value="" />
                    </div>
                </div>

                <div class="form-row mb-3" style="display:none;">
                    <div class="col-md-6 offset-md-3">
                        <select class="form-control" id="toapproveby" name="toapproveby">
                            @foreach($approver as $approver)
                            <option value="">{{ $approver->userfirstname}}</option>
                            @endforeach
                        </select>
                        <input type="hidden" name="user_employee_emails" value="" />
                        <input type="hidden" name="toapprovebyemail" value="" />
                    </div>
                </div>



                <div id="half_day_form">
                    <div class="form-row mb-3">
                        <div class="col-12 col-md-6 offset-md-3">Start Date:
                            <div class="input-group">
                                <input type="date" id="start_date_half" name="start_date" class="form-control" required onchange="calculateHalfDays()">
                                <select id="modal_start_date_type" class="form-control" style="max-width: 60px;" name="halfday_on_startdate">
                                    <option value="FULL">FULL</option>
                                    <option value="AM ON START DATE">AM</option>
                                    <option value="PM ON START DATE">PM</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="form-row mb-3">
                        <div class="col-12 col-md-6 offset-md-3">End Date:
                            <div class="input-group">
                                <input type="date" id="end_date_half" name="end_date" class="form-control" required onchange="calculateHalfDays()">
                                <select id="modal_end_date_type" class="form-control" style="max-width: 60px; "  name="halfday_on_enddate">
                                    <option value="FULL">FULL</option>
                                    <option value="AM ON END DATE">AM</option>
                                    <option value="PM ON END DATE">PM</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="form-row mb-3">
                    <div class="col-12 col-md-6 offset-md-3 mb-0">Return Date:
                        <div class="input-group">
                            <input type="date" class="form-control" id="return_date" name="return_date" placeholder="Return Date" required>
                        </div>
                    </div>
                </div>

                <div class="form-row mb-3">
                    <div class="col-md-6 offset-md-3">
                        <div class="input-group">
                            <input type="text" step="any" class="form-control font-weight-bold text-center" id="total_days" name="total_days" placeholder="Total Days" readonly>
                        </div>
                    </div>
                </div>

                <div class="form-row mb-3">
                    <div class="col-md-6 offset-md-3">
                        <div class="custom-file">
                            <input type="file" class="custom-file-input" id="customFile" name="attachment" onchange="updateFileName()">
                            <label class="custom-file-label" for="customFile" id="customFileLabel">Choose file</label>
                        </div>
                    </div>
                </div>


                <input type="hidden" name="userid" value="" placeholder="userid">

                <div class="form-row mb-3">
                    <div class="col-md-6 offset-md-3">
                        <textarea id="reason" name="reason" class="form-control" rows="3" placeholder="Leave reason" required></textarea>
                    </div>
                </div>

                <div class="form-row mb-3">
                    <div class="col">
                        <button type="submit" name="apply" id="apply" class="btn btn-primary btn-lg btn-block">
                            Apply
                        </button>
                    </div>
                    <div class="col">
                        <button type="reset" id="cancel" class="btn btn-warning btn-lg btn-block">
                            Cancel
                        </button>
                    </div>
                </div>

               

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






<script>
    // Set the minimum date for the start date input and reset its value
    function setAnnualLeaveRestriction() {
        const leaveTypeDropdown = document.getElementById('leave_type_id');
        const startDateInput = document.getElementById('start_date_half');

        // Reset the start date value
        startDateInput.value = '';

        if (leaveTypeDropdown.value === '1') { // Annual Leave (AL)
            const today = new Date();
            const threeDaysFromToday = new Date();
            threeDaysFromToday.setDate(today.getDate() + 3); // Add 3 days

            const formattedDate = threeDaysFromToday.toISOString().split('T')[0]; // Format date as YYYY-MM-DD
            startDateInput.min = formattedDate; // Set the min attribute
        } else {
            startDateInput.removeAttribute('min'); // Remove restriction for other leave types
        }
    }

    // Add event listener to dropdown
    document.getElementById('leave_type_id').addEventListener('change', setAnnualLeaveRestriction);

    // Call the function initially to ensure proper setup
    setAnnualLeaveRestriction();
</script>
<script>
window.addEventListener('load', function() {
    // Get today's date in local time
    const today = new Date();
    const year = today.getFullYear();
    const month = String(today.getMonth() + 1).padStart(2, '0'); // Months are 0-based
    const day = String(today.getDate()).padStart(2, '0');
    const todayFormatted = `${year}-${month}-${day}`;
    
    // Set minimum date for both inputs
    document.getElementById('start_date_half').min = todayFormatted;
    document.getElementById('end_date_half').min = todayFormatted;
});
</script>
<script>
    function calculateHalfDays() {
        const startDate = document.getElementById('start_date_half').value;
        const endDate = document.getElementById('end_date_half').value;
        const startDateType = document.getElementById('modal_start_date_type').value;
        const endDateType = document.getElementById('modal_end_date_type').value;


        let totalDays = 0;

        if (startDate && endDate) {
            const start = new Date(startDate);
            const end = new Date(endDate);

            let currentDate = new Date(start);

            while (currentDate <= end) {
                const dayOfWeek = currentDate.getDay();
                if (dayOfWeek !== 0 && dayOfWeek !== 6) { // Exclude Sunday (0) and Saturday (6)
                    totalDays++;
                }
                currentDate.setDate(currentDate.getDate() + 1);
            }
        }

        if (startDateType === "AM ON START DATE" || startDateType === "PM ON START DATE") {
            totalDays -= 0.5;
        }

        if (endDateType === "AM ON END DATE" || endDateType === "PM ON END DATE") {
            totalDays -= 0.5;
        }

        // Display the total days
        document.getElementById('total_days').value = totalDays > 0 ? totalDays.toFixed(1) : "0";

        // Adjust return date
        const returnDateInput = document.getElementById('return_date');
        const endDateObj = new Date(endDate);

        if (startDateType === "FULL" && endDateType === "FULL") {
            // Both dates are full, return date should be the next day after the end date
            endDateObj.setDate(endDateObj.getDate() + 1);
            returnDateInput.value = endDateObj.toISOString().split('T')[0];
        } else if (startDateType === "AM ON START DATE" || startDateType === "PM ON START DATE") {
            // Half day on start date, return date is the next day after the end date
            endDateObj.setDate(endDateObj.getDate() + 1);
            returnDateInput.value = endDateObj.toISOString().split('T')[0];
        } else if (endDateType === "AM ON END DATE" || endDateType === "PM ON END DATE") {
            // Half day on end date, return date is the same as end date
            returnDateInput.value = endDateObj.toISOString().split('T')[0];
        }

    }

    function handleHalfDaySelection(type) {
        if (type === 'start') {
            document.getElementById('modal_end_date_type').value = "FULL";
        } else if (type === 'end') {
            document.getElementById('modal_start_date_type').value = "FULL";
        }
        calculateHalfDays();
    }

    document.getElementById('modal_start_date_type').addEventListener('change', function () {
        handleHalfDaySelection('start');
    });

    document.getElementById('modal_end_date_type').addEventListener('change', function () {
        handleHalfDaySelection('end');
    });


</script>









<script>
    function updateFileName() {
        const fileInput = document.getElementById('customFile');
        const fileLabel = document.getElementById('customFileLabel');
        const fileName = fileInput.files[0]?.name || 'Choose file';
        fileLabel.textContent = fileName;
    }
</script>




<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
@endsection