@extends('layouts.app', ['activePage' => 'proveedores', 'menuParent' => 'catalogos', 'titlePage' => __('Contabilidad - Proveedores')])
@section('content')
@include('includes.tailwind')

<div class="content">
    <div class="container-fluid mt-4">
        <div class="row mb-2">
            <div class="col-6">
                <h6 class="text-xl font-semibold text-gray-800">Listado de proveedores</h6>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="bg-white rounded-lg shadow-md">
                    <div class="p-6">
                        <div class="grid grid-cols-12 gap-4 mb-2">
                            <div class="col-span-3">
                                <label class="block text-sm font-medium text-gray-700 mb-1">Tipo de tercero:</label>
                                <select id="tipoCuentaFilter" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                    <option value="" selected>- Selecciona -</option>
                                    @foreach($optionTipoTercero as $tipoTercero)
                                    <option value="{{ $tipoTercero->id }}">{{ $tipoTercero->descripcion }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-span-3">
                                <label class="block text-sm font-medium text-gray-700 mb-1">Tipo de operacion:</label>
                                <select id="tipoCuentaFilter" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                    <option value="" selected>- Selecciona -</option>
                                    @foreach($optionTipoOperacion as $tipoOperacion)
                                    <option value="{{ $tipoOperacion->id }}">{{ $tipoOperacion->descripcion }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-span-6 mt-4">
                                <button class="bg-[#0A415F] hover:bg-[#083549] text-white px-4 py-1.5 text-sm rounded-md mr-2 transition-colors duration-200" onclick="getProveedores()">
                                    <i class="material-icons align-middle text-sm">search</i> Buscar
                                </button>
                                <button class="bg-[#0A415F] hover:bg-[#083549] text-white px-4 py-1.5 text-sm rounded-md mr-2 transition-colors duration-200" onclick="abrirModalProveedor()">
                                    <i class="material-icons align-middle text-sm">add</i> Nuevo proveedor
                                </button>
                            </div>
                        </div>
                        <div class="table-scroll">
                            <table class="min-w-full" id="lits-proveedores">
                                <thead class="sticky-top bg-gray-50 px-6 py-3 text-[10px] font-semibold text-left font-medium text-gray-500 uppercase tracking-wider">
                                    <tr>
                                        <th></th>
                                        <th></th>
                                        <th class="px-2 py-2">Razón social</th>
                                        <th class="px-2 py-2">RFC</th>
                                        <th class="px-2 py-2">Tipo proveedor</th>
                                        <th class="px-2 py-2">Tipo de operación</th>
                                        <th class="px-2 py-2">Tipo de tercero</th>
                                        <th class="px-2 py-2">Cuenta contable</th>
                                        <th class="px-2 py-2">Cuenta contable gastos</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal para crear/editar proveedor -->
<div class="modal fade draggable" id="modalProveedor" tabindex="-1" role="dialog" aria-labelledby="modalProveedorLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header bg-gray-50 border-b border-gray-200 px-6 py-4">
                <h5 class="modal-title text-lg font-semibold text-gray-900" id="modalProveedorLabel">Nuevo proveedor</h5>
                <button type="button" class="close text-gray-400 hover:text-gray-500" data-dismiss="modal" aria-label="Close">
                    <i class="material-icons">close</i>
                </button>
            </div>
            <div class="modal-body p-6">
                <input type="hidden" id="proveedor_id" name="id">
                <div class="grid grid-cols-12 gap-4 mb-2">
                    <div class="col-span-6">
                        <label for="razon_social" class="block text-sm font-medium text-gray-700 mb-1">Razón social <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="razon_social" name="razon_social" placeholder="Ingrese la razon social del proveedor" required>
                    </div>
                    <div class="col-span-6">
                        <label for="rfc" class="block text-sm font-medium text-gray-700 mb-1">RFC: <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="rfc" name="rfc" placeholder="Ingrese el RFC del proveedor" required>
                    </div>
                </div>
                <div class="grid grid-cols-12 gap-4 mb-2">
                    <div class="col-span-6">
                        <label for="tipo_proveedor" class="block text-sm font-medium text-gray-700 mb-1">Tipo de proveedor <span class="text-red-500">*</span></label>
                        <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 select2-modal " id="tipo_proveedor" name="tipo_proveedor" required>
                            <option value="">- Selecciona -</option>
                            @foreach($optionTipoProveedores as $tipoProveedor)
                            <option value="{{ $tipoProveedor->id }}">{{ $tipoProveedor->descripcion }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-span-6">
                        <label for="tipo_operacion" class="block text-sm font-medium text-gray-700 mb-1">Tipo de operación <span class="text-red-500">*</span></label>
                        <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 select2-modal " id="tipo_operacion" name="tipo_operacion" required>
                            <option value="">- Selecciona -</option>
                            @foreach($optionTipoOperacion as $tipoOperacion)
                            <option value="{{ $tipoOperacion->id }}">{{ $tipoOperacion->descripcion }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="grid grid-cols-12 gap-4 mb-2">
                    <div class="col-span-4">
                        <label for="tipo_tercero" class="block text-sm font-medium text-gray-700 mb-1">Tipo de tercero <span class="text-red-500">*</span></label>
                        <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 select2-modal " id="tipo_tercero" name="tipo_tercero" required>
                            <option value="">- Selecciona -</option>
                            @foreach($optionTipoTercero as $tipoTercero)
                            <option value="{{ $tipoTercero->id }}">{{ $tipoTercero->descripcion }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-span-4">
                        <label for="id_cuenta_contable" class="block text-sm font-medium text-gray-700 mb-1">Cuenta contable <span class="text-red-500">*</span></label>
                        <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 select2-modal" id="id_cuenta_contable" name="id_cuenta_contable" required>
                            <option value="">- Selecciona -</option>
                            @foreach($cuentasContables as $cuenta)
                            <option value="{{ $cuenta->id }}">({{ $cuenta->numero_cuenta }}) {{ $cuenta->cuenta }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-span-4">
                        <label for="id_cuenta_contable_gastos" class="block text-sm font-medium text-gray-700 mb-1">Cuenta contable gastos <span class="text-red-500">*</span></label>
                        <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 select2-modal" id="id_cuenta_contable_gastos" name="id_cuenta_contable_gastos" required>
                            <option value="">- Selecciona -</option>
                            @foreach($cuentasContables as $cuenta)
                            <option value="{{ $cuenta->id }}">({{ $cuenta->numero_cuenta }}) {{ $cuenta->cuenta }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
            <div class="modal-footer px-6 py-4 bg-gray-50 border-t border-gray-200">
                <button type="button" class="bg-transparent text-red-500 hover:text-red-600 mr-2 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200" data-dismiss="modal">Cancelar</button>
                <button type="button" class="bg-[#0A415F] hover:bg-[#083549] text-white px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200" onclick="guardarProveedor()">Guardar</button>
            </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;
    }

    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_processing,
    .dataTables_wrapper .dataTables_paginate {
        font-size: 10px;
    }

    .dataTables_wrapper .dataTables_length select,
    .dataTables_wrapper .dataTables_filter input {
        font-size: 10px !important;
    }

    table.dataTable thead th,
    table.dataTable thead td {
        font-size: 10px !important;
    }

    table.dataTable tfoot th,
    table.dataTable tfoot td {
        font-size: 11px !important;
    }

    table.dataTable tbody td {
        font-size: 11px !important;
    }

    table.dataTable tbody tr:hover {
        background-color: #f8f9fa;
        cursor: pointer;
    }

    .dataTables_wrapper .dataTables_filter input {
        padding: 0.25rem 0.5rem !important;
        border-radius: 0.375rem !important;
        border: 1px solid #e2e8f0 !important;
    }

    .dataTables_wrapper .dataTables_filter input:focus {
        outline: none !important;
        border-color: #0A415F !important;
        box-shadow: 0 0 0 2px rgba(10, 65, 95, 0.1) !important;
    }

    .table-scroll {
        max-height: 650px;
        overflow-y: auto;
    }
</style>
@endsection

@push('js')
<script>
    $(document).ready(function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

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

        $('.select2-modal').select2({
            placeholder: "-Selecciona-",
            width: '100%',
            dropdownParent: $('#modalProveedor')
        });

        // Establecer fecha actual en el campo de fecha saldo inicial
        $('#fecha_saldo_inicial').val(new Date().toISOString().split('T')[0]);

        // Llamar a la función getProveedores
        getProveedores();

    });

    function getProveedores() {
        $('#lits-proveedores').dataTable().fnDestroy();

        var table = $('#lits-proveedores').DataTable({
            lengthMenu: [10, 15, 20, 50, 100, 200, 500],
            dom: 'Bfrtip',
            language: {
                url: "{{asset('material/datatable_sp.json')}}"
            },
            ajax: {
                url: "{{route('proveedores.get-proveedores')}}",
                type: "POST",
            },
            createdRow: function(row, data, rowIndex) {
                $.each($('td', row), function(colIndex) {
                    if (colIndex !== 1) { // Excluir columna de acciones
                        $(this).attr('title', 'Ver detalles del proveedor');
                    }
                });
            },
            columns: [{
                    data: "id",
                    visible: false
                },
                {
                    data: "acciones",
                    orderable: false,
                    searchable: false,
                },
                {
                    data: "razon_social",
                },
                {
                    data: "rfc",
                },
                {
                    data: "tipo_proveedor",
                },
                {
                    data: "tipo_operacion",
                },
                {
                    data: "tipo_tercero",
                },
                {
                    data: "cuenta_contable",
                },
                {
                    data: "cuenta_contable_gastos",
                },
            ],
            buttons: [{
                    extend: 'excel',
                    text: 'Exportar a Excel',
                    className: 'bg-[#0A415F] hover:bg-[#083549] text-white px-4 py-2 rounded-md text-xs font-medium transition-colors duration-200',
                    exportOptions: {
                        columns: ':not(:first-child)',
                    },
                },
                {
                    extend: 'pdf',
                    className: 'bg-[#0A415F] hover:bg-[#083549] text-white px-4 py-2 rounded-md text-xs font-medium transition-colors duration-200',
                    text: 'Exportar a PDF',
                    title: 'Listado de proveedores',
                    orientation: 'landscape',
                    exportOptions: {
                        columns: ':not(:first-child)',
                    },
                    customize: function(doc) {
                        doc.defaultStyle.fontSize = 8;
                        doc.styles.tableHeader.fontSize = 8;
                    }
                }
            ],
            order: [
                [3, "asc"]
            ],
        });

        table.on('click', 'tr', function(e) {
            var target = $(e.target);
            var cell = table.cell(target);

            if (!cell || !cell.index()) {
                return;
            }

            var columnIndex = cell.index().column;
            var columnTitle = table.column(columnIndex).header().textContent.trim();

            if (columnTitle === 'Acciones' || columnTitle === 'Estatus') {
                return;
            }

            var row = table.row(this).data();
            if (!row) {
                return;
            }

        });
    }

    function abrirModalProveedor() {
        $('#modalProveedorLabel').text('Nuevo proveedor');
        $('#proveedor_id').val('');
        $('#razon_social').val('');
        $('#rfc').val('');
        $('#tipo_proveedor').val('').trigger('change');
        $('#tipo_operacion').val('').trigger('change');
        $('#tipo_tercero').val('').trigger('change');
        $('#id_cuenta_contable').val('').trigger('change');
        $('#id_cuenta_contable_gastos').val('').trigger('change');
        $('#modalProveedor').modal('show');
    }

    function editarProveedor(id) {
        $.ajax({
            url: "{{route('proveedores.get-proveedor', ['id' => ':id'])}}".replace(':id', id),
            type: 'GET',
            success: function(response) {
                $('#modalProveedorLabel').text('Editar proveedor');
                $('#proveedor_id').val(response.id);
                $('#razon_social').val(response.razon_social);
                $('#rfc').val(response.rfc);
                $('#tipo_proveedor').val(response.tipo_proveedor).trigger('change');
                $('#tipo_operacion').val(response.tipo_operacion).trigger('change');
                $('#tipo_tercero').val(response.tipo_tercero).trigger('change');
                $('#id_cuenta_contable').val(response.id_cuenta_contable).trigger('change');
                $('#id_cuenta_contable_gastos').val(response.id_cuenta_contable_gastos).trigger('change');
                $('#modalProveedor').modal('show');
            },
            error: function(xhr) {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Error al cargar los datos del proveedor',
                    confirmButtonColor: '#0A415F'
                });
            }
        });
    }

    function guardarProveedor() {
        var id = $('#proveedor_id').val();

        $.ajax({
            url: "{{route('proveedores.save-proveedor')}}",
            type: 'POST',
            data: {
                id: id,
                razon_social: $('#razon_social').val(),
                rfc: $('#rfc').val(),
                tipo_proveedor: $('#tipo_proveedor option:selected').val(),
                tipo_operacion: $('#tipo_operacion option:selected').val(),
                tipo_tercero: $('#tipo_tercero option:selected').val(),
                id_cuenta_contable: $('#id_cuenta_contable option:selected').val(),
                id_cuenta_contable_gastos: $('#id_cuenta_contable_gastos option:selected').val()
                
            },
            beforeSend: function() {
                $('#loadingLoad').modal('show');
            },
            success: function(response) {
                $('#modalProveedor').modal('hide');
                Swal.fire({
                    icon: 'success',
                    title: 'Éxito',
                    text: id ? 'Proveedor actualizado correctamente' : 'Banco creado correctamente',
                    confirmButtonColor: '#0A415F'
                }).then(() => {
                    getProveedores();
                });
            },
            error: function(xhr) {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Error al guardar el proveedor',
                    confirmButtonColor: '#0A415F'
                });
            },
            complete: function() {
                setTimeout(function() {
                    $('#loadingLoad').modal('hide');
                }, 1000);
            }
        });
    }

    function eliminarProveedor(id) {
        Swal.fire({
            title: '¿Está seguro?',
            text: "Esta acción no se puede deshacer",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#0A415F',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Sí, eliminar',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: "{{route('proveedores.delete-proveedor', ['id' => ':id'])}}".replace(':id', id),
                    type: 'DELETE',
                    success: function(response) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Eliminado',
                            text: 'Proveedor eliminado correctamente',
                            confirmButtonColor: '#0A415F'
                        }).then(() => {
                            getProveedores();
                        });
                    },
                    error: function(xhr) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'Error al eliminar el proveedor',
                            confirmButtonColor: '#0A415F'
                        });
                    }
                });
            }
        });
    }
</script>
@endpush