@extends('admin.layouts.master')

@section('title', 'Ver Cita - Lash Vanshy')

@section('page-title', 'Detalle de Cita')

@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"><a href="{{ route('admin.citas.index') }}">Citas</a></li>
        <li class="breadcrumb-item active" aria-current="page">Ver Cita</li>
    </ol>
</nav>

<div class="row">
    <div class="col-lg-8">
        <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>Cita de {{ $cita->cliente_nombre }}
                </span>
                @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
            </div>
            <div class="card-body">
                <!-- Date & Time -->
                <div class="row mb-4">
                    <div class="col-md-6">
                        <label class="text-muted small">Fecha</label>
                        <p class="mb-0 fw-bold">
                            <i class="fas fa-calendar-alt me-2 text-primary"></i>
                            {{ $cita->fecha->format('d/m/Y') }}
                        </p>
                    </div>
                    <div class="col-md-6">
                        <label class="text-muted small">Horario</label>
                        <p class="mb-0 fw-bold">
                            <i class="fas fa-clock me-2 text-primary"></i>
                            {{ \Carbon\Carbon::parse($cita->hora_inicio)->format('h:i A') }} 
                            - 
                            {{ \Carbon\Carbon::parse($cita->hora_fin)->format('h:i A') }}
                        </p>
                        <small class="text-muted">Duración: 60 minutos</small>
                    </div>
                </div>
                
                <hr>
                
                <!-- Client Info -->
                <div class="row mb-4">
                    <div class="col-md-6 mb-3">
                        <label class="text-muted small">Nombre del Cliente</label>
                        <p class="mb-0 fw-bold">{{ $cita->cliente_nombre }}</p>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="text-muted small">Email</label>
                        <p class="mb-0">
                            <a href="mailto:{{ $cita->cliente_email }}">{{ $cita->cliente_email }}</a>
                        </p>
                    </div>
                    @if($cita->cliente_telefono)
                    <div class="col-md-6 mb-3">
                        <label class="text-muted small">Teléfono</label>
                        <p class="mb-0">
                            <a href="tel:{{ $cita->cliente_telefono }}">{{ $cita->cliente_telefono }}</a>
                        </p>
                    </div>
                    @endif
                    <div class="col-md-6 mb-3">
                        <label class="text-muted small">Servicio</label>
                        <p class="mb-0">{{ $cita->servicio }}</p>
                    </div>
                </div>
                
                @if($cita->notas)
                <hr>
                
                <!-- Notes -->
                <div class="mb-4">
                    <label class="text-muted small d-block mb-2">Notas</label>
                    <div class="p-3 bg-light rounded">
                        {{ $cita->notas }}
                    </div>
                </div>
                @endif
                
                <hr>
                
                <!-- Metadata -->
                <div class="row text-muted small">
                    <div class="col-md-6">
                        <label class="text-muted small">Fecha de creación</label>
                        <p class="mb-0">{{ $cita->created_at->format('d/m/Y H:i') }}</p>
                    </div>
                    <div class="col-md-6">
                        <label class="text-muted small">Última actualización</label>
                        <p class="mb-0">{{ $cita->updated_at->format('d/m/Y H:i') }}</p>
                    </div>
                </div>
                
                <!-- Actions -->
                <div class="d-flex justify-content-between mt-4">
                    <a href="{{ route('admin.citas.index') }}" class="btn btn-secondary-admin">
                        <i class="fas fa-arrow-left me-2"></i>Volver
                    </a>
                    <div class="d-flex gap-2">
                        <a href="{{ route('admin.citas.edit', $cita) }}" class="btn btn-primary-admin">
                            <i class="fas fa-edit me-2"></i>Editar
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Sidebar -->
    <div class="col-lg-4">
        <!-- Quick Status Change -->
        <div class="card-admin mb-3">
            <div class="card-header">
                <i class="fas fa-flag me-2"></i>Cambiar Estado
            </div>
            <div class="card-body">
                <form action="{{ route('admin.citas.estado', $cita) }}" method="POST" class="d-flex flex-column gap-2">
                    @csrf
                    @method('PATCH')
                    
                    <button type="submit" name="estado" value="pendiente" 
                            class="btn btn-sm {{ $cita->estado == 'pendiente' ? 'btn-primary-admin' : 'btn-secondary-admin' }}">
                        <i class="fas fa-clock me-2"></i>Pendiente
                    </button>
                    <button type="submit" name="estado" value="confirmada" 
                            class="btn btn-sm {{ $cita->estado == 'confirmada' ? 'btn-primary-admin' : 'btn-secondary-admin' }}">
                        <i class="fas fa-check me-2"></i>Confirmar
                    </button>
                    <button type="submit" name="estado" value="completada" 
                            class="btn btn-sm {{ $cita->estado == 'completada' ? 'btn-primary-admin' : 'btn-secondary-admin' }}">
                        <i class="fas fa-check-circle me-2"></i>Completar
                    </button>
                    <button type="submit" name="estado" value="cancelada" 
                            class="btn btn-sm {{ $cita->estado == 'cancelada' ? 'btn-danger-admin' : 'btn-secondary-admin' }}">
                        <i class="fas fa-times me-2"></i>Cancelar
                    </button>
                </form>
            </div>
        </div>
        
        <!-- Related Message -->
        @if($cita->mensaje)
        <div class="card-admin mb-3">
            <div class="card-header">
                <i class="fas fa-envelope me-2"></i>Mensaje Relacionado
            </div>
            <div class="card-body">
                <p class="mb-2"><strong>{{ $cita->mensaje->nombre }}</strong></p>
                <p class="text-muted small mb-3">{{ $cita->mensaje->mensaje }}</p>
                <a href="{{ route('admin.mensajes.show', $cita->mensaje) }}" class="btn btn-secondary-admin w-100">
                    <i class="fas fa-eye me-2"></i>Ver Mensaje
                </a>
            </div>
        </div>
        @endif
        
        <!-- Danger Zone -->
        <div class="card-admin">
            <div class="card-header bg-danger text-white">
                <i class="fas fa-exclamation-triangle me-2"></i>Zona de Peligro
            </div>
            <div class="card-body">
                <p class="text-muted mb-3">
                    Eliminar esta cita es una acción permanente. ¿Estás seguro?
                </p>
                <form action="{{ route('admin.citas.destroy', $cita) }}" method="POST" 
                      onsubmit="return confirm('¿Estás seguro de eliminar esta cita? Esta acción no se puede deshacer.')">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger-admin w-100">
                        <i class="fas fa-trash me-2"></i>Eliminar Cita
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection