@extends('dashboard.layouts.app')

@section('content')
    @include('components.alert')

    @php
        $activeFiltersCount = collect([request('search'), request('per_page')])
            ->filter(fn($value) => filled($value))
            ->count();
    @endphp

    <div class="container-fluid app-bg">
        <div class="page-shell">
            <div class="space-y-4">

                <x-page-title title="Leave Types"
                    description="Manage leave type settings, annual balances, wait periods, and activation status.">
                    <button type="button" class="asset-btn asset-btn--primary" data-bs-toggle="modal"
                        data-bs-target="#addLeaveTypeModal">
                        + Add New Leave Type
                    </button>
                </x-page-title>

                <div class="ui-card ui-card--table" style="border-radius: 20px 20px 0px 0px !important;">
                    <div class="ui-card__header">
                        <div class="d-flex align-items-center gap-3 flex-nowrap">
                            <h6 class="mb-0 font-semibold text-gray-800 whitespace-nowrap" style="margin-right: auto">
                                Filters</h6>

                            <x-table-controls :action="route('leave_types.index')" searchName="search" searchPlaceholder="search"
                                :export="true" :exportRoute="route('leave_types.export')" :saveRoute="route('leave_types.saveFilteredTable')" :filters="[]" />

                            <input type="hidden" name="per_page" value="{{ request('per_page', 15) }}">
                        </div>
                    </div>
                </div>

                <div class="ui-card ui-card--table" style="border-radius: 0px">
                    <x-table :headers="['Type','Status', 'Actions']" :paginator="$types" emptyMessage="No leave types found.">
                        @forelse ($types as $type)
                            <tr id="leave-type-row-{{ $type->id }}">
                                <td class="text-center">
                                    <div class="ui-title">{{ $type->type }}</div>
                                </td>

                                {{-- <td class="text-center">
                                    <div class="ui-title">{{ $type->total_days }}</div>
                                </td> --}}

                                {{-- <td class="text-center">
                                    <div class="ui-title">{{ $type->max_leaves_allowed }}</div>
                                </td> --}}

                                {{-- <td class="text-center">
                                    @if ($type->applicable_after_work_days == 0)
                                        <span class="ui-pill ui-pill--success">Immediate</span>
                                    @else
                                        <div class="ui-muted">
                                            {{ $type->applicable_after_work_days }}
                                            day{{ $type->applicable_after_work_days > 1 ? 's' : '' }}
                                        </div>
                                    @endif
                                </td> --}}

                                <td class="text-center">
                                    <span class="ui-pill ui-pill--{{ $type->active_status ? 'success' : 'danger' }}">
                                        {{ $type->active_status ? 'Active' : 'Inactive' }}
                                    </span>
                                </td>

                                <td class="text-center" onclick="event.stopPropagation()">
                                    <div class="ui-actions justify-content-center">
                                        <x-table-action type="view" :url="route('leave_types.show', $type)" />

                                        <button type="button" class="table-action" data-bs-toggle="modal"
                                            data-bs-target="#editLeaveTypeModal_{{ $type->id }}"
                                            title="Edit Leave Type">
                                            <iconify-icon icon="lucide:edit"></iconify-icon>
                                        </button>

                                        <button type="button" class="delete-action-btn" data-bs-toggle="modal"
                                            data-bs-target="#deleteLeaveTypeModal_{{ $type->id }}"
                                            title="Delete Leave Type">
                                            <span class="table-action table-action--danger">
                                                <iconify-icon icon="fluent:delete-24-regular"></iconify-icon>
                                            </span>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        @empty
                        @endforelse
                    </x-table>
                </div>
            </div>
        </div>
    </div>

    {{-- ADD MODAL --}}
    <div class="modal fade" id="addLeaveTypeModal" tabindex="-1" aria-labelledby="addLeaveTypeModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <form action="{{ route('leave_types.store') }}" method="POST">
                @csrf

                <div class="modal-content border-0 shadow-lg rounded-4">
                    <div class="modal-header border-bottom-0 pb-0">
                        <h5 class="modal-title" id="addLeaveTypeModalLabel">Add Leave Type</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>

                    <div class="modal-body pt-3">
                        <div class="asset-form-grid">
                            <div class="asset-col-12">
                                <label for="type" class="asset-label">Type</label>
                                <input type="text" class="asset-input" id="type" name="type" required>
                            </div>

                            <div class="asset-col-6">
                                <label for="total_days" class="asset-label">Total Days Per Year</label>
                                <input type="number" class="asset-input" id="total_days" name="total_days" required
                                    min="1">
                            </div>

                            <div class="asset-col-6">
                                <label for="max_leaves_allowed" class="asset-label">Maximum Consecutive Days Allowed</label>
                                <input type="number" class="asset-input" id="max_leaves_allowed" name="max_leaves_allowed"
                                    required min="1">
                            </div>

                            <div class="asset-col-12">
                                <label for="applicable_after_work_days" class="asset-label">Applicable After (work
                                    days)</label>
                                <input type="number" class="asset-input" id="applicable_after_work_days"
                                    name="applicable_after_work_days" required min="0">
                            </div>

                            <div class="asset-col-12">
                                <div class="form-check leave-check-wrap">
                                    <input class="form-check-input" type="checkbox" id="active_status"
                                        name="active_status" value="1" checked>
                                    <label class="form-check-label" for="active_status">Active Status</label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer border-top-0 pt-0">
                        <button type="submit" class="asset-btn asset-btn--primary">Save</button>
                        <button type="button" class="asset-btn asset-btn--secondary"
                            data-bs-dismiss="modal">Cancel</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    {{-- EDIT MODALS --}}
    @foreach ($types as $type)
        <div class="modal fade" id="editLeaveTypeModal_{{ $type->id }}" tabindex="-1"
            aria-labelledby="editLeaveTypeModalLabel_{{ $type->id }}" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <form action="{{ route('leave_types.update', $type->id) }}" method="POST">
                    @csrf
                    @method('PUT')

                    <div class="modal-content border-0 shadow-lg rounded-4">
                        <div class="modal-header border-bottom-0 pb-0">
                            <h5 class="modal-title" id="editLeaveTypeModalLabel_{{ $type->id }}">Edit Leave Type</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>

                        <div class="modal-body pt-3">
                            <div class="asset-form-grid">
                                <div class="asset-col-12">
                                    <label for="type_{{ $type->id }}" class="asset-label">Type</label>
                                    <input type="text" class="asset-input" id="type_{{ $type->id }}"
                                        name="type" value="{{ $type->type }}" required>
                                </div>

                                <div class="asset-col-6">
                                    <label for="total_days_{{ $type->id }}" class="asset-label">Total Days Per
                                        Year</label>
                                    <input type="number" class="asset-input" id="total_days_{{ $type->id }}"
                                        name="total_days" value="{{ $type->total_days }}" required min="1">
                                </div>

                                <div class="asset-col-6">
                                    <label for="max_leaves_allowed_{{ $type->id }}" class="asset-label">Maximum
                                        Consecutive Days Allowed</label>
                                    <input type="number" class="asset-input"
                                        id="max_leaves_allowed_{{ $type->id }}" name="max_leaves_allowed"
                                        value="{{ $type->max_leaves_allowed }}" required min="1">
                                </div>

                                <div class="asset-col-12">
                                    <label for="applicable_after_work_days_{{ $type->id }}"
                                        class="asset-label">Applicable After (work days)</label>
                                    <input type="number" class="asset-input"
                                        id="applicable_after_work_days_{{ $type->id }}"
                                        name="applicable_after_work_days" value="{{ $type->applicable_after_work_days }}"
                                        required min="0">
                                </div>

                                <div class="asset-col-12">
                                    <div class="form-check leave-check-wrap">
                                        <input class="form-check-input" type="checkbox"
                                            id="active_status_{{ $type->id }}" name="active_status" value="1"
                                            {{ $type->active_status ? 'checked' : '' }}>
                                        <label class="form-check-label" for="active_status_{{ $type->id }}">
                                            Active Status
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="modal-footer border-top-0 pt-0">
                            <button type="submit" class="asset-btn asset-btn--primary">Update</button>
                            <button type="button" class="asset-btn asset-btn--secondary"
                                data-bs-dismiss="modal">Cancel</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        {{-- DELETE MODAL --}}
        <div class="modal fade" id="deleteLeaveTypeModal_{{ $type->id }}" tabindex="-1"
            aria-labelledby="deleteLeaveTypeModalLabel_{{ $type->id }}" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <form action="{{ route('leave_types.destroy', $type->id) }}" method="POST">
                    @csrf
                    @method('DELETE')

                    <div class="modal-content border-0 shadow-lg rounded-4">
                        <div class="modal-header border-bottom-0 pb-0">
                            <h5 class="modal-title" id="deleteLeaveTypeModalLabel_{{ $type->id }}">Delete Leave Type
                            </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>

                        <div class="modal-body pt-3">
                            <p class="mb-0">
                                Are you sure you want to delete
                                <strong>{{ $type->type }}</strong>?
                            </p>
                        </div>

                        <div class="modal-footer border-top-0 pt-0">
                            <button type="submit" class="btn btn-outline-danger">
                                Yes, Delete
                            </button>
                            <button type="button" class="asset-btn asset-btn--secondary"
                                data-bs-dismiss="modal">Cancel</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    @endforeach
@endsection

@push('styles')
    <style>
        .form-section__head {
            margin-bottom: 1rem;
            padding-bottom: 0.9rem;
            border-bottom: 1px solid #eef2f7;
        }

        .form-section__title {
            font-size: 1rem;
            font-weight: 700;
            color: #111827;
        }

        .form-section__sub {
            color: #6b7280;
            font-size: 0.92rem;
        }

        .filter-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .filter-head__meta {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            flex-wrap: wrap;
        }

        .staff-filter-grid {
            display: grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            gap: 1rem;
        }

        .staff-filter-col {
            grid-column: span 3 / span 3;
        }

        .staff-filter-col--search {
            grid-column: span 6 / span 6;
        }

        .asset-label {
            display: inline-block;
            margin-bottom: 0.45rem;
            font-weight: 600;
            color: #374151;
            font-size: 0.92rem;
        }

        .asset-input,
        .asset-select {
            width: 100%;
            min-height: 44px;
            border: 1px solid #dbe2ea;
            border-radius: 12px;
            padding: 0.7rem 0.9rem;
            background: #fff;
            color: #111827;
            transition: 0.2s ease;
        }

        .asset-input:focus,
        .asset-select:focus {
            outline: none;
            border-color: #b8c4d6;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08);
        }

        .filter-search-wrap {
            position: relative;
        }

        .filter-search-icon {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: #9ca3af;
            font-size: 18px;
            pointer-events: none;
        }

        .filter-search-input {
            padding-left: 2.5rem;
        }

        .filter-actions {
            display: flex;
            justify-content: flex-end;
            gap: 0.75rem;
            margin-top: 1rem;
            flex-wrap: wrap;
        }

        .table-action {
            width: 34px;
            height: 34px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            border: 1px solid #e5e7eb;
            background: #fff;
            color: #374151;
            transition: 0.2s ease;
            font-size: 18px;
            text-decoration: none;
        }

        .table-action:hover {
            transform: translateY(-1px);
            box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
        }

        .table-action--danger {
            border-color: #f3d1d1;
            color: #dc3545;
        }

        .table-action--danger:hover {
            background: #fff5f5;
        }

        .delete-action-btn {
            border: none;
            background: transparent;
            padding: 0;
        }

        .leave-check-wrap {
            padding: 0.35rem 0 0 0.15rem;
        }

        @media (max-width: 1199.98px) {

            .staff-filter-col,
            .staff-filter-col--search {
                grid-column: span 6 / span 6;
            }
        }

        @media (max-width: 767.98px) {

            .staff-filter-col,
            .staff-filter-col--search {
                grid-column: span 12 / span 12;
            }

            .filter-head {
                align-items: stretch;
            }
        }
    </style>
@endpush

@push('scripts')
    <script>
        setTimeout(() => {
            let alert = document.getElementById('successAlert');
            if (alert) {
                let bsAlert = new bootstrap.Alert(alert);
                bsAlert.close();
            }
        }, 10000);
    </script>
@endpush