@extends('layouts.panel-template', ['section' => 'projects'])

@section('main-content')
    <div class="p-8 max-w-[1600px] mx-auto w-full space-y-8">
        <!-- Page Header & Filters -->
        <div class="flex flex-col lg:flex-row lg:items-end justify-between gap-6">
            <div>
                <nav class="flex items-center gap-2 text-xs font-medium text-on-surface-variant mb-2">
                    <span>JYZAO</span>
                    <span class="material-symbols-outlined text-[14px]">chevron_right</span>
                    <span class="text-primary">Listado de Obras</span>
                </nav>
                <h2 class="font-headline font-bold text-3xl text-primary">Gestión de Obras</h2>
            </div>
            <div class="flex gap-2 overflow-x-auto no-scrollbar -mx-4 px-4">
                <button
                    class="flex-shrink-0 px-5 py-2 rounded-full text-xs font-bold bg-primary text-white shadow-md">Todas</button>
                <button
                    class="flex-shrink-0 px-5 py-2 rounded-full text-xs font-semibold bg-white text-on-surface-variant border border-outline-variant/30">En
                    Proceso</button>
                <button
                    class="flex-shrink-0 px-5 py-2 rounded-full text-xs font-semibold bg-white text-on-surface-variant border border-outline-variant/30">Planeación</button>
                <button
                    class="flex-shrink-0 px-5 py-2 rounded-full text-xs font-semibold bg-white text-on-surface-variant border border-outline-variant/30">Finalizadas</button>
                <button
                    class="flex-shrink-0 px-3 py-2 rounded-full text-on-surface-variant bg-white border border-outline-variant/30">
                    <span class="material-symbols-outlined text-lg">filter_list</span>
                </button>
            </div>
        </div>
        <!-- KPI Quick Stats -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <div class="bg-surface-container-lowest p-6 rounded-full ghost-border flex items-center gap-4">
                <div class="w-12 h-12 rounded-xl bg-primary-fixed flex items-center justify-center text-primary">
                    <span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">construction</span>
                </div>
                <div>
                    <p class="text-xs font-semibold text-on-surface-variant uppercase tracking-wider">Obras Activas</p>
                    <p class="text-2xl font-headline font-bold text-primary">12</p>
                </div>
            </div>
            <div class="bg-surface-container-lowest p-6 rounded-full ghost-border flex items-center gap-4">
                <div class="w-12 h-12 rounded-xl bg-secondary-fixed flex items-center justify-center text-secondary">
                    <span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">home_work</span>
                </div>
                <div>
                    <p class="text-xs font-semibold text-on-surface-variant uppercase tracking-wider">Viviendas en Obra</p>
                    <p class="text-2xl font-headline font-bold text-primary">245</p>
                </div>
            </div>
            <div class="bg-surface-container-lowest p-6 rounded-full ghost-border flex items-center gap-4">
                <div class="w-12 h-12 rounded-xl bg-tertiary-fixed flex items-center justify-center text-tertiary">
                    <span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">payments</span>
                </div>
                <div>
                    <p class="text-xs font-semibold text-on-surface-variant uppercase tracking-wider">Presupuesto Ejecutado
                    </p>
                    <p class="text-2xl font-headline font-bold text-primary">68%</p>
                </div>
            </div>
            <div class="bg-surface-container-lowest p-6 rounded-full ghost-border flex items-center gap-4">
                <div class="w-12 h-12 rounded-xl bg-error-container flex items-center justify-center text-error">
                    <span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">report</span>
                </div>
                <div>
                    <p class="text-xs font-semibold text-on-surface-variant uppercase tracking-wider">Alertas Críticas</p>
                    <p class="text-2xl font-headline font-bold text-primary">03</p>
                </div>
            </div>
        </div>
        <!-- Obras List (Modern Row Approach) -->
        <div class="space-y-6">
            <!-- Obra Item 1 -->
            <livewire:tds::card></livewire:tds::card>

        </div>
        <!-- Footer / Pagination -->
        <div class="flex items-center justify-between pt-8 pb-20 md:pb-0 border-t border-outline-variant/10">
            <p class="text-xs font-medium text-on-surface-variant">Mostrando <span
                    class="text-primary font-bold">1-12</span> de <span class="text-primary font-bold">48</span> obras
                registradas</p>
            <div class="flex items-center gap-2">
                <button
                    class="w-8 h-8 rounded-full flex items-center justify-center ghost-border hover:bg-surface-container transition-colors disabled:opacity-30"
                    disabled="">
                    <span class="material-symbols-outlined text-sm">chevron_left</span>
                </button>
                <button
                    class="w-8 h-8 rounded-full flex items-center justify-center bg-primary text-white text-xs font-bold shadow-md">1</button>
                <button
                    class="w-8 h-8 rounded-full flex items-center justify-center hover:bg-surface-container text-xs font-medium text-primary transition-colors">2</button>
                <button
                    class="w-8 h-8 rounded-full flex items-center justify-center hover:bg-surface-container text-xs font-medium text-primary transition-colors">3</button>
                <span class="text-on-surface-variant mx-1">...</span>
                <button
                    class="w-8 h-8 rounded-full flex items-center justify-center hover:bg-surface-container text-xs font-medium text-primary transition-colors">8</button>
                <button
                    class="w-8 h-8 rounded-full flex items-center justify-center ghost-border hover:bg-surface-container transition-colors">
                    <span class="material-symbols-outlined text-sm">chevron_right</span>
                </button>
            </div>
        </div>
    </div>
@endsection

@section('extra-scripts')
    <script>
        document.addEventListener('livewire:init', () => {

            Livewire.on('select-card-item', (event) => {
                console.log(event.item)
                window.location.href = "{{ route('project.details', ['projectId' => 1]) }}"
            })
        })
    </script>
@endsection