@extends('admin.layouts.master')

@section('title', 'Citas - Lash Vanshy')

@section('page-title', 'Citas')

@section('content')
<!-- Breadcrumb -->
<nav aria-label="breadcrumb" class="mb-4">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
        <li class="breadcrumb-item active" aria-current="page">Citas</li>
    </ol>
</nav>

<!-- Stats Cards -->
<div class="row mb-4">
    <div class="col-md-3">
        <div class="stat-card">
            <div class="stat-icon primary">
                <i class="fas fa-calendar-check"></i>
            </div>
            <div class="stat-info">
                <h3>{{ $stats['pendientes'] ?? 0 }}</h3>
                <p>Pendientes</p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card">
            <div class="stat-icon success">
                <i class="fas fa-check-circle"></i>
            </div>
            <div class="stat-info">
                <h3>{{ $stats['confirmadas'] ?? 0 }}</h3>
                <p>Confirmadas</p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card">
            <div class="stat-icon info">
                <i class="fas fa-calendar-check"></i>
            </div>
            <div class="stat-info">
                <h3>{{ $stats['completadas'] ?? 0 }}</h3>
                <p>Completadas</p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card">
            <div class="stat-icon warning">
                <i class="fas fa-times-circle"></i>
            </div>
            <div class="stat-info">
                <h3>{{ $stats['canceladas'] ?? 0 }}</h3>
                <p>Canceladas</p>
            </div>
        </div>
    </div>
</div>

<!-- Filters & Actions -->
<div class="card-admin mb-4">
    <div class="card-body">
        <div class="filters-bar">
            <form method="GET" class="d-flex gap-3 flex-wrap align-items-center">
                <div class="search-box">
                    <i class="fas fa-search"></i>
                    <input type="text" name="buscar" class="form-control" 
                           placeholder="Buscar cliente..." 
                           value="{{ request('buscar') }}">
                </div>
                
                <div class="search-box">
                    <i class="fas fa-calendar"></i>
                    <input type="date" name="fecha" class="form-control" 
                           value="{{ request('fecha') }}">
                </div>
                
                <select name="estado" class="form-select" style="width: auto;">
                    <option value="">Todos los estados</option>
                    <option value="pendiente" {{ request('estado') == 'pendiente' ? 'selected' : '' }}>Pendiente</option>
                    <option value="confirmada" {{ request('estado') == 'confirmada' ? 'selected' : '' }}>Confirmada</option>
                    <option value="completada" {{ request('estado') == 'completada' ? 'selected' : '' }}>Completada</option>
                    <option value="cancelada" {{ request('estado') == 'cancelada' ? 'selected' : '' }}>Cancelada</option>
                </select>
                
                <button type="submit" class="btn btn-primary-admin">
                    <i class="fas fa-filter me-2"></i>Filtrar
                </button>
                
                @if(request()->hasAny(['buscar', 'fecha', 'estado']))
                <a href="{{ route('admin.citas.index') }}" class="btn btn-secondary-admin">
                    <i class="fas fa-times me-2"></i>Limpiar
                </a>
                @endif
            </form>
            
            <div class="d-flex gap-2 ms-auto">
                <a href="{{ route('admin.citas.create') }}" class="btn btn-primary-admin">
                    <i class="fas fa-plus me-2"></i>Nueva Cita
                </a>
                <a href="{{ route('admin.citas.calendario') }}" class="btn btn-secondary-admin">
                    <i class="fas fa-calendar-alt me-2"></i>Calendario
                </a>
            </div>
        </div>
    </div>
</div>

<!-- Citas Table -->
<div class="card-admin">
    <div class="card-header d-flex justify-content-between align-items-center">
        <span>
            <i class="fas fa-calendar me-2"></i>Listado de Citas
        </span>
        <span class="text-muted small">
            Total: {{ $citas->total() }} citas
        </span>
    </div>
    <div class="card-body p-0">
        @if($citas->isEmpty())
        <div class="empty-state">
            <i class="fas fa-calendar-times"></i>
            <h4>No hay citas</h4>
            <p>No se encontraron citas con los filtros seleccionados.</p>
            <a href="{{ route('admin.citas.create') }}" class="btn btn-primary-admin mt-3">
                <i class="fas fa-plus me-2"></i>Crear Primera Cita
            </a>
        </div>
        @else
        <div class="table-responsive">
            <table class="table-admin">
                <thead>
                    <tr>
                        <th>Fecha/Hora</th>
                        <th>Cliente</th>
                        <th>Servicio</th>
                        <th>Estado</th>
                        <th>Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($citas as $cita)
                    <tr>
                        <td>
                            <div class="d-flex flex-column">
                                <span class="fw-bold">
                                    <i class="fas fa-calendar-alt me-1 text-primary"></i>
                                    {{ $cita->fecha->format('d/m/Y') }}
                                </span>
                                <span class="text-muted small">
                                    {{ $cita->hora_inicio }} - {{ $cita->hora_fin }}
                                </span>
                            </div>
                        </td>
                        <td>
                            <div class="d-flex flex-column">
                                <span class="fw-bold">{{ $cita->cliente_nombre }}</span>
                                <span class="text-muted small">{{ $cita->cliente_email }}</span>
                                @if($cita->cliente_telefono)
                                <span class="text-muted small">{{ $cita->cliente_telefono }}</span>
                                @endif
                            </div>
                        </td>
                        <td>{{ $cita->servicio }}</td>
                        <td>
                            @switch($cita->estado)
                            @case('pendiente')
                            <span class="badge-admin bg-warning">Pendiente</span>
                            @break
                            @case('confirmada')
                            <span class="badge-admin bg-success">Confirmada</span>
                            @break
                            @case('completada')
                            <span class="badge-admin bg-info">Completada</span>
                            @break
                            @case('cancelada')
                            <span class="badge-admin bg-danger">Cancelada</span>
                            @break
                            @endswitch
                        </td>
                        <td>
                            <div class="actions">
                                <a href="{{ route('admin.citas.show', $cita) }}" 
                                   class="btn btn-sm btn-secondary-admin" 
                                   title="Ver detalles">
                                    <i class="fas fa-eye"></i>
                                </a>
                                <a href="{{ route('admin.citas.edit', $cita) }}" 
                                   class="btn btn-sm btn-secondary-admin" 
                                   title="Editar">
                                    <i class="fas fa-edit"></i>
                                </a>
                                
                                <div class="dropdown">
                                    <button class="btn btn-sm btn-secondary-admin dropdown-toggle" 
                                            data-bs-toggle="dropdown" 
                                            title="Cambiar estado">
                                        <i class="fas fa-flag"></i>
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <form action="{{ route('admin.citas.estado', $cita) }}" method="POST">
                                                @csrf
                                                @method('PATCH')
                                                <input type="hidden" name="estado" value="pendiente">
                                                <button type="submit" class="dropdown-item">
                                                    <i class="fas fa-clock me-2"></i>Pendiente
                                                </button>
                                            </form>
                                        </li>
                                        <li>
                                            <form action="{{ route('admin.citas.estado', $cita) }}" method="POST">
                                                @csrf
                                                @method('PATCH')
                                                <input type="hidden" name="estado" value="confirmada">
                                                <button type="submit" class="dropdown-item">
                                                    <i class="fas fa-check me-2"></i>Confirmar
                                                </button>
                                            </form>
                                        </li>
                                        <li>
                                            <form action="{{ route('admin.citas.estado', $cita) }}" method="POST">
                                                @csrf
                                                @method('PATCH')
                                                <input type="hidden" name="estado" value="completada">
                                                <button type="submit" class="dropdown-item">
                                                    <i class="fas fa-check-circle me-2"></i>Completar
                                                </button>
                                            </form>
                                        </li>
                                        <li><hr class="dropdown-divider"></li>
                                        <li>
                                            <form action="{{ route('admin.citas.estado', $cita) }}" method="POST">
                                                @csrf
                                                @method('PATCH')
                                                <input type="hidden" name="estado" value="cancelada">
                                                <button type="submit" class="dropdown-item text-danger">
                                                    <i class="fas fa-times me-2"></i>Cancelar
                                                </button>
                                            </form>
                                        </li>
                                    </ul>
                                </div>
                                
                                <form action="{{ route('admin.citas.destroy', $cita) }}" method="POST" 
                                      onsubmit="return confirm('¿Estás seguro de eliminar esta cita?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-sm btn-danger-admin" title="Eliminar">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        
        <!-- Pagination -->
        <div class="pagination-wrapper p-3">
            {{ $citas->withQueryString()->links() }}
        </div>
        @endif
    </div>
</div>
@endsection