@extends('layouts.app')

@section('title', 'Editar Saque com Distribuição')

@push('styles-custom')
    <link href="{{ asset('vendors/select2/css/select2.min.css') }}" rel="stylesheet" />
    <style>
        .select2-container .select2-selection--single {
            height: 38px;
            border: 1px solid var(--phoenix-border-color);
        }
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 36px;
            color: var(--phoenix-body-color);
        }
        .select2-dropdown {
            border: 1px solid var(--phoenix-border-color);
        }
        
        .distribuicao-item {
            border: 1px solid #dee2e6;
            border-radius: 0.375rem;
            padding: 1rem;
            padding-top: 2.5rem; /* Espaço para o botão */
            margin-bottom: 1rem;
            background-color: #f8f9fa;
            position: relative; /* Importante para o posicionamento absoluto funcionar */
        }

        .distribuicao-item:last-child {
            margin-bottom: 0;
        }

        .btn-remove-item {
            position: absolute;
            top: 0.75rem;
            right: 0.75rem;
            z-index: 10; /* Garantir que fique por cima */
            border-radius: 50%; /* Botão redondo */
            width: 2rem;
            height: 2rem;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Garantir que o container de distribuições não interfira */
        #distribuicoesContainer {
            position: relative;
        }

        /* Estilo adicional para o botão de adicionar */
        #btnAddDistribuicao {
            position: relative;
            z-index: 1;
        }
    </style>
@endpush

@section('content')
<div class="content pt-3">
    <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('saques.index') }}">Saques</a></li>
            <li class="breadcrumb-item active">Editar Saque #{{ $saque->id }}</li>
        </ol>
    </nav>

    <div class="row g-3 mb-4">
        <div class="col-12">
            <h2 class="mb-0">
                <span class="fas fa-edit text-primary me-3"></span>
                Editar Saque #{{ $saque->id }}
            </h2>
        </div>
    </div>

    <form action="{{ route('saques.update', $saque) }}" method="POST" id="saqueForm">
        @csrf
        @method('PUT')

        {{-- Campos hidden para manter os filtros --}}
        @foreach(request()->only(['status_distribuicao', 'periodo', 'data_inicio', 'data_fim', 'data_especifica', 'search_field', 'q', 'search_field2', 'q2']) as $key => $value)
            @if($value)
                <input type="hidden" name="{{ $key }}" value="{{ $value }}">
            @endif
        @endforeach

        @include('saques.partials.form', ['isEdit' => true])

        <div class="row mt-4">
            <div class="col-12 text-end">
                <button type="submit" class="btn btn-primary">
                    <span class="fas fa-save me-2"></span>Atualizar Saque
                </button>
                <a href="{{ route('saques.index') }}{{ request()->getQueryString() ? '?' . request()->getQueryString() : '' }}" class="btn btn-secondary">
                    <span class="fas fa-times me-2"></span>Cancelar
                </a>
            </div>
        </div>
    </form>
</div>
@endsection

@push('scripts-custom')
    <script src="{{ asset('vendors/select2/js/select2.full.min.js') }}"></script>
    <script src="{{ asset('vendors/select2/js/i18n/pt-BR.js') }}"></script>
    
    <script>
    $(document).ready(function() {
        // Configuração padrão do Select2
        $.fn.select2.defaults.set("language", "pt-BR");
        $.fn.select2.defaults.set("theme", "default");
        $.fn.select2.defaults.set("width", "100%");

        // Inicializar selects principais
        $('#conta_origem_id, #plano_de_conta_origem_id').select2({
            placeholder: 'Selecione uma opção',
            allowClear: true
        });
        
        // Inicializar selects de distribuição com configurações específicas
        $('.fornecedor-beneficiario').select2({
            placeholder: 'Selecione um fornecedor',
            allowClear: true
        });
        
        $('.select-conta-destino').select2({
            placeholder: 'Selecione uma conta',
            allowClear: true
        });
        
        $('.select-plano-conta').select2({
            placeholder: 'Selecione um plano de conta',
            allowClear: true
        });
    });
    </script>

    {{-- Máscara de valor em Real brasileiro --}}
    @include('saques.scripts.mascara-valor')

    {{-- Máscara para número de cheque --}}
    @include('saques.scripts.mascara-cheque')

    {{-- Script para distribuições --}}
    @include('saques.scripts.distribuicoes')
@endpush