@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="text"
                                        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-3 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 select2">
                                    <option value="">No especificado</option>
                                </select>
                            </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 y sub-categoría: <span class="text-red-500">*</span></label>
                                <select id="categoria_subcategoria"
                                    class="w-full pl-3 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>
                                </select>
                            </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-3 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>
                                </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-3 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>
                                </select>
                            </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])
                    </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 los selects principales
            $('#tipo_egreso, #categoria_subcategoria, #proveedor, #forma_pago, #cuenta').select2({
                width: '100%',
                placeholder: '-Selecciona-'
            });

            // Inicializar Select2 para campos select dinámicos
            $('.select2.campo-excel-dinamico').select2({
                width: '100%',
                placeholder: '-Selecciona-'
            });
        });
    </script>
    @endpush