@extends('layouts.app', ['activePage' => 'egresos', 'menuParent' => '', 'titlePage' => __('Bancos - Captura de egresos')])

@section('content')
@include('includes.tailwind')
<div class="content">
    <div class="container-fluid mt-4">
        <div class="row mb-4">
            <div class="col-12">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h5 class="text-2xl font-bold text-gray-900 mb-1">Capturar egreso</h5>
                        <p class="text-sm text-gray-600">Registra los egresos bancarios con los campos configurados</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="bg-white rounded-lg shadow-md mb-4">
                    <div class="p-6">
                        <div class="grid grid-cols-12 gap-4">
                            <div class="col-span-3">
                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                    Monto del egreso: <span class="text-red-500">*</span>
                                </label>
                                <div class="relative">
                                    <span class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500 font-medium">$</span>
                                    <input type="number"
                                        class="w-full pl-8 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                                        id="monto_egreso"
                                        placeholder="Ingresa una cantidad o escribe 0"
                                        required>
                                </div>
                            </div>

                            <div class="col-span-3">
                                <label class="block text-sm font-medium text-gray-700 mb-1">Proveedor:</label>
                                <select id="proveedor"
                                    class="w-full pl-8 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 select2"
                                    required>
                                    <option value="">-Selecciona-</option>
                                    @foreach($data['proveedores'] ?? [] as $proveedor)
                                    <option value="{{ $proveedor->id }}"> ({{ $proveedor->rfc }}) {{ $proveedor->nombre }}</option>
                                    @endforeach
                                </select>
                                @include('bancos.includes.proveedorStoreComponent')
                            </div>

                            <div class="col-span-3">
                                <label class="block text-sm font-medium text-gray-700 mb-1">Fecha del egreso: <span class="text-red-500">*</span></label>
                                <div class="relative">
                                    <input type="date"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                                        id="fecha_egreso"
                                        required>
                                </div>
                            </div>

                            <div class="col-span-3">
                                <label class="block text-sm font-medium text-gray-700 mb-1">Categoría: <span class="text-red-500">*</span></label>
                                <select id="categoria"
                                    class="w-full pl-8 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 select2"
                                    required>
                                    <option value="">-Selecciona-</option>
                                    @foreach($data['categorias'] ?? [] as $categoria)
                                    <option value="{{ $categoria->id }}">{{ $categoria->nombre }}</option>
                                    @endforeach
                                </select>
                                @include('bancos.includes.categoriasStoreComponent')
                            </div>

                            <div class="col-span-3">
                                <label class="block text-sm font-medium text-gray-700 mb-1">Cuenta: <span class="text-red-500">*</span></label>
                                <select id="cuenta"
                                    class="w-full pl-8 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 select2"
                                    required>
                                    <option value="">-Selecciona-</option>
                                    @foreach($data['cuentas'] ?? [] as $cuenta)
                                    <option value="{{ $cuenta->id }}"> {{ $cuenta->nombre }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-span-3">
                                <label class="block text-sm font-medium text-gray-700 mb-1">Forma de pago: <span class="text-red-500">*</span></label>
                                <select id="forma_pago"
                                    class="w-full pl-8 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 select2"
                                    required>
                                    <option value="">-Selecciona-</option>
                                    @foreach($data['formasPago'] ?? [] as $formaPago)
                                    <option value="{{ $formaPago->id }}">({{$formaPago->claveSat}}) {{ $formaPago->nombre }}</option>
                                    @endforeach
                                </select>
                                @include('bancos.includes.formaPagoStoreComponent')
                            </div>
                            <div class="col-span-3">
                                <label class="block text-sm font-medium text-gray-700 mb-1">Referencia:</label>
                                <input type="text"
                                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                                    id="referencia"
                                    placeholder="Agrega una referencia (opcional)">
                            </div>
                            <div class="col-span-3">
                                <label class="block text-sm font-medium text-gray-700 mb-1">Folio del recibo:</label>
                                <input type="text"
                                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                                    id="folio_recibo"
                                    placeholder="Ingresa el folio (opcional)">
                            </div>
                            <div class="col-span-12">
                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                    Concepto: <span class="text-red-500">*</span>
                                </label>
                                <input type="text"
                                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                                    id="concepto_egreso"
                                    placeholder="Ingresa la descripción del egreso"
                                    required>
                            </div>
                        </div>

                        <div class="grid grid-cols-12 gap-4 mt-4">
                            <div class="col-span-12">
                                <label class="block text-sm font-medium text-gray-700 mb-1">Notas del recibo:</label>
                                <textarea id="notas_recibo"
                                    rows="3"
                                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                                    placeholder="Escribe una nota o comentario..."></textarea>
                            </div>
                        </div>
                        {{-- Campos dinámicos de CamposExcel --}}
                        @include('bancos.includes.inputsCamposExcelComponent', ['data' => $data])
                        @include('bancos.includes.buttonSaveDataMovimientos',['tipoMovimiento' => $data['tipoMovimiento'] ?? 'ingreso'])
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<style>
    .select2-container {
        width: 100% !important;
    }

    .select2-container .select2-selection--single {
        height: 40px !important;
    }

    .select2-container .select2-selection--single .select2-selection__rendered {
        line-height: 40px !important;
    }

    .ui-autocomplete-input {
        font-size: 14px;
        z-index: 900;
        position: relative;
    }

    .ui-menu .ui-menu-item a {
        font-size: 12px;
    }

    .ui-autocomplete {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1100 !important;
        float: left;
        display: none;
        padding: 4px 0;
        margin: 2px 0 0 0;
        list-style: none;
        background-color: #ffffff;
        border-color: #ccc;
        border-color: rgba(0, 0, 0, 0.2);
        border-style: solid;
        border-width: 1px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
        -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        -webkit-background-clip: padding-box;
        -moz-background-clip: padding;
        background-clip: padding-box;
    }

    .ui-autocomplete {
        max-height: 200px;
        overflow-y: auto;
        /* prevent horizontal scrollbar */
        overflow-x: hidden;
        /* add padding to account for vertical scrollbar */
        padding-right: 20px;
    }

    .ui-menu-item>a.ui-corner-all {
        display: block;
        padding: 3px 15px;
        clear: both;
        font-weight: normal;
        line-height: 18px;
        color: #555555;
        white-space: nowrap;
        text-decoration: none;
    }

    .ui-state-hover,
    .ui-state-active {
        color: #ffffff;
        text-decoration: none;
        background-color: #0088cc;
        border-radius: 0px;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        background-image: none;
    }
</style>

@endsection

@push('js')
<script>
    $(document).ready(function() {

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        // Inicializar Select2 para campos select dinámicos
        $('.select2.campo-excel-dinamico').select2({
            width: '100%',
            placeholder: '-Selecciona-'
        });

        $('#cuenta').select2({
            width: '100%',
            placeholder: '-Selecciona-',
        })
    });



    
</script>
@endpush