@extends('layouts.userapp')

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


                @if(session('success'))
                    <div class="alert alert-success">
                        {{ session('success') }}
                    </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>Leaves Requested</h5>
    </div>
    <div class="card-body">
        <div class="table-responsive table">
                <div class="d-flex justify-content-around align-items-center" style="position: relative; ">
                    <div class="text-center" style="width: 45%;">
                        <h2 class="mb-0">{{$ALcount}}/{{$leaveentitled->AL ?? '0'}}</h2>
                        <h3>ANNUAL LEAVE</h3>
                    </div>

                    <div style="width: 1px; height: 100%; background-color: black; position: absolute; left: 50%; transform: translateX(-50%);"></div>

                    <div class="text-center" style="width: 45%;">
                        <h2 class="mb-0">{{$MLcount}}/{{$leaveentitled->ML ?? '0'}}</h2>
                        <h3>MEDICAL LEAVE</h3>
                    </div>
                </div>

            

            <table class="table text-center table-borderless table-hover mt-3">
                @php $no = 0; @endphp
                @if ($applied !== FALSE)
                    @if (count($applied) > 0)
                        @foreach($applied as $applied)
                        <tr class="border-bottom" 
                            onclick=window.location="{{ route('checkins.myleavesapplied', [$applied->leave_apply_id]) }};" 
                            style="cursor: pointer;">
                            <td class="align-middle col-xs-0">
                                {{ ++$no }}
                            </td>
                            <td class="align-middle col-xs-0 p-0">
                            <span class="border rounded p-3 font-size-41 text-white" 
                                style="
                                    font-size: 1.5em; 
                                    background-color: 
                                        {{ $applied->display_status == 'Pending' ? '#FFDB58' : 
                                        ($applied->display_status == 'Approved' ? 'green' : 
                                        ($applied->display_status == 'Rejected' ? 'red' : 
                                        ($applied->display_status == 'Verified' ? 'blue' : 'grey'))) }};
                                    color: 
                                        {{ $applied->display_status == 'Pending' ? 'black' : 'white' }};
                                ">
                                {{ $applied->leavetype_code }}
                            </span>
                            </td>
                            <td class="align-middle text-left">
                                <b>
                                    {{ $applied->total_days}} Days <i class="fas fa-clock mr-2 text-muted"></i>
                                    {{ \Carbon\Carbon::parse($applied->start_date)->format('d M') }} <i class="fas fa-horizontal-rule">-</i> 
                                    {{ \Carbon\Carbon::parse($applied->end_date)->format('d M') }}
                                </b>
                                <br>
                                    {{ $applied->display_status }}
                                </br>
                                <small>{{ date("j F Y", strtotime($applied->created_date)) }}</small>
                            </td>
                        </tr>

                        @endforeach
                    @endif
                @endif
            </table>
        </div>
    </div>

</div>


 
    


        <script>
    function openSidebar() {
        document.getElementById("mySidebar").style.width = "250px";
        document.getElementById("myOverlay").style.display = "block";
    }

    function closeSidebar() {
        document.getElementById("mySidebar").style.width = "0";
        document.getElementById("myOverlay").style.display = "none";
    }

    function toggleDropdown(dropdownId) {
        var dropdown = document.getElementById(dropdownId);
        if (dropdown.style.display === "none") {
            dropdown.style.display = "block";
        } else {
            dropdown.style.display = "none";
        }
    }
</script>


<script>
// Get the button elements and the row you want to toggle
const checkinBtn = document.getElementById('checkin');
const checkoutBtn = document.getElementById('checkout');
const reasonRow = document.querySelector('.reason-row');  // Adjust the selector based on your actual row
const actionInput = document.getElementById('actionInput');  // Hidden input for action
const checkinTypeInput = document.getElementById('checkinTypeInput');  // Hidden input for check-in type

if (checkinBtn && checkoutBtn && reasonRow) {
    function toggleReasonRow(button) {
        reasonRow.classList.remove('hide');  // Unhide the reason row
        actionInput.value = button.id;       // Set the action input value ('checkin' or 'checkout')
        checkinTypeInput.value = button.value;  // Set the check-in type value ('IN' or 'OUT')
    }

    // Event listener for 'CHECK IN' button
    checkinBtn.addEventListener('click', function() {
        toggleReasonRow(checkinBtn);  // Call the function with the 'checkin' button
    });

    // Event listener for 'CHECK OUT' button
    checkoutBtn.addEventListener('click', function() {
        toggleReasonRow(checkoutBtn);  // Call the function with the 'checkout' button
    });
}

    // Reason selection functionality
    reasonInputs.forEach(input => {
        input.addEventListener('click', function() {
            otherReasonInput.disabled = this.value !== 'Other';
        });
    });

    // Cancel button functionality
    const cancelBtn = document.getElementById('cancel');
    if (cancelBtn) {
        cancelBtn.addEventListener('click', function() {
            reasonRow.classList.add('hide');
            actionInput.value = '';
            checkinTypeInput.value = '';
            otherReasonInput.value = '';
            otherReasonInput.disabled = true;
            reasonInputs.forEach(input => input.checked = false);
        });
    }

    // Function to show modal
    function showModal(modalId, message) {
        const modal = document.getElementById(modalId);
        const modalBody = modal.querySelector('.modal-body');
        modalBody.textContent = message;
        $(modal).modal('show');
    }

</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