@extends('layout.backoffice')
@section('content')
    <div class="row">
        <div class="col-lg-12">
            @include('page.administrar.banners.registrar')
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            @include('page.administrar.banners.listado')
        </div>
    </div>

    @include('page.administrar.banners.modal')
    <script>
        function validarFormulario() {
            var fechaInicio = new Date($('input[name="fechaInicio"]').val());
            var fechaFin = new Date($('input[name="fechaFin"]').val());

            if (fechaFin < fechaInicio) {
                Swal.fire({
                    text: 'La fecha de finalización no puede ser anterior a la fecha de inicio.',
                    icon: 'info',
                    confirmButtonText: 'Ok'
                });
                return false;
            }
            return true;
        }

        jQuery('#btn-guardar').on('click', async function (e) {
            e.preventDefault();
            if (system_validarcampos("formBanners") && validarFormulario()) {
                MostrarLoader()
                let formData = new FormData(document.getElementById('formBanners'));
                await axios.post('/administrar/banner/crear', formData).then(function (resp) {
                    OcultarLoader()
                    if (resp.data.error === 0) {
                        Swal.fire("Banner guardado con exito", '',
                            'success').then(function () {
                            window.location.reload();
                        });
                    } else {
                        notificarUsuario(resp.data.mensaje);
                    }
                });
            }
        });

        jQuery('#btn-actualizar').on('click', async function (e) {
            e.preventDefault();
            if (system_validarcampos("formBanners") && validarFormulario()) {
                MostrarLoader()
                let formData = new FormData(document.getElementById('formBanners'));
                await axios.post('/administrar/banner/actualizar', formData).then(function (resp) {
                    OcultarLoader()
                    if (resp.data.error === 0) {
                        Swal.fire("Banner guardado con exito", '',
                            'success').then(function () {
                            window.location.reload();
                        });
                    } else {
                        notificarUsuario(resp.data.mensaje);
                    }
                });
            }
        });

        jQuery('.btn-cambiarEstado').on('click', function () {
            let id = jQuery(this).data('id');
            Swal.fire({
                title: '¿Está seguro de cambiar el estado del banner?',
                text: "Esta acción no se puede revertir.",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Si',
                cancelButtonText: 'No',
                focusCancel: true
            }).then((result) => {
                if (result.value) {
                    axios.get('/administrar/banner/cambiar/estado?id=' + id).then(function (resp) {
                        if (resp.data.error === 0) {
                            Swal.fire("Accion exitosa.", '', 'success').then(function () {
                                window.location.reload();
                            });
                        } else {
                            notificarUsuario(resp.data.mensaje);
                        }
                    });
                }
            });
        });

        jQuery("#sincronizarBanners").on("click", function () {
            jQuery("#modal_sincronizar").modal("show");
        });

        jQuery('#btn_form_guardar').on('click', async function (e) {
            var pais = jQuery('#paisSync').val();
            e.preventDefault();
            MostrarLoader()
            await axios.get('/administrar/banner/sincronizar?pais=' + pais).then(function (resp) {
                OcultarLoader()
                if (resp.data.error === 0) {
                    Swal.fire("Banners Sincronizados con exito", '',
                        'success').then(function () {
                        window.location.reload();
                    });
                } else {
                    notificarUsuario(resp.data.mensaje);
                }
            });
        });

        jQuery('.btn-eliminar').on('click', function () {
            let id = jQuery(this).data('id');
            Swal.fire({
                title: '¿Está seguro de eliminar el banner?',
                text: "Esta acción no se puede revertir.",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Si',
                cancelButtonText: 'No',
                focusCancel: true
            }).then((result) => {
                if (result.value) {
                    MostrarLoader()
                    axios.get('/administrar/banner/eliminar?id=' + id).then(function (resp) {
                        OcultarLoader()
                        if (resp.data.error === 0) {
                            Swal.fire("Banner eliminado.", '', 'success').then(function () {
                                window.location.reload();
                            });
                        } else {
                            notificarUsuario(resp.data.mensaje);
                        }
                    });
                }
            });
        });

        jQuery(document).ready(function () {
            dataTable(jQuery('.tablasBanner'))
            $('#estado').val("{{ $datos['estado'] ?? '1' }}").change();
            $('#pais').val("{{ $datos['pais'] ?? '' }}").change();


            $('#imagen').change(function () {
                var file = this.files[0];
                var reader = new FileReader();
                reader.onload = function (e) {
                    $('#imagen-preview img').attr('src', e.target.result).show();
                }
                if (file) {
                    reader.readAsDataURL(file);
                } else {
                    $('#imagen-preview img').hide();
                }
            });

            const paisInicial = $('#pais').val();
            actualizarOpcionesSector(paisInicial);
            $('#sector').val("{{ $datos['sector'] ?? '' }}").change();
        });

        const sectores = @json($datos['sectores']);
        function actualizarOpcionesSector(pais) {
            const selectSector = $('#sector');
            selectSector.empty().append('<option value="">Seleccione una Opción</option>');

            if (sectores[pais]) {
                sectores[pais].forEach(sectoresGrupo => {
                    const optgroup = $('<optgroup>').attr('label', sectoresGrupo.grupo);
                    sectoresGrupo.opciones.forEach(opcion => {
                        optgroup.append($('<option>').val(opcion.valor).text(opcion.etiqueta));
                    });
                    selectSector.append(optgroup);
                });
            }
        }

        $('#pais').on('change', function () {
            actualizarOpcionesSector($(this).val());
            $('#sector').val('').change();
        });

        $('#sector').val("{{ $datos['sector'] ?? '' }}").change();
    </script>
@endsection