@extends('dashboard.layouts.app')

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

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

                <x-page-title title="Holidays"
                    description="Manage holiday periods, titles, active status, and update upcoming calendar entries.">
                    <button type="button" class="asset-btn asset-btn--primary" data-bs-toggle="modal"
                        data-bs-target="#addHolidayModal">
                        + Add New Holiday
                    </button>
                </x-page-title>

                <div class="ui-card ui-card--table">
                    {{-- Top controls --}}
                    <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 mb-0 whitespace-nowrap" style="margin-right: auto;">
                                Filters</h6>
                            <x-table-controls :action="route('holidays.index')" searchName="title" searchPlaceholder="search e.g. title"
                                :export="true" :exportRoute="route('holidays.export')" :saveRoute="route('holidays.saveFilteredTable')" :filters="[
                                    'status' => [
                                        'active' => 'Active',
                                        'inactive' => 'Inactive',
                                    ],

                                ]" :filterLabels="[
                                    'status' => 'Status',
                                    'recurring' => 'Recurring',
                                ]"
                                :date="true" />


                        </div>
                    </div>


                    <x-table :headers="['Title', 'From Date', 'To Date', 'Status', 'Actions']" :paginator="$holidays" emptyMessage="No holidays found."
                        emptyActionText="+ Add First Holiday" :emptyActionUrl="route('holidays.index')">
                        @foreach ($holidays as $holiday)
                            <tr id="holiday-row-{{ $holiday->id }}">
                                <td class="ui-title text-center">
                                    {{ $holiday->holiday_title }}
                                </td>

                                <td class="ui-muted text-center">
                                    {{ \Carbon\Carbon::parse($holiday->from_date)->format('d M Y') }}
                                </td>

                                <td class="ui-muted text-center">
                                    {{ \Carbon\Carbon::parse($holiday->to_date)->format('d M Y') }}
                                </td>

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

                                <td class="text-center" onclick="event.stopPropagation()">
                                    <div class="ui-actions justify-content-center">
                                        <button type="button" data-bs-toggle="modal"
                                            data-bs-target="#editHolidayModal_{{ $holiday->id }}" title="Edit Holiday"
                                            style="border:none; background:transparent; padding:0;">
                                            <span class="table-action">
                                                <iconify-icon icon="lucide:edit"></iconify-icon>
                                            </span>
                                        </button>

                                        <button type="button" data-bs-toggle="modal"
                                            data-bs-target="#deleteHolidayModal_{{ $holiday->id }}" title="Delete Holiday"
                                            style="border:none; background:transparent; padding:0;">
                                            <span class="table-action table-action--danger">
                                                <iconify-icon icon="fluent:delete-24-regular"></iconify-icon>
                                            </span>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </x-table>
                </div>

            </div>
        </div>
    </div>

    <div class="modal fade" id="addHolidayModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <form action="{{ route('holidays.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">Add Holiday</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>

                    <div class="modal-body pt-3">
                        <div class="modal-form-grid">
                            <div class="modal-form-col-12">
                                <label class="asset-label">Holiday Title</label>
                                <input type="text" class="asset-input" name="holiday_title" required>
                            </div>

                            <div class="modal-form-col-12">
                                <label class="asset-label">Details</label>
                                <textarea class="asset-input" name="details" rows="3"></textarea>
                            </div>

                            <div class="modal-form-col-6">
                                <label class="asset-label">From Date</label>
                                <input type="date" class="asset-input" name="from_date" required>
                            </div>

                            <div class="modal-form-col-6">
                                <label class="asset-label">To Date</label>
                                <input type="date" class="asset-input" name="to_date" required>
                            </div>

                            <div class="modal-form-col-6">
                                <label class="asset-label">Request Days Before</label>
                                <input type="number" min="0" class="asset-input" name="request_days_before"
                                    value="{{ old('request_days_before', 7) }}">
                                <small class="text-muted d-block mt-1">
                                    How many days before the holiday managers should receive the request (default 7).
                                </small>
                            </div>

                            <div class="modal-form-col-12">
                                <label class="holiday-check">
                                    <input type="hidden" name="active_status" value="0">
                                    <input type="checkbox" name="active_status" value="1" checked>
                                    <span class="holiday-check__box"></span>
                                    <span class="holiday-check__label">Active Status</span>
                                </label>
                            </div>
                        </div>
                    </div>

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

    @foreach ($holidays as $holiday)
        <div class="modal fade" id="editHolidayModal_{{ $holiday->id }}" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <form action="{{ route('holidays.update', $holiday->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">Edit Holiday</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>

                        <div class="modal-body pt-3">
                            <div class="modal-form-grid">
                                <div class="modal-form-col-12">
                                    <label class="asset-label">Holiday Title</label>
                                    <input type="text" class="asset-input" name="holiday_title"
                                        value="{{ $holiday->holiday_title }}" required>
                                </div>

                                <div class="modal-form-col-12">
                                    <label class="asset-label">Details</label>
                                    <textarea class="asset-input" name="details" rows="3">{{ $holiday->details }}</textarea>
                                </div>

                                <div class="modal-form-col-6">
                                    <label class="asset-label">From Date</label>
                                    <input type="date" class="asset-input" name="from_date"
                                        value="{{ $holiday->from_date }}" required>
                                </div>

                                <div class="modal-form-col-6">
                                    <label class="asset-label">To Date</label>
                                    <input type="date" class="asset-input" name="to_date"
                                        value="{{ $holiday->to_date }}" required>
                                </div>

                                <div class="modal-form-col-6">
                                    <label class="asset-label">Request Days Before</label>
                                    <input type="number" min="0" class="asset-input" name="request_days_before"
                                        value="{{ old('request_days_before', $holiday->request_days_before ?? 7) }}">
                                    <small class="text-muted d-block mt-1">
                                        How many days before the holiday managers should receive the request (default 7).
                                    </small>
                                </div>

                                <div class="modal-form-col-12">
                                    <label class="holiday-check">
                                        <input type="hidden" name="active_status" value="0">
                                        <input type="checkbox" name="active_status" value="1"
                                            {{ $holiday->active_status ? 'checked' : '' }}>
                                        <span class="holiday-check__box"></span>
                                        <span class="holiday-check__label">Active Status</span>
                                    </label>
                                </div>
                            </div>
                        </div>

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

        <div class="modal fade" id="deleteHolidayModal_{{ $holiday->id }}" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <form action="{{ route('holidays.destroy', $holiday->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">Delete Holiday</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>

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

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

@push('styles')
    <style>
        .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;
        }

        .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;
        }

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

        .modal-form-col-12 {
            grid-column: span 12 / span 12;
        }

        .modal-form-col-6 {
            grid-column: span 6 / span 6;
        }

        .holiday-check {
            display: inline-flex;
            align-items: center;
            gap: 0.65rem;
            cursor: pointer;
            margin: 0;
        }

        .holiday-check input[type="checkbox"] {
            display: none;
        }

        .holiday-check__box {
            width: 18px;
            height: 18px;
            border-radius: 6px;
            border: 1px solid #cbd5e1;
            background: #fff;
            position: relative;
            transition: 0.2s ease;
        }

        .holiday-check input[type="checkbox"]:checked+.holiday-check__box {
            background: #2563eb;
            border-color: #2563eb;
        }

        .holiday-check input[type="checkbox"]:checked+.holiday-check__box::after {
            content: "";
            position: absolute;
            left: 5px;
            top: 2px;
            width: 5px;
            height: 9px;
            border: solid #fff;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }

        .holiday-check__label {
            color: #374151;
            font-weight: 600;
            font-size: 0.93rem;
        }

        @media (max-width: 767.98px) {

            .modal-form-col-6,
            .modal-form-col-12 {
                grid-column: span 12 / span 12;
            }
        }
    </style>
@endpush