@extends('layouts.appv2')

@section('content')


<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">
            @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
        <form action="{{ route('admins.leavesapply', $employee->employee_id) }}" method="POST" enctype="multipart/form-data">
            @csrf

            <div class="form-group mb-3">
                <h4>EMPLOYEE NAME : <b>{{ $employee->employee_first_name}}</b></h4>
            </div>

            <div class="form-group mb-3">
                Leave Entitled:
                AL : <b>{{ $ALtotal}}</b>,
                ML : <b>{{ $MCtotal}}</b>
                <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-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: 80px;" 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-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: 80px;" 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-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">
                    Return Date:
                    <div class="form-line">
                        <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="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"></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>
    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>

@endsection