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

@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">

        <nav class="flex items-center gap-2 text-sm">
            <span class="text-slate-400">Dashboard</span>
            <span class="material-symbols-outlined text-xs text-slate-300">chevron_right</span>
            <span class="text-slate-400">Viviendas</span>
            <span class="material-symbols-outlined text-xs text-slate-300">chevron_right</span>
            <span class="text-on-surface font-semibold">{{ $homeContext['lot'] }}</span>
        </nav>
        <div class="flex items-center gap-6">
            <div class="relative group">
                <span class="material-symbols-outlined text-slate-500 hover:text-primary cursor-pointer">notifications</span>
                <span class="absolute top-0 right-0 w-2 h-2 bg-error rounded-full border-2 border-white"></span>
            </div>
            <div class="flex items-center gap-3 border-l border-slate-200 pl-6">
                <div class="text-right">
                    <p class="text-xs font-semibold text-on-surface">{{ $detailData['header']['user_name'] }}</p>
                    <p class="text-[10px] text-on-surface-variant">{{ $detailData['header']['user_role'] }}</p>
                </div>
                <img alt="User Profile Avatar" class="w-10 h-10 rounded-full border-2 border-primary-container object-cover"
                    data-alt="professional male architect in office setting wearing formal business attire with serious and confident expression"
                    src="https://lh3.googleusercontent.com/aida-public/AB6AXuDXlmbhq3rW7_XwKdeRIsGmw_oy_DYZ0PB8z2vPTCI7GEQCQ-FGcBlnljm8LXLvolgA-oKAlNz46w6jGmh6XDDJAruPMllWqGS8uSL_IMlP91w4KiLVjdkbM28ovMN9Yfy1jL2EoAYuIsOJCQV9vwaI5hi8VEVMP4keGFhuIlwE5OMhuTSsVU7TIt8gcTA2YVjwhCnqebdJ8eMSV1qhN61cDsYwdnmI8z_OTA1SXbyOzg8N5v4bg-L8PsmFeFkLSyUjhqDzWVXFGq7v" />
            </div>
        </div>
    </header>
@endsection

@php
    $items = [
        [
            'title' => '',
            'key' => 'general',
            'icon' => '',
            'label' => 'Resumen',
        ],
        [
            'title' => '',
            'key' => 'progress',
            'icon' => '',
            'label' => 'Avance',
        ],
        [
            'title' => '',
            'key' => 'subtasks',
            'icon' => '',
            'label' => 'Subtareas',
        ],
        [
            'title' => '',
            'key' => 'budgets',
            'icon' => '',
            'label' => 'Presupuesto',
        ],
        [
            'title' => '',
            'key' => 'piecework',
            'icon' => '',
            'label' => 'Destajo',
        ],
        [
            'title' => '',
            'key' => 'employees',
            'icon' => '',
            'label' => 'Personal',
        ],
        [
            'title' => '',
            'key' => 'alerts',
            'icon' => '',
            'label' => 'Alertas',
        ],
        [
            'title' => '',
            'key' => 'evidence',
            'icon' => '',
            'label' => 'Evidencia',
        ],
    ];
@endphp

@section('main-content')
    <div x-data="{ activeTab: 'general', title: 'Vista general del estado operativo y financiero de la etapa' }" @tds-tabs-changed="activeTab = $event.detail.key; title = $event.detail.title;">
        <div class="flex flex-col gap-4 pb-5">
            <livewire:tds::tabs :items="$items" active="general" />
        </div>
        <div x-show="activeTab === 'general' ">
            @include('home-work.wizard-steps.general')
        </div>
        <div x-show="activeTab === 'progress' ">
            @include('home-work.wizard-steps.progress')
        </div>
        <div x-show="activeTab === 'subtasks' ">
            @include('home-work.wizard-steps.subtasks')
        </div>
        <div x-show="activeTab === 'budgets' ">
            @include('home-work.wizard-steps.budgets')
        </div>
        <div x-show="activeTab === 'piecework' ">
            @include('home-work.wizard-steps.pieceworks')
        </div>
        <div x-show="activeTab === 'employees' ">
            @include('home-work.wizard-steps.employees')
        </div>
        <div x-show="activeTab === 'alerts' ">
            @include('home-work.wizard-steps.alerts')
        </div>
        <div x-show="activeTab === 'evidence' ">
            @include('home-work.wizard-steps.evidence')
        </div>
    </div>
@endsection