@extends('layouts.app')

@section('content')
<div class="bg-image" style="background-image: url('{{ asset('assets/media/photos/photo10@2x.jpg') }}');">
    <div class="bg-primary-dark-op">
        <div class="content content-full">
            <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center mt-5 mb-2 text-center text-sm-start">
                <div class="flex-grow-1">
                    <h1 class="fw-semibold text-white mb-2">{{ $cliente->nombre }}</h1>
                    <h2 class="h4 fw-normal text-white-75 mb-0">
                        <i class="fa fa-id-card me-1"></i> {{ $cliente->ci }} 
                        <span class="mx-2">|</span> 
                        <i class="fa fa-map-marker-alt me-1"></i> {{ $ciudadRel->nombreciu ?? 'S/N' }}
                    </h2>
                </div>
                <div class="flex-shrink-0 mt-3 mt-sm-0">
                    <span class="badge bg-{{ $cliente->contratosVigentes()->exists() ? 'success' : 'secondary' }} fs-base px-3 py-2">
                        <i class="fa {{ $cliente->contratosVigentes()->exists() ? 'fa-check-circle' : 'fa-user-clock' }} me-1"></i>
                        {{ $cliente->tipo_texto }}
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="content">
    {{-- Notificaciones --}}
    @if(session('success'))
        <div class="alert alert-success d-flex align-items-center" role="alert">
            <i class="fa fa-check-circle me-2"></i>
            <p class="mb-0">{{ session('success') }}</p>
            <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <div class="row">
        {{-- Columna Izquierda: Información Personal --}}
        <div class="col-xl-4">
            <div class="block block-rounded">
                <div class="block-header block-header-default">
                    <h3 class="block-title">Datos Personales</h3>
                    <div class="block-options">
                        <a href="{{ route('clientes.edit', $cliente->id) }}" class="btn-block-option text-warning">
                            <i class="fa fa-user-edit"></i>
                        </a>
                    </div>
                </div>
                <div class="block-content">
                    <ul class="nav-items fs-sm">
                        <li class="mb-3">
                            <div class="fw-semibold text-muted text-uppercase fs-xs">Código de Sistema</div>
                            <div class="fw-bold">#{{ $cliente->id }}</div>
                        </li>
                        <li class="mb-3">
                            <div class="fw-semibold text-muted text-uppercase fs-xs">Fecha de Registro</div>
                            <div>
                                @php
                                    $fechaCliente = '—';
                                    if ($cliente->fecha && !in_array($cliente->fecha, ['0000-00-00', '00-00-0000'])) {
                                        try {
                                            $fechaCliente = \Carbon\Carbon::createFromFormat('d/m/Y', $cliente->fecha)->format('d/m/Y');
                                        } catch (\Exception $e) {
                                            $fechaCliente = \Carbon\Carbon::parse($cliente->fecha)->format('d/m/Y');
                                        }
                                    }
                                @endphp
                                {{ $fechaCliente }}
                            </div>
                        </li>
                        <li class="mb-3">
                            <div class="fw-semibold text-muted text-uppercase fs-xs">Estado Civil / Sexo</div>
                            <div>{{ $cliente->estado_civil_texto }} <span class="text-muted">|</span> {{ $cliente->sexo_texto }}</div>
                        </li>
                        <li class="mb-3">
                            <div class="fw-semibold text-muted text-uppercase fs-xs">Dirección</div>
                            <div class="text-dark">{{ $cliente->direccion }}</div>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="block block-rounded">
                <div class="block-header block-header-default">
                    <h3 class="block-title">Contacto</h3>
                </div>
                <div class="block-content">
                    <table class="table table-borderless table-sm fs-sm">
                        <tr>
                            <td style="width: 30px;"><i class="fa fa-phone text-muted"></i></td>
                            <td>{{ $cliente->telefono ?: '—' }}</td>
                        </tr>
                        <tr>
                            <td><i class="fab fa-whatsapp text-success"></i></td>
                            <td class="fw-bold">{{ $cliente->celular ?: '—' }}</td>
                        </tr>
                        <tr>
                            <td><i class="fa fa-envelope text-muted"></i></td>
                            <td>{{ $cliente->email ?: '—' }}</td>
                        </tr>
                        @if($cliente->casilla || $cliente->fax)
                        <tr>
                            <td><i class="fa fa-box text-muted"></i></td>
                            <td>Casilla: {{ $cliente->casilla ?: 'N/A' }} / Fax: {{ $cliente->fax ?: 'N/A' }}</td>
                        </tr>
                        @endif
                    </table>
                    
                    @if($cliente->observaciones)
                    <div class="bg-body-light p-3 rounded mb-3">
                        <div class="fw-semibold fs-xs text-uppercase text-muted mb-1">Observaciones Internas</div>
                        <p class="mb-0 italic small">{{ $cliente->observaciones }}</p>
                    </div>
                    @endif
                </div>
            </div>
            
            <a href="{{ route('clientes.index') }}" class="btn btn-alt-secondary w-100 mb-4">
                <i class="fa fa-arrow-left me-1"></i> Volver al Listado
            </a>
        </div>

        {{-- Columna Derecha: Contratos --}}
        <div class="col-xl-8">
            <h2 class="content-heading pt-0">
                <i class="fa fa-file-signature me-1"></i> Contratos Asociados
            </h2>

            @forelse($contratos as $contrato)
                <div class="block block-rounded block-bordered border-start border-4 border-{{ $contrato->anul == 1 ? 'danger' : 'success' }}">
                    <div class="block-header block-header-default">
                        <h3 class="block-title">
                            Contrato <span class="fw-bold">#{{ $contrato->id }}</span>
                            <span class="ms-2 badge bg-{{ $contrato->anul == 1 ? 'danger-light text-danger' : 'success-light text-success' }}">
                                {{ $contrato->anul == 1 ? 'ANULADO' : 'VIGENTE' }}
                            </span>
                        </h3>
                        <div class="block-options">
                            <a href="{{ route('contratos.show', $contrato->id) }}" class="btn-block-option" title="Ver Detalle">
                                <i class="fa fa-external-link-alt"></i>
                            </a>
                        </div>
                    </div>
                    <div class="block-content">
                        <div class="row items-push">
                            <div class="col-md-6">
                                <p class="mb-1 fs-sm"><span class="fw-semibold">Urbanización:</span> {{ $contrato->nom_urb ?? '—' }}</p>
                                <p class="mb-1 fs-sm"><span class="fw-semibold">Ubicación:</span> Distrito {{ $contrato->nom_dis }} - Manzano {{ $contrato->manzano }}</p>
                                <p class="mb-0 fs-sm"><span class="fw-semibold text-primary">Lote:</span> <span class="badge bg-primary">{{ $contrato->lote }}</span> (ID: {{ $contrato->idlote }})</p>
                            </div>
                            <div class="col-md-6 border-start-md">
                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <span class="fs-sm fw-semibold">Fecha Contrato:</span>
                                    <span class="fs-sm">
                                        @php
                                            $fechaContrato = '—';
                                            if ($contrato->fecha) {
                                                try { $fechaContrato = \Carbon\Carbon::createFromFormat('d/m/Y', $contrato->fecha)->format('d/m/Y'); }
                                                catch (\Exception $e) { $fechaContrato = $contrato->fecha; }
                                            }
                                        @endphp
                                        {{ $fechaContrato }}
                                    </span>
                                </div>
                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <span class="fs-sm fw-semibold">Inversión Total:</span>
                                    <span class="fs-sm fw-bold text-dark">$us {{ number_format($contrato->total, 2) }}</span>
                                </div>
                                <div class="d-flex justify-content-between align-items-center">
                                    <span class="fs-sm fw-semibold">Plazo:</span>
                                    <span class="fs-sm">{{ $contrato->numcuotas }} Cuotas</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="block-content block-content-full bg-body-light text-end">
                        @if($contrato->anul != 1)
                            <a href="{{ route('extractos.index', ['idcontrato' => $contrato->id]) }}" class="btn btn-sm btn-alt-secondary">
                                <i class="fa fa-list-ol me-1"></i> Historial de Pagos
                            </a>
                        @endif
                        <a href="{{ route('contratos.show', $contrato->id) }}" class="btn btn-sm btn-alt-primary">
                            <i class="fa fa-eye me-1"></i> Detalles Técnicos
                        </a>
                    </div>
                </div>
            @empty
                <div class="block block-rounded">
                    <div class="block-content block-content-full text-center py-5">
                        <i class="fa fa-folder-open fa-3x text-muted mb-3"></i>
                        <p class="text-muted mb-0">Este cliente no posee contratos de preventa registrados.</p>
                    </div>
                </div>
            @endforelse
        </div>
    </div>
</div>
@endsection