@extends('layouts.app', ['activePage' => 'proveedores', 'menuParent' => 'catalogos', 'titlePage' => ''])

@section('content')
@include('includes.tailwind')

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

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

    /* Form input style */
    .pf-input {
        width: 100%;
        padding: 7px 12px;
        border: 1px solid #d1d5db;
        border-radius: 6px;
        font-size: 13px;
        color: #1e293b;
        transition: border-color 0.15s, box-shadow 0.15s;
        outline: none;
    }

    .pf-input:focus {
        border-color: #3b82f6;
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    }


    /* + circle button */
    .pf-add-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 6px;
        background: #e0f2fe;
        color: #0369a1;
        font-size: 18px;
        font-weight: 700;
        border: none;
        cursor: pointer;
        flex-shrink: 0;
        transition: background 0.15s;
    }

    .pf-add-btn:hover {
        background: #bae6fd;
    }
</style>

<div class="content">
    <div class="container-fluid mt-4">
        <div class="bg-white border border-slate-200 rounded-lg shadow-sm px-4 pt-4 pb-3 mb-4">
            <div class="flex items-center justify-between flex-wrap gap-3">
                <div class="flex items-center gap-3">
                    <span class="h-10 w-10 rounded-lg border border-slate-900 flex items-center justify-center text-slate-900">
                        <i class="material-icons text-base">flight_takeoff</i>
                    </span>
                    <div>
                        <h6 class="text-xl font-semibold text-slate-900 mb-0">
                            @if(isset($data['id'])) Edición de proveedor @else Alta de proveedor @endif
                            <span id="titlepage" class="text-base font-normal text-slate-500 ml-1"></span>
                        </h6>
                        <p class="text-sm text-slate-500 mb-0">Completa la información del proveedor en las pestañas disponibles.</p>
                    </div>
                </div>
                <a href="{{ route('travelagent.catalogos.proveedores.index') }}"
                    class="inline-flex items-center gap-2 bg-slate-100 hover:bg-slate-200 text-slate-700 px-3 py-2 text-sm rounded-md font-medium transition-colors duration-200">
                    <i class="material-icons text-base leading-none">arrow_back</i>
                    Volver al listado
                </a>
            </div>
        </div>
        <div class="bg-white border border-slate-200 rounded-lg shadow-sm">
            <div class="p-4" style="padding: 1.5rem;">
                <section class="bg-gray-25 rounded-lg border border-gray-200 p-3 mb-3">
                    <div class="flex items-center gap-3 mb-4">
                        <span class="h-10 w-10 rounded-lg border border-slate-900 flex items-center justify-center text-lg text-slate-900"> <i class="material-icons text-lg text-slate-500">info</i></span>
                        <div>
                            <h6 class="text-base font-semibold text-slate-900">INFORMACIÓN PRINCIPAL</h6>
                            <p class="text-sm text-slate-700 mb-0">Completa la información principal del proveedor.</p>
                        </div>
                    </div>
                    <div class="grid sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-4 mb-3">
                        <div>
                            <label class="block text-sm font-medium text-slate-700">Tipo de proveedor: <span class="text-red-500">*</span></label>
                            <select id="id_tipo_proveedor" class="js-select2">
                                <option value="0" selected disabled>-Selecciona-</option>
                                @foreach ($data['tipo_p'] as $fp)
                                <option value="{{$fp->id}}" descripcion="{{$fp->descripcion}}">{{$fp->descripcion}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700">Código / Clave IATA:</label>
                            <input type="text" class="pf-input" id="codigo">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700">RFC: <span class="text-red-500">*</span></label>
                            <input type="text" class="pf-input" id="RFC">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700">Razón social: <span class="text-red-500">*</span></label>
                            <input type="text" class="pf-input" id="razon_social">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700">Nombre comercial: <span class="text-red-500">*</span></label>
                            <input type="text" class="pf-input" id="nombre_comercial">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700">Nombre del contacto:</label>
                            <input type="text" class="pf-input" id="contacto">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700">Correo:</label>
                            <input type="email" class="pf-input" id="correo">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700">Teléfono:</label>
                            <input type="text" class="pf-input" id="telefono">
                        </div>
                    </div>
                </section>
                <section class="bg-gray-25 rounded-lg border border-gray-200 p-3">
                    <div class="flex items-center gap-3 mb-4">
                        <span class="h-10 w-10 rounded-lg border border-slate-900 flex items-center justify-center text-lg text-slate-900"> <i class="material-icons text-lg text-slate-500">location_on</i></span>
                        <div>
                            <h6 class="text-base font-semibold text-slate-900">DOMICILIO</h6>
                            <p class="text-sm text-slate-700 mb-0">Completa la información del domicilio del proveedor.</p>
                        </div>
                    </div>
                    <div class="grid sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-5 gap-4 mb-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-700">Calle:</label>
                            <input type="text" class="pf-input" id="calle">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700">Número exterior:</label>
                            <input type="text" class="pf-input" id="numero_exterior">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700">Colonia:</label>
                            <input type="text" class="pf-input" id="colonia">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700">Ciudad:</label>
                            <input type="text" class="pf-input" id="ciudad">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700">Código postal:</label>
                            <input type="text" class="pf-input" id="cp">
                        </div>
                    </div>
                    <div class="grid sm:grid-cols-2 md:grid-cols-3 gap-4 mb-5">
                        <div class="flex gap-2 items-end">
                            <div class="flex-1">
                                <label class="block text-sm font-medium text-slate-700">País:</label>
                                <select id="id_pais" class="js-select2" onchange="getEstado();">
                                    <option value="0" selected>-Selecciona-</option>
                                    @foreach($data['paises'] as $p)
                                    <option value="{{$p->idpais}}" nombre="{{$p->pais}}">{{$p->pais}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <button class="pf-add-btn" onclick="agregarPEM(1)" type="button" title="Agregar país">+</button>
                        </div>
                        <div class="flex gap-2 items-end">
                            <div class="flex-1">
                                <label class="block text-sm font-medium text-slate-700">Estado:</label>
                                <select id="id_estado" class="js-select2" onchange="getMunicipio();">
                                    <option value="0" selected disabled>-Selecciona-</option>
                                </select>
                            </div>
                            <button class="pf-add-btn" onclick="agregarPEM(2)" type="button" title="Agregar estado">+</button>
                        </div>
                        <div class="flex gap-2 items-end">
                            <div class="flex-1">
                                <label class="block text-sm font-medium text-slate-700">Municipio:</label>
                                <select id="id_municipio" class="js-select2">
                                    <option value="0" selected disabled>-Selecciona-</option>
                                </select>
                            </div>
                            <button class="pf-add-btn" onclick="agregarPEM(3)" type="button" title="Agregar municipio">+</button>
                        </div>
                    </div>

                    <div class="flex justify-end gap-2 border-t border-slate-100 pt-4">
                        <button type="button" onclick="activateTab('body_adicionales')"
                            class="inline-flex items-center gap-1 bg-slate-100 hover:bg-slate-200 text-slate-700 px-4 py-2 text-sm rounded-md font-medium transition-colors duration-200">
                            Siguiente <i class="material-icons text-base leading-none">navigate_next</i>
                        </button>
                        <button type="button" onclick="guardarProveedor()"
                            class="inline-flex items-center gap-2 bg-[#0A415F] hover:bg-[#083549] text-white px-4 py-2 text-sm rounded-md font-medium transition-colors duration-200">
                            <i class="material-icons text-base leading-none">save</i> Guardar
                        </button>
                    </div>
                </section>
            </div>
        </div>
    </div>
</div>

<input type="hidden" id="idProveedorHidden" @if(isset($data['proveedor'])) value="{{ $data['proveedor']->id }}" @else value="" @endif>

@include ('configuracion.addPME')

@endsection
@push('js')
<script>
    function initSelect2(context) {
        if (!$.fn.select2) {
            return;
        }
        var $scope = context ? $(context) : $(document);
        $scope.find('.js-select2').each(function() {
            var $select = $(this);
            if ($select.hasClass('select2-hidden-accessible')) {
                return;
            }
            $select.select2({
                width: '100%',
                placeholder: '-Selecciona-',
                allowClear: false
            });
        });
    }

    function refreshSelect2(selector) {
        if (!$.fn.select2) {
            return;
        }
        if (selector) {
            $(selector).trigger('change.select2');
            return;
        }
        $('.js-select2').trigger('change.select2');
    }

    function getSelectedValue(selector, fallback) {
        var $el = $(selector);
        if (!$el.length) {
            return fallback || '';
        }

        var value = $el.val();
        return value !== undefined && value !== null ? value : (fallback || '');
    }

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

        @if(isset($data['proveedor']))
        getInfoProveedor(`{{$data['id']}}`)
        @endif

        initSelect2();

    });

    function getEstado(id_pais, id_estado) {

        if (id_pais == undefined) {
            var id_pais = $('#id_pais option:selected').val();
        }
        $.ajax({
                url: "{{ url('configuracion/empresa/get_estado')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    id: id_pais,
                },
            })
            .done(function(resp) {
                $('#id_estado').empty()
                $("#id_estado").prop("disabled", false);

                $.each(resp.data.estados, function(key, value) {
                    $('#id_estado')
                        .append('<option value="' + value['idestado'] + '" nombre="' + value['estado'] + '">' + value['estado'] + '</option>');
                });
                $('#id_estado').val(id_estado);
                refreshSelect2('#id_estado');
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
    }

    function getMunicipio(id_estado, id_municipio) {

        if (id_estado == undefined) {
            var id_estado = $('#id_estado option:selected').val();
        }
        $.ajax({
                url: "{{ url('configuracion/empresa/get_municipio')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    id: id_estado,
                },
            })
            .done(function(resp) {
                $('#id_municipio').empty()
                $("#id_municipio").prop("disabled", false);
                $.each(resp.data.municipios, function(key, value) {
                    $('#id_municipio')
                        .append('<option value="' + value['idmunicipio'] + '"  nombre="' + value['municipio'] + '">' + value['municipio'] + '</option>');
                });
                $('#id_municipio').val(id_municipio);
                refreshSelect2('#id_municipio');
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
    }

    function guardarProveedor() {

        var idProveedor = $('#idProveedorHidden').val();
        var id_tipo_proveedor = getSelectedValue('#id_tipo_proveedor');
        var codigo = $('#codigo').val();
        var RFC = $('#RFC').val();
        var razon_social = $('#razon_social').val();
        var nombre_comercial = $('#nombre_comercial').val();
        var contacto = $('#contacto').val();
        var correo = $('#correo').val();
        var telefono = $('#telefono').val();
        var calle = $('#calle').val();
        var id_pais = getSelectedValue('#id_pais', 0);
        var id_estado = getSelectedValue('#id_estado', 0);
        var id_municipio = getSelectedValue('#id_municipio', 0);
        var colonia = $('#colonia').val();
        var ciudad = $('#ciudad').val();
        var cp = $('#cp').val();
        var numero_exterior = $('#numero_exterior').val();

        if (RFC == '' || razon_social == '' || nombre_comercial == '') {
            showNotification('error', 'top', 'center', 'danger', '¡ERROR!', 'Debes ingresar toda la información del obligatoria')
            return false;
        }

        $.ajax({
                url: "{{ route('travelagent.catalogos.proveedores.save_proveedor')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    idProveedor: idProveedor,
                    id_tipo_proveedor: id_tipo_proveedor,
                    codigo: codigo,
                    RFC: RFC,
                    razon_social: razon_social,
                    nombre_comercial: nombre_comercial,
                    correo: correo,
                    contacto: contacto,
                    telefono: telefono,
                    calle: calle,
                    id_pais: id_pais,
                    id_estado: id_estado,
                    id_municipio: id_municipio,
                    colonia: colonia,
                    ciudad: ciudad,
                    cp: cp,
                    numero_exterior: numero_exterior,
                },
            })
            .done(function(resp) {
                setTimeout(() => {
                    showNotification('thumb_up', 'top', 'center', 'success', '¡BIEN!', resp.mensaje)
                    window.location.replace("{{ route('travelagent.catalogos.proveedores.index') }}");
                }, 2000);
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            })
    }

    function getInfoProveedor(idPro) {
        $.ajax({
                url: "{{ route('travelagent.catalogos.proveedores.get_proveedor')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    id: idPro
                }
            })
            .done(function(resp) {
                setDataProveedor(resp.proveedor, resp.tipo_operacion, resp.tipo_tercero)
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
    }

    function setDataProveedor(general, tipo_operacion, tipo_tercero) {
        $('#idProveedorHidden').val(general['id'])
        $('#id_tipo_proveedor').val(general['id_tipo_proveedor'])
        $('#codigo').val(general['codigo'])
        $('#RFC').val(general['RFC'])
        $('#razon_social').val(general['razon_social'])
        $('#nombre_comercial').val(general['nombre_comercial'])
        $('#contacto').val(general['contacto'])
        $('#correo').val(general['correo'])
        $('#telefono').val(general['telefono'])
        $('#calle').val(general['calle'])
        $('#colonia').val(general['colonia'])
        $('#cp').val(general['cp'])
        $('#numero_exterior').val(general['numero_exterior'])
        $('#id_pais').val(general['id_pais']);
        getEstado(general['id_pais'], general['id_estado'])
        getMunicipio(general['id_estado'], general['id_municipio'])
    }
</script>
@endpush