@php
    $raffle = $data ?? null;
@endphp

{{-- Flatpickr CSS --}}
@push('style')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/themes/dark.css">
<style>
    .select2-container {
        width: 100% !important;
    }
    .select2-container .select2-selection--single {
        height: 38px;
        border: 1px solid #ced4da;
        border-radius: 0.375rem;
        padding: 0.375rem 0.75rem;
        display: flex;
        align-items: center;
        background-color: #fff;
    }
    .select2-container .select2-selection__rendered {
        padding: 0;
        line-height: 1.5;
        color: #212529;
    }
    .select2-container .select2-selection__placeholder {
        color: #6c757d;
    }
    .select2-container .select2-selection__arrow {
        height: 36px;
        right: 6px;
    }
    .select2-container--default .select2-selection--single .select2-selection__clear {
        margin-right: 6px;
        font-size: 16px;
    }
    .select2-container--default .select2-results__option {
        padding: 8px 12px;
        font-size: 14px;
    }

    .flatpickr-input-group .input-group-text {
        background: transparent;
        border-right: 0;
        color: #7b8191;
        cursor: pointer;
        transition: color 0.2s ease;
    }
    .flatpickr-input-group .input-group-text svg {
        width: 16px;
        height: 16px;
    }
    .flatpickr-input-group .form-control {
        border-left: 0;
        border-right: 0;
    }
    .flatpickr-input-group .flatpickr-clear-btn {
        background: transparent;
        border-left: 0;
        color: #7b8191;
        cursor: pointer;
        transition: color 0.2s ease;
        padding: 0.375rem 0.65rem;
    }
    .flatpickr-input-group .flatpickr-clear-btn:hover {
        color: #ee2d41;
    }
    .flatpickr-input-group:focus-within .input-group-text {
        border-color: #6259ca;
        color: #6259ca;
    }
    .flatpickr-input-group:focus-within .flatpickr-clear-btn {
        border-color: #6259ca;
    }
    /* Make the calendar pop nicer */
    .flatpickr-calendar {
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25) !important;
        border-radius: 8px !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
    }
    .flatpickr-calendar.arrowTop::before,
    .flatpickr-calendar.arrowTop::after {
        display: none;
    }
</style>
@endpush

<div class="row">
    <input type="hidden" name="timezone" id="client_timezone" value="">
    <div class="mb-3 col-md-6">
        <label for="property_id" class="form-label">Property</label>
        <select name="property_id" id="property_id" class="form-control select2">
            <option value="">Select Property</option>
            @foreach($properties as $property)
                <option value="{{ $property->id }}" @selected(old('property_id', $raffle?->property_id) == $property->id)>{{ $property->title }}</option>
            @endforeach
        </select>
        @error('property_id') <span class="text-danger">{{ $message }}</span> @enderror
    </div>

    <div class="mb-3 col-md-4">
        <label for="status" class="form-label">Status</label>
        <select name="status" id="status" class="form-control">
            <option value="pending" @selected(old('status', $raffle?->status ?? 'pending') == 'pending')>Pending</option>
            <option value="upcoming" @selected(old('status', $raffle?->status) == 'upcoming')>Upcoming</option>
            <option value="in_progress" @selected(old('status', $raffle?->status) == 'in_progress')>In Progress</option>
            <option value="completed" @selected(old('status', $raffle?->status) == 'completed')>Completed</option>
        </select>
        @error('status') <span class="text-danger">{{ $message }}</span> @enderror
    </div>

    <div class="mb-3 col-md-4">
        <label for="start_date" class="form-label">Start Date</label>
        <div class="input-group flatpickr-input-group">
            <span class="input-group-text"><i data-feather="calendar"></i></span>
            <input type="text" name="start_date" id="start_date" class="form-control flatpickr-datetime" placeholder="YYYY-MM-DD HH:MM" autocomplete="off" value="{{ old('start_date', $raffle?->start_date_local ?? '') }}">
            <button type="button" class="input-group-text flatpickr-clear-btn" data-target="start_date" title="Clear"><i data-feather="x"></i></button>
        </div>
        @error('start_date') <span class="text-danger">{{ $message }}</span> @enderror
    </div>


    <div class="mb-3 col-md-4">
        <label for="dead_line" class="form-label">Deadline</label>
        <div class="input-group flatpickr-input-group">
            <span class="input-group-text"><i data-feather="calendar"></i></span>
            <input type="text" name="dead_line" id="dead_line" class="form-control flatpickr-datetime" placeholder="YYYY-MM-DD HH:MM" autocomplete="off" value="{{ old('dead_line', $raffle?->dead_line_local ?? '') }}">
            <button type="button" class="input-group-text flatpickr-clear-btn" data-target="dead_line" title="Clear"><i data-feather="x"></i></button>
        </div>
        @error('dead_line') <span class="text-danger">{{ $message }}</span> @enderror
    </div>


    <div class="mb-3 col-md-4">
        <label for="draw_date" class="form-label">Draw Date</label>
        <div class="input-group flatpickr-input-group">
            <span class="input-group-text"><i data-feather="calendar"></i></span>
            <input type="text" name="draw_date" id="draw_date" class="form-control flatpickr-datetime" placeholder="YYYY-MM-DD HH:MM" autocomplete="off" value="{{ old('draw_date', $raffle?->draw_date_local ?? '') }}">
            <button type="button" class="input-group-text flatpickr-clear-btn" data-target="draw_date" title="Clear"><i data-feather="x"></i></button>
        </div>
        @error('draw_date') <span class="text-danger">{{ $message }}</span> @enderror
    </div>

    <div class="mb-3 col-md-4">
        <label for="max_tickets" class="form-label">Max Tickets</label>
        <input type="number" name="max_tickets" id="max_tickets" class="form-control" value="{{ old('max_tickets', $raffle?->max_tickets) }}" min="1">
        @error('max_tickets') <span class="text-danger">{{ $message }}</span> @enderror
    </div>

    <div class="mb-3 col-md-4">
        <label for="ticket_price" class="form-label">Ticket Price</label>
        <input type="number" step="0.01" name="ticket_price" id="ticket_price" class="form-control" value="{{ old('ticket_price', $raffle?->ticket_price) }}" min="0">
        @error('ticket_price') <span class="text-danger">{{ $message }}</span> @enderror
    </div>

    {{-- <div class="mb-3 col-md-4">
        <label for="max_tickets_per_user" class="form-label">Max Tickets Per User</label>
        <input type="number" name="max_tickets_per_user" id="max_tickets_per_user" class="form-control" value="{{ old('max_tickets_per_user', $raffle?->max_tickets_per_user ?? 1) }}" min="1">
        @error('max_tickets_per_user') <span class="text-danger">{{ $message }}</span> @enderror
    </div>

    <div class="mb-3 col-md-4">
        <label for="per_user_net_price" class="form-label">Per User Net Price</label>
        <input type="number" step="0.01" name="per_user_net_price" id="per_user_net_price" class="form-control" value="{{ old('per_user_net_price', $raffle?->per_user_net_price ?? 0) }}" min="0">
        @error('per_user_net_price') <span class="text-danger">{{ $message }}</span> @enderror
    </div> --}}
</div>

{{-- Flatpickr JS --}}
@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
    $(document).ready(function () {
        // Initialize Select2 on property dropdown
        $('#property_id').select2({
            placeholder: 'Select Property',
            allowClear: true,
            width: '100%'
        });

        // Initialize Flatpickr on all datetime fields
        document.querySelectorAll('.flatpickr-datetime').forEach(function (el) {
            flatpickr(el, {
                enableTime: true,
                dateFormat: "Y-m-d H:i",
                time_24hr: true,
                allowInput: true,          // allow manual keyboard typing
                clickOpens: true,
                disableMobile: true,       // always use the nice desktop UI
                minuteIncrement: 1,
                // Re-run feather icons after calendar opens (for any injected icons)
                onReady: function () {
                    if (typeof feather !== 'undefined') feather.replace();
                }
            });
        });

        // Clear buttons
        document.querySelectorAll('.flatpickr-clear-btn').forEach(function (btn) {
            btn.addEventListener('click', function () {
                var targetId = this.getAttribute('data-target');
                var input = document.getElementById(targetId);
                if (input && input._flatpickr) {
                    input._flatpickr.clear();
                }
            });
        });

        // Re-run feather icons to render the calendar / x icons we added
        if (typeof feather !== 'undefined') feather.replace();

        var timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
        var timezoneInput = document.getElementById('client_timezone');
        if (timezoneInput) {
            timezoneInput.value = timezone;
        }

        if (!document.cookie.match(/(?:^|; )timezone=/)) {
            document.cookie = 'timezone=' + encodeURIComponent(timezone) + '; path=/';
            if (!sessionStorage.getItem('timezoneReloaded')) {
                sessionStorage.setItem('timezoneReloaded', '1');
                window.location.reload();
            }
        }
    });
</script>
@endpush