@extends('layout.dashboard.master')

@section('content')

<div class="flex grow w-full h-full" id="root">

    <!-- Notifications (fixed, you already had this) -->

    <!-- THE RESPONSIVE WRAPPER -->
    <div class="flex grow w-full"
         style="
            --sidebar-width: 300px;
            --sidebar-collapsed-width: 60px;
            --header-height: 60px;
            --toolbar-height: 54px;
            --header-height-mobile: 60px;
        ">

        {{-- Header (fixed top) --}}
        <header class="flex bg-white items-stretch fixed z-10 top-0 start-0 end-0 shrink-0 border-b border-border backdrop-blur-sm supports-backdrop-filter:bg-background/60 h-(--header-height-mobile) lg:h-(--header-height) pe-[var(--removed-body-scroll-bar-size,0px)]">
            <div class="@container grow pe-5 flex items-stretch justify-between gap-2.5">
                <div class="flex items-stretch gap-x-6">
                <div class="flex border-e border-border items-center gap-2 w-(--sidebar-width) in-data-[sidebar-open=false]:w-(--sidebar-collapsed-width)">
                    <div class="flex items-center w-full">

                    <div id="client-name-section" class="w-full grow items-center justify-between px-5 gap-2.5 transition-all duration-300">

                            <!-- Mobile Menu -->
                            <button class="kt-btn kt-btn-ghost lg:hidden" data-kt-drawer-toggle="#sidebar">
                            <i class="ki-filled ki-menu"></i>
                            </button>

                            <!-- Client Dropdown -->
                            <button aria-expanded="false" aria-haspopup="menu" class="cursor-pointer group focus-visible:outline-hidden items-center justify-center has-data-[arrow=true]:justify-between whitespace-nowrap font-medium ring-offset-background transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-60 [&_svg]:shrink-0 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground h-8.5 rounded-md gap-1.5 text-[0.8125rem] leading-(--text-sm--line-height) [&_svg:not([class*=size-])]:size-4 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 [&_svg:not([role=img]):not([class*=text-]):not([class*=opacity-])]:opacity-60 select-none inline-flex text-muted-foreground hover:text-foreground px-1.5 -ms-1.5" data-slot="dropdown-menu-trigger" data-state="closed" id="radix-«r0»" type="button">

                                <img alt="Logo" class="dark:block" style="height: 40px" src="{{ asset('img/logo/sanbs_logo_es.png') }}" />
                                <span class="text-mono text-sm font-medium hidden lg:block">
                                        SANBS
                                </span>

                            </button>
                        </div>
                        <button id="toggle-header-section-button" class="cursor-pointer me-5 group focus-visible:outline-hidden items-center justify-center has-data-[arrow=true]:justify-between whitespace-nowrap font-medium ring-offset-background transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-60 [&_svg]:shrink-0 hover:bg-accent data-[state=open]:bg-accent data-[state=open]:text-accent-foreground rounded-md gap-1.5 text-[0.8125rem] leading-(--text-sm--line-height) focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 shrink-0 w-8.5 h-8.5 p-0 [&_svg:not([class*=size-])]:size-4 hidden lg:inline-flex text-muted-foreground hover:text-foreground" data-slot="button">
                            <svg aria-hidden="true" class="lucide lucide-panel-right -rotate-180 in-data-[sidebar-open=false]:rotate-0 opacity-100" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                                <rect height="18" rx="2" width="18" x="3" y="3">
                                </rect>
                                <path d="M15 3v18">
                                </path>
                            </svg>
                        </button>

                    </div>
                </div>
                <div id="title-sections" class="flex-row items-center flex-wrap gap-1 lg:gap-5 mb-5 lg:mb-0 hidden lg:flex">
                        <ol class="kt-breadcrumb">


                        </ol>
                    </div>
                </div>

                <nav class="flex items-center gap-2.5">

                    <livewire:livewire.support.customer.header />

                </nav>

            </div>
        </header>



        {{-- Sidebar --}}
        <aside class="fixed overflow-hidden top-(--header-height) start-0 z-20 bottom-0 transition-all duration-300 flex items-stretch flex-shrink-0 w-(--sidebar-width) in-data-[sidebar-open=false]:w-(--sidebar-collapsed-width) border-e border-border" data-kt-drawer="true" id="sidebar">
            <div class="hidden sm:flex flex-col grow space-y-7.5 bg-white dark:bg-black">
                <div class="kt-accordion" data-kt-accordion="true" data-kt-accordion-expand-all="true">

                    <div class="kt-accordion-item active pt-4" data-kt-accordion-item="true">
                        <div aria-labelledby="accordion_toggle_0" class="kt-accordion-content" id="accordion_content_0">
                            <div class="kt-accordion-wrapper">
                                @if ($otps && $ticket && $ticket->siteContact->verifyContact()->where('otp', $otps)->exists())

                                    <ul class="kt-accordion-menu gap-px" data-kt-accordion="true">
                                            <li class="kt-accordion-menu-item w-full space-y-7.5 px-2.5 {{ request()->routeIs('customer.ticket') ? 'selected':'' }}"
                                                data-kt-accordion-item="true" >
                                                <a class="kt-accordion-menu-link text-md kt-accordion-selected:text-muted-foreground font-normal h-8.5 px-2.5"
                                                    href="{{ route('customer.ticket', $ticket->id) }}">
                                                    <i
                                                        class="ki-filled ki-category text-lg kt-accordion-selected:text-muted-foreground">
                                                    </i>
                                                    Home
                                                </a>
                                            </li>

                                            <li class="kt-accordion-menu-item w-full space-y-7.5 px-2.5 {{ request()->routeIs('customer.calendar') ? 'selected':'' }}" data-kt-accordion-item="true">
                                                <a class="kt-accordion-menu-link kt-accordion-selected:text-muted-foreground text-md font-normal h-8.5 px-2.5"
                                                    href="{{ route('customer.calendar', ['ticket_id'=> $ticket->id, 'view' => 'month']) }}">
                                                    <i
                                                        class="ki-filled ki-calendar text-lg kt-accordion-selected:text-muted-foreground">
                                                    </i>
                                                    Calendar


                                                    @if ($ticket->events()->where('status', 'pending')->count() > 0)
                                                        <span class="kt-badge kt-badge-xs kt-badge-light kt-badge-destructive">
                                                            {{$ticket->events()->where('status', 'pending')->count()}}
                                                        </span>
                                                    @endif
                                                </a>
                                            </li>



                                    </ul>

                                @endif
                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </aside>


        <!-- MAIN CONTENT -->
        <div class="
            flex flex-col grow

            {{ (request()->routeIs('calendar')) ? '' : 'bg-gray-100' }}

            overflow-y-auto
            transition-all duration-300

            pt-(--header-height-mobile)
            lg:pt-[calc(var(--header-height)+var(--toolbar-height))]

            lg:ps-(--sidebar-width)
            lg:in-data-[sidebar-open=false]:ps-(--sidebar-collapsed-width)
        ">

            <main class="grow p-4 lg:p-6" role="content">
                {{ $slot }}
            </main>

        </div>
    </div>
</div>

@endsection