@extends('layouts.appv2')

@section('content')

    <style>
        .nav-tabs .nav-link {
            transition: background-color 0.3s, color 0.3s;
            color: black;
        }

        .nav-tabs .nav-link:hover {
            background-color: #f0f0f0;
            color: black;
        }

        .nav-tabs .nav-link.active {
            background-color: white;
            color: #9e1a1a;
            border-radius: 0.5rem 0.5rem 0 0;
        }

        .nav-tabs .nav-link i {
            margin-right: 5px;
        }

        /* Filter Section Styling */
        .filter-section {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border-radius: 15px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .year-selector {
            background: white;
            border-radius: 10px;
            padding: 15px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }

        .year-selector label {
            color: #495057;
            font-weight: 600;
            font-size: 0.9rem;
            margin-bottom: 8px;
            display: block;
        }

        .year-selector select {
            border: 2px solid #dee2e6;
            border-radius: 8px;
            padding: 10px 15px;
            font-size: 1rem;
            transition: all 0.3s ease;
        }

        .year-selector select:focus {
            border-color: #9e1a1a;
            box-shadow: 0 0 0 0.2rem rgba(158, 26, 26, 0.15);
        }

        .search-box-wrapper {
            background: white;
            border-radius: 10px;
            padding: 15px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }

        .search-box-wrapper label {
            color: #495057;
            font-weight: 600;
            font-size: 0.9rem;
            margin-bottom: 8px;
            display: block;
        }

        .search-input-group {
            display: flex;
            gap: 10px;
        }

        .search-input-group input {
            flex: 1;
            border: 2px solid #dee2e6;
            border-radius: 8px;
            padding: 10px 15px;
            font-size: 0.95rem;
            transition: all 0.3s ease;
        }

        .search-input-group input:focus {
            border-color: #9e1a1a;
            box-shadow: 0 0 0 0.2rem rgba(158, 26, 26, 0.15);
        }

        .btn-reset {
            background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
            color: white;
            border: none;
            border-radius: 8px;
            padding: 10px 25px;
            font-weight: 600;
            transition: all 0.3s ease;
            white-space: nowrap;
        }

        .btn-reset:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(255, 193, 7, 0.3);
        }

        .filter-info-badge {
            background: white;
            border-radius: 10px;
            padding: 10px 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .filter-info-badge i {
            color: #9e1a1a;
        }

        .filter-info-badge span {
            color: #495057;
            font-weight: 600;
        }

        .filter-info-badge strong {
            color: #9e1a1a;
            font-size: 1.1rem;
        }
    </style>

    <div class="d-flex align-items-center mb-4">
        <h1 class="mb-4 gradient-text">Leaves</h1>
        <p class="ml-3 mb-3 font-weight-normal" style="font-size: 2.0rem;">|</p>
        <p class="ml-3 mb-3 font-weight-normal" style="font-size: 2.0rem;">Staff Leave Record</p>
    </div>

    <!-- Navigation Tabs -->
    <ul class="nav nav-tabs justify-content-center">
        <li class="nav-item">
            <a class="nav-link active" href="#" data-target="#main-content">
                <i class="fas fa-home"></i> Main
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#" data-target="#contract-content">
                <i class="fas fa-file-contract"></i> Contracts
            </a>
        </li>
    </ul>

    <!-- Vue App Wrapper -->
    <div id="app">
        <!-- MAIN CONTENT TAB -->
        <div id="main-content" class="card content-section" style="border-radius: 20px; box-shadow: 0 10px 10px rgba(0,0,0,0.2);">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h4>Employee's Leave</h4>
                    <div class="btn-toolbar mb-2 mb-md-0">
                        <a class="btn-sm btn-outline-primary" href="{{ route('admins.showgloballeave')}}" style="border-radius: 50px; font-weight:bolder;" title="Entitled Leave">
                            <i class="fa-solid fa-cloud-arrow-down" style="border-radius: 20px;"></i> Entitled
                        </a>
                        <button class="btn-sm btn-outline-success ml-2" data-toggle="modal" data-target="#unrecordedLeaveModal" style="border-radius: 50px; font-weight:bolder;" title="Add Unrecorded Leave">
                            <i class="fa-solid fa-plus" style="border-radius: 20px;"></i> Unrecorded Leave
                        </button>
                    </div>
                </div>

                <!-- Enhanced Filter Section -->
                <div class="filter-section">
                    <div class="row align-items-end">
                        <!-- Year Selector -->
                        <div class="col-lg-3 col-md-4 mb-3 mb-lg-0">
                            <div class="year-selector">
                                <label for="year">
                                    <i class="fas fa-calendar-alt"></i> Filter by Year
                                </label>
                                <form method="GET" action="{{ route('admins.leavestaff') }}" id="yearFilterForm">
                                    <select name="year" id="year" class="form-control" onchange="this.form.submit()">
                                        @foreach($availableYears as $year)
                                            <option value="{{ $year }}" {{ $selectedYear == $year ? 'selected' : '' }}>
                                                {{ $year }}
                                            </option>
                                        @endforeach
                                    </select>
                                </form>
                            </div>
                        </div>

                        <!-- Search Box -->
                        <div class="col-lg-6 col-md-8 mb-3 mb-lg-0">
                            <div class="search-box-wrapper">
                                <label for="employee-search">
                                    <i class="fas fa-search"></i> Search Employee
                                </label>
                                <div class="search-input-group">
                                    <input type="text" id="employee-search" class="form-control" placeholder="Type employee name..." onkeyup="searchEmployee()">
                                    <button class="btn btn-reset" onclick="clearSearch()" title="Clear search">
                                        <i class="fas fa-redo"></i> Reset
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- Current Year Badge -->
                        <div class="col-lg-3 col-md-12 text-lg-right text-center">
                            <div class="filter-info-badge">
                                <!-- <i class="fas fa-calendar-check fa-lg"></i> -->
                                <span>Viewing: <strong>{{ $selectedYear }}</strong></span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="dt-responsive table-responsive">
                    <table class="table table-sm mb-0 table-hover results table-bordered" style="font-size: 0.85rem;">
                        <thead class="text-center thead-dark">
                            <tr>
                                <th class="p-1">No.</th>
                                <th class="p-1">Employee Name</th>
                                <th class="p-1">Bank <br>Leave</th> 
                                <th class="p-1">Carried <br>Forward</th>
                                <th class="p-1">AL</th>
                                <th class="p-1">RL</th>
                                <th class="p-1">Unrecorded <br>Leave</th>
                                <th class="p-1">Total <br>Leave Entitled</th>
                                <th class="p-1">AL <br>Taken</th>
                                <th class="p-1">EL <br>Taken</th>
                                <th class="p-1">Total <br>Leave Taken</th>
                                <th class="p-1">Balance <br>Leave</th>
                                <th class="p-1">ML</th>
                                <th class="p-1">ML <br>Taken</th>
                                <th class="p-1">ML <br>Balance</th>
                                <th class="p-1">UPL</th>
                                <th class="p-1">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php $counter = 1; @endphp
                            @if (!$leaveData->isEmpty())
                                @foreach ($leaveData as $list)
                                    <tr>
                                        <td class="text-center p-1">{{ $counter++ }}</td>
                                        <td class="p-1">{{ $list['leave']->employee_first_name }}</td>
                                        <td class="text-center p-1">{{ $list['leave']->bank_leave ?? 0 }}</td>
                                        <td class="text-center p-1">{{ $list['leave']->carry_forward ?? 0 }}</td>
                                        <td class="text-center p-1">{{ $list['leave']->AL }}</td>
                                        <td class="text-center p-1">{{ $list['leave']->RL }}</td>
                                        <td class="text-center p-1">{{ $list['leave']->unrecorded_leave ?? 0 }}</td>
                                        <td class="text-center p-1">
                                            <span id="total-entitled-{{ $list['leave']->user_id }}">
                                                {{ $list['leave']->carry_forward + $list['leave']->AL + $list['leave']->RL + ($list['leave']->unrecorded_leave ?? 0) }}
                                            </span>
                                        </td>
                                        <td class="text-center p-1">{{ $list['ALtaken'] }}</td>
                                        <td class="text-center p-1">{{ $list['ELtaken'] }}</td>
                                        <td class="text-center p-1">{{ $list['TotalLeaveTaken'] }}</td>
                                        <td class="text-center p-1">{{ $list['totalBalance'] }}</td>
                                        <td class="text-center p-1">{{ $list['leave']->ML }}</td>
                                        <td class="text-center p-1">{{ $list['MCtaken'] }}</td>
                                        <td class="text-center p-1">{{ $list['MLBalance'] }}</td>
                                        <td class="text-center p-1">{{ $list['UPLtaken'] }}</td>
                                        <td class="text-center p-1">
                                            <a href="{{ route('admins.editleavestaff', $list['leave']->employee_id) }}" class="btn-sm" title="Edit"><i class="fas fa-edit"></i></a>
                                            <a href="{{ route('admins.viewleavestaff', $list['leave']->employee_id) }}" class="btn-sm" title="View"><i class="fas fa-eye"></i></a>
                                            <a href="{{ route('admins.addleavestaff', $list['leave']->employee_id) }}" class="btn-sm" title="Add"><i class="fas fa-plus"></i></a>
                                        </td>
                                    </tr>
                                @endforeach
                            @else
                                <tr>
                                    <td colspan="17" class="text-center">No Data Found for {{ $selectedYear }}</td>
                                </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Unrecorded Leave Modal -->
        <div class="modal fade" id="unrecordedLeaveModal" tabindex="-1" role="dialog" aria-labelledby="unrecordedLeaveModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="unrecordedLeaveModalLabel">Add Unrecorded Leave</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <form id="unrecordedLeaveForm" method="POST" action="{{ route('admins.storeUnrecordedLeave') }}">
                        @csrf
                        <div class="modal-body">
                            <div class="alert alert-info">
                                <i class="fas fa-info-circle"></i> This will add unrecorded leave to <strong>all current employees</strong> in the system for year {{ $selectedYear }}.
                            </div>
                            <div class="form-group">
                                <label for="unrecorded_days">Unrecorded Leave Days <span class="text-danger">*</span></label>
                                <input type="number" step="1" min="1" class="form-control" id="unrecorded_days" name="unrecorded_days" required>
                                <small class="form-text text-muted">Enter working days only (weekends/holidays excluded). Partial days will be rounded up (e.g., 0.5→1, 2.5→3).</small>
                            </div>
                            <div class="form-group">
                                <label for="unrecorded_date">Date <span class="text-danger">*</span></label>
                                <input type="date" class="form-control" id="unrecorded_date" name="unrecorded_date" required>
                                <small class="form-text text-muted">Date when the unrecorded leave was assigned.</small>
                            </div>
                            <div class="form-group">
                                <label for="unrecorded_remarks">Remarks</label>
                                <textarea class="form-control" id="unrecorded_remarks" name="unrecorded_remarks" rows="3" placeholder="Enter reason or remarks for unrecorded leave..."></textarea>
                            </div>
                            <input type="hidden" name="year" value="{{ $selectedYear }}">
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-success">Save Unrecorded Leave for All</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- CONTRACT CONTENT TAB -->
        <div id="contract-content" class="card content-section" style="display: none; border-radius: 20px; box-shadow: 0 10px 10px rgba(0,0,0,0.2);">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h4>Employee's Leave (Contracts)</h4>
                    <div class="btn-toolbar mb-2 mb-md-0">
                        <a class="btn-sm btn-outline-primary" href="{{ route('admins.showgloballeave')}}" style="border-radius: 50px; font-weight:bolder;"title="Add employee">
                            <i class="fa-solid fa-cloud-arrow-down"  style="border-radius: 20px;"></i> Entitled
                        </a>
                    </div>
                </div>

                <!-- Enhanced Filter Section for Contract Tab -->
                <div class="filter-section">
                    <div class="row align-items-end">
                        <!-- Year Selector -->
                        <div class="col-lg-3 col-md-4 mb-3 mb-lg-0">
                            <div class="year-selector">
                                <label for="year2">
                                    <i class="fas fa-calendar-alt"></i> Filter by Year
                                </label>
                                <form method="GET" action="{{ route('admins.leavestaff') }}" id="yearFilterForm2">
                                    <select name="year" id="year2" class="form-control" onchange="this.form.submit()">
                                        @foreach($availableYears as $year)
                                            <option value="{{ $year }}" {{ $selectedYear == $year ? 'selected' : '' }}>
                                                {{ $year }}
                                            </option>
                                        @endforeach
                                    </select>
                                </form>
                            </div>
                        </div>

                        <!-- Search Box -->
                        <div class="col-lg-6 col-md-8 mb-3 mb-lg-0">
                            <div class="search-box-wrapper">
                                <label for="employee-search-contract">
                                    <i class="fas fa-search"></i> Search Employee
                                </label>
                                <div class="search-input-group">
                                    <input type="text" id="employee-search-contract" class="form-control" placeholder="Type employee name..." onkeyup="searchEmployeeContract()">
                                    <button class="btn btn-reset" onclick="clearSearchContract()" title="Clear search">
                                        <i class="fas fa-redo"></i> Reset
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- Current Year Badge -->
                        <div class="col-lg-3 col-md-12 text-lg-right text-center">
                            <div class="filter-info-badge">
                                <i class="fas fa-calendar-check fa-lg"></i>
                                <span>Viewing: <strong>{{ $selectedYear }}</strong></span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="dt-responsive table-responsive">
                    <table id="contract-table" class="table table-sm mb-0 table-hover results-contract table-bordered" style="font-size: 0.85rem; ">
                        <thead class="text-center thead-dark">
                            <tr>
                                <th class="p-1">No.</th>
                                <th class="p-1">Employee Name</th>
                                <th class="p-1">Bank Leave</th>
                                <th class="p-1">Carried <br>Forward</th>
                                <th class="p-1">AL</th>
                                <th class="p-1">EL</th>
                                <th class="p-1">Total <br>Leave Entitled</th>
                                <th class="p-1">AL <br>Taken</th>
                                <th class="p-1">EL <br>Taken</th>
                                <th class="p-1">Total <br>Leave Taken</th>
                                <th class="p-1">Balance <br>Leave</th>
                                <th class="p-1">ML</th>
                                <th class="p-1">ML <br>Taken</th>
                                <th class="p-1">ML <br>Balance</th>
                                <th class="p-1">UPL</th>
                                <th class="p-1">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php $counter = 1; @endphp
                            @if (!$leaveData->isEmpty())
                                @foreach ($leaveData as $list)
                                    @if ($list['leave']->employee_emptype_id != 1)
                                        <tr>
                                            <td class="text-center p-1">{{ $counter++ }}</td>
                                            <td class="p-1">{{ $list['leave']->employee_first_name }}</td>
                                            <td class="text-center p-1">{{ $list['leave']->bank_leave ?? 0 }}</td>
                                            <td class="text-center p-1">{{ $list['leave']->carry_forward ?? 0 }}</td>
                                            <td class="text-center p-1">{{ $list['leave']->AL }}</td>
                                            <td class="text-center p-1">{{ $list['leave']->RL }}</td>
                                            <td class="text-center p-1">
                                                <span id="total-entitled-contract-{{ $list['leave']->user_id }}">
                                                    {{ $list['leave']->carry_forward + $list['leave']->AL + $list['leave']->RL }}
                                                </span>
                                            </td>
                                            <td class="text-center p-1">{{ $list['ALtaken'] }}</td>
                                            <td class="text-center p-1">{{ $list['ELtaken'] }}</td>
                                            <td class="text-center p-1">{{ $list['TotalLeaveTaken'] }}</td>
                                            <td class="text-center p-1">{{ $list['totalBalance'] }}</td>
                                            <td class="text-center p-1">{{ $list['leave']->ML }}</td>
                                            <td class="text-center p-1">{{ $list['MCtaken'] }}</td>
                                            <td class="text-center p-1">{{ $list['MLBalance'] }}</td>
                                            <td class="text-center p-1">{{ $list['UPLtaken'] }}</td>
                                            <td class="text-center p-1">
                                                <a href="{{ route('admins.editleavestaff', $list['leave']->employee_id) }}" class="btn-sm" title="Edit"><i class="fas fa-edit"></i></a>
                                                <a href="{{ route('admins.viewleavestaff', $list['leave']->employee_id) }}" class="btn-sm" title="View"><i class="fas fa-eye"></i></a>
                                                <a href="{{ route('admins.addleavestaff', $list['leave']->employee_id) }}" class="btn-sm" title="Add"><i class="fas fa-plus"></i></a>
                                            </td>
                                        </tr>
                                    @endif
                                @endforeach
                            @else
                                <tr>
                                    <td colspan="15" class="text-center">No Data Found for {{ $selectedYear }}</td>
                                </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
    <script>
        const { createApp } = Vue;

        createApp({
            data() {
                return {
                    leaveData: @json($leaveData)
                }
            },
            mounted() {
                this.leaveData.forEach(item => {
                    const total = (item.leave.carry_forward || 0) + (item.leave.AL || 0) + (item.leave.RL || 0);
                    const totalLeave = document.getElementById('total-entitled-' + item.leave.user_id);
                    if (totalLeave) totalLeave.innerText = total;
                    
                    const totalLeaveContract = document.getElementById('total-entitled-contract-' + item.leave.user_id);
                    if (totalLeaveContract) totalLeaveContract.innerText = total;
                });
            }
        }).mount('#app');
    </script>

    <script>
        function searchEmployee() {
            const input = document.getElementById("employee-search").value.toLowerCase();
            const rows = document.querySelectorAll(".results tbody tr");
            rows.forEach(row => {
                const nameCell = row.cells[1];
                if (nameCell) {
                    const nameText = nameCell.textContent.toLowerCase();
                    row.style.display = nameText.includes(input) ? "" : "none";
                }
            });
        }

        function clearSearch() {
            document.getElementById("employee-search").value = "";
            searchEmployee();
        }

        function searchEmployeeContract() {
            const input = document.getElementById("employee-search-contract").value.toLowerCase();
            const rows = document.querySelectorAll(".results-contract tbody tr");
            rows.forEach(row => {
                const nameCell = row.cells[1];
                if (nameCell) {
                    const nameText = nameCell.textContent.toLowerCase();
                    row.style.display = nameText.includes(input) ? "" : "none";
                }
            });
        }

        function clearSearchContract() {
            document.getElementById("employee-search-contract").value = "";
            searchEmployeeContract();
        }
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const navLinks = document.querySelectorAll('.nav-tabs .nav-link');
            navLinks.forEach(link => {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    navLinks.forEach(l => l.classList.remove('active'));
                    this.classList.add('active');
                    document.querySelectorAll('.content-section').forEach(section => section.style.display = 'none');
                    const targetId = this.getAttribute('data-target');
                    const targetSection = document.querySelector(targetId);
                    if (targetSection) targetSection.style.display = 'block';
                });
            });
        });
    </script>

@endsection