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

@php
    $phaseHeader = $phaseDetail['header'];
    $items = [
        [
            'key' => 'general',
            'title' => 'Vista general del estado operativo y financiero de la obra.',
            'label' => 'General',
            'icon' => '',
        ],
        [
            'key' => 'avance',
            'title' => 'Consulta el progreso general y por procesos constructivos de esta obra.',
            'label' => 'Avance',
            'icon' => '',
        ],
        [
            'key' => 'viviendas',
            'title' => 'Consulta el estado de las viviendas o el alcance operativo vinculado a esta obra.',
            'label' => 'Viviendas',
            'icon' => '',
        ],
        [
            'key' => 'presupuesto',
            'title' => 'Presupuesto y control financiero de la obra.',
            'label' => 'Presupuesto',
            'icon' => '',
        ],
        [
            'key' => 'employees',
            'title' => 'Consulta el personal asignado, responsables e incidencias operativas.',
            'label' => 'Personal',
            'icon' => '',
        ],
        [
            'key' => 'pieceworks',
            'title' => 'Consulta contratos, estimaciones, pagos, retenciones y pendientes de mano de obra.',
            'label' => 'Destajos',
            'icon' => '',
        ],
        [
            'key' => 'alerts',
            'title' => 'Monitorea riesgos, bloqueos y situaciones que requieren atencion.',
            'label' => 'Alertas',
            'icon' => '',
        ],
    ];
@endphp

@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>
                <span class="material-symbols-outlined text-[10px]" data-icon="chevron_right">chevron_right</span>
                <span class="text-blue-900">{{ $phaseHeader['title'] }}</span>
            </nav>
        </div>
        <div class="flex items-center gap-4">
            <div class="hidden lg:flex items-center gap-2">
                @foreach ($phaseHeader['buttons'] as $button)
                    <button
                        class="{{ $button['style'] === 'primary' ? 'px-5 py-2 text-xs font-bold text-on-primary primary-gradient rounded-full shadow-md hover:opacity-90 transition-all' : 'px-4 py-2 text-xs font-semibold text-primary bg-surface-container-low hover:bg-surface-container rounded-full transition-all' }}">
                        {{ $button['label'] }}
                    </button>
                @endforeach
            </div>
            <div class="h-8 w-[1px] bg-outline-variant/30 hidden lg:block"></div>
            <div class="flex items-center gap-3">
                <span class="material-symbols-outlined text-slate-500 cursor-pointer"
                    data-icon="notifications">notifications</span>
                <div
                    class="w-8 h-8 rounded-full bg-primary text-white text-xs font-bold flex items-center justify-center border border-outline-variant">
                    {{ $phaseHeader['manager_initials'] }}
                </div>
            </div>
        </div>
    </header>
@endsection

@section('main-content')
    <div x-data="{ activeTab: 'general', title: 'Vista general del estado operativo y financiero de la obra.' }"
        @tds-tabs-changed="activeTab = $event.detail.key; title = $event.detail.title;" id="project-tabs-wrapper">
        <div class="flex flex-col gap-4 pb-5">
            <p class="text-slate-500 text-sm" x-text="title"></p>
            <livewire:tds::tabs :items="$items" active="general"></livewire:tds::tabs>
        </div>

        <div x-show="activeTab === 'general'" x-transition>
            @include('project-phases.wizard-steps.general')
        </div>
        <div x-show="activeTab === 'avance'" x-transition>
            @include('project-phases.wizard-steps.progress')
        </div>
        <div x-show="activeTab === 'viviendas'" x-transition>
            @include('project-phases.wizard-steps.home-works')
        </div>
        <div x-show="activeTab === 'presupuesto'" x-transition>
            @include('project-phases.wizard-steps.budgets')
        </div>
        <div x-show="activeTab === 'employees'" x-transition>
            @include('project-phases.wizard-steps.employees')
        </div>
        <div x-show="activeTab === 'pieceworks'" x-transition>
            @include('project-phases.wizard-steps.piecework')
        </div>
        <div x-show="activeTab === 'alerts'" x-transition>
            @include('project-phases.wizard-steps.alerts')
        </div>
    </div>
@endsection