@extends('admin.layout.layout')
@section('content')

<div class="card mb-3">
    
    <div class="card-header-tab card-header">
        <div class="card-header-title font-size-lg text-capitalize fw-normal col-md-3">
            <i class="header-icon pe-7s-note2 me-3 text-muted opacity-10"></i>
            Vacation Request
        </div>

        <ul class="body-tabs body-tabs-layout tabs-animated body-tabs-animated nav">
            <li class="nav-item">
                <a role="tab" class="nav-link active" id="tab-0" data-bs-toggle="tab" href="#tab-content-0" onclick="filterStatus('all')">
                    <span>All</span>
                </a>
            </li>
            <li class="nav-item">
                <a role="tab" class="nav-link" id="tab-1" data-bs-toggle="tab" href="#tab-content-1" onclick="filterStatus(4)">
                    <span>Approved</span>
                </a>
            </li>
            <li class="nav-item">
                <a role="tab" class="nav-link" id="tab-2" data-bs-toggle="tab" href="#tab-content-2" onclick="filterStatus(3)">
                    <span>Rejected</span>
                </a>
            </li>
            <!-- <li class="nav-item">
                <a role="tab" class="nav-link" id="tab-3" data-bs-toggle="tab" href="#tab-content-3" onclick="filterStatus(1)">
                    <span>Pending-HRD</span>
                </a>
            </li> -->
            <li class="nav-item">
                <a role="tab" class="nav-link" id="tab-4" data-bs-toggle="tab" href="#tab-content-4" onclick="filterStatus(2)">
                    <span>Pending-Manager</span>
                </a>
            </li>
        </ul>

        @if($pagesModule['add_access']==1 || $pagesModule['full_access']==1)

        <div class="col-md-2 d-flex">
            <a href="{{ route('admin.add-edit-vacation-request') }}" class="btn btn-dark">Request Vacation</a>
        </div>

        @endif
            

    </div>

    

    <form method="POST" action="{{ route('update-multiple-status') }}">
        @csrf

        @if($pagesModule['edit_access']==1 || $pagesModule['full_access']==1)

        <button class="btn btn-success" type="submit" name="status" value="4" style="display: none;" id="approveAllBtn">Approve All</button>
        <button class="btn btn-danger" type="submit" name="status" value="3" style="display: none;" id="rejectAllBtn">Reject All</button>
        <button class="btn btn-success" type="submit" name="status" value="4" style="display: none;" id="approveSelectedBtn">Approve Selected</button>
        <button class="btn btn-danger" type="submit" name="status" value="3" style="display: none;" id="rejectSelectedBtn">Reject Selected</button>
        
        @endif

        <div class="card-body">
            @if (Session::has('success_message'))
                <div class="alert alert-success alert-dismissible fade show" role="alert" style="margin-top: 5px;">
                    <strong>Success!</strong> {{ Session::get('success_message') }}
                    <button type="button" class="close pull-right" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endif

            <table style="width: 100%;" id="vacation_requests" class="table table-hover table-striped table-bordered">
                <thead>
                    <tr>
                        @if($pagesModule['edit_access']==1 || $pagesModule['full_access']==1)
                        <th><input type="checkbox" id="checkAll"></th>
                        @endif
                        <th class="text-center">Req. ID</th>
                        <th>Date</th>
                        <th>Requested For</th>
                        <th>Type</th>
                        <th>Date</th>
                        <th class="text-center">Duration</th>
                        <!--<th class="text-center">Eligibility</th>-->
                        <!--<th>Remarks</th>-->
                        <th>Status</th>

                        @if($pagesModule['full_access']==1)
                            <th class="text-center">Action</th>
                        @endif

                    </tr>
                </thead>
                <tbody>
                @if ($vacationRequests->isNotEmpty())
                    @foreach($vacationRequests as $vacationRequest)

                    <tr class="status-{{ $vacationRequest->status }}">
                        @if($pagesModule['edit_access']==1 || $pagesModule['full_access']==1)
                        <td class="text-center"><input type="checkbox" class="record-checkbox" name="selectedRequests[]" value="{{ $vacationRequest->request_id }}"></td>
                        @endif
                        <td class="text-center">{{ $vacationRequest->request_id }}</td>
                        <td class="text-center">{{ $vacationRequest->request_date }}</td>
                        <td>
                            {{ $vacationRequest->emp_id }}
                            - 
                                {{ $vacationRequest->admin->full_name_english }}
                            <br>
                                {{ $vacationRequest->admin->jobTitle->job_title }}
                            - Dept:
                                {{ $vacationRequest->admin->department->department_name }}
                            <i class="glyphicon glyphicon-info-sign text-primary" data-toggle="modal" data-target="#mdlReply" onclick="getRequestInfo({{ $vacationRequest->emp_id }});" style="cursor: pointer;"></i>
                            <br>
                            {{ $vacationRequest->requester_remarks }}
                        </td>
                        <td>
                            @if ($vacationRequest->type == 1)
                                Annual
                            @elseif ($vacationRequest->type == 2)
                                Birth
                            @elseif ($vacationRequest->type == 3)
                                Death
                            @elseif ($vacationRequest->type == 4)
                                Emergency
                            @elseif ($vacationRequest->type == 5)
                                Examination
                            @elseif ($vacationRequest->type == 6)
                                Marriage
                            @elseif ($vacationRequest->type == 7)
                                Other
                            @elseif ($vacationRequest->type == 8)
                                Pregnancy
                            @elseif ($vacationRequest->type == 9)
                                Sick
                            @else
                                Unknown Type
                            @endif
                        </td>
                        <td>{{ $vacationRequest->start_date }} <br> {{ $vacationRequest->end_date }}</td>
                        <td class="text-center">{{ $vacationRequest->duration }}</td>
                        <!--<td class="text-center">{{ $vacationRequest->eligibility }}</td>-->
                        <!--<td>{{ $vacationRequest->manager_remarks }}</td>-->


                        @if($vacationRequest->status==4)
                        <td style="color: green;">Approved</td>
                        @elseif($vacationRequest->status==3)
                        <td style="color: red;">Rejected</td>
                        @elseif($vacationRequest->status==2)
                        <td style="color: #FF9800;">Pending Manager Approval</td>
                        @elseif($vacationRequest->status==1)
                        <td style="color: #2196F3">Pending HRD Eligibility Review</td>
                        @endif


                        @if($pagesModule['full_access']==1)
                        <td class="text-center">

                            <!--@if($pagesModule['edit_access']==1 || $pagesModule['full_access']==1)
                                <a href="{{ url('admin/add-edit-employee/'.$vacationRequest->id) }}" class="m-1"><i data-toggle="tooltip" title="Edit" style="color:green;" class="fas fa-edit"></i></a>
                            @endif
                            @if(Auth::guard('admin')->user()->type=='admin')
                                <a title="Set Permissions for Employee" href="{{ url('admin/employee-update-role/'.$vacationRequest->id) }}" class="m-1"><i class="fas fa-unlock"></i></a>
                            @endif-->
                        
                            <a class="confirmDelete m-1" name="vacation-request" title="Delete vacation request" href="javascript:void(0)" record="vacation-request" recordid="{{ $vacationRequest->request_id }}"><i data-toggle="tooltip" title="Delete" style="color:red;" class="fas fa-trash"></i></a>
                        
                        </td>
                        @endif
                    </tr>
                    @endforeach
                @endif
                </tbody>
                <tfoot>
                    <tr>
                        @if($pagesModule['edit_access']==1 || $pagesModule['full_access']==1)
                        <th></th>
                        @endif
                        <th class="text-center">Req. ID</th>
                        <th>Date</th>
                        <th>Requested For</th>
                        <th>Type</th>
                        <th>Date</th>
                        <th class="text-center">Duration</th>
                        <!--<th class="text-center">Eligibility</th>-->
                        <!--<th>Remarks</th>-->
                        <th>Status</th>
                    </tr>
                </tfoot>
            </table>
        </div>
    </form>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const checkAll = document.getElementById('checkAll');
        const checkboxes = document.querySelectorAll('.record-checkbox');
        const approveAllBtn = document.getElementById('approveAllBtn');
        const rejectAllBtn = document.getElementById('rejectAllBtn');
        const approveSelectedBtn = document.getElementById('approveSelectedBtn');
        const rejectSelectedBtn = document.getElementById('rejectSelectedBtn');

        // Handle Check All checkbox
        checkAll.addEventListener('change', function() {
            checkboxes.forEach(checkbox => {
                checkbox.checked = this.checked;
            });

            toggleButtons();
        });

        // Handle individual checkboxes
        checkboxes.forEach(checkbox => {
            checkbox.addEventListener('change', function() {
                toggleButtons();
            });
        });

        function toggleButtons() {
            const checkedCheckboxes = document.querySelectorAll('.record-checkbox:checked');
            const allChecked = checkedCheckboxes.length === checkboxes.length;

            approveAllBtn.style.display = allChecked ? 'inline-block' : 'none';
            rejectAllBtn.style.display = allChecked ? 'inline-block' : 'none';
            approveSelectedBtn.style.display = !allChecked && checkedCheckboxes.length > 0 ? 'inline-block' : 'none';
            rejectSelectedBtn.style.display = !allChecked && checkedCheckboxes.length > 0 ? 'inline-block' : 'none';
        }
    });

    // Function to filter vacation requests by status
    function filterStatus(status) {
        const rows = document.querySelectorAll('tbody tr');

        rows.forEach(row => {
            if (status === 'all') {
                row.style.display = '';
            } else {
                const rowStatus = row.classList.contains('status-' + status);
                if (rowStatus) {
                    row.style.display = '';
                } else {
                    row.style.display = 'none';
                }
            }
        });
    }
</script>

@endsection