@extends('layouts.app')

@section('content')
<div class="bg-body-light">
    <div class="content content-full">
        <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center py-2">
            <div class="flex-grow-1">
                <h1 class="h3 fw-bold mb-2">
                    Lote #{{ $lote->id }}
                </h1>
                <h2 class="fs-base lh-base fw-medium text-muted mb-0">
                    <i class="fa fa-map-marker-alt me-1"></i> {{ $lote->urbanizacionRel->nombre ?? 'Sin Urbanización' }} 
                    <span class="mx-2">|</span> Distrito: {{ $lote->distrito->nombre ?? '—' }} 
                    <span class="mx-2">|</span> Manzano: <span class="fw-bold text-dark">{{ $lote->manzano }}</span>
                </h2>
            </div>
            <div class="flex-shrink-0 mt-3 mt-sm-0 ms-sm-3">
                <span class="badge bg-{{ $lote->estado_badge }} fs-base px-3 py-2">
                    {{ $lote->estado_texto }}
                </span>
            </div>
        </div>
    </div>
</div>

<div class="content">
    <div class="row">
        {{-- Columna Principal: Datos Técnicos --}}
        <div class="col-xl-8">
            <div class="block block-rounded">
                <div class="block-header block-header-default">
                    <h3 class="block-title">Información Técnica</h3>
                    <div class="block-options">
                        <button type="button" class="btn-block-option">
                            <i class="fa fa-print me-1"></i> Imprimir Ficha
                        </button>
                    </div>
                </div>
                <div class="block-content">
                    <div class="row items-push">
                        <div class="col-md-6">
                            <ul class="list-group list-group-flush fs-sm">
                                <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                                    <span class="fw-semibold text-muted">Número de Lote</span>
                                    <span class="fw-bold text-primary fs-base">{{ $lote->nombre }}</span>
                                </li>
                                <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                                    <span class="fw-semibold text-muted">Superficie Total</span>
                                    <span class="fw-bold">{{ number_format($lote->superf, 2) }} m²</span>
                                </li>
                                <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                                    <span class="fw-semibold text-muted">Tipo de Ubicación</span>
                                    <span>{{ $lote->tipo_texto }}</span>
                                </li>
                            </ul>
                        </div>
                        <div class="col-md-6">
                            <ul class="list-group list-group-flush fs-sm">
                                <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                                    <span class="fw-semibold text-muted">Individualización</span>
                                    @if($lote->telef)
                                        <span class="badge bg-danger-light text-danger fw-bold">REGISTRADO</span>
                                    @else
                                        <span class="text-muted">Pendiente</span>
                                    @endif
                                </li>
                                <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                                    <span class="fw-semibold text-muted">Código de Sistema</span>
                                    <span class="font-monospace">#{{ $lote->id }}</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                    
                    <div class="bg-body-light p-3 rounded mb-4">
                        <h4 class="fs-sm fw-bold text-uppercase mb-2">Observaciones</h4>
                        <p class="fs-sm text-muted mb-0">
                            {{ $lote->observ ?: 'Sin observaciones registradas.' }}
                        </p>
                    </div>
                </div>
            </div>

            {{-- Datos Relacionados (Contrato) --}}
            <div class="block block-rounded">
                <div class="block-header block-header-default">
                    <h3 class="block-title text-info">
                        <i class="fa fa-file-signature me-1"></i> Información del Contrato
                    </h3>
                </div>
                <div class="block-content block-content-full">
                    @if($contrato)
                        <div class="d-flex align-items-center">
                            <div class="item item-circle bg-info-light text-info me-3">
                                <i class="fa fa-user"></i>
                            </div>
                            <div class="flex-grow-1">
                                <div class="fw-bold fs-base mb-0">{{ $contrato->nomcli }}</div>
                                <div class="fs-sm text-muted">Cliente: <span class="fw-semibold">{{ $contrato->codcli }}</span></div>
                            </div>
                            <div class="text-end">
                                <a href="{{ route('contratos.show', $contrato->idcont) }}" class="btn btn-sm btn-alt-info">
                                    Contrato #{{ $contrato->idcont }} <i class="fa fa-external-link-alt ms-1 small"></i>
                                </a>
                            </div>
                        </div>
                        <hr>
                        <div class="row text-center fs-sm">
                            <div class="col-6 border-end">
                                <div class="fw-semibold text-muted text-uppercase mb-1">Fecha de Firma</div>
                                <div class="fw-bold">{{ \Carbon\Carbon::parse($contrato->fecha)->format('d/m/Y') }}</div>
                            </div>
                            <div class="col-6">
                                <div class="fw-semibold text-muted text-uppercase mb-1">Enlace Cliente</div>
                                <a href="{{ route('clientes.show', $contrato->codcli) }}" class="fw-bold text-primary">Ver Perfil</a>
                            </div>
                        </div>
                    @else
                        <div class="text-center py-4">
                            <i class="fa fa-handshake-slash fa-2x text-muted mb-2"></i>
                            <p class="text-muted fs-sm mb-0">Este lote no tiene un contrato de venta activo actualmente.</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        {{-- Columna Lateral: Servicios y Estado --}}
        <div class="col-xl-4">
            {{-- Servicios --}}
            <div class="block block-rounded">
                <div class="block-header block-header-default">
                    <h3 class="block-title">Servicios Disponibles</h3>
                </div>
                <div class="block-content p-0">
                    <table class="table table-vcenter table-hover mb-0 fs-sm">
                        <tbody>
                            @foreach([
                              'alcanta'  => ['label' => 'Alcantarillado', 'icon' => 'fa-water'],
                              'luz'      => ['label' => 'Luz', 'icon' => 'fa-bolt'],
                              'agua'     => ['label' => 'Agua', 'icon' => 'fa-tint'],
                              'transpor' => ['label' => 'Transporte', 'icon' => 'fa-bus'],
                              'cordon'   => ['label' => 'Cordón de Acera', 'icon' => 'fa-ruler-horizontal'],
                              'acera'    => ['label' => 'Acera', 'icon' => 'fa-walking'],
                              'muralla'  => ['label' => 'Muralla', 'icon' => 'fa-border-all'],
                            ] as $campo => $info)
                            <tr>
                                <td class="ps-3" style="width: 40px;">
                                    <i class="fa {{ $info['icon'] }} text-muted"></i>
                                </td>
                                <td class="fw-medium">{{ $info['label'] }}</td>
                                <td class="text-end pe-3">
                                    @if($lote->$campo)
                                        <i class="fa fa-check-circle text-success fs-base"></i>
                                    @else
                                        <i class="fa fa-times-circle text-danger opacity-25 fs-base"></i>
                                    @endif
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>

            {{-- Historial de Estado --}}
            <div class="block block-rounded">
                <div class="block-header block-header-default">
                    <h3 class="block-title">Estatus del Lote</h3>
                </div>
                <div class="block-content block-content-full">
                    <ul class="nav-items fs-sm">
                        @foreach([1=>'Disponible',3=>'En Proceso',4=>'Vendido',5=>'En Trámite',6=>'Consolidado'] as $val => $lbl)
                        <li class="mb-2 p-2 rounded {{ $lote->iteest == $val ? 'bg-primary-lighter text-primary fw-bold border border-primary' : 'bg-body-light opacity-50' }}">
                            <div class="d-flex align-items-center">
                                <i class="fa {{ $lote->iteest == $val ? 'fa-dot-circle' : 'fa-circle' }} me-2"></i>
                                <span>{{ $lbl }}</span>
                                @if($lote->iteest == $val)
                                    <span class="ms-auto badge bg-primary">Actual</span>
                                @endif
                            </div>
                        </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </div>

    {{-- Botonera de Acciones --}}
    <div class="block block-rounded">
        <div class="block-content block-content-full block-content-sm bg-body-light text-center rounded">
            <a href="{{ route('lotes.index') }}" class="btn btn-alt-secondary me-1">
                <i class="fa fa-arrow-left me-1"></i> Volver
            </a>
            @if(in_array(auth()->user()->tipo, [1,4]))
                <a href="{{ route('lotes.edit', $lote->id) }}" class="btn btn-alt-warning me-1">
                    <i class="fa fa-edit me-1"></i> Modificar
                </a>
            @endif
            @if(auth()->user()->tipo == 1)
                <button type="button" class="btn btn-alt-danger" onclick="confirmDelete()">
                    <i class="fa fa-trash me-1"></i> Eliminar Lote
                </button>
                <form id="delete-form" method="POST" action="{{ route('lotes.destroy', $lote->id) }}" style="display:none;">
                    @csrf @method('DELETE')
                </form>
            @endif
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    function confirmDelete() {
        Swal.fire({
            title: '¿Confirmar eliminación?',
            text: "Se borrará permanentemente el lote #{{ $lote->id }} ({{ $lote->nombre }}).",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Sí, eliminar',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById('delete-form').submit();
            }
        })
    }
</script>
@endpush