@extends('layouts.dashboard.inface', ['section' => 'clients'])

@section('content')
    <div class="mx-auto flex max-w-[1400px] overflow-y-auto flex-col gap-6 p-6 md:p-10">
        <div class="flex items-center gap-2 text-sm text-[#616f89] dark:text-gray-400">
            <a class="transition-colors hover:text-primary" href="{{ route('realEstate.clients') }}">Clientes</a>
            <span class="material-symbols-outlined text-sm">chevron_right</span>
            <span class="font-medium text-[#111318] dark:text-white">Detalle del Cliente</span>
        </div>

        <div class="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
            <div class="flex items-start gap-4">
                <div
                    class="flex size-16 shrink-0 items-center justify-center rounded-2xl bg-primary/10 text-xl font-bold text-primary">
                    {{ $client['initials'] }}
                </div>
                <div class="flex flex-col gap-2">
                    <div class="flex flex-wrap items-center gap-2">
                        <h1 class="text-3xl font-black tracking-tight text-[#111318] dark:text-white">
                            {{ $client['fullName'] }}
                        </h1>
                        <span
                            class="inline-flex items-center rounded-full px-2.5 py-1 text-xs font-medium {{ $client['documentSummary']['statusClass'] }}">
                            {{ $client['documentSummary']['statusLabel'] }}
                        </span>
                        @if ($client['status'])
                            <span
                                class="inline-flex items-center rounded-full border border-gray-200 bg-gray-100 px-2.5 py-1 text-xs font-medium text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300">
                                {{ $client['status'] }}
                            </span>
                        @endif
                    </div>
                    <p class="text-sm text-[#616f89] dark:text-gray-400">
                        {{ $client['clientCode'] }}
                        @if ($client['agent']['name'])
                            · Asignado a {{ $client['agent']['name'] }}
                        @endif
                    </p>
                </div>
            </div>

            <a class="inline-flex items-center gap-2 rounded-lg border border-primary/20 px-4 py-2 text-sm font-semibold text-primary transition-all hover:bg-primary/5"
                href="{{ route('realEstate.clients') }}">
                <span class="material-symbols-outlined text-[18px]">arrow_back</span>
                <span>Volver a clientes</span>
            </a>
        </div>

        <div class="grid grid-cols-1 items-start gap-8 lg:grid-cols-12">
            <div class="flex flex-col gap-6 lg:col-span-4">
                <div
                    class="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-[#1a2332]">
                    <div class="border-b border-gray-100 p-6 dark:border-gray-800">
                        <h2 class="text-lg font-bold text-[#111318] dark:text-white">Informacion general</h2>
                    </div>

                    <div class="grid grid-cols-1 gap-6 p-6 sm:grid-cols-2 lg:grid-cols-1">
                        <div class="flex flex-col gap-1">
                            <span class="text-xs font-medium uppercase tracking-wider text-[#616f89] dark:text-gray-400">
                                Correo
                            </span>
                            <div class="flex items-center gap-2">
                                <span class="material-symbols-outlined text-sm text-gray-400">mail</span>
                                <span class="text-sm font-medium text-[#111318] dark:text-white">
                                    {{ $client['email'] ?: 'Sin correo registrado' }}
                                </span>
                            </div>
                        </div>

                        <div class="flex flex-col gap-1">
                            <span class="text-xs font-medium uppercase tracking-wider text-[#616f89] dark:text-gray-400">
                                Telefono
                            </span>
                            <div class="flex items-center gap-2">
                                <span class="material-symbols-outlined text-sm text-gray-400">phone</span>
                                <span class="text-sm font-medium text-[#111318] dark:text-white">
                                    {{ $client['phone'] ?: 'Sin telefono registrado' }}
                                </span>
                            </div>
                        </div>

                        <div class="flex flex-col gap-1">
                            <span class="text-xs font-medium uppercase tracking-wider text-[#616f89] dark:text-gray-400">
                                Fuente
                            </span>
                            <div class="flex items-center gap-2">
                                <span class="material-symbols-outlined text-sm text-primary">
                                    {{ $client['sourceIcon'] }}
                                </span>
                                <span class="text-sm font-medium text-[#111318] dark:text-white">
                                    {{ $client['source'] ?: 'Sin fuente registrada' }}
                                </span>
                            </div>
                        </div>

                        <div class="flex flex-col gap-1">
                            <span class="text-xs font-medium uppercase tracking-wider text-[#616f89] dark:text-gray-400">
                                Beneficiario
                            </span>
                            <div class="flex items-center gap-2">
                                <span class="material-symbols-outlined text-sm text-gray-400">person_heart</span>
                                <span class="text-sm font-medium text-[#111318] dark:text-white">
                                    {{ $client['beneficiary'] ?: 'Sin beneficiario registrado' }}
                                </span>
                            </div>
                        </div>

                        <div class="flex flex-col gap-1 sm:col-span-2 lg:col-span-1">
                            <span class="text-xs font-medium uppercase tracking-wider text-[#616f89] dark:text-gray-400">
                                Direccion
                            </span>
                            <div class="flex items-start gap-2">
                                <span class="material-symbols-outlined mt-0.5 text-sm text-gray-400">location_on</span>
                                <span class="text-sm font-medium text-[#111318] dark:text-white">
                                    {{ $client['address'] ?: 'Sin direccion registrada' }}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

                <div
                    class="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-[#1a2332]">
                    <div class="border-b border-gray-100 p-6 dark:border-gray-800">
                        <h2 class="text-lg font-bold text-[#111318] dark:text-white">Notas</h2>
                    </div>
                    <div class="p-6">
                        <p class="text-sm leading-6 text-gray-600 dark:text-gray-300">
                            {{ $client['notes'] ?: 'Este cliente aun no tiene notas registradas.' }}
                        </p>
                    </div>
                </div>
            </div>

            <div class="flex flex-col gap-6 lg:col-span-8">
                @if (session('success'))
                    <div
                        class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm font-medium text-emerald-700 dark:border-emerald-900/50 dark:bg-emerald-900/20 dark:text-emerald-300">
                        {{ session('success') }}
                    </div>
                @endif

                <div
                    class="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-[#1a2332]">
                    <div class="border-b border-gray-100 p-6 dark:border-gray-800">
                        <h2 class="text-lg font-bold text-[#111318] dark:text-white">Resumen documental</h2>
                    </div>

                    <div class="flex flex-col gap-6 p-6">
                        <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
                            <div class="rounded-xl bg-gray-50 p-4 dark:bg-[#131b29]">
                                <span
                                    class="text-xs font-medium uppercase tracking-wider text-[#616f89] dark:text-gray-400">
                                    Progreso
                                </span>
                                <div class="mt-3 flex items-end gap-2">
                                    <span class="text-3xl font-black text-[#111318] dark:text-white">
                                        {{ $client['documentSummary']['progressPercent'] }}%
                                    </span>
                                    <span class="pb-1 text-sm text-gray-500 dark:text-gray-400">
                                        completado
                                    </span>
                                </div>
                            </div>

                            <div class="rounded-xl bg-gray-50 p-4 dark:bg-[#131b29]">
                                <span
                                    class="text-xs font-medium uppercase tracking-wider text-[#616f89] dark:text-gray-400">
                                    Documentos cargados
                                </span>
                                <div class="mt-3 text-3xl font-black text-[#111318] dark:text-white">
                                    {{ $client['documentSummary']['completedDocuments'] }}/{{ $client['documentSummary']['requiredDocuments'] }}
                                </div>
                            </div>

                            <div class="rounded-xl bg-gray-50 p-4 dark:bg-[#131b29]">
                                <span
                                    class="text-xs font-medium uppercase tracking-wider text-[#616f89] dark:text-gray-400">
                                    Ventas asociadas
                                </span>
                                <div class="mt-3 text-3xl font-black text-[#111318] dark:text-white">
                                    {{ $client['salesCount'] }}
                                </div>
                            </div>
                        </div>

                        <div>
                            <div class="mb-2 flex items-center justify-between">
                                <span class="text-sm font-medium text-[#111318] dark:text-white">Avance de expediente</span>
                                <span class="text-sm text-[#616f89] dark:text-gray-400">
                                    {{ $client['documentSummary']['completedDocuments'] }} de
                                    {{ $client['documentSummary']['requiredDocuments'] }}
                                </span>
                            </div>
                            <div class="h-3 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-800">
                                <div class="h-full rounded-full bg-primary"
                                    style="width: {{ $client['documentSummary']['progressPercent'] }}%"></div>
                            </div>
                        </div>

                        <div class="rounded-xl border border-dashed border-gray-200 p-4 dark:border-gray-700">
                            <span class="text-xs font-medium uppercase tracking-wider text-[#616f89] dark:text-gray-400">
                                Documentos faltantes
                            </span>

                            @if ($client['documentSummary']['missingDocuments'] !== [])
                                <div class="mt-3 flex flex-wrap gap-2">
                                    @foreach ($client['documentSummary']['missingDocuments'] as $missingDocument)
                                        <span
                                            class="inline-flex items-center rounded-full border border-rose-100 bg-rose-50 px-3 py-1 text-xs font-medium text-rose-700 dark:border-rose-900/50 dark:bg-rose-900/20 dark:text-rose-300">
                                            {{ $missingDocument }}
                                        </span>
                                    @endforeach
                                </div>
                            @else
                                <p class="mt-3 text-sm text-emerald-600 dark:text-emerald-400">
                                    El expediente del cliente esta completo.
                                </p>
                            @endif
                        </div>
                    </div>
                </div>

                <div
                    class="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-[#1a2332]">
                    <div class="border-b border-gray-100 p-6 dark:border-gray-800">
                        <h2 class="text-lg font-bold text-[#111318] dark:text-white">Documentos cargados</h2>
                    </div>

                    <div class="flex flex-col gap-4 p-6">
                        <form action="{{ route('realEstate.client.documents.store', $client['id']) }}"
                            class="rounded-xl border border-dashed border-gray-200 bg-gray-50 p-5 dark:border-gray-700 dark:bg-[#131b29]"
                            enctype="multipart/form-data" method="POST"
                            x-data="{ documentType: @js(old('document_type', '')) }">
                            @csrf

                            <div class="flex flex-col gap-4">
                                <div class="flex items-start justify-between gap-4">
                                    <div>
                                        <h3 class="text-sm font-bold text-[#111318] dark:text-white">Agregar archivo</h3>
                                        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                                            Sube un documento al expediente del cliente. Formatos permitidos: PDF, JPG,
                                            PNG y WEBP.
                                        </p>
                                    </div>
                                    <span
                                        class="inline-flex items-center rounded-full border border-gray-200 bg-white px-2.5 py-1 text-xs font-medium text-gray-600 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300">
                                        Max. 10 MB
                                    </span>
                                </div>

                                @if ($errors->has('document') || $errors->has('document_type') || $errors->has('custom_document_type'))
                                    <div
                                        class="rounded-lg border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700 dark:border-rose-900/50 dark:bg-rose-900/20 dark:text-rose-300">
                                        Corrige los campos del formulario para poder agregar el archivo.
                                    </div>
                                @endif

                                <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
                                    <div class="flex flex-col gap-2">
                                        <label class="text-xs font-medium uppercase tracking-wider text-[#616f89] dark:text-gray-400"
                                            for="document_type">
                                            Tipo de documento
                                        </label>
                                        <select
                                            class="w-full rounded-lg border border-gray-200 bg-white px-3 py-2.5 text-sm text-[#111318] outline-none transition focus:border-primary dark:border-gray-700 dark:bg-gray-800 dark:text-white"
                                            id="document_type" name="document_type" x-model="documentType">
                                            <option value="">Selecciona una opcion</option>
                                            @foreach ($documentTypeOptions as $documentTypeOption)
                                                <option @selected(old('document_type') === $documentTypeOption)
                                                    value="{{ $documentTypeOption }}">
                                                    {{ $documentTypeOption }}
                                                </option>
                                            @endforeach
                                            <option @selected(old('document_type') === 'custom') value="custom">Otro documento</option>
                                        </select>
                                        @error('document_type')
                                            <span class="text-xs text-rose-600 dark:text-rose-400">{{ $message }}</span>
                                        @enderror
                                    </div>

                                    <div class="flex flex-col gap-2" x-show="documentType === 'custom'" x-cloak>
                                        <label class="text-xs font-medium uppercase tracking-wider text-[#616f89] dark:text-gray-400"
                                            for="custom_document_type">
                                            Nombre del documento
                                        </label>
                                        <input
                                            class="w-full rounded-lg border border-gray-200 bg-white px-3 py-2.5 text-sm text-[#111318] outline-none transition focus:border-primary dark:border-gray-700 dark:bg-gray-800 dark:text-white"
                                            id="custom_document_type" name="custom_document_type"
                                            placeholder="Ej. Acta de nacimiento" type="text"
                                            value="{{ old('custom_document_type') }}" />
                                        @error('custom_document_type')
                                            <span class="text-xs text-rose-600 dark:text-rose-400">{{ $message }}</span>
                                        @enderror
                                    </div>

                                    <div class="flex flex-col gap-2 md:col-span-2">
                                        <label class="text-xs font-medium uppercase tracking-wider text-[#616f89] dark:text-gray-400"
                                            for="document">
                                            Archivo
                                        </label>
                                        <input
                                            class="w-full rounded-lg border border-gray-200 bg-white px-3 py-2.5 text-sm text-[#111318] file:mr-4 file:rounded-md file:border-0 file:bg-primary/10 file:px-3 file:py-2 file:text-sm file:font-semibold file:text-primary outline-none transition focus:border-primary dark:border-gray-700 dark:bg-gray-800 dark:text-white dark:file:bg-primary/20"
                                            id="document" name="document"
                                            accept=".pdf,.jpg,.jpeg,.png,.webp,application/pdf,image/jpeg,image/png,image/webp"
                                            type="file" />
                                        @error('document')
                                            <span class="text-xs text-rose-600 dark:text-rose-400">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>

                                <div class="flex justify-end">
                                    <button
                                        class="inline-flex items-center gap-2 rounded-lg bg-primary px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-primary/90"
                                        type="submit">
                                        <span class="material-symbols-outlined text-[18px]">upload_file</span>
                                        <span>Agregar archivo</span>
                                    </button>
                                </div>
                            </div>
                        </form>

                        @forelse ($client['documents'] as $document)
                            <div
                                class="flex flex-col gap-4 rounded-xl border border-gray-200 p-4 transition-colors hover:border-primary/30 dark:border-gray-800 md:flex-row md:items-center md:justify-between">
                                <div class="flex items-start gap-4">
                                    <div
                                        class="flex size-11 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary">
                                        <span class="material-symbols-outlined">{{ $document['icon'] }}</span>
                                    </div>
                                    <div class="min-w-0">
                                        <h3 class="truncate text-sm font-bold text-[#111318] dark:text-white">
                                            {{ $document['title'] }}
                                        </h3>
                                        <p class="truncate text-sm text-gray-500 dark:text-gray-400">
                                            {{ $document['fileName'] }}
                                        </p>
                                    </div>
                                </div>

                                <div class="flex flex-wrap items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
                                    <span
                                        class="inline-flex items-center rounded-full border border-gray-200 bg-gray-100 px-2.5 py-1 font-medium text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300">
                                        {{ $document['mimeType'] }}
                                    </span>
                                    <span>{{ $document['sizeLabel'] }}</span>
                                    <span>{{ $document['uploadedAtFormatted'] }}</span>
                                </div>
                            </div>
                        @empty
                            <div
                                class="rounded-xl border border-dashed border-gray-200 bg-gray-50 px-6 py-10 text-center text-sm text-gray-500 dark:border-gray-800 dark:bg-[#131b29] dark:text-gray-400">
                                Este cliente aun no tiene documentos cargados.
                            </div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection