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

@php
    $development = $dashboard['development'];
@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">Corte al {{ $development['as_of_label'] }}</p>
        </div>
        <div class="flex flex-col gap-3 lg:items-end">
            <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 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