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

@section('header-content')
    <header
        class="fixed top-0 right-0 left-0 z-40 bg-white/80 dark:bg-slate-900/80 backdrop-blur-md flex justify-between items-center h-16 px-8 ml-64 border-b border-slate-200/50 shadow-sm">
        <div class="flex flex-col">
            <nav class="flex items-center gap-2 text-[0.6875rem] text-slate-500 font-medium">
                <span>Dashboard</span>
                <span class="material-symbols-outlined text-[10px]" data-icon="chevron_right">chevron_right</span>
                <span>Etapas</span>

            </nav>
        </div>

    </header>
@endsection

@section('main-content')
    <!-- Breadcrumb & Header -->
    <div class="flex flex-col md:flex-row md:items-end justify-between gap-6 pb-8">
        <div>
            <h2 class="text-3xl font-headline font-bold text-on-surface tracking-tight">Etapas</h2>
            <p class="text-on-surface-variant text-sm mt-1">Obras en curso y frentes complementarios vinculados a
                {{ $project['name'] }}</p>
        </div>
        @can('project_phase.create.view')
            <a href="{{ route('project_phase.create') }}"
                class="flex items-center gap-2 bg-primary from-primary to-primary-container text-on-primary px-6 py-3 rounded-xl font-semibold text-sm shadow-lg shadow-primary/10 hover:translate-y-[-2px] active:translate-y-0 transition-all">
                <span class="material-symbols-outlined text-lg">add_circle</span>
                Nueva etapa
            </a>
        @endcan

    </div>
    <!-- Top KPI Cards (Bento-style layout) -->
    <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-6 gap-4 pb-5">
        <div class="bg-surface-container-lowest p-5 rounded-xl shadow-sm border-b-2 border-primary-fixed">
            <p class="text-[10px] font-bold text-on-primary-container uppercase tracking-widest mb-2">Total de etapas</p>
            <div class="flex items-baseline gap-2">
                <span class="text-2xl font-headline font-extrabold text-on-surface">{{ $phaseSummary['total'] }}</span>
                <span class="text-[10px] text-slate-400 font-medium">Obras registradas</span>
            </div>
        </div>
        <div class="bg-surface-container-lowest p-5 rounded-xl shadow-sm border-b-2 border-blue-400">
            <p class="text-[10px] font-bold text-on-primary-container uppercase tracking-widest mb-2">Etapas activas</p>
            <div class="flex items-baseline gap-2">
                <span class="text-2xl font-headline font-extrabold text-on-surface">{{ $phaseSummary['active'] }}</span>
                <span class="text-[10px] text-blue-500 font-medium">Obra principal cerrada</span>
            </div>
        </div>
        <div class="bg-tertiary-fixed p-5 rounded-xl shadow-sm">
            <p class="text-[10px] font-bold text-on-tertiary-fixed-variant uppercase tracking-widest mb-2">Con alertas</p>
            <div class="flex items-baseline gap-2">
                <span
                    class="text-2xl font-headline font-extrabold text-on-tertiary-fixed">{{ $phaseSummary['alerts'] }}</span>
                <span class="material-symbols-outlined text-on-tertiary-fixed-variant text-sm">warning</span>
            </div>
        </div>
        <div class="bg-error-container p-5 rounded-xl shadow-sm">
            <p class="text-[10px] font-bold text-on-error-container uppercase tracking-widest mb-2">Etapas atrasadas</p>
            <div class="flex items-baseline gap-2">
                <span class="text-2xl font-headline font-extrabold text-error">{{ $phaseSummary['delayed'] }}</span>
                <span class="material-symbols-outlined text-error text-sm">error</span>
            </div>
        </div>
        <div class="bg-surface-container-lowest p-5 rounded-xl shadow-sm border-b-2 border-primary-container">
            <p class="text-[10px] font-bold text-on-primary-container uppercase tracking-widest mb-2">Avance promedio</p>
            <div class="flex flex-col gap-2">
                <span
                    class="text-2xl font-headline font-extrabold text-on-surface">{{ $phaseSummary['average_progress'] }}</span>
                <div class="w-full bg-surface-container-low h-1.5 rounded-full">
                    <div class="bg-primary h-full rounded-full"
                        style="width: {{ $phaseSummary['average_progress_width'] }}"></div>
                </div>
            </div>
        </div>
        <div class="bg-primary-container p-5 rounded-xl shadow-sm">
            <p class="text-[10px] font-bold text-on-primary-container uppercase tracking-widest mb-2 text-slate-400">
                Presupuesto base</p>
            <div class="flex items-baseline gap-2">
                <span
                    class="text-2xl font-headline font-extrabold text-on-primary">{{ $phaseSummary['remaining_budget'] }}</span>
                <span class="text-[10px] text-slate-500 font-medium">MXN</span>
            </div>
        </div>
    </div>
    <!-- Filters Bar -->
    <div class="bg-surface-container-low p-4 rounded-xl mb-6 flex flex-wrap items-center gap-4 pb-5">
        <div class="flex-1 min-w-[200px]">
            <div class="relative">
                <span
                    class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1 text-slate-400 text-sm">search</span>
                <input
                    class="w-full bg-white border-outline-variant/20 rounded-lg pl-9 pr-4 py-2 text-xs focus:ring-primary/20"
                    placeholder="Folio o nombre..." type="text" />
            </div>
        </div>
        <select class="bg-white border-outline-variant/20 rounded-lg px-4 py-2 text-xs font-medium focus:ring-primary/20">
            <option>Estado: Todos</option>
            <option>Activas</option>
            <option>Completadas</option>
            <option>Atrasadas</option>
        </select>
        <select class="bg-white border-outline-variant/20 rounded-lg px-4 py-2 text-xs font-medium focus:ring-primary/20">
            <option>Avance: Cualquier</option>
            <option>0% - 25%</option>
            <option>26% - 50%</option>
            <option>51% - 75%</option>
            <option>76% - 100%</option>
        </select>
        <button
            class="flex items-center gap-2 bg-white border border-outline-variant/20 rounded-lg px-4 py-2 text-xs font-medium hover:bg-slate-50 transition-colors">
            <span class="material-symbols-outlined text-sm">filter_alt</span>
            Más filtros
        </button>
        <div class="h-6 w-px bg-outline-variant/20 mx-2"></div>
        <button
            class="p-2 bg-white border border-outline-variant/20 rounded-lg text-slate-500 hover:text-primary transition-colors">
            <span class="material-symbols-outlined text-sm">calendar_today</span>
        </button>
    </div>
    <!-- Main Content: Premium Horizontal Cards -->
    <div class="space-y-4">
        @foreach ($phaseCards as $card)
            <div x-data @click="window.location.href = '{{ route('project_phase.show', ['id' => $card['tag_id']]) }}';">
                <livewire:project-phase-card :tagId="$card['tag_id']" :tagStatus="$card['tag_status']" :title="$card['title']" :location="$card['location']"
                    :progressPercent="$card['progress_percent']" :progressDetails="$card['progress_details']" :executedAmount="$card['executed_amount']" :remaininggamount="$card['remaining_amount']" :executedLabel="$card['executed_label']"
                    :remainingLabel="$card['remaining_label']" :alertLabel="$card['alert_label']" :siteManager="$card['site_manager']" :jobTitle="$card['job_title']" />
            </div>
        @endforeach
    </div>
    <!-- Pagination/Footer -->
    <div class="mt-8 flex items-center justify-between">
        <p class="text-[11px] font-semibold text-on-primary-container tracking-wider">{{ $phaseSummary['footer'] }}</p>
        <div class="flex gap-2">
            <button
                class="w-8 h-8 rounded-lg bg-white border border-outline-variant/20 flex items-center justify-center text-slate-500 hover:bg-slate-50 transition-colors active:scale-90">
                <span class="material-symbols-outlined text-sm">chevron_left</span>
            </button>
            <button
                class="w-8 h-8 rounded-lg bg-primary text-on-primary flex items-center justify-center text-xs font-bold active:scale-90 shadow-md shadow-primary/20">1</button>
            <button
                class="w-8 h-8 rounded-lg bg-white border border-outline-variant/20 flex items-center justify-center text-slate-500 hover:bg-slate-50 transition-colors active:scale-90">
                <span class="material-symbols-outlined text-sm">chevron_right</span>
            </button>
        </div>
    </div>
@endsection