@extends('layouts.admin')

@section('page_title', 'Leave Requests')

@section('content')
    <div class="row align-items-center mb-5">
        <div class="col">
            <h2 class="fw-extrabold tracking-tight mb-1" style="font-weight: 800; font-size: 1.875rem;">Leave Requests</h2>
            <p class="text-secondary opacity-75 mb-0">Review and manage employee time-off and absence applications.</p>
        </div>
    </div>

    <!-- Table Card -->
    <div class="card border-0 shadow-sm overflow-hidden"
        style="border-radius: 0.875rem; border: 1px solid rgba(0,0,0,0.05) !important;">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0" id="leaveTable">
                    <thead class="bg-light bg-opacity-50">
                        <tr>
                            <th class="px-4 py-3 text-uppercase text-secondary fw-bold"
                                style="font-size: 0.65rem; letter-spacing: 0.05rem; width: 60px;">#</th>
                            <th class="px-4 py-3 text-uppercase text-secondary fw-bold"
                                style="font-size: 0.65rem; letter-spacing: 0.05rem;">Employee</th>
                            <th class="px-4 py-3 text-uppercase text-secondary fw-bold"
                                style="font-size: 0.65rem; letter-spacing: 0.05rem;">Type</th>
                            <th class="px-4 py-3 text-uppercase text-secondary fw-bold"
                                style="font-size: 0.65rem; letter-spacing: 0.05rem;">Duration Range</th>
                            <th class="px-4 py-3 text-uppercase text-secondary fw-bold text-center"
                                style="font-size: 0.65rem; letter-spacing: 0.05rem;">Days</th>
                            <th class="px-4 py-3 text-uppercase text-secondary fw-bold"
                                style="font-size: 0.65rem; letter-spacing: 0.05rem; width: 140px;">Status</th>
                            <th class="px-4 py-3 text-end text-uppercase text-secondary fw-bold pe-4"
                                style="font-size: 0.65rem; letter-spacing: 0.05rem; width: 220px;">Action</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y">
                        @foreach ($leaves as $leave)
                            <tr class="transition-all hover-row">
                                <td class="px-4 py-4 text-secondary fw-medium" style="font-size: 0.8125rem;">
                                    {{ str_pad($loop->iteration, 2, '0', STR_PAD_LEFT) }}</td>
                                <td class="px-4 py-4">
                                    <div class="d-flex align-items-center gap-3">
                                        <div class="size-9 rounded-circle d-flex align-items-center justify-content-center fw-bold text-sm shadow-sm"
                                            style="width: 36px; height: 36px; font-size: 0.8rem; background-color: {{ ['#eef2ff', '#fff1f2', '#ecfdf5', '#fffbeb'][$leave->user_id % 4] }}; color: {{ ['#4f46e5', '#e11d48', '#059669', '#d97706'][$leave->user_id % 4] }};">
                                            {{ substr($leave->user->name, 0, 1) }}{{ substr(strrchr($leave->user->name, ' '), 1, 1) ?: '' }}
                                        </div>
                                        <span class="fw-bold" style="font-size: 0.875rem;">{{ $leave->user->name }}</span>
                                    </div>
                                </td>
                                <td class="px-4 py-4">
                                    <span class="fw-bold text-dark"
                                        style="font-size: 0.875rem;">{{ ucfirst($leave->leave_type) }}</span>
                                </td>
                                <td class="px-4 py-4 text-secondary fw-medium" style="font-size: 0.875rem;">
                                    {{ $leave->from_date->format('d M') }} — {{ $leave->to_date->format('d M, Y') }}
                                </td>
                                <td class="px-4 py-4 text-center">
                                    <span class="fw-bold text-dark"
                                        style="font-size: 0.875rem;">{{ $leave->total_days }}</span>
                                </td>
                                <td class="px-4 py-4">
                                    @php
                                        $statusColor =
                                            $leave->status == 'approved'
                                                ? '#059669'
                                                : ($leave->status == 'rejected'
                                                    ? '#dc2626'
                                                    : '#d97706');
                                        $statusBg =
                                            $leave->status == 'approved'
                                                ? '#ecfdf5'
                                                : ($leave->status == 'rejected'
                                                    ? '#fef2f2'
                                                    : '#fffbeb');
                                    @endphp
                                    <span class="px-2.5 py-1 rounded-pill text-uppercase fw-bold"
                                        style="font-size: 0.625rem; background-color: {{ $statusBg }}; color: {{ $statusColor }}; border: 1px solid {{ $statusColor }}20;">
                                        {{ $leave->status }}
                                    </span>
                                    <span class="d-none">{{ ucfirst($leave->status) }}</span>
                                </td>
                                <td class="px-4 py-4 text-end pe-4">
                                    @if ($leave->status == 'pending')
                                        <div class="d-flex justify-content-end gap-2">
                                            <form action="{{ route('admin.leaves.approve', $leave->id) }}" method="POST">
                                                @csrf
                                                <button type="submit"
                                                    class="btn btn-primary btn-sm px-3 fw-bold rounded-pill shadow-sm"
                                                    style="font-size: 0.75rem;">Approve</button>
                                            </form>
                                            <form action="{{ route('admin.leaves.reject', $leave->id) }}" method="POST">
                                                @csrf
                                                <button type="submit"
                                                    class="btn btn-outline-danger btn-sm px-3 fw-bold rounded-pill"
                                                    style="font-size: 0.75rem;">Reject</button>
                                            </form>
                                        </div>
                                    @else
                                        <button class="btn btn-icon hover-primary" title="Details">
                                            <span class="material-symbols-outlined fs-5">visibility</span>
                                        </button>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <!-- Pagination Placeholder -->
            <div class="px-4 py-4 bg-light bg-opacity-25 border-top d-flex align-items-center justify-content-between">
                <p class="text-secondary mb-0 fw-medium" style="font-size: 0.8125rem;">Showing <span
                        class="text-dark fw-bold">1-{{ count($leaves) }}</span> requests</p>
                <div class="d-flex gap-2">
                    <button class="btn btn-outline-light border text-secondary px-2 py-1 btn-sm"><span
                            class="material-symbols-outlined fs-6 d-block">chevron_left</span></button>
                    <button class="btn btn-primary btn-sm px-2.5 py-1 fw-bold" style="font-size: 0.75rem;">1</button>
                    <button class="btn btn-outline-light border text-secondary px-2 py-1 btn-sm"><span
                            class="material-symbols-outlined fs-6 d-block">chevron_right</span></button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .tracking-tight {
            letter-spacing: -0.015rem;
        }

        .btn-icon {
            padding: 0.4rem;
            border-radius: 0.5rem;
            color: #94a3b8;
            background: transparent;
            border: 0;
            transition: all 0.2s;
        }

        .btn-icon:hover {
            color: #1a1f2e;
            background: #eaedf2;
        }

        .hover-primary:hover {
            color: var(--primary-color);
            background: rgba(13, 110, 253, 0.1);
        }

        .hover-row:hover {
            background-color: rgba(248, 250, 252, 0.5) !important;
        }

        /* DataTable Overrides */
        #leaveTable_wrapper .dataTables_filter,
        #leaveTable_wrapper .dataTables_length,
        #leaveTable_wrapper .dataTables_info,
        #leaveTable_wrapper .dataTables_paginate {
            display: none !important;
        }
    </style>
@endpush

@push('scripts')
    <script>
        $(document).ready(function() {
            $('#leaveTable').DataTable({
                paging: true,
                lengthChange: false,
                pageLength: 20,
                searching: false
            });
        });
    </script>
@endpush