@extends('../layouts/partials/header')

@section('content')

<div class="container mt-3">
    <div class="card shadow-sm">

        <div class="card-header d-flex justify-content-between align-items-center">
            <span class="fw-bold">{{ $cliente->razon_social ?? 'Detalle del Cliente' }}</span>
            <div class="d-flex gap-2">
                <a href="{{ route('clientes.edit', $cliente) }}" class="btn btn-warning btn-sm">
                    <i class="bi bi-pencil"></i> Editar
                </a>
                <a href="{{ route('clientes.index') }}" class="btn btn-secondary btn-sm">
                    <i class="bi bi-arrow-left"></i> Regresar
                </a>
            </div>
        </div>

        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show m-3 mb-0" role="alert">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        <div class="card-body">
            <div class="row g-3">

                <div class="col-12"><h6 class="text-secondary border-bottom pb-1">Datos Fiscales</h6></div>

                <div class="col-md-3"><x-show-field label="RFC"          :value="$cliente->rfc"/></div>
                <div class="col-md-5"><x-show-field label="Razón Social" :value="$cliente->razon_social"/></div>
                <div class="col-md-2"><x-show-field label="Régimen"      :value="$cliente->regimen"/></div>

                <div class="col-12"><h6 class="text-secondary border-bottom pb-1 mt-2">Dirección</h6></div>

                <div class="col-md-6"><x-show-field label="Calle"    :value="$cliente->calle"/></div>
                <div class="col-md-2"><x-show-field label="Número"  :value="$cliente->numero"/></div>
                <div class="col-md-3"><x-show-field label="Colonia" :value="$cliente->colonia"/></div>
                <div class="col-md-2"><x-show-field label="C.P."    :value="$cliente->cp"/></div>

                <div class="col-12"><h6 class="text-secondary border-bottom pb-1 mt-2">Contacto 1</h6></div>

                <div class="col-md-4"><x-show-field label="Nombre"    :value="$cliente->contacto1"/></div>
                <div class="col-md-3"><x-show-field label="Teléfono"  :value="$cliente->contacto1_tel"/></div>
                <div class="col-md-4"><x-show-field label="Email"     :value="$cliente->contacto1_email"/></div>

                <div class="col-12"><h6 class="text-secondary border-bottom pb-1 mt-2">Contacto 2</h6></div>

                <div class="col-md-4"><x-show-field label="Nombre"    :value="$cliente->contacto2"/></div>
                <div class="col-md-3"><x-show-field label="Teléfono"  :value="$cliente->contacto2_tel"/></div>
                <div class="col-md-4"><x-show-field label="Email"     :value="$cliente->contacto2_email"/></div>

                <div class="col-12 text-muted small mt-2">
                    <span>Creado: {{ $cliente->created_at?->format('d/m/Y H:i') }}</span>
                    &nbsp;|&nbsp;
                    <span>Actualizado: {{ $cliente->updated_at?->format('d/m/Y H:i') }}</span>
                </div>

            </div>
        </div>
    </div>
</div>

@endsection

@extends('../layouts/partials/footer')