@canany(['hr_manager_hq', 'public_holidays'])

    @extends('adminlte::page')

    @section('title', $title)

@section('content_header')
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6 m-0 text-dark">
                <h1>{{ $subtitle }}</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="/">Home</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.index') }}">Admin</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.public_holidays.index') }}">Public Holidays</a></li>
                    <li class="breadcrumb-item active">Create</li>
                </ol>
            </div>
        </div>
    </div>
@stop

@section('css')
    <style>
        /* Fix Select2 width issue */
        .select2-container {
            width: 100% !important;
        }

        .select2-container .select2-selection--single {
            height: calc(2.25rem + 2px) !important;
            padding: 0.375rem 0.75rem;
        }

        .select2-container .select2-selection--single .select2-selection__rendered {
            line-height: calc(2.25rem) !important;
            padding-left: 0;
        }

        .select2-container .select2-selection--single .select2-selection__arrow {
            height: calc(2.25rem + 2px) !important;
        }

        /* ===== STANDARD TABLES - DARK MODE ===== */

        /* Existing holiday rows in dark mode - Override striped behavior */
        body.dark-mode table.table tbody tr.table-secondary,
        body.dark-mode table.table tbody tr.table-secondary td,
        body.dark-mode table.table tbody tr.table-secondary th,
        body.dark-mode table.table-striped tbody tr.table-secondary:nth-of-type(odd),
        body.dark-mode table.table-striped tbody tr.table-secondary:nth-of-type(odd) td,
        body.dark-mode table.table-striped tbody tr.table-secondary:nth-of-type(odd) th,
        body.dark-mode table.table-striped tbody tr.table-secondary:nth-of-type(even),
        body.dark-mode table.table-striped tbody tr.table-secondary:nth-of-type(even) td,
        body.dark-mode table.table-striped tbody tr.table-secondary:nth-of-type(even) th {
            background-color: #495057 !important;
            color: #adb5bd !important;
            border-color: #6c757d !important;
        }

        body.dark-mode table.table tbody tr.table-secondary input,
        body.dark-mode table.table tbody tr.table-secondary select {
            background-color: #5a6268 !important;
            color: #adb5bd !important;
            border-color: #6c757d !important;
            cursor: not-allowed;
            opacity: 0.7;
        }

        body.dark-mode table.table tbody tr.table-secondary .text-muted {
            color: #868e96 !important;
        }

        /* Override hover for existing holidays in dark mode */
        body.dark-mode table.table-hover tbody tr.table-secondary:hover,
        body.dark-mode table.table-hover tbody tr.table-secondary:hover td,
        body.dark-mode table.table-hover tbody tr.table-secondary:hover th {
            background-color: #495057 !important;
        }

        /* ===== STANDARD TABLES - LIGHT MODE ===== */
        body:not(.dark-mode) table.table {
            background-color: #ffffff !important;
            color: #212529 !important;
            border-color: #dee2e6 !important;
        }

        body:not(.dark-mode) table.table thead th,
        body:not(.dark-mode) table.table thead td {
            background-color: #f8f9fa !important;
            color: #212529 !important;
            border-color: #dee2e6 !important;
        }

        body:not(.dark-mode) table.table tbody tr,
        body:not(.dark-mode) table.table tbody tr td,
        body:not(.dark-mode) table.table tbody tr th {
            background-color: #ffffff !important;
            color: #212529 !important;
            border-color: #dee2e6 !important;
        }

        /* Striped tables */
        body:not(.dark-mode) table.table-striped tbody tr:nth-of-type(odd) {
            background-color: #f8f9fa !important;
        }

        body:not(.dark-mode) table.table-striped tbody tr:nth-of-type(odd) td,
        body:not(.dark-mode) table.table-striped tbody tr:nth-of-type(odd) th {
            background-color: #f8f9fa !important;
        }

        /* Hover effect */
        body:not(.dark-mode) table.table-hover tbody tr:hover,
        body:not(.dark-mode) table.table-hover tbody tr:hover td,
        body:not(.dark-mode) table.table-hover tbody tr:hover th {
            background-color: #e9ecef !important;
        }

        /* Bordered tables */
        body:not(.dark-mode) table.table.border,
        body:not(.dark-mode) table.table-bordered {
            border: 1px solid #dee2e6 !important;
        }

        body:not(.dark-mode) table.table.border th,
        body:not(.dark-mode) table.table.border td,
        body:not(.dark-mode) table.table-bordered th,
        body:not(.dark-mode) table.table-bordered td {
            border: 1px solid #dee2e6 !important;
        }

        /* Light bg headers */
        body:not(.dark-mode) table.table thead th.bg-light,
        body:not(.dark-mode) table.table thead td.bg-light {
            background-color: #f8f9fa !important;
            color: #212529 !important;
        }

        body:not(.dark-mode) table.table .bg-light {
            background-color: #f8f9fa !important;
            color: #212529 !important;
        }

        /* Existing holiday rows in light mode - Override striped behavior */
        body:not(.dark-mode) table.table tbody tr.table-secondary,
        body:not(.dark-mode) table.table tbody tr.table-secondary td,
        body:not(.dark-mode) table.table tbody tr.table-secondary th,
        body:not(.dark-mode) table.table-striped tbody tr.table-secondary:nth-of-type(odd),
        body:not(.dark-mode) table.table-striped tbody tr.table-secondary:nth-of-type(odd) td,
        body:not(.dark-mode) table.table-striped tbody tr.table-secondary:nth-of-type(odd) th,
        body:not(.dark-mode) table.table-striped tbody tr.table-secondary:nth-of-type(even),
        body:not(.dark-mode) table.table-striped tbody tr.table-secondary:nth-of-type(even) td,
        body:not(.dark-mode) table.table-striped tbody tr.table-secondary:nth-of-type(even) th {
            background-color: #e9ecef !important;
            color: #6c757d !important;
        }

        body:not(.dark-mode) table.table tbody tr.table-secondary input,
        body:not(.dark-mode) table.table tbody tr.table-secondary select {
            background-color: #f8f9fa !important;
            color: #6c757d !important;
            cursor: not-allowed;
            opacity: 0.7;
        }

        /* Override hover for existing holidays in light mode */
        body:not(.dark-mode) table.table-hover tbody tr.table-secondary:hover,
        body:not(.dark-mode) table.table-hover tbody tr.table-secondary:hover td,
        body:not(.dark-mode) table.table-hover tbody tr.table-secondary:hover th {
            background-color: #e9ecef !important;
        }
    </style>
@stop

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">

                    <div class="row mb-2">
                        <div class="col-12">
                            <a href="{{ route('admin.public_holidays.index') }}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left"></i> Back
                            </a>
                        </div>
                    </div>

                    <!-- Tabs Navigation -->
                    <ul class="nav nav-tabs" id="createHolidayTabs">
                        <li class="nav-item">
                            <a class="nav-link active" id="single-tab" data-toggle="tab" href="#single" role="tab">
                                <i class="fas fa-plus"></i> Single Holiday
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="bulk-tab" data-toggle="tab" href="#bulk" role="tab">
                                <i class="fas fa-download"></i> Bulk Import Holidays
                            </a>
                        </li>
                    </ul>

                    <!-- Tabs Content -->
                    <div class="tab-content mt-4" id="createHolidayTabsContent">
                        <!-- Single Holiday Tab -->
                        <div class="tab-pane fade show active" id="single" role="tabpanel">
                            <div class="row">
                                <div class="col-sm-10">
                                    <form action="{{ route('admin.public_holidays.store') }}" method="POST">
                                        @csrf

                                        <div class="row mb-2">
                                            <div class="col-sm-6">
                                                <label for="description">Description</label>
                                                <input type="text" id="description" name="description"
                                                    class="form-control @error('description') is-invalid @enderror"
                                                    placeholder="Enter public holiday description"
                                                    value="{{ old('description') }}">
                                                <div class="text-danger">
                                                    @error('description')
                                                        {{ $message }}
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row mb-2">
                                            <div class="col-sm-6">
                                                <label for="date">Date</label>
                                                <input type="date" id="date" name="date"
                                                    class="form-control @error('date') is-invalid @enderror @if (session('existing')) is-invalid @endif"
                                                    value="{{ old('date') }}">
                                                <div class="text-danger">
                                                    @error('date')
                                                        {{ $message }}
                                                    @enderror
                                                    @if (session('existing'))
                                                        {{ session('existing') }}
                                                    @endif
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row mb-2">
                                            <div class="col-sm-6">
                                                <label for="day">Day</label>
                                                <select class="custom-select" name="day">
                                                    <option value="Full Day"
                                                        {{ old('day') === 'Full Day' ? 'selected' : 'selected' }}>Full
                                                        Day</option>
                                                    <option value="AM" {{ old('day') === 'AM' ? 'selected' : '' }}>AM
                                                    </option>
                                                    <option value="PM" {{ old('day') === 'PM' ? 'selected' : '' }}>PM
                                                    </option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="row mb-2">
                                            <div class="col-sm-6">
                                                <label for="countrycode">Country</label>
                                                <input type="text" id="countrycode" list="countryList"
                                                    class="form-control @error('country') is-invalid @enderror @if (session('existing')) is-invalid @endif"
                                                    name="country" placeholder="Type in for the country"
                                                    value="{{ old('country') }}">
                                                <datalist id="countryList">
                                                    @foreach ($countries as $country)
                                                        <option value="{{ $country->code }}">{{ $country->country }}
                                                        </option>
                                                    @endforeach
                                                </datalist>
                                                <div class="text-danger">
                                                    @error('country')
                                                        {{ $message }}
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <button type="submit" class="btn btn-primary">Create public holiday</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>

                        <!-- Bulk Import Tab -->
                        <div class="tab-pane fade" id="bulk" role="tabpanel">
                            <div class="row mb-4">
                                <div class="col-12">
                                    <div class="alert alert-info">
                                        <i class="fas fa-info-circle"></i>
                                        Search for public holidays by year and country, then select which ones to import
                                        automatically.<br/>
                                        <strong> Note: </strong> Holidays for Dubai (UAE) &amp; Malaysia (MY) must be added manually. You can find the official
                                        list at<br/>
                                        <ul>
                                            <li>
                                                <a href="https://publicholidays.ae/" target="_blank" rel="noopener noreferrer"
                                            style="color:#FFF; font-weight:500; text-decoration:underline;" onblur=""
                                            onFocus="this.style.color='#b81a00'" onmouseover="this.style.color='#b81a00'"
                                            onmouseout="this.style.color='#FFF'">
                                            Public Holidays in the UAE
                                        </a><br/>
                                        </li>
                                        <li>
                                            <a href="https://publicholidays.com.my/" target="_blank" rel="noopener noreferrer"
                                            style="color:#FFF; font-weight:500; text-decoration:underline;" onblur=""
                                            onFocus="this.style.color='#b81a00'" onmouseover="this.style.color='#b81a00'"
                                            onmouseout="this.style.color='#FFF'">
                                            Public Holidays in the Malaysia
                                        </a><br/>
                                        </li>
                                        </ul>

                                    </div>

                                </div>
                            </div>

                            <!-- Search Form -->
                            <div class="row mb-4">
                                <div class="col-md-4">
                                    <label for="api_year">Year:</label>
                                    <input type="text" class="form-control" id="api_year" placeholder="E.g., 2026">
                                </div>
                                <div class="col-md-4">
                                    <label for="api_country">Country:</label>
                                    <select id="api_country" class="custom-select sSelect">
                                        <option value="">Select Country</option>
                                        @foreach ($countries as $country)
                                            <option value="{{ $country->code }}">{{ $country->country }}
                                                [{{ $country->code }}]</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-4 d-flex align-items-end mt-2">
                                    <button type="button" class="btn btn-primary btn-block" id="searchHolidays">
                                        <i class="fas fa-search"></i> Search Holidays
                                    </button>
                                </div>
                            </div>

                            <!-- Loading Spinner -->
                            <div id="loadingSpinner" class="text-center" style="display: none;">
                                <div class="spinner-border text-primary">
                                    <span class="sr-only">Loading...</span>
                                </div>
                                <p>Fetching holidays...</p>
                            </div>

                            <!-- Results Container -->
                            <div id="resultsContainer" style="display: none;">
                                <hr class="my-4">

                                <div class="d-flex justify-content-between align-items-center mb-3">
                                    <h4>
                                        Results: <span id="resultsTitle"></span>
                                        <img id="dynamicFlag" src="" alt="" width="30"
                                            class="ml-2 mb-1" style="display:none;">
                                    </h4>
                                    <div>
                                        <button type="button" class="btn btn-sm btn-secondary" id="selectAll">
                                            <i class="fas fa-check-square"></i> Select All
                                        </button>
                                        <button type="button" class="btn btn-sm btn-secondary" id="deselectAll">
                                            <i class="fas fa-square"></i> Deselect All
                                        </button>
                                    </div>
                                </div>

                                <form method="POST" action="{{ route('admin.public_holidays.store') }}"
                                    id="bulkImportForm">
                                    @csrf
                                    <input type="hidden" name="bulk_import" value="1">

                                    <div class="table-responsive">
                                        <table class="table table-bordered">
                                            <thead>
                                                <tr>
                                                    <th style="width: 50px;">
                                                        <input type="checkbox" id="masterCheckbox">
                                                    </th>
                                                    <th>Date</th>
                                                    <th>Description</th>
                                                    <th>Day Type</th>
                                                    <th>Status</th>
                                                </tr>
                                            </thead>
                                            <tbody id="holidaysTableBody">
                                                <!-- Populated by JavaScript -->
                                            </tbody>
                                        </table>
                                    </div>

                                    <div class="row mt-4">
                                        <div class="col-12">
                                            <button type="submit" class="btn btn-success btn-lg" id="importBtn"
                                                disabled>
                                                <i class="fas fa-download"></i> Import Selected Holidays
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
@stop

@section('js')
    <script>
        $(document).ready(function() {

            $('.sSelect').select2({
                theme: "bootstrap4"
            });

            // Initialize variables
            let holidaysData = [];

            // Search holidays from API
            $('#searchHolidays').on('click', function() {
                const year = $('#api_year').val();
                const country = $('#api_country').val();

                if (!year || !country) {
                    toastr.error('Please select both year and country');
                    return;
                }

                $('#loadingSpinner').show();
                $('#resultsContainer').hide();

                $.ajax({
                    url: '{{ route('admin.public_holidays.fetch') }}',
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        year: year,
                        country: country
                    },
                    success: function(response) {
                        $('#loadingSpinner').hide();

                        if (response.success) {
                            holidaysData = response.holidays;
                            displayHolidays(response.holidays, response.year, response.country);
                        } else {
                            // toastr.error(response.message);
                            toastr.warning(`No public holidays found for ${country} in ${year}.`);
                        }
                    },
                    error: function(xhr) {
                        $('#loadingSpinner').hide();
                        // toastr.error("Failed to connect to the holiday service. Please try again later.");
                        toastr.warning(`No public holidays found for country: ${country} in year: ${year}.`);
                    }
                });
            });

            // Display holidays in table
            function displayHolidays(holidays, year, country) {
                $('#resultsTitle').text(`${year} - ${country}`);
                $('#holidaysTableBody').empty();

                holidays.forEach((holiday, index) => {
                    const rowClass = holiday.exists ? 'table-secondary' : '';
                    const disabled = holiday.exists ? 'disabled' : '';
                    const readonly = holiday.exists ? 'readonly' : '';
                    const checked = !holiday.exists ? 'checked' : '';
                    const disabledClass = holiday.exists ? 'text-muted' : '';

                    const row = `
                <tr class="holiday-row ${rowClass}">
                    <td>
                        <input type="checkbox" class="holiday-checkbox"
                               name="selected[]" value="${index}"
                               ${checked} ${disabled}>
                    </td>
                    <td>
                        <input type="date" class="form-control form-control ${disabledClass}"
                               name="holidays[${index}][date]"
                               value="${holiday.date}" ${readonly}>
                        <input type="hidden" name="holidays[${index}][country]"
                               value="${country}">
                    </td>
                    <td>
                        <input type="text" class="form-control form-control ${disabledClass}"
                               name="holidays[${index}][description]"
                               value="${holiday.name}" ${readonly}>
                        <span class="text-muted">
                            Local: ${holiday.localName}
                            ${holiday.counties ? `<span class="badge badge-info ml-1"
                                                                                                                                    data-toggle="tooltip"
                                                                                                                                    data-placement="top"
                                                                                                                                    title="Subdivision Codes: ${Array.isArray(holiday.counties) ? holiday.counties.join(', ') : holiday.counties}"
                                                                                                                                    style="cursor: help;">
                                                                                                                                    <i class="fas fa-map-marker-alt"></i> Regions
                                                                                                                                </span>` : ''}
                        </span>
                    </td>
                    <td>
                        <select class="form-control custom-select form-control ${disabledClass}"
                                name="holidays[${index}][day]" ${disabled}>
                            <option value="Full Day" selected>Full Day</option>
                            <option value="AM">AM</option>
                            <option value="PM">PM</option>
                        </select>
                    </td>
                    <td>
                        ${holiday.exists ?
                            '<span class="badge badge-secondary" style="font-size: 18px"><i class="fas fa-check"></i> Already Exists</span>' :
                            '<span class="badge badge-success" style="font-size: 18px"><i class="fas fa-plus"></i> Ready to Import</span>'
                        }
                    </td>
                </tr>
            `;
                    $('#holidaysTableBody').append(row);
                });

                $('#resultsContainer').show();
                updateImportButton();
                updateMasterCheckbox();
            }

            // Initialize Bootstrap tooltips
            $('body').tooltip({
                selector: '[data-toggle="tooltip"]',
                container: 'body'
            });

            // Master checkbox functionality
            $(document).on('change', '#masterCheckbox', function() {
                $('.holiday-checkbox:not(:disabled)').prop('checked', this.checked);
                updateImportButton();
            });

            // Individual checkbox change
            $(document).on('change', '.holiday-checkbox', function() {
                updateMasterCheckbox();
                updateImportButton();
            });

            // Select all button
            $('#selectAll').on('click', function() {
                $('.holiday-checkbox:not(:disabled)').prop('checked', true);
                updateMasterCheckbox();
                updateImportButton();
            });

            // Deselect all button
            $('#deselectAll').on('click', function() {
                $('.holiday-checkbox:not(:disabled)').prop('checked', false);
                updateMasterCheckbox();
                updateImportButton();
            });

            // Update master checkbox state
            function updateMasterCheckbox() {
                var total = $('.holiday-checkbox:not(:disabled)').length;
                var checked = $('.holiday-checkbox:not(:disabled):checked').length;

                $('#masterCheckbox').prop('checked', checked > 0 && checked === total);
                $('#masterCheckbox').prop('indeterminate', checked > 0 && checked < total);
            }

            // Update import button state
            function updateImportButton() {
                var checkedCount = $('.holiday-checkbox:checked').length;

                if (checkedCount > 0) {
                    $('#importBtn').prop('disabled', false)
                        .html('<i class="fas fa-download"></i> Import ' + checkedCount +
                            ' Selected Holiday(s)');
                } else {
                    $('#importBtn').prop('disabled', true)
                        .html('<i class="fas fa-download"></i> Import Selected Holidays');
                }
            }

            // Form submission - remove unchecked holidays
            $('#bulkImportForm').on('submit', function(e) {
                $('.holiday-row').each(function() {
                    var checkbox = $(this).find('.holiday-checkbox');
                    if (!checkbox.is(':checked')) {
                        $(this).find('input, select').not('.holiday-checkbox').remove();
                    }
                });
            });

            function updateFlag() {
                // 1. Get the value (Fixing your missing quote error here)
                var countryCode = $('#api_country').val();

                // 2. Only run if we actually have a country code
                if (countryCode) {
                    var ccLower = countryCode.toLowerCase();

                    // Update the image source
                    $('#dynamicFlag').attr('src', `https://flagcdn.com/w40/${ccLower}.png`);
                    $('#dynamicFlag').attr('srcset', `https://flagcdn.com/w40/${ccLower}.png 2x`);
                    $('#dynamicFlag').attr('alt', ccLower);

                    // Show the image (it was hidden by default)
                    $('#dynamicFlag').show();
                } else {
                    $('#dynamicFlag').hide(); // Hide if no value
                }
            }

            // Run immediately on page load (in case a value is pre-selected)
            updateFlag();

            // Run whenever the input changes
            $('#api_country').on('change keyup', function() {
                updateFlag();
            });
        });
    </script>
@stop

@section('footer')
    &nbsp;
@stop

@endcan