@extends('layouts.appv2')

@section('content')
<style>
    .card-custom {
        border: none;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        transition: all 0.3s ease;
    }
    .card-custom:hover {
        box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    }
    .section-header {
        border-left: 4px solid;
        padding-left: 16px;
        margin-bottom: 24px;
    }
    .section-header.primary { border-color: #4A90E2; }
    .section-header.success { border-color: #27AE60; }
    .section-header.warning { border-color: #F39C12; }
    .btn-custom {
        border-radius: 8px;
        padding: 10px 24px;
        font-weight: 500;
        transition: all 0.3s ease;
    }
    .btn-custom:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    .form-control, .form-select {
        border-radius: 8px;
        border: 1px solid #ddd;
        padding: 10px 14px;
    }
    .form-control:focus, .form-select:focus {
        border-color: #4A90E2;
        box-shadow: 0 0 0 0.2rem rgba(74, 144, 226, 0.15);
    }
    .badge-custom {
        padding: 6px 12px;
        border-radius: 6px;
        font-weight: 500;
    }
    .state-card {
        border-left: 4px solid #4A90E2;
        background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    }
    .action-buttons {
        display: flex;
        gap: 8px;
    }
    .edit-btn {
        background: #4A90E2;
        color: white;
        border: none;
        padding: 6px 12px;
        border-radius: 6px;
        font-size: 14px;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    .edit-btn:hover {
        background: #357ABD;
    }
    .delete-btn {
        background: #E74C3C;
        color: white;
        border: none;
        padding: 6px 12px;
        border-radius: 6px;
        font-size: 14px;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    .delete-btn:hover {
        background: #C0392B;
    }
    .unassign-btn {
        background: #95A5A6;
        color: white;
        border: none;
        padding: 4px 10px;
        border-radius: 4px;
        font-size: 12px;
        cursor: pointer;
    }
    .unassign-btn:hover {
        background: #7F8C8D;
    }
    .tab-content-custom {
        padding: 24px;
        background: white;
        border-radius: 0 12px 12px 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }
    .nav-tabs-custom {
        border-bottom: 2px solid #e9ecef;
    }
    .nav-tabs-custom .nav-link {
        border: none;
        color: #6c757d;
        font-weight: 500;
        padding: 12px 24px;
        border-radius: 8px 8px 0 0;
        transition: all 0.3s ease;
        cursor: pointer;
    }
    .nav-tabs-custom .nav-link:hover {
        color: #4A90E2;
        background: #f8f9fa;
    }
    .nav-tabs-custom .nav-link.active {
        color: #4A90E2;
        background: white;
        border-bottom: 3px solid #4A90E2;
    }
    .list-item {
        padding: 12px;
        background: #f8f9fa;
        border-radius: 8px;
        margin-bottom: 8px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .empty-state {
        text-align: center;
        padding: 40px;
        color: #6c757d;
    }
    .empty-state i {
        font-size: 48px;
        margin-bottom: 16px;
        opacity: 0.5;
    }
    .search-box input {
        border-radius: 8px;
        border: 2px solid #e9ecef;
        padding: 10px 16px;
        transition: all 0.3s ease;
    }
    .search-box input:focus {
        border-color: #4A90E2;
        box-shadow: 0 0 0 0.2rem rgba(74, 144, 226, 0.15);
    }
    .state-overview-card {
        transition: all 0.3s ease;
    }
    .state-overview-card.hidden {
        display: none;
    }
</style>

<div class="container-fluid py-5">
    <div class="row mb-4">
        <div class="col-12">
            <h2 class="fw-bold mb-2">Calendar Management</h2>
            <p class="text-muted">Manage holidays, weekends, and state assignments</p>
        </div>
    </div>

    {{-- CRUD Management Tabs --}}
    <div class="row mb-5">
        <div class="col-12">
            <div class="card-custom">
                <ul class="nav nav-tabs nav-tabs-custom px-3 pt-3" role="tablist">
                    <li class="nav-item" role="presentation">
                        <a class="nav-link active" data-bs-toggle="tab" href="#holidays" role="tab">
                            Holidays
                        </a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link" data-bs-toggle="tab" href="#weekends" role="tab">
                            Weekends
                        </a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link" data-bs-toggle="tab" href="#states" role="tab">
                            States
                        </a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link" data-bs-toggle="tab" href="#assignments" role="tab">
                            Assignments
                        </a>
                    </li>
                </ul>

                <div class="tab-content tab-content-custom">
                    {{-- HOLIDAYS TAB --}}
                    <div class="tab-pane fade show active" id="holidays" role="tabpanel">
                        <div class="row">
                            <div class="col-lg-5">
                                <h5 class="section-header success">Add New Holiday</h5>
                                <form action="{{ route('admins.storeHoliday') }}" method="POST">
                                    @csrf
                                    <div class="mb-3">
                                        <label class="form-label">Holiday Name</label>
                                        <input type="text" name="name" class="form-control" placeholder="e.g. Hari Raya" required>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Date</label>
                                        <input type="date" name="date" class="form-control" required>
                                    </div>
                                    <button type="submit" class="btn btn-success btn-custom w-100">
                                        <i class="bi bi-plus-circle"></i> Add Holiday
                                    </button>
                                </form>
                            </div>

                            <div class="col-lg-7">
                                <h5 class="section-header success">Existing Holidays</h5>
                                @forelse($holidays as $holiday)
                                    <div class="list-item">
                                        <div>
                                            <strong>{{ $holiday->name }}</strong>
                                            <br>
                                            <small class="text-muted">{{ \Carbon\Carbon::parse($holiday->date)->format('d M Y') }}</small>
                                        </div>
                                        <div class="action-buttons">
                                            <button class="edit-btn" data-bs-toggle="modal" data-bs-target="#editHolidayModal" 
                                                data-id="{{ $holiday->id }}" 
                                                data-name="{{ $holiday->name }}" 
                                                data-date="{{ $holiday->date }}">
                                                <i class="bi bi-pencil"></i> Edit
                                            </button>
                                            <form action="{{ route('admins.destroyHoliday', $holiday->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Delete this holiday?')">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="delete-btn">
                                                    <i class="bi bi-trash"></i> Delete
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                @empty
                                    <div class="empty-state">
                                        <i class="bi bi-calendar-x"></i>
                                        <p>No holidays added yet</p>
                                    </div>
                                @endforelse
                            </div>
                        </div>
                    </div>

                    {{-- WEEKENDS TAB --}}
                    <div class="tab-pane fade" id="weekends" role="tabpanel">
                        <div class="row">
                            <div class="col-lg-5">
                                <h5 class="section-header primary">Add New Weekend</h5>
                                <form action="{{ route('admins.storeWeekend') }}" method="POST">
                                    @csrf
                                    <div class="mb-3">
                                        <label class="form-label">Weekend Name</label>
                                        <input type="text" name="name" class="form-control" placeholder="e.g. Standard Weekend" required>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label d-block">Select Days</label>
                                        @php
                                        $weekDays = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday', 'No Weekend'];
                                        @endphp
                                        <div class="row g-2">
                                            @foreach($weekDays as $day)
                                                <div class="col-6">
                                                    <div class="form-check">
                                                        <input type="checkbox" class="form-check-input" id="day_{{ $day }}" name="days[]" value="{{ $day }}">
                                                        <label class="form-check-label" for="day_{{ $day }}">{{ $day }}</label>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                    <button type="submit" class="btn btn-primary btn-custom w-100">
                                        <i class="bi bi-plus-circle"></i> Add Weekend
                                    </button>
                                </form>
                            </div>

                            <div class="col-lg-7">
                                <h5 class="section-header primary">Existing Weekends</h5>
                                @forelse($weekends as $weekend)
                                    <div class="list-item">
                                        <div>
                                            <strong>{{ $weekend->name }}</strong>
                                            <br>
                                            <small class="text-muted">{{ $weekend->days }}</small>
                                        </div>
                                        <div class="action-buttons">
                                            <button class="edit-btn edit-weekend-btn" data-bs-toggle="modal" data-bs-target="#editWeekendModal"
                                                data-id="{{ $weekend->id }}" 
                                                data-name="{{ $weekend->name }}" 
                                                data-days="{{ $weekend->days }}">
                                                <i class="bi bi-pencil"></i> Edit
                                            </button>
                                            <form action="{{ route('admins.destroyWeekend', $weekend->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Delete this weekend?')">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="delete-btn">
                                                    <i class="bi bi-trash"></i> Delete
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                @empty
                                    <div class="empty-state">
                                        <i class="bi bi-calendar2-week"></i>
                                        <p>No weekends added yet</p>
                                    </div>
                                @endforelse
                            </div>
                        </div>
                    </div>

                    {{-- STATES TAB --}}
                    <div class="tab-pane fade" id="states" role="tabpanel">
                        <div class="row">
                            <div class="col-lg-5">
                                <h5 class="section-header warning">Add New State</h5>
                                <form action="{{ route('admins.storeState') }}" method="POST">
                                    @csrf
                                    <div class="mb-3">
                                        <label class="form-label">State Name</label>
                                        <input type="text" name="name" class="form-control" placeholder="e.g. Selangor" required>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Default Weekend (optional)</label>
                                        <select name="weekend_id" class="form-select">
                                            <option value="">-- Select Weekend --</option>
                                            @foreach($weekends as $weekend)
                                                <option value="{{ $weekend->id }}">{{ $weekend->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <button type="submit" class="btn btn-warning btn-custom w-100">
                                        <i class="bi bi-plus-circle"></i> Add State
                                    </button>
                                </form>
                            </div>

                            <div class="col-lg-7">
                                <h5 class="section-header warning">Existing States</h5>
                                @forelse($states as $state)
                                    <div class="list-item">
                                        <div>
                                            <strong>{{ $state->name }}</strong>
                                            <br>
                                            <small class="text-muted">
                                                Weekend: {{ $state->weekend ? $state->weekend->name : 'Not assigned' }}
                                            </small>
                                        </div>
                                        <div class="action-buttons">
                                            <button class="edit-btn edit-state-btn" data-bs-toggle="modal" data-bs-target="#editStateModal"
                                                data-id="{{ $state->id }}" 
                                                data-name="{{ $state->name }}" 
                                                data-weekend-id="{{ $state->weekend_id ?? '' }}">
                                                <i class="bi bi-pencil"></i> Edit
                                            </button>
                                            <form action="{{ route('admins.destroyState', $state->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Delete this state?')">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="delete-btn">
                                                    <i class="bi bi-trash"></i> Delete
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                @empty
                                    <div class="empty-state">
                                        <i class="bi bi-map"></i>
                                        <p>No states added yet</p>
                                    </div>
                                @endforelse
                            </div>
                        </div>
                    </div>

                    {{-- ASSIGNMENTS TAB --}}
                    <div class="tab-pane fade" id="assignments" role="tabpanel">
                        <div class="row">
                            <!-- <div class="col-lg-6 mb-4">
                                <div class="card-custom p-4">
                                    <h5 class="section-header primary">Assign Weekend to State</h5>
                                    <form action="{{ route('admins.assignWeekend') }}" method="POST">
                                        @csrf
                                        <div class="mb-3">
                                            <label class="form-label">Select State</label>
                                            <select name="state_id" class="form-select" required>
                                                @foreach($states as $state)
                                                    <option value="{{ $state->id }}">{{ $state->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">Select Weekend</label>
                                            <select name="weekend_id" class="form-select" required>
                                                @foreach($weekends as $weekend)
                                                    <option value="{{ $weekend->id }}">{{ $weekend->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <button type="submit" class="btn btn-primary btn-custom w-100">Assign Weekend</button>
                                    </form>
                                </div>
                            </div> -->

                            <div class="col-lg-6 mb-4">
                                <div class="card-custom p-4">
                                    <h5 class="section-header success">Assign Holidays to State (Multiple)</h5>
                                    <form action="{{ route('admins.assignHoliday') }}" method="POST" id="assignHolidaysForm">
                                        @csrf
                                        <div class="mb-3">
                                            <label class="form-label">Select State</label>
                                            <select name="state_id" id="stateSelectAssign" class="form-select" required>
                                                <option value="">-- Select State --</option>
                                                @foreach($states as $state)
                                                    <option value="{{ $state->id }}">{{ $state->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">Select Holidays (Multiple)</label>
                                            <div class="border rounded p-3" style="max-height: 250px; overflow-y: auto;">
                                                @foreach($holidays as $holiday)
                                                    <div class="form-check mb-2">
                                                        <input type="checkbox" class="form-check-input holiday-checkbox" 
                                                            value="{{ $holiday->id }}" 
                                                            id="holiday_{{ $holiday->id }}"
                                                            data-holiday-id="{{ $holiday->id }}">
                                                        <label class="form-check-label" for="holiday_{{ $holiday->id }}">
                                                            <strong>{{ $holiday->name }}</strong> 
                                                            <small class="text-muted">({{ \Carbon\Carbon::parse($holiday->date)->format('d M Y') }})</small>
                                                        </label>
                                                        <input type="number" 
                                                            class="form-control form-control-sm mt-1 duration-input" 
                                                            placeholder="Duration (days)" 
                                                            min="1" 
                                                            style="width: 150px; display: none;" 
                                                            id="duration_{{ $holiday->id }}"
                                                            data-holiday-id="{{ $holiday->id }}">
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                        <div id="hiddenInputsContainer"></div>
                                        <button type="submit" class="btn btn-success btn-custom w-100">Assign Selected Holidays</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- STATE SUMMARY SECTION --}}
    <div class="row">
        <div class="col-12 mb-4">
            <div class="d-flex justify-content-between align-items-center">
                <h4 class="fw-bold mb-0">State Overview</h4>
                <div class="search-box" style="width: 350px;">
                    <input type="text" id="stateSearch" class="form-control" placeholder="🔍 Search state by name...">
                </div>
            </div>
        </div>
        
        <div id="stateOverviewContainer" class="row">
            @foreach($states as $state)
                <div class="col-lg-6 mb-4 state-overview-card" data-state-name="{{ strtolower($state->name) }}">
                    <div class="card-custom state-card p-4">
                        <h5 class="fw-bold mb-3">{{ $state->name }}</h5>
                        
                        <div class="mb-3">
                            <span class="badge badge-custom bg-primary">
                                {{ $state->weekend ? 1 : 0 }} Weekend
                            </span>
                            <span class="badge badge-custom bg-success">
                                {{ $state->holidays->count() }} Holidays
                            </span>
                        </div>

                        <div class="mb-3">
                            <strong class="d-block mb-2">Weekend:</strong>
                            @if ($state->weekend)
                                <div class="list-item">
                                    <div>
                                        <strong>{{ $state->weekend->name }}</strong>
                                        <br>
                                        <small>{{ $state->weekend->days }}</small>
                                    </div>
                                </div>
                            @else
                                <p class="text-muted mb-0"><em>No weekend assigned</em></p>
                            @endif
                        </div>

                        <div>
                            <strong class="d-block mb-2">Holidays:</strong>
                            @forelse($state->holidays as $holiday)
                                <div class="list-item">
                                    <div>
                                        <strong>{{ $holiday->name }}</strong>
                                        <br>
                                        <small>{{ \Carbon\Carbon::parse($holiday->date)->format('d M Y') }} • {{ $holiday->pivot->duration_days }} days</small>
                                    </div>
                                    <div class="action-buttons">
                                        <button class="edit-btn edit-state-holiday-btn" 
                                            data-bs-toggle="modal" 
                                            data-bs-target="#editStateHolidayModal"
                                            data-state-id="{{ $state->id }}"
                                            data-holiday-id="{{ $holiday->id }}"
                                            data-holiday-name="{{ $holiday->name }}"
                                            data-holiday-date="{{ $holiday->date }}"
                                            data-duration="{{ $holiday->pivot->duration_days }}"
                                            style="font-size: 12px; padding: 4px 10px;">
                                            <i class="bi bi-pencil"></i> Edit
                                        </button>
                                        <form action="{{ route('admins.unassignHoliday') }}" method="POST" class="d-inline">
                                            @csrf
                                            <input type="hidden" name="state_id" value="{{ $state->id }}">
                                            <input type="hidden" name="holiday_id" value="{{ $holiday->id }}">
                                            <button type="submit" class="unassign-btn" onclick="return confirm('Remove this holiday?')">
                                                <i class="bi bi-x"></i> Remove
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            @empty
                                <p class="text-muted mb-0"><em>No holidays assigned</em></p>
                            @endforelse
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
        
        <div id="noResultsMessage" class="col-12 text-center py-5" style="display: none;">
            <i class="bi bi-search" style="font-size: 48px; opacity: 0.3;"></i>
            <p class="text-muted mt-3">No states found matching your search</p>
        </div>
    </div>
</div>

{{-- EDIT MODALS --}}
{{-- Holiday Edit Modal --}}
<div class="modal fade" id="editHolidayModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="editHolidayForm" method="POST">
                @csrf
                @method('PUT')
                <div class="modal-header">
                    <h5 class="modal-title">Edit Holiday</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Holiday Name</label>
                        <input type="text" name="name" id="editHolidayName" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Date</label>
                        <input type="date" name="date" id="editHolidayDate" class="form-control" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save Changes</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Weekend Edit Modal --}}
<div class="modal fade" id="editWeekendModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="editWeekendForm" method="POST">
                @csrf
                @method('PUT')
                <div class="modal-header">
                    <h5 class="modal-title">Edit Weekend</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Weekend Name</label>
                        <input type="text" name="name" id="editWeekendName" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label d-block">Select Days</label>
                        <div class="row g-2" id="editWeekendDays">
                            @php
                            $weekDays = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday', 'No Weekend'];
                            @endphp
                            @foreach($weekDays as $day)
                                <div class="col-6">
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" id="edit_day_{{ $day }}" name="days[]" value="{{ $day }}">
                                        <label class="form-check-label" for="edit_day_{{ $day }}">{{ $day }}</label>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save Changes</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- State Edit Modal --}}
<div class="modal fade" id="editStateModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="editStateForm" method="POST">
                @csrf
                @method('PUT')
                <div class="modal-header">
                    <h5 class="modal-title">Edit State</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">State Name</label>
                        <input type="text" name="name" id="editStateName" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Default Weekend</label>
                        <select name="weekend_id" id="editStateWeekend" class="form-select">
                            <option value="">-- Select Weekend --</option>
                            @foreach($weekends as $weekend)
                                <option value="{{ $weekend->id }}">{{ $weekend->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save Changes</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Edit State Holiday (Date & Duration) Modal --}}
<div class="modal fade" id="editStateHolidayModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="editStateHolidayForm" method="POST" action="{{ route('admins.updateStateHoliday') }}">
                @csrf
                @method('PUT')
                <input type="hidden" name="state_id" id="editStateHolidayStateId">
                <input type="hidden" name="holiday_id" id="editStateHolidayId">
                <div class="modal-header">
                    <h5 class="modal-title">Edit Holiday Date & Duration</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Holiday Name</label>
                        <input type="text" id="editStateHolidayName" class="form-control" readonly>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Holiday Date</label>
                        <input type="date" name="date" id="editStateHolidayDate" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Duration (days)</label>
                        <input type="number" name="duration_days" id="editStateHolidayDuration" class="form-control" min="1" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save Changes</button>
                </div>
            </form>
        </div>
    </div>
</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
// Show/hide duration input when checkbox is checked
document.addEventListener('DOMContentLoaded', function() {
    // State Search Functionality
    const stateSearch = document.getElementById('stateSearch');
    const stateCards = document.querySelectorAll('.state-overview-card');
    const noResultsMessage = document.getElementById('noResultsMessage');
    
    if (stateSearch) {
        stateSearch.addEventListener('keyup', function() {
            const searchTerm = this.value.toLowerCase().trim();
            let visibleCount = 0;
            
            stateCards.forEach(card => {
                const stateName = card.getAttribute('data-state-name');
                
                if (stateName.includes(searchTerm)) {
                    card.classList.remove('hidden');
                    card.style.display = '';
                    visibleCount++;
                } else {
                    card.classList.add('hidden');
                    card.style.display = 'none';
                }
            });
            
            // Show/hide no results message
            if (visibleCount === 0) {
                noResultsMessage.style.display = 'block';
            } else {
                noResultsMessage.style.display = 'none';
            }
        });
        
        // Clear search on ESC key
        stateSearch.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                this.value = '';
                this.dispatchEvent(new Event('keyup'));
            }
        });
    }

    // Holiday checkbox toggle duration input
    document.querySelectorAll('.holiday-checkbox').forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            const durationInput = document.getElementById('duration_' + this.value);
            if (this.checked) {
                durationInput.style.display = 'block';
                durationInput.required = true;
            } else {
                durationInput.style.display = 'none';
                durationInput.required = false;
                durationInput.value = '';
            }
        });
    });

    // Form submission - only submit checked holidays
    const assignForm = document.getElementById('assignHolidaysForm');
    if (assignForm) {
        assignForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            console.log('===== FORM SUBMISSION =====');
            
            const stateId = document.getElementById('stateSelectAssign').value;
            const container = document.getElementById('hiddenInputsContainer');
            
            // Clear previous hidden inputs
            container.innerHTML = '';
            
            // Get all checked holidays
            const checkedHolidays = [];
            let index = 0;
            
            document.querySelectorAll('.holiday-checkbox:checked').forEach(checkbox => {
                const holidayId = checkbox.value;
                const durationInput = document.getElementById('duration_' + holidayId);
                const duration = durationInput.value;
                
                if (duration && duration > 0) {
                    // Create hidden inputs for this holiday
                    const holidayIdInput = document.createElement('input');
                    holidayIdInput.type = 'hidden';
                    holidayIdInput.name = `holidays[${index}][holiday_id]`;
                    holidayIdInput.value = holidayId;
                    container.appendChild(holidayIdInput);
                    
                    const durationIdInput = document.createElement('input');
                    durationIdInput.type = 'hidden';
                    durationIdInput.name = `holidays[${index}][duration_days]`;
                    durationIdInput.value = duration;
                    container.appendChild(durationIdInput);
                    
                    checkedHolidays.push({
                        id: holidayId,
                        duration: duration
                    });
                    
                    index++;
                }
            });
            
            console.log('State ID:', stateId);
            console.log('Checked Holidays:', checkedHolidays);
            console.log('Total holidays to assign:', checkedHolidays.length);
            
            if (checkedHolidays.length === 0) {
                Swal.fire({
                    icon: 'warning',
                    title: 'No Holidays Selected!',
                    text: 'Please select at least one holiday and fill in the duration.',
                    confirmButtonColor: '#F39C12',
                });
                return false;
            }
            
            // Now submit the form
            this.submit();
        });
    }

    // Edit Holiday Modal Handler
    const editHolidayModal = document.getElementById('editHolidayModal');
    if (editHolidayModal) {
        editHolidayModal.addEventListener('show.bs.modal', function (event) {
            const button = event.relatedTarget;
            const id = button.getAttribute('data-id');
            const name = button.getAttribute('data-name');
            const date = button.getAttribute('data-date');
            
            document.getElementById('editHolidayForm').action = `/admins/update-holiday/${id}`;
            document.getElementById('editHolidayName').value = name;
            document.getElementById('editHolidayDate').value = date;
        });
    }

    // Edit Weekend Modal Handler
    const editWeekendModal = document.getElementById('editWeekendModal');
    if (editWeekendModal) {
        editWeekendModal.addEventListener('show.bs.modal', function (event) {
            const button = event.relatedTarget;
            const id = button.getAttribute('data-id');
            const name = button.getAttribute('data-name');
            const days = button.getAttribute('data-days');
            
            document.getElementById('editWeekendForm').action = `/admins/update-weekend/${id}`;
            document.getElementById('editWeekendName').value = name;
            
            // Uncheck all first
            document.querySelectorAll('#editWeekendDays input[type="checkbox"]').forEach(cb => cb.checked = false);
            
            // Check selected days
            if (days) {
                const selectedDays = days.split(',');
                selectedDays.forEach(day => {
                    const checkbox = document.getElementById(`edit_day_${day.trim()}`);
                    if (checkbox) checkbox.checked = true;
                });
            }
        });
    }

    // Edit State Modal Handler
    const editStateModal = document.getElementById('editStateModal');
    if (editStateModal) {
        editStateModal.addEventListener('show.bs.modal', function (event) {
            const button = event.relatedTarget;
            const id = button.getAttribute('data-id');
            const name = button.getAttribute('data-name');
            const weekendId = button.getAttribute('data-weekend-id');
            
            document.getElementById('editStateForm').action = `/admins/update-state/${id}`;
            document.getElementById('editStateName').value = name;
            document.getElementById('editStateWeekend').value = weekendId || '';
        });
    }

    // Edit State Holiday Modal Handler (for date and duration)
    const editStateHolidayModal = document.getElementById('editStateHolidayModal');
    if (editStateHolidayModal) {
        editStateHolidayModal.addEventListener('show.bs.modal', function (event) {
            const button = event.relatedTarget;
            const stateId = button.getAttribute('data-state-id');
            const holidayId = button.getAttribute('data-holiday-id');
            const holidayName = button.getAttribute('data-holiday-name');
            const holidayDate = button.getAttribute('data-holiday-date');
            const duration = button.getAttribute('data-duration');
            
            document.getElementById('editStateHolidayStateId').value = stateId;
            document.getElementById('editStateHolidayId').value = holidayId;
            document.getElementById('editStateHolidayName').value = holidayName;
            document.getElementById('editStateHolidayDate').value = holidayDate;
            document.getElementById('editStateHolidayDuration').value = duration;
        });
    }
});

// Success/Error Messages
@if (session('success'))
Swal.fire({
    icon: 'success',
    title: 'Success!',
    text: '{{ session('success') }}',
    confirmButtonColor: '#27AE60',
    timer: 3000
});
@endif

@if (session('error'))
Swal.fire({
    icon: 'error',
    title: 'Error!',
    text: '{{ session('error') }}',
    confirmButtonColor: '#E74C3C',
});
@endif

@if ($errors->any())
Swal.fire({
    icon: 'error',
    title: 'Validation Error!',
    html: '<ul style="text-align: left;">@foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>',
    confirmButtonColor: '#E74C3C',
});
console.error('Validation Errors:', @json($errors->all()));
@endif
</script>
@endsection