@extends('layouts.staff')

@section('staff-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;">Mi Agenda de Citas</h2>
</div>

<!-- Filtros de Agenda -->
<div class="glass" style="padding: 1.25rem; border-radius: var(--radius-md); margin-bottom: 2rem; border-color: var(--border-color);">
    <form action="{{ route('staff.appointments.index') }}" method="GET" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; align-items: end;">
        <div>
            <label for="date" class="form-label" style="font-size: 0.85rem;">Filtrar por 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="status" class="form-label" style="font-size: 0.85rem;">Estado de Reserva</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('status'))
                <a href="{{ route('staff.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 tienes citas asignadas en este momento.</p>
@else
    <div class="table-responsive">
        <table class="table">
            <thead>
                <tr>
                    <th>Cita #</th>
                    <th>Cliente</th>
                    <th>Contacto</th>
                    <th>Servicio</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>
                        </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;">Duración: {{ $appt->service->duration_minutes }} min</span>
                        </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('staff.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('staff.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('staff.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('staff.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