@extends('layouts.dashboard.inface', ['section' => 'developments', 'header' => 'v2'])

@php
    $development = $dashboard['development'];
    $dateRange = $dashboard['date_range'];
    $paymentReportFields = [
        'payment_date' => 'Fecha de pago',
        'lot' => 'Lote',
        'total_price' => 'Costo total',
        'monthly_amount' => 'Mensualidad',
        'buyer' => 'Cliente',
        'sale_id' => 'ID Venta',
        'payment_amount' => 'Monto',
        'payment_method' => 'Método de pago',
        'detail' => 'Detalle',
        'sale_status' => 'Estatus de la venta',
    ];
@endphp

@section('navbar-buttons')
    <div class="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
        <div>
            <h2 class="text-3xl font-bold tracking-tight text-slate-900 dark:text-white">Detalle Financiero</h2>
            <p class="mt-1 flex items-center gap-2 text-sm font-medium text-slate-500">
                <span class="material-symbols-outlined text-base text-primary">location_on</span>
                {{ $development['address'] }} • {{ $development['total_lots'] }} lotes totales
            </p>
            <p class="mt-1 text-xs uppercase tracking-[0.2em] text-slate-400">
                Periodo {{ $dateRange['label'] }} • Corte al {{ $development['as_of_label'] }}
            </p>
        </div>
        <div class="flex flex-col gap-3 lg:items-end">
            <form method="GET" action="{{ route('realEstate.development.show.financial', ['id' => $development['id']]) }}"
                class="flex flex-col gap-3 rounded-2xl border border-slate-200 bg-white p-3 shadow-sm dark:border-slate-700 dark:bg-slate-900 sm:flex-row sm:items-end">
                <div>
                    <label for="financial-start-date" class="mb-1 block text-[10px] font-bold uppercase tracking-wider text-slate-500">Desde</label>
                    <input id="financial-start-date" type="date" name="start_date" value="{{ $dateRange['start_date'] }}"
                        class="h-10 rounded-xl border border-slate-200 bg-slate-50 px-3 text-sm font-semibold text-slate-700 outline-none transition focus:border-primary focus:bg-white dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100 dark:focus:bg-slate-900">
                </div>
                <div>
                    <label for="financial-end-date" class="mb-1 block text-[10px] font-bold uppercase tracking-wider text-slate-500">Hasta</label>
                    <input id="financial-end-date" type="date" name="end_date" value="{{ $dateRange['end_date'] }}"
                        class="h-10 rounded-xl border border-slate-200 bg-slate-50 px-3 text-sm font-semibold text-slate-700 outline-none transition focus:border-primary focus:bg-white dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100 dark:focus:bg-slate-900">
                </div>
                <button type="submit"
                    class="inline-flex h-10 items-center justify-center gap-2 rounded-xl bg-primary px-4 text-sm font-bold text-white transition-colors hover:bg-primary/90">
                    <span class="material-symbols-outlined text-[18px]">filter_alt</span>
                    Aplicar
                </button>
            </form>
            <div class="flex flex-wrap justify-end gap-2">
                <div class="relative" x-data="{
                    open: false,
                    fields: @js(array_keys($paymentReportFields)),
                }" x-on:keydown.escape.window="open = false">
                    <button type="button" x-on:click="open = !open"
                        class="inline-flex items-center justify-center gap-2 rounded-xl bg-emerald-600 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-emerald-700">
                        <span class="material-symbols-outlined text-[18px]">download</span>
                        Configurar descarga
                        <span class="rounded-full bg-white/20 px-1.5 py-0.5 text-[10px]" x-text="fields.length"></span>
                    </button>

                    <div x-cloak x-show="open" x-transition
                        class="absolute right-0 top-full z-40 mt-2 w-80 rounded-2xl border border-slate-200 bg-white p-4 text-left shadow-2xl dark:border-slate-700 dark:bg-slate-900">
                        <div class="flex items-start justify-between gap-3">
                            <div>
                                <p class="text-sm font-bold text-slate-900 dark:text-white">Datos a descargar</p>
                                <p class="mt-1 text-xs text-slate-500">Selecciona las columnas que tendrá el archivo.</p>
                            </div>
                            <button type="button" x-on:click="open = false"
                                class="text-slate-400 hover:text-slate-700 dark:hover:text-white">
                                <span class="material-symbols-outlined text-lg">close</span>
                            </button>
                        </div>

                        <form method="GET"
                            action="{{ route('realEstate.development.financial.monthly-payments.export', ['id' => $development['id']]) }}"
                            class="mt-4">
                            <input type="hidden" name="start_date" value="{{ $dateRange['start_date'] }}">
                            <input type="hidden" name="end_date" value="{{ $dateRange['end_date'] }}">

                            <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
                                @foreach ($paymentReportFields as $field => $label)
                                    <label
                                        class="flex cursor-pointer items-center gap-2 rounded-lg border border-slate-200 px-3 py-2 text-xs font-semibold text-slate-700 transition hover:bg-slate-50 dark:border-slate-700 dark:text-slate-200 dark:hover:bg-slate-800">
                                        <input type="checkbox" name="fields[]" value="{{ $field }}"
                                            x-model="fields"
                                            class="rounded border-slate-300 text-emerald-600 focus:ring-emerald-500">
                                        <span>{{ $label }}</span>
                                    </label>
                                @endforeach
                            </div>

                            <div class="mt-4 flex items-center justify-between gap-3">
                                <button type="button"
                                    x-on:click="fields = fields.length === {{ count($paymentReportFields) }} ? [] : @js(array_keys($paymentReportFields))"
                                    class="text-xs font-semibold text-primary hover:underline"
                                    x-text="fields.length === {{ count($paymentReportFields) }} ? 'Quitar todos' : 'Seleccionar todos'">
                                </button>
                                <button type="submit" :disabled="fields.length === 0"
                                    class="inline-flex items-center gap-2 rounded-lg bg-emerald-600 px-3 py-2 text-xs font-bold text-white transition hover:bg-emerald-700 disabled:cursor-not-allowed disabled:opacity-50">
                                    <span class="material-symbols-outlined text-base">download</span>
                                    Descargar CSV
                                </button>
                            </div>
                            <p x-show="fields.length === 0" class="mt-2 text-xs font-medium text-red-600">
                                Selecciona al menos un campo.
                            </p>
                        </form>
                    </div>
                </div>
                <a href="{{ route('realEstate.development.show', ['id' => $development['id']]) }}"
                    class="inline-flex items-center justify-center gap-2 rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm font-semibold text-slate-700 transition-colors hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800">
                    <span class="material-symbols-outlined text-[18px]">arrow_back</span>
                    Volver al Fraccionamiento
                </a>
            </div>
            <div class="flex flex-wrap gap-2 rounded-xl bg-slate-100 p-1 dark:bg-slate-800">
                <button type="button" @click="$store.tabs.tab='general'"
                    :class="$store.tabs.tab === 'general' ? 'tab-btn tab-btn-active' : 'tab-btn tab-btn-inactive'">General</button>
                <button type="button" @click="$store.tabs.tab='lista'"
                    :class="$store.tabs.tab === 'lista' ? 'tab-btn tab-btn-active' : 'tab-btn tab-btn-inactive'">Valor
                    Lista</button>
                <button type="button" @click="$store.tabs.tab='stages'"
                    :class="$store.tabs.tab === 'stages' ? 'tab-btn tab-btn-active' : 'tab-btn tab-btn-inactive'">Proyección</button>
                <button type="button" @click="$store.tabs.tab='contract'"
                    :class="$store.tabs.tab === 'contract' ? 'tab-btn tab-btn-active' : 'tab-btn tab-btn-inactive'">Valor
                    Contratado</button>
            </div>
        </div>
    </div>
@endsection

@section('content')
    <div class="overflow-y-auto" x-show="$store.tabs.tab === 'general'" x-transition.opacity>
        @include('realEstates.fraccionamientos.financial_health.tab_contents.tab_content_general')
    </div>
    <div class="overflow-y-auto" x-show="$store.tabs.tab === 'lista'" x-transition.opacity>
        @include('realEstates.fraccionamientos.financial_health.tab_contents.tab_content_list_value')
    </div>
    <div class="overflow-y-auto" x-show="$store.tabs.tab === 'stages'" x-transition.opacity>
        @include('realEstates.fraccionamientos.financial_health.tab_contents.tab_content_proyection_by_stage')
    </div>
    <div class="overflow-y-auto" x-show="$store.tabs.tab === 'contract'" x-transition.opacity>
        @include('realEstates.fraccionamientos.financial_health.tab_contents.tab_content_contracted_value')
    </div>
@endsection