@extends('layouts.sash')

@section('title', 'Appointments Calendar')

@section('content')
<div class="row mt-4">
<div class="col-12">
<div class="card custom-card">
<div class="card-body">
    <h2>Appointments Calendar</h2>

    <form method="get" action="{{ route('appointments.calendar') }}" class="salon-grid salon-grid-4" style="margin-bottom: 1rem;">
        <div>
            <label class="block text-sm font-medium text-slate-700 mb-1">Branch</label>
            <select name="branch_id" class="block w-full rounded-lg border-slate-300 shadow-sm text-sm">
                <option value="">All branches</option>
                @foreach($branches as $b)
                    <option value="{{ $b->id }}" {{ (string) $branchId === (string) $b->id ? 'selected' : '' }}>{{ $b->name }}</option>
                @endforeach
            </select>
        </div>
        <div>
            <label class="block text-sm font-medium text-slate-700 mb-1">Date</label>
            <input type="date" name="date" value="{{ $date }}" class="block w-full rounded-lg border-slate-300 shadow-sm text-sm">
        </div>
        <div style="display: flex; align-items: flex-end; gap: 0.5rem;">
            <button type="submit" class="px-4 py-2 bg-slate-800 text-white text-sm font-medium rounded-lg hover:bg-slate-700">Go</button>
            <a href="{{ route('appointments.calendar', ['branch_id' => $branchId, 'date' => \Carbon\Carbon::parse($date)->subDay()->toDateString()]) }}" class="px-4 py-2 border border-slate-300 text-slate-700 text-sm font-medium rounded-lg">Prev</a>
            <a href="{{ route('appointments.calendar', ['branch_id' => $branchId, 'date' => \Carbon\Carbon::parse($date)->addDay()->toDateString()]) }}" class="px-4 py-2 border border-slate-300 text-slate-700 text-sm font-medium rounded-lg">Next</a>
        </div>
    </form>

    <p class="text-sm text-slate-600 mb-4">{{ \Carbon\Carbon::parse($date)->format('l, F j, Y') }} — {{ $appointments->count() }} appointment(s)</p>

    <div class="salon-card" style="padding: 0; overflow: hidden;">
        <table class="min-w-full divide-y divide-slate-200" style="margin: 0;">
            <thead class="bg-slate-50">
                <tr>
                    <th class="px-4 py-3 text-left text-xs font-medium text-slate-600 uppercase">Time</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-slate-600 uppercase">Customer</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-slate-600 uppercase">Services</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-slate-600 uppercase">Branch</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-slate-600 uppercase">Status</th>
                    <th class="px-4 py-3 text-right text-xs font-medium text-slate-600 uppercase">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-200">
                @forelse($appointments as $apt)
                <tr class="hover:bg-slate-50">
                    <td class="px-4 py-3 text-sm text-slate-800">
                        {{ \Carbon\Carbon::parse($apt->start_time)->format('g:i A') }}
                        @if($apt->end_time)
                            – {{ \Carbon\Carbon::parse($apt->end_time)->format('g:i A') }}
                        @endif
                    </td>
                    <td class="px-4 py-3 text-sm text-slate-800">
                        {{ $apt->customer?->full_name ?? 'Walk-in' }}
                    </td>
                    <td class="px-4 py-3 text-sm text-slate-800">
                        @foreach($apt->appointmentServices as $aps)
                            {{ $aps->service?->name }}{{ !$loop->last ? ', ' : '' }}
                        @endforeach
                    </td>
                    <td class="px-4 py-3 text-sm text-slate-800">{{ $apt->branch?->name }}</td>
                    <td class="px-4 py-3 text-sm">
                        @php
                            $statusClass = match($apt->status) {
                                'confirmed' => 'bg-blue-100 text-blue-800',
                                'checked_in' => 'bg-amber-100 text-amber-800',
                                'completed' => 'bg-green-100 text-green-800',
                                'cancelled', 'no_show' => 'bg-slate-100 text-slate-600',
                                default => 'bg-slate-100 text-slate-800',
                            };
                        @endphp
                        <span class="px-2 py-1 text-xs font-medium rounded-full {{ $statusClass }}">{{ $apt->status }}</span>
                    </td>
                    <td class="px-4 py-3 text-sm text-right">
                        <a href="{{ route('appointments.show', $apt) }}" class="text-slate-600 hover:text-slate-800 font-medium">View</a>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="6" class="px-4 py-8 text-center text-slate-500 text-sm">No appointments for this date.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div style="margin-top: 1rem;">
        <a href="{{ route('appointments.create') }}?date={{ $date }}{{ $branchId ? '&branch_id=' . $branchId : '' }}" class="px-4 py-2 bg-slate-800 text-white text-sm font-medium rounded-lg hover:bg-slate-700">New appointment</a>
    </div>
</div>
</div>
</div>
</div>
@endsection
