@extends('layouts.admin')

@section('admin-content')
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;">
    <h2 style="font-size: 1.5rem; font-weight: 800;">Control de Citas Reservadas</h2>
</div>

<!-- Filtros de Búsqueda -->
<div class="glass" style="padding: 1.5rem; border-radius: var(--radius-md); margin-bottom: 2rem;">
    <form action="{{ route('admin.appointments.index') }}" method="GET" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; align-items: end;">
        <div>
            <label for="date" class="form-label" style="font-size: 0.85rem;">Fecha</label>
            <input type="date" id="date" name="date" value="{{ request('date') }}" class="form-control" style="padding: 0.5rem 0.75rem;">
        </div>

        <div>
            <label for="staff_id" class="form-label" style="font-size: 0.85rem;">Empleado (Staff)</label>
            <select name="staff_id" id="staff_id" class="form-control" style="padding: 0.5rem 0.75rem;">
                <option value="">Todos</option>
                @foreach($staffMembers as $stf)
                    <option value="{{ $stf->id }}" {{ request('staff_id') == $stf->id ? 'selected' : '' }}>{{ $stf->name }}</option>
                @endforeach
            </select>
        </div>

        <div>
            <label for="status" class="form-label" style="font-size: 0.85rem;">Estado</label>
            <select name="status" id="status" class="form-control" style="padding: 0.5rem 0.75rem;">
                <option value="">Todos</option>
                <option value="pending" {{ request('status') === 'pending' ? 'selected' : '' }}>Pendiente</option>
                <option value="confirmed" {{ request('status') === 'confirmed' ? 'selected' : '' }}>Confirmada</option>
                <option value="completed" {{ request('status') === 'completed' ? 'selected' : '' }}>Completada</option>
                <option value="cancelled" {{ request('status') === 'cancelled' ? 'selected' : '' }}>Cancelada</option>
            </select>
        </div>

        <div style="display: flex; gap: 0.5rem;">
            <button type="submit" class="btn btn-primary btn-sm" style="flex: 1; height: 38px;">
                Filtrar
            </button>
            @if(request()->filled('date') || request()->filled('staff_id') || request()->filled('status'))
                <a href="{{ route('admin.appointments.index') }}" class="btn btn-outline btn-sm" style="flex: 1; height: 38px; display: flex; align-items: center; justify-content: center;">
                    Limpiar
                </a>
            @endif
        </div>
    </form>
</div>

@if($appointments->isEmpty())
    <p style="color: var(--text-muted); text-align: center; padding: 2rem;">No se encontraron citas con los filtros seleccionados.</p>
@else
    <div class="table-responsive">
        <table class="table">
            <thead>
                <tr>
                    <th>Cita #</th>
                    <th>Usuario Registrado</th>
                    <th>Contacto de Cita</th>
                    <th>Servicio</th>
                    <th>Empleado</th>
                    <th>Fecha &amp; Hora</th>
                    <th>Estado</th>
                    <th style="text-align: right;">Acciones</th>
                </tr>
            </thead>
            <tbody>
                @foreach($appointments as $appt)
                    <tr>
                        <td><strong>#{{ $appt->id }}</strong></td>
                        <td>
                            <span style="font-size: 0.9rem; font-weight: 600;">{{ $appt->user->name }}</span>
                            <span style="font-size: 0.75rem; color: var(--text-muted); display: block;">{{ $appt->user->email }}</span>
                        </td>
                        <td>
                            <span style="font-size: 0.9rem; display: block;">{{ $appt->name }}</span>
                            <span style="font-size: 0.8rem; color: var(--text-secondary);">Tel: {{ $appt->phone }}</span>
                        </td>
                        <td>
                            <strong>{{ $appt->service->name }}</strong>
                            <span style="font-size: 0.75rem; color: var(--text-muted); display: block;">{{ $appt->service->duration_minutes }} min / ${{ number_format($appt->service->price, 2) }}</span>
                        </td>
                        <td>{{ $appt->staff->name }}</td>
                        <td>
                            <span style="font-weight: 600; display: block;">{{ $appt->date->format('d/m/Y') }}</span>
                            <span style="font-size: 0.85rem; color: var(--text-secondary);">{{ substr($appt->time, 0, 5) }} hs</span>
                        </td>
                        <td>
                            @if($appt->status === 'pending')
                                <span class="badge badge-warning">Pendiente</span>
                            @elseif($appt->status === 'confirmed')
                                <span class="badge badge-info" style="background-color: var(--color-info); color: white;">Confirmada</span>
                            @elseif($appt->status === 'completed')
                                <span class="badge badge-success">Completada</span>
                            @elseif($appt->status === 'cancelled')
                                <span class="badge badge-warning" style="background-color: var(--color-error); color: white;">Cancelada</span>
                            @endif
                        </td>
                        <td style="text-align: right;">
                            <div style="display: inline-flex; gap: 0.25rem; justify-content: flex-end;">
                                @if($appt->status === 'pending')
                                    <form action="{{ route('admin.appointments.update-status', $appt) }}" method="POST" style="margin: 0;">
                                        @csrf
                                        <input type="hidden" name="status" value="confirmed">
                                        <button type="submit" class="btn btn-primary btn-sm" style="padding: 0.3rem 0.5rem; font-size: 0.8rem;">
                                            Confirmar
                                        </button>
                                    </form>
                                    <form action="{{ route('admin.appointments.update-status', $appt) }}" method="POST" style="margin: 0;">
                                        @csrf
                                        <input type="hidden" name="status" value="cancelled">
                                        <button type="submit" class="btn btn-danger btn-sm" style="padding: 0.3rem 0.5rem; font-size: 0.8rem;">
                                            Cancelar
                                        </button>
                                    </form>
                                @elseif($appt->status === 'confirmed')
                                    <form action="{{ route('admin.appointments.update-status', $appt) }}" method="POST" style="margin: 0;">
                                        @csrf
                                        <input type="hidden" name="status" value="completed">
                                        <button type="submit" class="btn btn-primary btn-sm" style="padding: 0.3rem 0.5rem; font-size: 0.8rem; background-color: var(--color-success); border-color: var(--color-success);">
                                            Completar
                                        </button>
                                    </form>
                                    <form action="{{ route('admin.appointments.update-status', $appt) }}" method="POST" style="margin: 0;">
                                        @csrf
                                        <input type="hidden" name="status" value="cancelled">
                                        <button type="submit" class="btn btn-danger btn-sm" style="padding: 0.3rem 0.5rem; font-size: 0.8rem;">
                                            Cancelar
                                        </button>
                                    </form>
                                @else
                                    <span style="font-size: 0.85rem; color: var(--text-muted); padding: 0.3rem 0.5rem;">Sin acciones</span>
                                @endif
                            </div>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    <!-- Paginación -->
    <div style="margin-top: 1.5rem;">
        {{ $appointments->appends(request()->query())->links() }}
    </div>
@endif
@endsection