@extends('admin.layouts.master')

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

@section('page-title', 'Detalle del Mensaje')

@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.mensajes.index') }}">Mensajes</a></li>
        <li class="breadcrumb-item active" aria-current="page">Ver Mensaje</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-envelope me-2"></i>Mensaje de {{ $mensaje->nombre }}
                </span>
                <span class="badge-admin {{ $mensaje->leido ? 'bg-success' : 'bg-warning' }}">
                    {{ $mensaje->leido ? 'Leído' : 'Sin leer' }}
                </span>
            </div>
            <div class="card-body">
                <!-- Message Info -->
                <div class="message-meta mb-4">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="text-muted small">Nombre</label>
                            <p class="mb-0 fw-bold">{{ $mensaje->nombre }}</p>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="text-muted small">Email</label>
                            <p class="mb-0">
                                <a href="mailto:{{ $mensaje->email }}">{{ $mensaje->email }}</a>
                            </p>
                        </div>
                        @if($mensaje->telefono)
                        <div class="col-md-6 mb-3">
                            <label class="text-muted small">Teléfono</label>
                            <p class="mb-0">
                                <a href="tel:{{ $mensaje->telefono }}">{{ $mensaje->telefono }}</a>
                            </p>
                        </div>
                        @endif
                        <div class="col-md-6 mb-3">
                            <label class="text-muted small">Fecha</label>
                            <p class="mb-0">{{ $mensaje->created_at->format('d/m/Y H:i') }}</p>
                        </div>
                    </div>
                </div>
                
                <hr>
                
                <!-- Message Content -->
                <div class="message-content">
                    <label class="text-muted small d-block mb-2">Mensaje</label>
                    <div class="p-3 bg-light rounded">
                        {{ $mensaje->mensaje }}
                    </div>
                </div>
                
                <!-- Actions -->
                <div class="d-flex justify-content-between mt-4">
                    <a href="{{ route('admin.mensajes.index') }}" class="btn btn-secondary-admin">
                        <i class="fas fa-arrow-left me-2"></i>Volver
                    </a>
                    <div class="d-flex gap-2">
                        @if(!isset($yaTieneCita) || !$yaTieneCita)
                        <a href="{{ route('admin.citas.create-from-mensaje', $mensaje->id) }}" class="btn btn-primary-admin">
                            <i class="fas fa-calendar-plus me-2"></i>Agendar Cita
                        </a>
                        @else
                        <span class="badge-admin bg-success">
                            <i class="fas fa-check-circle me-1"></i>Ya tiene cita
                        </span>
                        @endif
                        
                        @if(!$mensaje->leido)
                        <form action="{{ route('admin.mensajes.leido', $mensaje) }}" method="POST">
                            @csrf
                            @method('PATCH')
                            <button type="submit" class="btn btn-secondary-admin">
                                <i class="fas fa-check me-2"></i>Marcar leído
                            </button>
                        </form>
                        @endif
                        
                        <form action="{{ route('admin.mensajes.destroy', $mensaje) }}" method="POST" onsubmit="return confirm('¿Estás seguro de que deseas eliminar este mensaje?')">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-danger-admin">
                                <i class="fas fa-trash me-2"></i>Eliminar
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-lg-4">
        <div class="card-admin">
            <div class="card-header">
                <i class="fas fa-info-circle me-2"></i>Información
            </div>
            <div class="card-body">
                <p class="text-muted">
                    Este mensaje fue enviado a través del formulario de contacto en el sitio web.
                </p>
                <ul class="text-muted">
                    <li class="mb-2">Puedes responder directamente al email del cliente</li>
                    <li class="mb-2">Los mensajes no leídos aparecen resaltados</li>
                    <li>Puedes eliminar mensajes que ya no necesites</li>
                </ul>
                
                <hr>
                
                <a href="mailto:{{ $mensaje->email }}?subject=Re: Tu mensaje desde Lash Vanshy" class="btn btn-primary-admin w-100">
                    <i class="fas fa-reply me-2"></i>Responder por Email
                </a>
            </div>
        </div>
    </div>
</div>
@endsection