@extends('layouts.dashboard')

@section('title', 'Reservaties | Genkai')
@section('eyebrow', 'Genkai Grill & Sushi')
@section('page-title', 'Reservaties')

@push('styles')
    <link rel="stylesheet" href="{{ asset('css/pages/reservations.css') }}">
@endpush

@section('content')
<section class="reservations-page">
    <div class="reservations-heading">
        <div>
            <span class="reservations-eyebrow">
                <i class="ri-calendar-event-line"></i>
                Reservatiebeheer
            </span>
            <h2>Reservaties</h2>
            <p>Bekijk, filter en beheer alle reservatieaanvragen van Genkai.</p>
        </div>

        <div class="reservations-heading-actions">
            <a href="{{ route('owner.settings.edit') }}" class="reservations-button reservations-button--secondary">
                <i class="ri-settings-3-line"></i>
                Instellingen
            </a>

            <a href="{{ route('reservation.create') }}" target="_blank" class="reservations-button reservations-button--primary">
                <i class="ri-add-line"></i>
                Nieuwe reservatie
            </a>
        </div>
    </div>

    @if(session('owner_message'))
        <div class="reservations-alert">
            <div class="reservations-alert__icon"><i class="ri-checkbox-circle-line"></i></div>
            <div>
                <strong>Opgeslagen</strong>
                <span>{{ session('owner_message') }}</span>
            </div>
        </div>
    @endif

    <div class="reservations-stats">
        <article class="reservations-stat">
            <div class="reservations-stat__icon reservations-stat__icon--gold"><i class="ri-time-line"></i></div>
            <div><span>In behandeling</span><strong>{{ $pendingCount }}</strong><small>Wachten op bevestiging</small></div>
        </article>

        <article class="reservations-stat">
            <div class="reservations-stat__icon reservations-stat__icon--purple"><i class="ri-calendar-check-line"></i></div>
            <div><span>Vandaag</span><strong>{{ $todayCount }}</strong><small>Reservaties vandaag</small></div>
        </article>

        <article class="reservations-stat">
            <div class="reservations-stat__icon reservations-stat__icon--blue"><i class="ri-group-line"></i></div>
            <div><span>Gasten vandaag</span><strong>{{ $todayGuests }}</strong><small>Totaal aantal personen</small></div>
        </article>

        <article class="reservations-stat">
            <div class="reservations-stat__icon reservations-stat__icon--green"><i class="ri-list-check-3"></i></div>
            <div><span>Gevonden</span><strong>{{ $reservations->total() }}</strong><small>Met huidige filters</small></div>
        </article>
    </div>

    <section class="reservations-card">
        <div class="reservations-card__header">
            <div>
                <span class="reservations-card__eyebrow">Filters</span>
                <h3>Reservaties zoeken</h3>
                <p>Filter op datum of status.</p>
            </div>
        </div>

        <form method="GET" action="{{ route('owner.reservations.index') }}" class="reservations-filter-form">
            <div class="reservations-field">
                <label for="date">Datum</label>
                <div class="reservations-input-wrap">
                    <i class="ri-calendar-line"></i>
                    <input id="date" type="date" name="date" value="{{ request('date') }}">
                </div>
            </div>

            <div class="reservations-field">
                <label for="status">Status</label>
                <div class="reservations-input-wrap">
                    <i class="ri-filter-3-line"></i>
                    <select id="status" name="status">
                        <option value="">Alle statussen</option>
                        <option value="pending" @selected(request('status') === 'pending')>In behandeling</option>
                        <option value="confirmed" @selected(request('status') === 'confirmed')>Bevestigd</option>
                        <option value="cancelled" @selected(request('status') === 'cancelled')>Geannuleerd</option>
                    </select>
                </div>
            </div>

            <button type="submit" class="reservations-filter-submit">
                <i class="ri-search-line"></i>
                Filter toepassen
            </button>

            <a href="{{ route('owner.reservations.index') }}" class="reservations-clear-filter">
                <i class="ri-refresh-line"></i>
                Wissen
            </a>
        </form>
    </section>

    <section class="reservations-card reservations-list-card">
        <div class="reservations-card__header">
            <div>
                <span class="reservations-card__eyebrow">Overzicht</span>
                <h3>Reservatieaanvragen</h3>
                <p>Wijzig de status rechtstreeks vanuit het overzicht.</p>
            </div>
        </div>

        @if($reservations->count())
            <div class="reservations-table-scroll">
                <table class="reservations-table">
                    <thead>
                        <tr>
                            <th>Datum & tijd</th>
                            <th>Gast</th>
                            <th>Contact</th>
                            <th>Personen</th>
                            <th>Opmerking</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($reservations as $reservation)
                            <tr>
                                <td>
                                    <div class="reservation-date-cell">
                                        <div class="reservation-date-icon">
                                            <span>{{ $reservation->reservation_date->format('d') }}</span>
                                            <small>{{ strtoupper($reservation->reservation_date->format('M')) }}</small>
                                        </div>
                                        <div>
                                            <strong>{{ $reservation->reservation_date->format('d/m/Y') }}</strong>
                                            <span><i class="ri-time-line"></i>{{ substr($reservation->reservation_time, 0, 5) }}</span>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div class="reservation-guest">
                                        <div class="reservation-avatar">{{ strtoupper(substr($reservation->name, 0, 1)) }}</div>
                                        <div><strong>{{ $reservation->name }}</strong><span>#{{ $reservation->id }}</span></div>
                                    </div>
                                </td>
                                <td>
                                    <div class="reservation-contact">
                                        <a href="tel:{{ $reservation->phone }}"><i class="ri-phone-line"></i>{{ $reservation->phone }}</a>
                                        <a href="mailto:{{ $reservation->email }}"><i class="ri-mail-line"></i>{{ $reservation->email }}</a>
                                    </div>
                                </td>
                                <td>
                                    <div class="reservation-guests"><i class="ri-group-line"></i><strong>{{ $reservation->guests }}</strong><span>pers.</span></div>
                                </td>
                                <td>
                                    @if($reservation->notes)
                                        <div class="reservation-note" title="{{ $reservation->notes }}">{{ $reservation->notes }}</div>
                                    @else
                                        <span class="reservation-no-note">Geen opmerking</span>
                                    @endif
                                </td>
                                <td>
                                    <form method="POST" action="{{ route('owner.reservations.update', $reservation) }}" class="reservation-status-form">
                                        @csrf
                                        @method('PATCH')
                                        <select name="status" class="reservation-status-control reservation-status-control--{{ $reservation->status }}" onchange="this.form.submit()">
                                            <option value="pending" @selected($reservation->status === 'pending')>In behandeling</option>
                                            <option value="confirmed" @selected($reservation->status === 'confirmed')>Bevestigd</option>
                                            <option value="cancelled" @selected($reservation->status === 'cancelled')>Geannuleerd</option>
                                        </select>
                                    </form>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            @if($reservations->hasPages())
                <div class="reservations-pagination">{{ $reservations->withQueryString()->links() }}</div>
            @endif
        @else
            <div class="reservations-empty">
                <div class="reservations-empty__icon"><i class="ri-calendar-close-line"></i></div>
                <h4>Geen reservaties gevonden</h4>
                <p>Er zijn geen reservaties die overeenkomen met je filters.</p>
            </div>
        @endif
    </section>
</section>
@endsection