@extends('layouts.app')

@section('content')
    <style>
        @media (max-width: 576px) {
            .dropdown-menu.dropdown-menu-center {
                left: -7% !important;
                right: auto !important;
                transform: translateX(-50%);
            }
        }
    </style>
    <div class="container mt-5 px-5">
        <div class="row">
            <div class="col-sm-4">
                <ul class="list-group">
                    <a href="#" class="btn custom-hover-color">
                        <li class="list-group-item custom-text-color" id="purchases">Pedidos</li>
                    </a>
                    <a href="#" class="btn custom-hover-color">
                        <li class="list-group-item custom-text-color" id="services">Servicios</li>
                    </a>
                    <a href="#" class="btn custom-hover-color">
                        <li class="list-group-item custom-text-color" id="digitalPurchases">Decargas</li>
                    </a>

                    <div class="btn-group" id="dropdownContainer">
                        <a href="#" class="btn custom-hover-color" role="button" data-bs-toggle="dropdown"
                            aria-expanded="false">
                            <li class="list-group-item custom-text-color">Direcciones</li>
                        </a>
                        <ul class="dropdown-menu">
                            @foreach ($types as $type)
                                <li class="dropdown-item">
                                    <a href="" class="btn custom-text-color addresses"
                                        data-type-slug="{{ $type->slug }}">
                                        {{ $type->address_type }}
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    </div>

                    <a href="#" class="btn custom-hover-color">
                        <li class="list-group-item custom-text-color" id="changeAccountData">Cambiar datos de la cuenta</li>
                    </a>
                    @if(!Auth::guard('web')->user()->vendor)
                        <a href="{{ Route('changeAccountToVendor') }}" class="btn custom-hover-color">
                            <li class="list-group-item custom-text-color" id="digitalPurchases">Convertirse en vendedor en IAM
                            </li>
                        </a>
                    @endif
                    <a class="btn custom-hover-color" href=""
                        onclick="event.preventDefault();
                                        document.getElementById('logout-form').submit();">
                        <li class="list-group-item custom-text-color">Cerrar sesión</li>
                    </a>
                </ul>
            </div>
            <div class="col-sm-8" id="content">
                <h3>Bienvenido: {{ Auth::guard('web')->user()->display_name }}</h3>
                <p>Has click en una de las opciones para configurar tu cuenta</p>
                {{-- Here must be the content of the config --}}
            </div>
        </div>
    </div>
@endsection

@section('custom_script')
    @vite('resources/js/users/client/showProfileOptions.js')

    <script>
        function updateDropdown() {
            var dropdownContainer = document.getElementById('dropdownContainer');
            var dropdownMenu = dropdownContainer.querySelector('.dropdown-menu');

            if (window.innerWidth < 576) {
                dropdownContainer.classList.remove('dropend');
                dropdownContainer.classList.add('dropdown');
                dropdownMenu.classList.add('dropdown-menu-center');
            } else {
                dropdownContainer.classList.remove('dropdown');
                dropdownContainer.classList.add('dropend');
                dropdownMenu.classList.remove('dropdown-menu-center');
            }
        }

        window.addEventListener('resize', function() {
            updateDropdown();
        });

        updateDropdown();
    </script>
@endsection