@extends('layouts.admin')

@section('title', 'Today\'s Bookings')

@section('content')
<div class="admin-page-header">
    <div>
        <h1 class="admin-page-title">Today's Bookings</h1>
        <p class="admin-page-subtitle">All bookings made on {{ \Carbon\Carbon::today()->format('M d, Y') }}</p>
    </div>
    <div style="display: flex; gap: 0.5rem;">
        <a href="{{ route('admin.dashboard') }}" class="admin-btn admin-btn-secondary">
            <i class="fas fa-arrow-left mr-2"></i>Back to Dashboard
        </a>
        <button type="button" class="admin-btn admin-btn-primary" onclick="window.openBookingModal()">
            <i class="fas fa-plus mr-2"></i>Add New Booking
        </button>
    </div>
</div>

<!-- Search and Filter Form -->
<div class="admin-card" style="margin-bottom: 1.5rem;">
    <form method="GET" action="{{ route('admin.bookings.today') }}" id="searchFilterForm">
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; align-items: end;">
            <!-- Search Input -->
            <div class="admin-form-group" style="margin-bottom: 0; grid-column: span 2;">
                <label for="search" class="admin-form-label">
                    <i class="fas fa-search mr-1"></i>Search
                </label>
                <input type="text" name="search" id="search" 
                       class="admin-form-input" 
                       value="{{ request('search') }}" 
                       placeholder="Name, Email, Phone, or Booking ID">
            </div>
            
            <!-- Source Filter -->
            <div class="admin-form-group" style="margin-bottom: 0;">
                <label for="source" class="admin-form-label">
                    <i class="fas fa-phone mr-1"></i>Source
                </label>
                <select name="source" id="source" class="admin-form-input">
                    <option value="">All Sources</option>
                    <option value="Call" {{ request('source') == 'Call' ? 'selected' : '' }}>Call</option>
                    <option value="SMS/WhatsApp" {{ request('source') == 'SMS/WhatsApp' ? 'selected' : '' }}>SMS/WhatsApp</option>
                    <option value="Email" {{ request('source') == 'Email' ? 'selected' : '' }}>Email</option>
                    <option value="Website" {{ request('source') == 'Website' ? 'selected' : '' }}>Website</option>
                </select>
            </div>
            
            <!-- Status Filter -->
            <div class="admin-form-group" style="margin-bottom: 0;">
                <label for="status" class="admin-form-label">
                    <i class="fas fa-info-circle mr-1"></i>Status
                </label>
                <select name="status" id="status" class="admin-form-input">
                    <option value="">All Status</option>
                    <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>Pending</option>
                    <option value="confirmed" {{ request('status') == 'confirmed' ? 'selected' : '' }}>Confirmed</option>
                    <option value="cancelled" {{ request('status') == 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                </select>
            </div>
            
            <!-- Action Buttons -->
            <div style="display: flex; gap: 0.5rem; align-items: end;">
                <button type="submit" class="admin-btn admin-btn-primary" style="flex: 1; white-space: nowrap;">
                    <i class="fas fa-search mr-2"></i>Search
                </button>
                @if(request()->hasAny(['search', 'source', 'status']))
                <a href="{{ route('admin.bookings.today') }}" class="admin-btn admin-btn-secondary" style="white-space: nowrap;">
                    <i class="fas fa-times mr-2"></i>Clear
                </a>
                @endif
            </div>
        </div>
    </form>
</div>

@if(session('success'))
    <div class="admin-alert admin-alert-success">
        <i class="fas fa-check-circle mr-2"></i>{{ session('success') }}
    </div>
@endif

@if(session('error'))
    <div class="admin-alert admin-alert-error">
        <i class="fas fa-exclamation-circle mr-2"></i>{{ session('error') }}
    </div>
@endif

<div class="admin-card">
    <div class="admin-table-container">
        <table class="admin-table">
            <thead>
                <tr>
                    <th>Customer</th>
                    <th>Room</th>
                    <th>Booking Date</th>
                    <th>Check-in</th>
                    <th>Check-out</th>
                    <th>Source</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($bookings as $booking)
                <tr>
                    <td>
                        <div style="font-weight: 600; color: #1f2937;">{{ $booking->full_name }}</div>
                        <div style="font-size: 12px; color: #6b7280;">{{ $booking->email }}</div>
                        <div style="font-size: 12px; color: #6b7280;">{{ $booking->phone }}</div>
                    </td>
                    <td>
                        {{ $booking->room->name ?? 'N/A' }}
                        @if($booking->room && $booking->room->room_number)
                            <div style="font-size: 12px; color: #6b7280;">Room #{{ $booking->room->room_number }}</div>
                        @endif
                    </td>
                    <td>
                        <div>{{ $booking->booking_date ? \Carbon\Carbon::parse($booking->booking_date)->format('M d, Y') : 'N/A' }}</div>
                        <div>
                            @if($booking->status === 'confirmed')
                                <span class="admin-badge admin-badge-success">Confirmed (Paid)</span>
                            @elseif($booking->status === 'confirmed_no_payment')
                                <span class="admin-badge admin-badge-info">Confirmed (Unpaid)</span>
                            @elseif($booking->status === 'pending')
                                <span class="admin-badge admin-badge-warning">Pending</span>
                            @else
                                <span class="admin-badge admin-badge-danger">Cancelled</span>
                            @endif
                        </div>
                    </td>
                    <td>{{ $booking->check_in ? $booking->check_in->format('M d, Y') : 'N/A' }}</td>
                    <td>{{ $booking->check_out ? $booking->check_out->format('M d, Y') : 'N/A' }}</td>
                    <td>{{ $booking->booking_source ?? 'N/A' }}</td>
                    <td>
                        <div class="admin-action-buttons">
                            <button onclick="viewBooking({{ $booking->id }})" 
                                    class="admin-action-btn admin-action-view" title="View">
                                <i class="fas fa-eye"></i>
                            </button>
                            @if($booking->status !== 'confirmed')
                            <button onclick="editBooking({{ $booking->id }})" 
                                    class="admin-action-btn admin-action-edit" title="Edit">
                                <i class="fas fa-edit"></i>
                            </button>
                            @endif
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="7" class="text-center py-12">
                        <i class="fas fa-calendar-times text-gray-400 text-4xl mb-4"></i>
                        <p class="text-gray-600">No bookings found for today.</p>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<!-- Pagination -->
@if($bookings->hasPages())
<div style="display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 2rem; padding: 1rem;">
    {{-- Previous Page Link --}}
    @if ($bookings->onFirstPage())
        <button disabled style="padding: 10px 15px; border: 1px solid #e5e7eb; background: #f3f4f6; color: #9ca3af; border-radius: 6px; cursor: not-allowed; display: inline-flex; align-items: center; justify-content: center; transition: all 0.3s;">
            <i class="fas fa-chevron-left"></i>
        </button>
    @else
        <a href="{{ $bookings->previousPageUrl() }}" style="padding: 10px 15px; border: 1px solid var(--admin-primary); background: var(--admin-primary); color: white; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all 0.3s; text-decoration: none;" onmouseover="this.style.opacity='0.9'" onmouseout="this.style.opacity='1'">
            <i class="fas fa-chevron-left"></i>
        </a>
    @endif

    {{-- Page Info --}}
    <span style="color: #6b7280; font-size: 14px; padding: 0 1rem;">
        Showing {{ $bookings->firstItem() ?? 0 }}-{{ $bookings->lastItem() ?? 0 }} of {{ $bookings->total() }} {{ $bookings->total() == 1 ? 'booking' : 'bookings' }}
    </span>

    {{-- Next Page Link --}}
    @if ($bookings->hasMorePages())
        <a href="{{ $bookings->nextPageUrl() }}" style="padding: 10px 15px; border: 1px solid var(--admin-primary); background: var(--admin-primary); color: white; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all 0.3s; text-decoration: none;" onmouseover="this.style.opacity='0.9'" onmouseout="this.style.opacity='1'">
            <i class="fas fa-chevron-right"></i>
        </a>
    @else
        <button disabled style="padding: 10px 15px; border: 1px solid #e5e7eb; background: #f3f4f6; color: #9ca3af; border-radius: 6px; cursor: not-allowed; display: inline-flex; align-items: center; justify-content: center; transition: all 0.3s;">
            <i class="fas fa-chevron-right"></i>
        </button>
    @endif
</div>
@else
<div style="display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 2rem; padding: 1rem;">
    <span style="color: #6b7280; font-size: 14px; padding: 0 1rem;">
        Showing {{ $bookings->firstItem() ?? 0 }}-{{ $bookings->lastItem() ?? 0 }} of {{ $bookings->total() }} {{ $bookings->total() == 1 ? 'booking' : 'bookings' }}
    </span>
</div>
@endif

<!-- View Booking Modal -->
<div id="viewBookingModal" class="admin-modal">
    <div class="admin-modal-content" style="max-width: 900px;">
        <div class="admin-modal-header">
            <h2 class="admin-modal-title">Booking Details</h2>
            <button type="button" class="admin-modal-close" onclick="window.closeViewBookingModal()">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="admin-modal-body" id="viewBookingContent">
            <div style="text-align: center; padding: 2rem;">
                <i class="fas fa-spinner fa-spin" style="font-size: 32px; color: var(--admin-primary);"></i>
                <p style="margin-top: 1rem; color: #6b7280;">Loading booking details...</p>
            </div>
        </div>
    </div>
</div>

<!-- Edit Booking Modal -->
<div id="editBookingModal" class="admin-modal">
    <div class="admin-modal-content" style="max-width: 800px;">
        <div class="admin-modal-header">
            <h2 class="admin-modal-title">Edit Booking</h2>
            <button type="button" class="admin-modal-close" onclick="window.closeEditBookingModal()">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <form id="editBookingForm" action="" method="POST">
            @csrf
            @method('PUT')
            <div class="admin-modal-body" id="editBookingFormContent">
                <div style="text-align: center; padding: 2rem;">
                    <i class="fas fa-spinner fa-spin" style="font-size: 32px; color: var(--admin-primary);"></i>
                    <p style="margin-top: 1rem; color: #6b7280;">Loading booking data...</p>
                </div>
            </div>
            <div class="admin-modal-footer">
                <button type="button" class="admin-btn admin-btn-secondary" onclick="window.closeEditBookingModal()">
                    Cancel
                </button>
                <button type="submit" class="admin-btn admin-btn-primary">
                    <i class="fas fa-save mr-2"></i>Update Booking
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Add Booking Modal -->
<div id="bookingModal" class="admin-modal">
    <div class="admin-modal-content" style="max-width: 800px;">
        <div class="admin-modal-header">
            <h2 class="admin-modal-title">Add New Booking</h2>
            <button type="button" class="admin-modal-close" onclick="window.closeBookingModal()">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <form id="bookingForm" action="{{ route('admin.bookings.store') }}" method="POST">
            @csrf
            <div class="admin-modal-body">
                <div class="admin-form-group">
                    <label for="modal_room_id" class="admin-form-label">Room <span class="required">*</span></label>
                    <select name="room_id" id="modal_room_id" required class="admin-form-input">
                        <option value="">-- Select Room --</option>
                        @foreach($rooms as $room)
                            <option value="{{ $room->id }}">
                                {{ $room->name }}@if($room->room_number) (Room #{{ $room->room_number }})@endif - ${{ number_format($room->price, 2) }}/night
                            </option>
                        @endforeach
                    </select>
                    <div id="error_room_id" class="admin-form-error"></div>
                </div>

                <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem;">
                    <div class="admin-form-group">
                        <label for="modal_full_name" class="admin-form-label">Full Name <span class="required">*</span></label>
                        <input type="text" name="full_name" id="modal_full_name" required 
                               class="admin-form-input" placeholder="Enter customer's full name">
                        <div id="error_full_name" class="admin-form-error"></div>
                    </div>

                    <div class="admin-form-group">
                        <label for="modal_email" class="admin-form-label">Email <span class="required">*</span></label>
                        <input type="email" name="email" id="modal_email" required 
                               class="admin-form-input" placeholder="customer@example.com">
                        <div id="error_email" class="admin-form-error"></div>
                    </div>

                    <div class="admin-form-group">
                        <label for="modal_phone" class="admin-form-label">Phone <span class="required">*</span></label>
                        <input type="text" name="phone" id="modal_phone" required 
                               class="admin-form-input" placeholder="+1234567890">
                        <div id="error_phone" class="admin-form-error"></div>
                    </div>
                </div>

                <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem;">
                    <div class="admin-form-group">
                        <label for="modal_location" class="admin-form-label">Location <span class="required">*</span></label>
                        <input type="text" name="location" id="modal_location" required 
                               class="admin-form-input" placeholder="Where they come from">
                        <div id="error_location" class="admin-form-error"></div>
                    </div>

                    <div class="admin-form-group">
                        <label for="modal_check_in" class="admin-form-label">Check In Date</label>
                        <input type="date" name="check_in" id="modal_check_in" 
                               class="admin-form-input" value="{{ date('Y-m-d') }}" 
                               min="{{ date('Y-m-d') }}">
                        <div id="error_check_in" class="admin-form-error"></div>
                    </div>

                    <div class="admin-form-group">
                        <label for="modal_check_out" class="admin-form-label">Check Out Date</label>
                        <input type="date" name="check_out" id="modal_check_out" 
                               class="admin-form-input" 
                               min="{{ date('Y-m-d', strtotime('+1 day')) }}">
                        <div id="error_check_out" class="admin-form-error"></div>
                    </div>
                </div>

                <div class="admin-form-group">
                    <label for="modal_booking_date" class="admin-form-label">Booking Date</label>
                    <input type="date" name="booking_date" id="modal_booking_date" 
                           class="admin-form-input" value="{{ date('Y-m-d') }}" 
                           min="{{ date('Y-m-d') }}">
                    <div id="error_booking_date" class="admin-form-error"></div>
                </div>

                <div class="admin-form-group">
                    <label for="modal_booking_source" class="admin-form-label">Booking Source <span class="required">*</span></label>
                    <select name="booking_source" id="modal_booking_source" required class="admin-form-input">
                        <option value="Call">Call</option>
                        <option value="SMS/WhatsApp">SMS/WhatsApp</option>
                        <option value="Email">Email</option>
                        <option value="Website">Website</option>
                    </select>
                    <div id="error_booking_source" class="admin-form-error"></div>
                </div>

                <div class="admin-form-group">
                    <label for="modal_special_requests" class="admin-form-label">Special Requests</label>
                    <textarea name="special_requests" id="modal_special_requests" rows="3"
                        class="admin-form-input admin-form-textarea" placeholder="Any special requests..."></textarea>
                    <div id="error_special_requests" class="admin-form-error"></div>
                </div>
            </div>
            <div class="admin-modal-footer">
                <button type="button" class="admin-btn admin-btn-secondary" onclick="window.closeBookingModal()">
                    Cancel
                </button>
                <button type="submit" class="admin-btn admin-btn-primary">
                    <i class="fas fa-save mr-2"></i>Create Booking
                </button>
            </div>
        </form>
    </div>
</div>

<script>
    // Initialize notification function if not exists
    if (typeof showNotification === 'undefined') {
        function showNotification(message, type = 'success') {
            const notification = document.createElement('div');
            notification.className = `admin-alert admin-alert-${type === 'error' ? 'danger' : type === 'warning' ? 'warning' : 'success'}`;
            notification.style.cssText = 'position: fixed; top: 20px; right: 20px; z-index: 10000; min-width: 300px; max-width: 500px; animation: slideInRight 0.3s ease-out;';
            notification.innerHTML = `<i class="fas fa-${type === 'error' ? 'exclamation-circle' : type === 'warning' ? 'exclamation-triangle' : 'check-circle'} mr-2"></i>${message}`;
            document.body.appendChild(notification);
            setTimeout(() => {
                notification.style.animation = 'slideOutRight 0.3s ease-out';
                setTimeout(() => notification.remove(), 300);
            }, 5000);
        }
    }

    // Booking Modal Functions - Make them global
    window.openBookingModal = function() {
        const modal = document.getElementById('bookingModal');
        if (modal) {
            modal.classList.add('active');
            document.body.style.overflow = 'hidden';
        }
    };

    window.closeBookingModal = function() {
        const modal = document.getElementById('bookingModal');
        if (modal) {
            modal.classList.remove('active');
            document.body.style.overflow = 'auto';
        }
        const form = document.getElementById('bookingForm');
        if (form) form.reset();
        document.querySelectorAll('#bookingModal .admin-form-error').forEach(el => el.textContent = '');
    };

    // View Booking Modal Functions
    window.viewBooking = function(bookingId) {
        const modal = document.getElementById('viewBookingModal');
        const content = document.getElementById('viewBookingContent');
        content.innerHTML = `<div style="text-align: center; padding: 2rem;"><i class="fas fa-spinner fa-spin" style="font-size: 32px; color: var(--admin-primary);"></i><p style="margin-top: 1rem; color: #6b7280;">Loading booking details...</p></div>`;
        modal.classList.add('active');
        document.body.style.overflow = 'hidden';
        fetch(`/admin/bookings/${bookingId}`, {
            headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' }
        })
        .then(response => response.json())
        .then(data => {
            if (data.booking) {
                const booking = data.booking;
                const statusBadge = booking.status === 'confirmed' ? '<span class="admin-badge admin-badge-success">Confirmed (Paid)</span>' : booking.status === 'confirmed_no_payment' ? '<span class="admin-badge admin-badge-info">Confirmed (Unpaid)</span>' : booking.status === 'pending' ? '<span class="admin-badge admin-badge-warning">Pending</span>' : '<span class="admin-badge admin-badge-danger">Cancelled</span>';
                content.innerHTML = `
                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;">
                        <div>
                            <h3 style="font-size: 1.25rem; font-weight: 600; margin-bottom: 1.5rem; color: var(--admin-primary);">Customer Information</h3>
                            <div style="margin-bottom: 1.5rem;"><label style="display: block; font-size: 0.875rem; font-weight: 500; color: #6b7280; margin-bottom: 0.5rem;">Full Name</label><div style="font-size: 1rem; color: #111827;">${booking.full_name || '-'}</div></div>
                            <div style="margin-bottom: 1.5rem;"><label style="display: block; font-size: 0.875rem; font-weight: 500; color: #6b7280; margin-bottom: 0.5rem;">Email</label><div style="font-size: 1rem; color: #111827;">${booking.email || '-'}</div></div>
                            <div style="margin-bottom: 1.5rem;"><label style="display: block; font-size: 0.875rem; font-weight: 500; color: #6b7280; margin-bottom: 0.5rem;">Phone</label><div style="font-size: 1rem; color: #111827;">${booking.phone || '-'}</div></div>
                            <div style="margin-bottom: 1.5rem;"><label style="display: block; font-size: 0.875rem; font-weight: 500; color: #6b7280; margin-bottom: 0.5rem;">Location</label><div style="font-size: 1rem; color: #111827;">${booking.location || '-'}</div></div>
                        </div>
                        <div>
                            <h3 style="font-size: 1.25rem; font-weight: 600; margin-bottom: 1.5rem; color: var(--admin-primary);">Booking Information</h3>
                            <div style="margin-bottom: 1.5rem;"><label style="display: block; font-size: 0.875rem; font-weight: 500; color: #6b7280; margin-bottom: 0.5rem;">Booking ID</label><div style="font-size: 1rem; color: #111827; font-weight: 600;">#${booking.id}</div></div>
                            <div style="margin-bottom: 1.5rem;"><label style="display: block; font-size: 0.875rem; font-weight: 500; color: #6b7280; margin-bottom: 0.5rem;">Room</label><div style="font-size: 1rem; color: #111827;">${booking.room ? booking.room.name : '-'} ${booking.room && booking.room.room_number ? `<span style="color: var(--admin-primary);">(Room #${booking.room.room_number})</span>` : ''}</div></div>
                            <div style="margin-bottom: 1.5rem;"><label style="display: block; font-size: 0.875rem; font-weight: 500; color: #6b7280; margin-bottom: 0.5rem;">Check In</label><div style="font-size: 1rem; color: #111827;">${booking.check_in ? new Date(booking.check_in).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' }) : 'Not specified'}</div></div>
                            <div style="margin-bottom: 1.5rem;"><label style="display: block; font-size: 0.875rem; font-weight: 500; color: #6b7280; margin-bottom: 0.5rem;">Check Out</label><div style="font-size: 1rem; color: #111827;">${booking.check_out ? new Date(booking.check_out).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' }) : 'Not specified'}</div></div>
                            <div style="margin-bottom: 1.5rem;"><label style="display: block; font-size: 0.875rem; font-weight: 500; color: #6b7280; margin-bottom: 0.5rem;">Booking Date</label><div style="font-size: 1rem; color: #111827;">${booking.booking_date ? new Date(booking.booking_date).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' }) : 'Not specified'}</div></div>
                            <div style="margin-bottom: 1.5rem;"><label style="display: block; font-size: 0.875rem; font-weight: 500; color: #6b7280; margin-bottom: 0.5rem;">Booking Source</label><div><span class="admin-badge" style="background: #e0e7ff; color: #4338ca;">${booking.booking_source || 'Website'}</span></div></div>
                            <div style="margin-bottom: 1.5rem;"><label style="display: block; font-size: 0.875rem; font-weight: 500; color: #6b7280; margin-bottom: 0.5rem;">Status</label><div>${statusBadge}</div></div>
                            ${booking.special_requests ? `<div style="margin-bottom: 1.5rem;"><label style="display: block; font-size: 0.875rem; font-weight: 500; color: #6b7280; margin-bottom: 0.5rem;">Special Requests</label><div style="font-size: 1rem; color: #111827; padding: 1rem; background: #f9fafb; border-radius: 6px;">${booking.special_requests}</div></div>` : ''}
                        </div>
                    </div>
                `;
            }
        })
        .catch(error => {
            content.innerHTML = `<div style="text-align: center; padding: 2rem;"><i class="fas fa-exclamation-circle" style="font-size: 32px; color: var(--admin-danger);"></i><p style="margin-top: 1rem; color: #6b7280;">Error loading booking details</p></div>`;
        });
    };

    window.closeViewBookingModal = function() {
        document.getElementById('viewBookingModal').classList.remove('active');
        document.body.style.overflow = 'auto';
    };

    // Edit Booking - Simplified version for today's bookings
    window.editBooking = function(bookingId) {
        window.location.href = `/admin/bookings/${bookingId}/edit`;
    };

    window.closeEditBookingModal = function() {
        document.getElementById('editBookingModal').classList.remove('active');
        document.body.style.overflow = 'auto';
    };

    // Handle booking form submission
    document.addEventListener('DOMContentLoaded', function() {
        const bookingForm = document.getElementById('bookingForm');
        if (bookingForm) {
            bookingForm.addEventListener('submit', function(e) {
                e.preventDefault();
                const form = this;
                const formData = new FormData(form);
                fetch(form.action, {
                    method: 'POST',
                    body: formData,
                    headers: { 'X-Requested-With': 'XMLHttpRequest', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showNotification(data.message || 'Booking created successfully!', 'success');
                        setTimeout(() => { window.closeBookingModal(); window.location.reload(); }, 1500);
                    } else if (data.errors) {
                        Object.keys(data.errors).forEach(key => {
                            const errorEl = document.getElementById('error_' + key.replace('.', '_'));
                            if (errorEl) errorEl.textContent = data.errors[key][0];
                        });
                    }
                })
                .catch(error => console.error('Error:', error));
            });
        }
    });
</script>
@endsection