@extends('layouts.sash')

@section('title', 'Appointments')

@section('content')
<div class="row mt-4">
<div class="col-12">
    <div class="page-header">
        <div>
            <h1 class="page-title">Appointments</h1>
            <p class="page-subtitle">Manage all bookings by date, status, branch and customer.</p>
        </div>
        <div class="page-actions">
            <a href="{{ route('appointments.calendar') }}" class="btn btn-outline-secondary btn-sm me-2"><i class="fe fe-calendar me-1"></i>Calendar View</a>
            <a href="{{ route('appointments.create') }}" class="btn btn-primary"><i class="fe fe-plus me-1"></i>Add Appointment</a>
        </div>
    </div>

    <div class="card mb-4">
        <div class="card-body">
            <form method="get" action="{{ route('appointments.index') }}" class="row g-3 align-items-end">
                <div class="col-12 col-md-6 col-lg-3">
                    <label class="form-label">Search</label>
                    <input type="text" name="search" value="{{ request('search') }}" placeholder="Appointment no, customer, mobile..." class="form-control">
                </div>
                <div class="col-12 col-md-6 col-lg-2">
                    <label class="form-label">Branch</label>
                    <select name="branch_id" class="form-control form-select">
                        <option value="">All</option>
                        @foreach($branches as $b)
                            <option value="{{ $b->id }}" {{ (string)request('branch_id') === (string)$b->id ? 'selected' : '' }}>{{ $b->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-12 col-md-6 col-lg-2">
                    <label class="form-label">Status</label>
                    <select name="status" class="form-control form-select">
                        <option value="">All</option>
                        <option value="pending" {{ request('status') === 'pending' ? 'selected' : '' }}>Pending</option>
                        <option value="confirmed" {{ request('status') === 'confirmed' ? 'selected' : '' }}>Confirmed</option>
                        <option value="checked_in" {{ request('status') === 'checked_in' ? 'selected' : '' }}>Checked in</option>
                        <option value="completed" {{ request('status') === 'completed' ? 'selected' : '' }}>Completed</option>
                        <option value="cancelled" {{ request('status') === 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                        <option value="no_show" {{ request('status') === 'no_show' ? 'selected' : '' }}>No show</option>
                    </select>
                </div>
                <div class="col-12 col-md-6 col-lg-2">
                    <label class="form-label">Date</label>
                    <input type="date" name="date" value="{{ request('date') }}" class="form-control">
                </div>
                <div class="col-12 col-lg-auto">
                    <button type="submit" class="btn btn-primary"><i class="fe fe-filter me-1"></i>Filter</button>
                </div>
            </form>
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table border text-nowrap text-md-nowrap table-hover mb-0">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Date / Time</th>
                            <th>Customer</th>
                            <th>Branch</th>
                            <th>Status</th>
                            <th class="text-end">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($appointments as $appointment)
                        <tr>
                            <td>{{ $appointment->appointment_no }}</td>
                            <td>
                                {{ optional($appointment->appointment_date)->format('d M Y') ?? '' }}
                                <span class="d-block small text-muted">
                                    {{ $appointment->start_time ? \Carbon\Carbon::parse($appointment->start_time)->format('g:i A') : '' }}
                                </span>
                            </td>
                            <td>
                                {{ $appointment->customer?->display_name ?? 'Walk-in' }}
                                @if($appointment->customer?->mobile)
                                    <span class="d-block small text-muted">{{ $appointment->customer->mobile }}</span>
                                @endif
                            </td>
                            <td>{{ $appointment->branch?->name ?? '—' }}</td>
                            <td>
                                @php
                                    $badgeClass = match($appointment->status) {
                                        'confirmed' => 'badge-info',
                                        'checked_in' => 'badge-info',
                                        'completed' => 'badge-success',
                                        'cancelled' => 'badge-muted',
                                        'no_show' => 'badge-danger',
                                        default => 'badge-warning',
                                    };
                                @endphp
                                <span class="badge {{ $badgeClass }}">{{ str_replace('_', ' ', $appointment->status ?? 'pending') }}</span>
                            </td>
                            <td class="text-end table-actions">
                                <a href="{{ route('appointments.show', $appointment) }}" class="btn btn-icon btn-sm btn-light" title="View"><i class="fe fe-eye"></i></a>
                                <a href="{{ route('appointments.edit', $appointment) }}" class="btn btn-icon btn-sm btn-light" title="Edit"><i class="fe fe-edit"></i></a>
                                <form action="{{ route('appointments.destroy', $appointment) }}" method="POST" class="d-inline" onsubmit="return confirm('Delete this appointment?');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-icon btn-sm btn-light text-danger" title="Delete"><i class="fe fe-trash-2"></i></button>
                                </form>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="6" class="text-center text-muted py-4">No appointments found.</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    @if($appointments->hasPages())
    <div class="mt-4">
        {{ $appointments->withQueryString()->links() }}
    </div>
    @endif
</div>
</div>
@endsection

