@extends('welcome')

@section('title', ($breadcrumbExtra ?? __('account.my_account')) . ' | ' . config('app.name'))
@section('meta_description', __('account.my_account'))

@section('content')

<!--==============================
        Breadcumb
    ============================== -->
<div class="breadcumb-wrapper" data-bg-src="{{ asset('images/banners/account-banner.jpg') }}"
     data-track-click="Breadcrumb Conta"
     data-track-type="navegação"
     data-track-meta="banner-conta">
    <div class="container">
        <div class="breadcumb-content">
            <h1 class="breadcumb-title">{{ __('account.my_account') }}</h1>
            <ul class="breadcumb-menu">
                <li><a href="{{ route('welcome') }}"
                       data-track-click="Breadcrumb Home"
                       data-track-type="navegação"
                       data-track-meta="breadcrumb">
                        {{ __('welcome.home') }}
                    </a></li>
                <li>{{ __('account.my_account') }}</li>
                @if(isset($breadcrumbExtra))
                    <li>{{ $breadcrumbExtra }}</li>
                @endif
            </ul>
        </div>
    </div>
</div>

<!--==============================
        Account Area
    ==============================-->
<div class="space-top space-extra-bottom">
    <div class="container">
        <div class="row gx-60">
            <!-- Sidebar -->
            <div class="col-lg-4 col-xl-3">
                @include('account.partials.account-sidebar', [
                    'activeRoute' => $activeRoute ?? 'account.dashboard'
                ])
            </div>

            <!-- Main Content -->
            <div class="col-lg-8 col-xl-9 mt-40 mt-lg-0">
                <div class="account-content-wrapper">
                    <!-- Mobile Tab Navigation -->
                    <div class="account-tab-nav d-block d-lg-none mb-30">
                        <select class="form-select mobile-tab-select"
                                onchange="window.location.href = this.value;"
                                data-track-click="Conta Mobile Navegação"
                                data-track-type="navegação"
                                data-track-meta="dropdown">

                            <option value="{{ route('account.dashboard') }}"
                                {{ ($activeRoute ?? '') == 'account.dashboard' ? 'selected' : '' }}>
                                {{ __('account.dashboard') }}
                            </option>

                            <option value="{{ route('account.orders.index') }}"
                                {{ ($activeRoute ?? '') == 'account.orders.index' ? 'selected' : '' }}>
                                {{ __('account.my_orders') }}
                            </option>

                            <option value="{{ route('account.addresses.index') }}"
                                {{ ($activeRoute ?? '') == 'account.addresses.index' ? 'selected' : '' }}>
                                {{ __('account.shipping_addresses') }}
                            </option>

                            <option value="{{ route('account.profile') }}"
                                {{ ($activeRoute ?? '') == 'account.profile' ? 'selected' : '' }}>
                                {{ __('account.edit_profile') }}
                            </option>

                            <option value="{{ route('account.password') }}"
                                {{ ($activeRoute ?? '') == 'account.password' ? 'selected' : '' }}>
                                {{ __('account.change_password') }}
                            </option>

                            @if(config('shop.whatsapp.number'))
                                <option value="https://wa.me/{{ config('shop.whatsapp.number') }}?text={{ urlencode(__('account.whatsapp_default_message')) }}">
                                    📱 {{ __('account.whatsapp_support') }}
                                </option>
                            @endif
                        </select>
                    </div>

                    <!-- Dynamic Content Area -->
                    <div class="account-content-area">
                        @if(isset($contentView))
                            @include($contentView, $contentData ?? [])
                        @else
                            @include('account.partials.account-dashboard')
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('styles')
    <link rel="stylesheet" href="{{ asset('css/account.css') }}?v={{ config('app.version') }}">
@endpush

@push('scripts')
<script>
document.addEventListener("DOMContentLoaded", function() {
    // Ativar tab com base no hash
    const hash = window.location.hash;
    
    if (hash) {
        const targetTab = document.querySelector(`a[href="${hash}"]`);
        if (targetTab) {
            const tab = new bootstrap.Tab(targetTab);
            tab.show();
        }
    }
    
    // Mobile select navigation
    const mobileSelect = document.querySelector('.mobile-tab-select');
    if (mobileSelect) {
        mobileSelect.addEventListener('change', function() {
            const tabId = this.value;
            const targetLink = document.querySelector(`a[href="${tabId}"]`);
            if (targetLink) {
                const tab = new bootstrap.Tab(targetLink);
                tab.show();
            }
        });
    }

    // Elementos do DOM - Endereços
    const addressModal = document.getElementById('addressModal');
    const addressForm = document.getElementById('addressForm');
    const modalTitle = document.getElementById('modalTitle');
    const formMethod = document.getElementById('formMethod');
    const addressId = document.getElementById('addressId');
    
    // Botão Adicionar
    const btnAddAddress = document.getElementById('btn-add-address');
    if (btnAddAddress) {
        btnAddAddress.addEventListener('click', function() {
            modalTitle.textContent = '{{ __("account.add_new_address") }}';
            addressForm.action = '{{ route("account.addresses.store") }}';
            formMethod.value = 'POST';
            addressForm.reset();
            addressId.value = '';
            
            // Reset checkboxes
            document.getElementById('add_invoice').checked = false;
            document.getElementById('add_shipping').checked = false;
            document.getElementById('add_default').checked = false;
            
            // Limpar erros anteriores
            clearValidationErrors();
        });
    }
    
    // Botões Editar
    document.querySelectorAll('.btn-edit-address').forEach(btn => {
        btn.addEventListener('click', function() {
            modalTitle.textContent = '{{ __("account.edit_address") }}';
            addressForm.action = this.dataset.updateUrl;
            formMethod.value = 'PUT';
            addressId.value = this.dataset.addressId;
            
            // Preencher campos
            document.getElementById('add_label').value = this.dataset.label || '';
            document.getElementById('add_address1').value = this.dataset.address1;
            document.getElementById('add_address2').value = this.dataset.address2 || '';
            document.getElementById('add_zipcode').value = this.dataset.zipcode;
            document.getElementById('add_city').value = this.dataset.city;
            document.getElementById('add_district').value = this.dataset.district;
            document.getElementById('add_shicid').value = this.dataset.shicid;
            
            // Preencher checkboxes
            document.getElementById('add_invoice').checked = parseInt(this.dataset.invoice) === 1;
            document.getElementById('add_shipping').checked = parseInt(this.dataset.shipping) === 1;
            document.getElementById('add_default').checked = parseInt(this.dataset.default) === 1;
            
            // Limpar erros anteriores
            clearValidationErrors();
        });
    });
    
    if (addressForm) {
        addressForm.addEventListener('submit', function(e) {
            e.preventDefault();

            if (this.dataset.ajax !== 'true') {
                this.submit();
                return;
            }

            const formData = new FormData(this);
            const url = this.action;
            const method = formMethod.value;

            if (method === 'PUT') {
                formData.append('_method', 'PUT');
            }

            const submitBtn = document.getElementById('saveAddressBtn');
            const originalText = submitBtn.innerHTML;

            submitBtn.innerHTML = '<i class="fal fa-spinner fa-spin me-2"></i> {{ __("account.saving") }}';
            submitBtn.disabled = true;

            fetch(url, {
                method: 'POST',
                body: formData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {

                if (data.success) {
                    
                    if (data.is_default) {
                        $('.address-card').removeClass('default-address');
                        $('.address-badge').remove();
                    }

                    /* -----------------------------------
                       ADD ADDRESS
                    ----------------------------------- */
                    if (method === 'POST') {

                        if ($('#address-grid').length === 0) {

                            $('.empty-state').remove();

                            $('.account-card-body').append(`
                                <div id="address-grid" class="row gy-4"></div>
                            `);

                        }

                        $('#address-grid').prepend(data.html);
                    }

                    /* -----------------------------------
                       UPDATE ADDRESS
                    ----------------------------------- */
                    else {

                        $('[data-address-id="'+data.id+'"]').replaceWith(data.html);

                    }

                    /* -----------------------------------
                       DEFAULT ADDRESS UPDATE
                    ----------------------------------- */
                    if (data.default) {
                        $('.address-card').removeClass('default-address');
                    }

                    /* -----------------------------------
                       CLOSE MODAL
                    ----------------------------------- */

                    const modal = bootstrap.Modal.getInstance(addressModal);
                    modal.hide();

                    /* -----------------------------------
                       SUCCESS TOAST
                    ----------------------------------- */

                    showNotification(
                        'success',
                        '{{ __("account.success") }}',
                        data.message
                    );

                } 

                else {

                    if (data.errors) {
                        showValidationErrors(data.errors);
                    }

                    showNotification(
                        'error',
                        '{{ __("account.error") }}',
                        data.message || '{{ __("account.validation_error") }}'
                    );
                }

            })
            .catch(error => {

                console.error(error);

                showNotification(
                    'error',
                    '{{ __("account.error") }}',
                    '{{ __("account.network_error") }}'
                );

            })
            .finally(() => {

                submitBtn.innerHTML = originalText;
                submitBtn.disabled = false;

            });
        });

    }
    
    // Função para mostrar erros de validação
    function showValidationErrors(errors) {
        // Limpar erros anteriores
        clearValidationErrors();
        
        // Mostrar novos erros
        for (const field in errors) {
            const input = document.getElementById(field);
            if (input) {
                input.classList.add('is-invalid');
                
                // Criar ou atualizar mensagem de erro
                let feedback = input.nextElementSibling;
                if (!feedback || !feedback.classList.contains('invalid-feedback')) {
                    feedback = document.createElement('div');
                    feedback.className = 'invalid-feedback';
                    input.parentNode.insertBefore(feedback, input.nextSibling);
                }
                feedback.innerHTML = errors[field][0];
            }
        }
    }
    
    // Função para limpar erros de validação
    function clearValidationErrors() {
        document.querySelectorAll('.is-invalid').forEach(el => {
            el.classList.remove('is-invalid');
        });
        
        document.querySelectorAll('.invalid-feedback').forEach(el => {
            el.remove();
        });
    }
    
    // Função para mostrar notificações
    function showNotification(type, title, message) {
        if (typeof toast !== 'undefined') {
            toast[type](title, message);
        } else {
            alert(message);
        }
    }
    
    // Abrir modal automaticamente se houver erros de validação
    if (addressModal && addressModal.dataset.openOnError === 'true') {
        const modal = new bootstrap.Modal(addressModal);
        modal.show();
    }
    
    const addressModalEl = document.getElementById('addressModal');

    if (addressModalEl) {
        addressModalEl.addEventListener('show.bs.modal', function () {

            // Reset do formulário
            addressForm.reset();

            // Reset method
            formMethod.value = 'POST';

            // Limpar ID
            addressId.value = '';

            // Limpar action
            addressForm.action = '{{ route("account.addresses.store") }}';

            // Limpar checkboxes
            document.getElementById('add_invoice').checked = false;
            document.getElementById('add_shipping').checked = false;
            document.getElementById('add_default').checked = false;

            // Limpar select
            document.getElementById('add_shicid').selectedIndex = 0;

            // Limpar erros de validação
            clearValidationErrors();

        });

        addressModalEl.addEventListener('hidden.bs.modal', function () {
            addressForm.reset();
            clearValidationErrors();
        });
    }
});
</script>
@endpush