@extends('layouts.app')

@section('title', 'Novo Patrocínio')

@push('styles-custom')
<!-- Select2 CSS -->
<link href="{{ asset('vendors/select2/css/select2.min.css') }}" rel="stylesheet" />
<link href="{{ asset('vendors/flatpickr/flatpickr.min.css') }}" rel="stylesheet" />
<style>
    .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);
    }

    .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;
    }

    .eventos-container .evento-item {
        background-color: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 0.375rem;
        padding: 1rem;
        margin-bottom: 0.5rem;
        position: relative;
    }

    .eventos-container .evento-item:hover {
        border-color: #007bff;
    }

    .proporcionalidade-manual {
        display: none;
    }

    .percentual-input {
        width: 80px;
        text-align: center;
    }

    .total-percentual {
        font-weight: bold;
        font-size: 1.1rem;
    }

    .total-percentual.text-danger {
        animation: shake 0.5s;
    }

    @keyframes shake {
        0%, 100% { transform: translateX(0); }
        25% { transform: translateX(-5px); }
        75% { transform: translateX(5px); }
    }
</style>
@endpush

@section('content')
<div class="container-fluid">
    <div class="content patrocinios-content">
        <nav class="mb-3" aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{{ route('patrocinios.index') }}">Patrocínios</a></li>
                <li class="breadcrumb-item active">Novo Patrocínio</li>
            </ol>
        </nav>

        @include('patrocinios.partials.validation-errors')

        @include('patrocinios.partials.form', [
            'action' => route('patrocinios.store'),
            'method' => 'POST',
            'patrocinio' => null,
            'clientes' => $clientes,
            'empresas' => $empresas,
            'eventos' => $eventos,
            'planos' => $planos,
            'artistas' => $artistas,
            'contasBancarias' => $contasBancarias,
        ])
    </div>
</div>
@endsection

@push('scripts-custom')
<script src="{{ asset('vendors/select2/js/select2.min.js') }}"></script>
<script src="{{ asset('vendors/select2/js/i18n/pt-BR.js') }}"></script>
<script src="{{ asset('vendors/jquery.mask/jquery.mask.min.js') }}"></script>
<script src="{{ asset('vendors/flatpickr/flatpickr.min.js') }}"></script>
<script src="{{ asset('vendors/flatpickr/l10n/pt.js') }}"></script>
<script src="{{ asset('vendors/sweetalert2/sweetalert2.all.min.js') }}"></script>

@include('patrocinios.scripts.form-scripts')
@endpush