@extends('layouts.app')

@section('title', 'Editar Contrato')

@push('styles-custom')
<!-- Select2 Phoenix Theme -->
<link href="{{ asset('css/select2-phoenix-theme.css') }}" rel="stylesheet" />

<!-- INICIALIZAÇÃO IMEDIATA DO TEMA -->
<script>
(function() {
    'use strict';
    console.log('=== SCRIPT INLINE DE INICIALIZAÇÃO ===');

    // Detectar tema atual
    const htmlTheme = document.documentElement.getAttribute('data-bs-theme');
    const bodyTheme = document.body.getAttribute('data-bs-theme');
    const savedTheme = localStorage.getItem('theme') || localStorage.getItem('bs-theme');

    console.log('HTML theme:', htmlTheme);
    console.log('Body theme:', bodyTheme);
    console.log('Saved theme:', savedTheme);

    // PADRÃO: sempre light, a menos que explicitamente dark
    let finalTheme = 'light';

    if (htmlTheme === 'dark' || bodyTheme === 'dark' || savedTheme === 'dark') {
        finalTheme = 'dark';
    }

    console.log('Tema final decidido:', finalTheme);

    // Aplicar tema imediatamente
    document.documentElement.setAttribute('data-bs-theme', finalTheme);
    document.body.setAttribute('data-bs-theme', finalTheme);

    if (finalTheme === 'dark') {
        document.body.classList.add('dark-theme');
        document.documentElement.classList.add('dark-theme');
    } else {
        document.body.classList.remove('dark-theme', 'dark');
        document.documentElement.classList.remove('dark-theme', 'dark');
    }

    console.log('Tema aplicado imediatamente:', finalTheme);
})();
</script>

<!-- Select2 CSS -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" rel="stylesheet" />

<link href="{{ asset('css/theme-init.css') }}" rel="stylesheet" />
<link href="{{ asset('css/select2-custom.css') }}" rel="stylesheet" />
<link href="{{ asset('css/form-theme.css') }}" rel="stylesheet" />
<link href="{{ asset('css/modal-theme.css') }}" rel="stylesheet" />
<link href="{{ asset('vendors/flatpickr/flatpickr.min.css') }}" rel="stylesheet" />
<style>
    /* CSS inline para garantir aplicação imediata */
    html:not([data-bs-theme="dark"]):not(.dark-theme):not(.dark) {
        --accordion-bg: #ffffff !important;
        --accordion-button-bg: #f8f9fa !important;
        --accordion-button-text: #212529 !important;
        --accordion-body-bg: #ffffff !important;
        --accordion-body-text: #212529 !important;
    }

    body:not([data-bs-theme="dark"]):not(.dark-theme):not(.dark) {
        background-color: #ffffff !important;
        color: #212529 !important;
    }
</style>

<style>
    /* Evitar overflow horizontal */
    body, html {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    .container-fluid {
        padding-left: 15px;
        padding-right: 15px;
        max-width: 100%;
        overflow-x: hidden;
    }

    .row {
        margin-left: -0.375rem;
        margin-right: -0.375rem;
        max-width: 100%;
    }

    .row > * {
        padding-left: 0.375rem;
        padding-right: 0.375rem;
    }

    .accordion-button:not(.collapsed) {
        background-color: #f8f9fa;
        border-color: #dee2e6;
    }

    .card {
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        border: 1px solid rgba(0, 0, 0, 0.125);
        max-width: 100%;
        overflow: hidden;
    }

    .bg-gradient-primary {
        background: linear-gradient(135deg, #007bff, #0056b3);
    }

    .money-mask {
        text-align: right;
        font-family: 'Courier New', monospace;
        font-weight: 600;
    }

    .form-label.fw-bold {
        margin-bottom: 0.5rem;
        color: #495057;
    }

    /* Responsividade específica */
    .text-truncate {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .parcelas-item {
        max-width: 100%;
        overflow: hidden;
    }

    .parcelas-item .card-body {
        padding: 1rem 0.75rem;
        overflow-x: hidden;
    }

    .input-group {
        max-width: 100%;
    }

    .input-group > * {
        max-width: 100%;
    }

    /* Específico para Select2 wrapper */
    .select2-wrapper {
        max-width: 100%;
        overflow: hidden;
    }

    /* Melhorias para mobile */
    @media (max-width: 576px) {
        .container-fluid {
            padding-left: 10px;
            padding-right: 10px;
        }

        .card-body {
            padding: 0.75rem 0.5rem;
        }

        .form-label {
            font-size: 0.875rem;
            margin-bottom: 0.25rem;
        }

        .btn-sm {
            padding: 0.25rem 0.5rem;
            font-size: 0.75rem;
        }
    }

    @media (max-width: 768px) {
        .accordion-body {
            padding: 1rem 0.5rem;
        }

        .row.g-2 {
            margin-left: -0.25rem;
            margin-right: -0.25rem;
        }

        .row.g-2 > * {
            padding-left: 0.25rem;
            padding-right: 0.25rem;
        }
    }

    /* Correções específicas para evitar overflow */
    .accordion-collapse {
        overflow-x: hidden !important;
    }

    .accordion-body {
        overflow-x: hidden !important;
        max-width: 100%;
    }

    .form-control,
    .form-select {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Correção específica para modal/accordion que pode estar interferindo */
    .accordion-body .select2-container {
        z-index: auto !important;
    }

    .accordion-body .select2-dropdown {
        z-index: 1060 !important; /* Acima de modais do Bootstrap */
    }
</style>
@endpush

@section('content')
    @include('contratos.partials.form', [
        'action' => route('contratos.update', $contrato->id),
        'method' => 'PUT',
        'contrato' => $contrato,
        'empresas' => $empresas,
        'planos' => $planos,
        'clientes' => $clientes,
        'modelos' => $modelos,
        'eventos' => $eventos,
        'contasBancarias' => $contasBancarias,
        'artistas' => $artistas,
    ])

    <!-- Seção de Contas a Receber (fora do formulário) -->
    <div class="mt-4">
        @include('contratos.partials.contas_receber')
    </div>
@endsection

@push('scripts-custom')
<!-- Select2 JS -->
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="{{ asset('vendors/tinymce/tinymce.min.js') }}"></script>
<script src="{{ asset('vendors/jquery.mask/jquery.mask.min.js') }}"></script>
<script src="{{ asset('vendors/sweetalert2/sweetalert2.all.min.js') }}"></script>
<script src="{{ asset('js/theme-manager.js') }}"></script>
<script src="{{ asset('vendors/flatpickr/flatpickr.min.js') }}"></script>
<script src="{{ asset('vendors/flatpickr/l10n/pt.js') }}"></script>

{{-- Verificar se Bootstrap JS está carregado --}}
<script>
if (typeof bootstrap === 'undefined') {
    console.error('Bootstrap JS não está carregado!');
    // Carregamento de emergência do Bootstrap
    const script = document.createElement('script');
    script.src = 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js';
    script.integrity = 'sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz';
    script.crossOrigin = 'anonymous';
    document.head.appendChild(script);
}
</script>

@include('contratos.scripts.custom-scripts-form')
@include('contratos.scripts.custom-scripts-modal-editar-evento')
@include('contratos.scripts.parcelas-manager')
<script>
// Script adicional para corrigir problemas de layout
$(document).ready(function() {
    // Evitar overflow horizontal
    $('body, html').css('overflow-x', 'hidden');

    // Monitorar redimensionamento da janela
    $(window).on('resize', function() {
        setTimeout(() => {
            $('.select2-container').each(function() {
                $(this).css('max-width', '100%');
            });
        }, 100);
    });

    // Observar mudanças no accordion
    $('.accordion-button').on('click', function() {
        const target = $(this).data('bs-target');

        setTimeout(() => {
            // Corrigir layout após abertura do accordion
            $(target).find('.select2-container').css('max-width', '100%');

            // Reinicializar Select2 se necessário
            if (typeof window.themeManager !== 'undefined') {
                window.themeManager.updateSelect2Theme();
            }
        }, 350);
    });

    // Listener para mudanças de tema via CSS
    const themeObserver = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.type === 'attributes' &&
                (mutation.attributeName === 'data-bs-theme' ||
                 mutation.attributeName === 'class')) {

                setTimeout(() => {
                    if (typeof window.themeManager !== 'undefined') {
                        window.themeManager.updateSelect2Theme();
                    }
                }, 100);
            }
        });
    });

    // Observar mudanças no HTML e body
    themeObserver.observe(document.documentElement, {
        attributes: true,
        attributeFilter: ['data-bs-theme', 'class']
    });

    themeObserver.observe(document.body, {
        attributes: true,
        attributeFilter: ['data-bs-theme', 'class']
    });
});
</script>
@endpush