@php
    if(!isset($section) || $section == '' || is_null($section))
        $section = '';
@endphp

<div class="sidebar bw-sidebar">

    <div class="bw-title-page">
        <div class="input-group" style="justify-content: center; margin-top: 20px;">
            @if (auth()->guard('web')->check())
                <img src="{!! asset('assets/img/default_logo.png') !!}" width="150" height="auto"/>
            @else
                <img src="{!! asset('assets/img/default_logo.png') !!}" width="150" height="auto"/>
            @endif
        </div>
    </div>

    <div class="sidebar-wrapper" style="display: flex; flex-direction: column; height: 100%;">
        @if (auth()->guard('web')->check())
            <div style="flex: 1; overflow-y: auto;">
                <ul class="nav">
                    <li @if ($pageSlug == 'dashboard') class="active " @endif>
                        <a href="{{ route('home') }}">
                            <i class="fa-solid fa-chart-simple"></i>
                            <p style="font-weight: 400;">Dashboard</p>
                        </a>
                    </li>

                    @can('desarrollos')
                    <li>
                        <a data-toggle="collapse" href="#house-developments" {{ $section == 'house-developments' ? 'aria-expanded=true' : '' }}>
                            <i class="fa-solid fa-building-flag"></i>
                            <span class="nav-link-text">Desarrollos</span>
                            <b class="caret mt-1"></b>
                        </a>

                        <div class="collapse {{ $section == 'house-developments' ? 'show' : '' }}" id="house-developments">
                            <ul class="nav pl-4">
                                <li @if ($pageSlug == 'house-developments') class="active " @endif>
                                    <a href="{{ route('house-developments.index') }}">
                                        <i class="fa-solid fa-rectangle-list"></i>
                                        <p>Listado de Desarrollos</p>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    @endcan

                                        <li>
                        <a data-toggle="collapse" href="#customers" {{ $section == 'customers' ? 'aria-expanded=true' : '' }}>
                            <i class="fa-solid fa-user"></i>
                            <span class="nav-link-text">Clientes</span>
                            <b class="caret mt-1"></b>
                        </a>

                        <div class="collapse {{ $section == 'customers' ? 'show' : '' }}" id="customers">
                            <ul class="nav pl-4">
                                <li @if ($pageSlug == 'customers') class="active " @endif>
                                    <a href="{{ route('customers.index') }}">
                                        <i class="fa-solid fa-user"></i>
                                        <p>Listado de Clientes</p>
                                    </a>
                                </li>
                                @can('conciliar_pagos')
                                    <li @if ($pageSlug == 'customers') class="active " @endif>
                                        <a href="{{ route('customers.pendingconciliation') }}">
                                            <i class="fa-solid fa-user"></i>
                                            <p>Pagos por conciliar</p>
                                        </a>
                                    </li>
                                @endcan
                            </ul>
                        </div>
                    </li>
                    
                    @can('cotizaciones')
                        <li>
                            <a data-toggle="collapse" href="#estimates" {{ $section == 'estimates' ? 'aria-expanded=true' : '' }}>
                                <i class="fa-solid fa-file-invoice-dollar"></i>
                                <span class="nav-link-text">Cotizaciones</span>
                                <b class="caret mt-1"></b>
                            </a>

                            <div class="collapse {{ $section == 'estimates' ? 'show' : '' }}" id="estimates">
                                <ul class="nav pl-4">
                                    <li @if ($pageSlug == 'estimates') class="active " @endif>
                                        <a href="{{ route('estimates.index') }}">
                                            <i class="fa-solid fa-rectangle-list"></i>
                                            <p>Listado de Cotizaciones</p>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                    @endcan

                    @can('prospectos')
                        <li>
                            <a data-toggle="collapse" href="#prospects" {{ $section == 'prospects' ? 'aria-expanded=true' : '' }}>
                                <i class="fa-solid fa-hands-holding-child"></i>
                                <span class="nav-link-text">Prospectos</span>
                                <b class="caret mt-1"></b>
                            </a>

                            <div class="collapse {{ $section == 'prospects' ? 'show' : '' }}" id="prospects">
                                <ul class="nav pl-4">
                                    <li @if ($pageSlug == 'prospects') class="active " @endif>
                                        <a href="{{ route('prospects.index') }}">
                                            <i class="fa-solid fa-rectangle-list"></i>
                                            <p>Listado de Prospectos</p>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                    @endcan

                    @can('configuracion')
                        <li>
                            <a data-toggle="collapse" href="#settings" {{ $section == 'settings' ? 'aria-expanded=true' : '' }}>
                                <i class="fa-solid fa-users-gear"></i>
                                <span class="nav-link-text">Configuración</span>
                                <b class="caret mt-1"></b>
                            </a>

                            <div class="collapse {{ $section == 'settings' ? 'show' : '' }}" id="settings">
                                <ul class="nav pl-4">
                                    <li @if ($pageSlug == 'users') class="active " @endif>
                                        <a href="{{ route('users.index') }}">
                                            <i class="fa-solid fa-users-gear"></i>
                                            <p>@lang('sidebar.user_list')</p>
                                        </a>
                                    </li>
                                    <li @if ($pageSlug == 'users/create') class="active " @endif>
                                        <a href="{{ route('users.create') }}">
                                            <i class="fa-solid fa-user-plus"></i>
                                            <p>@lang('sidebar.new_user')</p>
                                        </a>
                                    </li>
                                    <li @if ($pageSlug == 'roles') class="active " @endif>
                                        <a href="{{ route('roles.index') }}">
                                            <i class="fa-solid fa-users-gear"></i>
                                            <p>@lang('sidebar.roles')</p>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                    @endcan
                </ul>
            </div>
        @elseif (auth()->guard('customer')->check())
            <div style="flex: 1; overflow-y: auto;">
                <ul class="nav">
                    <li @if ($pageSlug == 'dashboard') class="active " @endif>
                        <a href="{{ url('portal-customers/dashboard') }}">
                            <i class="fa-solid fa-chart-simple" ></i>
                            <p style="font-weight: 400;">Dashboard</p>
                        </a>
                    </li>
                    <div style="height: 1px; background-color: white; width: 100%; margin: 5px 0;"></div>
                    <li @if ($pageSlug == 'dashboard') class="active " @endif>
                        <a href="{{ url('portal-customers/myinvestments') }}">
                            <i class="fa-solid fa-house-circle-check"></i>
                            <p>Mis inversiones</p>
                        </a>
                    </li>
                </ul>
            </div>
        @endif

        <!-- Opción de Cerrar Sesión - FIXED para Safari -->
        <div class="logout-container" style="margin-top: auto; padding: 15px 0; border-top: 1px solid rgba(255,255,255,0.1);">
            <ul class="nav">
                @php
                    $isCustomer = auth()->guard('customer')->check();

                    if ($isCustomer) {
                        $route = 'portal-customers.logout';
                    } else {
                        $route = 'logout';
                    }
                @endphp

                <li>
                    <a href="{{ route($route) }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
                        <i class="fa-solid fa-right-from-bracket"></i>
                        <p>Cerrar Sesión</p>
                    </a>
                    <form id="logout-form" action="{{ route($route) }}" method="POST" style="display: none;">
                        @csrf
                    </form>
                </li>
            </ul>
        </div>
    </div>
</div>

<style>
    /* Estilos específicos para Safari */
    @media not all and (min-resolution:.001dpcm) {
        @supports (-webkit-appearance:none) {
            .sidebar-wrapper {
                height: 100vh !important;
                display: flex !important;
                flex-direction: column !important;
            }

            .logout-container {
                position: sticky;
                bottom: 0;
                background-color: inherit;
                z-index: 100;
            }

            .sidebar-wrapper > div:first-child {
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
            }
        }
    }

    /* Estilos generales de respaldo */
    .sidebar-wrapper {
        position: relative;
        min-height: 100%;
    }

    .logout-container {
        flex-shrink: 0;
    }
</style>