@extends('layouts.app1')

@section('page-title', __('My Profile'))
@section('page-heading', __('My Profile'))

@section('breadcrumbs')
    <li class="breadcrumb-item active">
        @lang('My Profile')
    </li>
@stop

@section('styles')
    <style>
        /* Contenedor principal - Sin scroll */
        html, body {
            overflow: hidden;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        /* Menor separación superior */
        body {
            padding-top: 20px;
        }

        .profile-container {
            margin-top: 0;
            padding: 0;
            width: 100%;
            height: 100vh;
            position: relative;
            overflow: hidden;
        }

        /* Menú de pestañas */
        .tabs-scroll {
            background-color: #f8f9fa;
            padding: 8px 12px;
            border-radius: 4px 4px 0 0;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            position: sticky;
            top: 20px;
            z-index: 1000;
            margin-bottom: 0;
            overflow-x: auto;
            white-space: nowrap;
            -webkit-overflow-scrolling: touch;
        }

        .nav-tabs {
            border-bottom: none;
            display: inline-flex;
            flex-wrap: nowrap;
            padding: 0;
            margin: 0;
            min-width: 100%;
        }

        .nav-tabs .nav-item {
            margin-right: 6px;
            margin-bottom: 0;
            flex-shrink: 0;
        }

        .nav-tabs .nav-link {
            color: #495057;
            border: 1px solid #e9ecef;
            border-radius: 4px;
            padding: 8px 12px;
            font-size: 13px;
            font-weight: 500;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            white-space: nowrap;
            background-color: #f8f9fa;
        }

        .nav-tabs .nav-link i {
            color: inherit;
            margin-right: 5px;
            transition: all 0.3s ease;
        }

        .nav-tabs .nav-link:hover i {
            color: inherit;
        }

        .nav-tabs .nav-link.active i {
            color: #fff;
        }

        .nav-tabs .nav-link:hover {
            background-color: #e8f5e9;
            color: #23682f;
            border-color: #a5d6a7;
        }

        .nav-tabs .nav-link.active {
            color: #fff;
            background-color: #23682f;
            border-color: #23682f;
            font-weight: 600;
        }

        /* Estilo para el botón de Restablecer Panel */
        .nav-tabs .nav-link.reset-panel {
            background-color: #0071bc !important;
            color: white !important;
            border-color: #0071bc !important;
            transition: all 0.3s ease;
        }

        .nav-tabs .nav-link.reset-panel:hover {
            background-color: #005999 !important;
            border-color: #005999 !important;
        }

        .nav-tabs .nav-link.reset-panel i {
            color: white !important;
        }

        /* Contenedor de iframe */
        .iframe-container {
            position: relative;
            margin: 0.2cm;
            width: calc(100% - 0.2cm);
            height: calc(100vh - 100px - 0cm);
            padding: 0.2cm;
            background: #fff;
            border-radius: 0 0 4px 4px;
            display: none;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        .iframe-container.active {
            display: block;
        }

        .iframe-wrapper {
            transform: scale(0.9);
            transform-origin: top left;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            width: 100%;
            height: 100%;
        }

        .iframe-content-wrapper {
            width: 100%;
            height: 100%;
            overflow: auto;
            -webkit-overflow-scrolling: touch;
        }

        .iframe-container iframe {
            width: 100%;
            height: 100%;
            border: none;
            display: block;
        }

        .tab-content {
            padding: 0;
            background: #fff;
            margin: 0cm auto 0cm;
            width: calc(100% - 0cm);
            min-height: calc(100vh - 100px - 0cm);
            border-radius: 0 0 0px 0px;
            overflow: hidden;
        }

        /* Alerta */
        .alert-warning {
            margin: 10px 15px 0;
            border-radius: 4px;
            border-left: 4px solid #856404;
            background-color: #fff3cd;
            color: #856404;
            padding: 10px 15px;
            position: sticky;
            top: calc(70px + 0.5cm);
            z-index: 999;
        }

        /* Responsivo */
        @media (max-width: 992px) {
            .iframe-container, .tab-content {
                width: calc(100% - 1cm);
                margin: 0.5cm auto;
                height: calc(100vh - 90px - 1cm);
            }
            .iframe-wrapper {
                transform: scale(0.95);
            }
        }

        @media (max-width: 768px) {
            .nav-tabs .nav-link { 
                padding: 6px 10px; 
                font-size: 12px; 
            }
            .nav-tabs .nav-link i { 
                margin-right: 4px; 
                font-size: 11px; 
            }
            .iframe-container, .tab-content {
                width: calc(100% - 1cm);
                margin: 0.5cm auto;
                height: calc(100vh - 90px - 1cm);
            }
            .tabs-scroll { 
                top: 16px; 
                padding: 8px 10px; 
            }
            .alert-warning { 
                top: calc(76px + 0.5cm); 
                padding: 8px 12px; 
            }
            .iframe-wrapper { 
                transform: scale(1); 
            }
        }

        @media (max-width: 576px) {
            .nav-tabs .nav-item { 
                margin-right: 4px; 
                margin-bottom: 4px; 
            }
            .nav-tabs .nav-link { 
                padding: 5px 8px; 
                font-size: 11px; 
            }
            .iframe-container, .tab-content {
                width: calc(100% - 1cm);
                margin: 0.5cm auto;
                height: calc(100vh - 80px - 1cm);
            }
        }
    </style>
@stop

@section('content')<br><br><br>
    @include('partials.messages')

    @php
        $user = auth()->user();
        $userRole = $user->role->name ?? 'guest';
        $activeTab = session('tab') ?? 'main';
        
        // Determinar panel según rol solo si no hay tab en sesión
        if (!session()->has('tab')) {
            switch($userRole) {
                case 'liquidacion':
                    $activeTab = 'liquidacion';
                    break;
                case 'profesional':
                    $activeTab = 'custom3';
                    break;
                case 'avanzado':
                    $activeTab = 'custom2';
                    break;
                case 'basico':
                    $activeTab = 'custom1';
                    break;
            }
        }
        
        // Forzar cambio de contraseña tiene prioridad
        $passwordChangeManager = app(\Vanguard\Support\Authorization\PasswordChangeManager::class);
        if ($user && $passwordChangeManager->isPasswordChangeForcedForUser($user)) {
            $activeTab = 'login';
        }
    @endphp

    @if ($passwordChangeManager->isPasswordChangeForcedForUser($user))
        <div class="alert alert-warning d-flex justify-content-between align-items-center">
            @lang('Before continuing please update your password and set a new one.')
        </div>
    @endif

    <div class="profile-container">
        <div class="tabs-scroll">
            <ul class="nav nav-tabs" id="nav-tab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link {{ $activeTab == 'main' ? 'active' : '' }}" 
                       data-tab="main" 
                       data-src="https://avesexoticas.org/" 
                       role="tab">
                        <i class="fas fa-home"></i> @lang(' - Inicio')
                    </a>
                </li>

                @if(in_array($userRole, ['basico', 'avanzado', 'profesional', 'liquidacion']))
                <li class="nav-item">
                    <a class="nav-link {{ $activeTab == 'custom1' ? 'active' : '' }}" 
                       data-tab="custom1" 
                       data-src="{{ url('/basico/dashboard.php') }}" 
                       role="tab">
                        <i class="fas fa-gift"></i> @lang(' - Plan Básico')
                    </a>
                </li>
                @endif

                @if(in_array($userRole, ['avanzado', 'profesional', 'liquidacion']))
                <li class="nav-item">
                    <a class="nav-link {{ $activeTab == 'custom2' ? 'active' : '' }}" 
                       data-tab="custom2" 
                       data-src="{{ url('https://elportalmistico.com/index.php') }}" 
                       role="tab">
                        <i class="fas fa-star"></i> @lang(' - Plan Avanzado')
                    </a>
                </li>
                @endif

                @if(in_array($userRole, ['profesional', 'liquidacion']))
                <li class="nav-item">
                    <a class="nav-link {{ $activeTab == 'custom3' ? 'active' : '' }}" 
                       data-tab="custom3" 
                       data-src="{{ url('/profesional.php') }}" 
                       role="tab">
                        <i class="fas fa-crown"></i> @lang(' - Plan Profesional')
                    </a>
                </li>
                @endif

                @if($userRole == 'liquidacion')
                <li class="nav-item">
                    <a class="nav-link {{ $activeTab == 'liquidacion' ? 'active' : '' }}" 
                       data-tab="liquidacion" 
                       data-src="{{ url('/liquidacion.php') }}" 
                       role="tab">
                        <i class="fas fa-file-invoice-dollar"></i> @lang(' - Liquidación')
                    </a>
                </li>
                @endif

                <li class="nav-item">
                    <a class="nav-link {{ $activeTab == 'custom4' ? 'active' : '' }}" 
                       data-tab="custom4" 
                       data-src="{{ url('/tienda.php') }}" 
                       role="tab">
                       <i class="fas fa-store"></i> @lang(' - Tienda Online')
                    </a>
                </li>
                
                <li class="nav-item">
                    <a class="nav-link {{ $activeTab == 'details' ? 'active' : '' }}"
                       data-tab="details" role="tab">
                       <i class="fas fa-user-edit"></i> @lang(' - Datos')
                    </a>
                </li>
                
                <li class="nav-item">
                    <a class="nav-link {{ $activeTab == 'login' ? 'active' : '' }}"
                       data-tab="login-details" role="tab">
                       <i class="fas fa-key"></i> @lang(' - Seguridad')
                    </a>
                </li>
                
                @if (setting('2fa.enabled'))
                    <li class="nav-item">
                        <a class="nav-link {{ $activeTab == '2fa' ? 'active' : '' }}"
                           data-tab="2fa" role="tab">
                           <i class="fas fa-lock"></i> @lang(' - Autenticación')
                        </a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link reset-panel" 
                           href="https://elportalmistico.com/public/profile" 
                           target="_blank">
                           <i class="fas fa-sync-alt"></i> @lang(' - Restablecer Panel')
                        </a>
                    </li>
                @endif
            </ul>
        </div>

        <div class="tab-content">
            <div class="tab-pane {{ $activeTab == 'details' ? 'show active' : '' }} fade"
                 id="details" role="tabpanel">
                <form action="{{ route('profile.update.details') }}" method="POST" id="details-form">
                    @method('PUT')
                    @csrf
                    @include('user.partials.details', ['profile' => true])
                </form>
            </div>

            <div class="tab-pane {{ $activeTab == 'login' ? 'show active' : '' }} fade"
                 id="login-details" role="tabpanel">
                <form action="{{ route('profile.update.login-details') }}"
                      method="POST" id="login-details-form">
                    @method('PUT')
                    @csrf
                    @include('user.partials.auth', ['profile' => true])
                </form>
            </div>

            @if (setting('2fa.enabled'))
                <div class="tab-pane {{ $activeTab == '2fa' ? 'show active' : '' }} fade"
                     id="2fa" role="tabpanel">
                    @include('user.partials.two-factor')
                </div>
            @endif

            <div class="iframe-container {{ $activeTab == 'main' ? 'active' : '' }}" id="iframe-main">
                <div class="iframe-wrapper">
                    <div class="iframe-content-wrapper">
                        <iframe class="local-iframe" src="{{ $activeTab == 'main' ? 'https://avesexoticas.org/' : '' }}" title="Inicio"></iframe>
                    </div>
                </div>
            </div>
            
            <div class="iframe-container {{ $activeTab == 'custom1' ? 'active' : '' }}" id="iframe-custom1">
                <div class="iframe-wrapper">
                    <div class="iframe-content-wrapper">
                        <iframe class="local-iframe" src="{{ $activeTab == 'custom1' ? url('/basico/dashboard.php') : '' }}" title="Plan Básico"></iframe>
                    </div>
                </div>
            </div>
            
            <div class="iframe-container {{ $activeTab == 'custom2' ? 'active' : '' }}" id="iframe-custom2">
                <div class="iframe-wrapper">
                    <div class="iframe-content-wrapper">
                        <iframe class="local-iframe" src="{{ $activeTab == 'custom2' ? url('https://elportalmistico.com/index.php') : '' }}" title="Plan Avanzado"></iframe>
                    </div>
                </div>
            </div>
            
            <div class="iframe-container {{ $activeTab == 'custom3' ? 'active' : '' }}" id="iframe-custom3">
                <div class="iframe-wrapper">
                    <div class="iframe-content-wrapper">
                        <iframe class="local-iframe" src="{{ $activeTab == 'custom3' ? url('/profesional.php') : '' }}" title="Plan Profesional"></iframe>
                    </div>
                </div>
            </div>
            
            <div class="iframe-container {{ $activeTab == 'liquidacion' ? 'active' : '' }}" id="iframe-liquidacion">
                <div class="iframe-wrapper">
                    <div class="iframe-content-wrapper">
                        <iframe class="local-iframe" src="{{ $activeTab == 'liquidacion' ? url('/liquidacion.php') : '' }}" title="Liquidación"></iframe>
                    </div>
                </div>
            </div>
            
            <div class="iframe-container {{ $activeTab == 'custom4' ? 'active' : '' }}" id="iframe-custom4">
                <div class="iframe-wrapper">
                    <div class="iframe-content-wrapper">
                        <iframe class="local-iframe" src="{{ $activeTab == 'custom4' ? url('/tienda.php') : '' }}" title="Tienda Online"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
@stop

@section('scripts')
    <script>
        const tabState = {};
        
        document.addEventListener('DOMContentLoaded', function() {
            // Inicializar estado de pestañas
            document.querySelectorAll('a[data-tab]').forEach(tab => {
                const tabId = tab.getAttribute('data-tab');
                tabState[tabId] = {
                    loaded: false,
                    src: tab.getAttribute('data-src') || '',
                    active: tab.classList.contains('active')
                };
            });

            // Control de tabs
            document.querySelectorAll('a[data-tab]').forEach(tab => {
                tab.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopImmediatePropagation();
                    
                    const targetId = this.getAttribute('data-tab');
                    const iframeSrc = this.getAttribute('data-src');
                    
                    tabState[targetId].active = true;
                    
                    // Ocultar todos los iframes
                    document.querySelectorAll('.iframe-container').forEach(iframe => {
                        iframe.classList.remove('active');
                    });
                    
                    // Ocultar paneles de contenido
                    document.querySelectorAll('.tab-pane').forEach(pane => {
                        pane.classList.remove('show', 'active');
                    });
                    
                    // Cambiar pestañas
                    document.querySelectorAll('.nav-link').forEach(link => {
                        link.classList.remove('active');
                        const linkTabId = link.getAttribute('data-tab');
                        if (linkTabId) tabState[linkTabId].active = false;
                    });
                    this.classList.add('active');
                    
                    // Manejar iframes
                    if (iframeSrc) {
                        const iframeContainer = document.getElementById(`iframe-${targetId}`);
                        const iframe = iframeContainer.querySelector('iframe');
                        
                        if (!tabState[targetId].loaded && iframeSrc) {
                            iframe.src = iframeSrc;
                            tabState[targetId].loaded = true;
                        }
                        
                        iframeContainer.classList.add('active');
                        history.pushState({tab: targetId}, '', window.location.pathname);
                        
                        // Asegurar que el iframe ocupe todo el espacio disponible
                        iframe.onload = function() {
                            try {
                                const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
                                const iframeBody = iframeDoc.body;
                                iframeBody.style.margin = '0';
                                iframeBody.style.padding = '20px';
                                iframeBody.style.height = '100%';
                                iframeBody.style.overflow = 'auto';
                                
                                // Ajustar escala según el tamaño de pantalla
                                adjustIframeScale(iframeContainer);
                            } catch (e) {
                                console.log('No se pudo ajustar el iframe');
                            }
                        };
                    } else {
                        document.getElementById(targetId).classList.add('show', 'active');
                    }
                    
                    resizeContent();
                });
            });
            
            // Función para ajustar la escala del iframe
            function adjustIframeScale(iframeContainer) {
                const iframeWrapper = iframeContainer.querySelector('.iframe-wrapper');
                const screenWidth = window.innerWidth;
                
                if (screenWidth >= 992) {
                    iframeWrapper.style.transform = 'scale(0.9)';
                    iframeWrapper.style.width = '111.11%';
                    iframeWrapper.style.height = '111.11%';
                } else if (screenWidth >= 768) {
                    iframeWrapper.style.transform = 'scale(0.95)';
                    iframeWrapper.style.width = '105.26%';
                    iframeWrapper.style.height = '105.26%';
                } else {
                    iframeWrapper.style.transform = 'scale(1)';
                    iframeWrapper.style.width = '100%';
                    iframeWrapper.style.height = '100%';
                }
            }
            
            // Manejar historial
            window.addEventListener('popstate', function(event) {
                if (event.state && event.state.tab) {
                    const tabLink = document.querySelector(`a[data-tab="${event.state.tab}"]`);
                    if (tabLink) tabLink.click();
                }
            });
            
            // Ajustar altura del contenido
            function resizeContent() {
                const headerHeight = document.querySelector('.navbar').offsetHeight;
                const tabsHeight = document.querySelector('.tabs-scroll').offsetHeight;
                const notificationHeight = document.querySelector('.alert-warning') ? 
                    document.querySelector('.alert-warning').offsetHeight : 0;
                
                const totalOffset = headerHeight + tabsHeight + notificationHeight;
                const contentHeight = window.innerHeight - totalOffset;
                
                document.querySelectorAll('.iframe-container, .tab-pane').forEach(el => {
                    el.style.height = `${contentHeight}px`;
                });
                
                // Ajustar escala de iframes visibles
                document.querySelectorAll('.iframe-container.active').forEach(container => {
                    adjustIframeScale(container);
                });
            }
            
            // Inicializar
            resizeContent();
            window.addEventListener('resize', resizeContent);
            
            // Precargar pestaña activa
            const initialActiveTab = document.querySelector('.nav-link.active');
            if (initialActiveTab) {
                initialActiveTab.click();
            }
        });
        
        function reloadTab(tabId) {
            if (tabState[tabId]) {
                tabState[tabId].loaded = false;
                const tabLink = document.querySelector(`a[data-tab="${tabId}"]`);
                if (tabLink) tabLink.click();
            }
        }
    </script>
@stop