@extends('layout')
@section('almacenes-active', 'active')
@section('producto-active', 'active')

@section('bread-module', 'Almacén')
@section('bread-submodule', 'Registrar Producto')
@section('hero-title', 'Registrar Producto')
@section('hero-subtitle', 'Productos')

@section('content')
    @include('utils.modals.mdl_category.main')
    @include('utils.modals.mdl_brand.main')
    @include('utils.modals.mdl_model.main')
    @include('utils.modals.mdl_color.main')

    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-lg-12">
                <div class="ibox">
                    <div class="ibox-content">
                        @include('almacenes.productos.forms.form_producto_create')
                    </div>
                </div>
            </div>
        </div>
    </div>

    <style>
        .fancybox__container {
            z-index: 99999 !important;
        }

        .img-preview {
            max-width: 100%;
            max-height: 130px;
            object-fit: contain;
        }
    </style>

    <link href="{{ mix('css/filepond.css') }}" rel="stylesheet">
@endsection

@push('scripts')
    <script src="{{ mix('js/filepond.js') }}"></script>
    <script src="{{ mix('js/tomselect.js') }}"></script>

    <script>
        let ponds = [];

        //====== VARIABLES ===============
        const formRegProducto = document.querySelector('#form_registrar_producto');
        const tokenValue = document.querySelector('input[name="_token"]').value;
        const selectCategorias = document.querySelector('#categoria');
        const selectMarcas = document.querySelector('#marca');
        const selectModelos = document.querySelector('#modelo');
        const inputColoresJSON = document.querySelector('#coloresJSON');
        const tableColores = document.querySelector('#table-colores');

        let coloresAsignados = [];
        let dtColores = null;

        //=========== CUANDO SE CARGUE EL HTML Y CSS HACER ESTO =========
        document.addEventListener('DOMContentLoaded', () => {
            const colores = @json($colores);
            loadFpImg();
            loadSelectProducts();
            pintarTablaColores(colores);
            cargarDatatables();
            events();
            loadMdlCategory({
                categorySelect: window.categorySelect
            });
            loadMdlBrand({
                brandSelect: window.brandSelect
            });
            loadMdlModel({
                modelSelect: window.modelSelect
            });
            loadMdlColor({
                dtColores: dtColores
            });
        })

        function events() {

            //marcar check color
            document.addEventListener('click', (e) => {
                if (e.target.classList.contains('checkColor')) {
                    const colorId = e.target.getAttribute('data-color-id');
                    if (e.target.checked) {
                        addColor(colorId);
                    } else {
                        removeColor(colorId);
                    }
                }
            })

            //========== FORM REG PRODUCTO ==============
            formRegProducto.addEventListener('submit', (e) => {
                e.preventDefault();
                registrarProducto(e.target);
            })

        }

        function loadFpImg() {
            const inputs = document.querySelectorAll(".filepond");

            inputs.forEach(input => {
                const pond = FilePond.create(input, {
                    allowMultiple: false,
                    instantUpload: false,
                    maxFileSize: "2MB",
                    acceptedFileTypes: [
                        "image/jpeg",
                        "image/png",
                        "image/webp",
                        "image/avif"
                    ],
                });

                ponds.push(pond);
            });
        }

        function loadSelectProducts() {
            window.categorySelect = loadSimpleSelect('categoria', '<i class="fas fa-tags text-primary"></i>');
            window.brandSelect = loadSimpleSelect('marca', '<i class="fas fa-certificate text-success"></i>');
            window.modelSelect = loadSimpleSelect('modelo', '<i class="fas fa-cubes text-primary"></i>');
            window.colorSelect = loadSimpleSelect('modelo', '<i class="fas fa-cubes text-primary"></i>');
        }



        //============ guardar colores asignados ============
        const saveColorsAssigned = () => {
            //======== guardamos el array en el inputJSON de colores asignados ========
            inputColoresJSON.value = JSON.stringify(coloresAsignados);
        }

        function addColor(idColor) {
            if (!coloresAsignados.includes(idColor)) {
                coloresAsignados.push(idColor);
            }
        }

        function removeColor(idColor) {
            coloresAsignados = coloresAsignados.filter((c) => {
                return c != idColor
            })
        }

        function registrarProducto(formRegistrarProducto) {
            toastr.clear();
            Swal.fire({
                title: 'Opción Guardar',
                text: "¿Seguro que desea guardar cambios?",
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: "#1ab394",
                confirmButtonText: 'Si, Confirmar',
                cancelButtonText: "No, Cancelar",
            }).then(async (result) => {

                if (result.isConfirmed) {

                    Swal.fire({
                        title: "Registrando producto...",
                        text: "Por favor, espere.",
                        allowOutsideClick: false,
                        allowEscapeKey: false,
                        didOpen: () => {
                            Swal.showLoading();
                        },
                    });

                    try {

                        limpiarErroresValidacion('msgErrorProducto');
                        const formData = new FormData(formRegistrarProducto);
                        formData.append('coloresJSON', JSON.stringify(coloresAsignados));

                        ponds.forEach((pond, index) => {
                            const files = pond.getFiles();

                            if (files.length > 0) {
                                formData.append(`imagen${index + 1}`, files[0].file);
                            }
                        });

                        const res = await axios.post(route('almacenes.producto.store'), formData);

                        if (res.data.success) {
                            toastr.success(res.data.message, 'OPERACIÓN COMPLETADA');
                            window.location = route('almacenes.producto.index');
                        } else {
                            toastr.error(res.data.message, 'ERROR EN EL SERVIDOR');
                            Swal.close();
                        }

                    } catch (error) {
                        if (error.response) {
                            if (error.response.status === 422) {
                                const errors = error.response.data.errors;
                                const erroresFiltrados = {};
                                for (const key in errors) {
                                    if (key.startsWith('precios_tipo_cliente.')) {
                                        const tcId = key.split('.')[1];
                                        const span = document.getElementById(`precio_tc_error_${tcId}`);
                                        if (span) span.textContent = errors[key][0];
                                    } else {
                                        erroresFiltrados[key] = errors[key];
                                    }
                                }
                                pintarErroresValidacion(erroresFiltrados, 'error');
                                toastr.error('Errores de validación encontrados.', 'ERROR DE VALIDACIÓN');
                            } else {
                                toastr.error(error.response.data.message, 'ERROR EN EL SERVIDOR');
                            }
                        } else if (error.request) {
                            toastr.error('No se pudo contactar al servidor. Revisa tu conexión a internet.',
                                'ERROR DE CONEXIÓN');
                        } else {
                            toastr.error(error.message, 'ERROR DESCONOCIDO');
                        }
                        Swal.close();
                    }

                } else if (result.dismiss === Swal.DismissReason.cancel) {
                    Swal.fire(
                        'Cancelado',
                        'La Solicitud se ha cancelado.',
                        'error'
                    )
                }
            })
        }


        //========== cargar datatables =======
        const cargarDatatables = () => {
            dtColores = new DataTable('#tbl_producto_colores', {
                language: {
                    processing: "Cargando...",
                    search: "BUSCAR: ",
                    lengthMenu: "MOSTRAR _MENU_ COLORES",
                    info: "MOSTRANDO _START_ A _END_ DE _TOTAL_ COLORES",
                    infoEmpty: "MOSTRANDO 0 ELEMENTOS",
                    infoFiltered: "(FILTRADO de _MAX_ COLORES)",
                    infoPostFix: "",
                    loadingRecords: "CARGA EN CURSO",
                    zeroRecords: "Aucun &eacute;l&eacute;ment &agrave; afficher",
                    emptyTable: "NO HAY COLORES DISPONIBLES",
                    paginate: {
                        first: "PRIMERO",
                        previous: "ANTERIOR",
                        next: "SIGUIENTE",
                        last: "ÚLTIMO"
                    },
                    aria: {
                        sortAscending: ": activer pour trier la colonne par ordre croissant",
                        sortDescending: ": activer pour trier la colonne par ordre décroissant"
                    }
                }
            });
        }

        function pintarTablaColores(lstColores) {
            const tbody = document.querySelector('#tbl_producto_colores tbody');

            let filas = '';

            lstColores.forEach((color) => {

                filas += `<tr>
                            <td style="text-align:start;font-weight:bold;">${color.id}</td>
                            <td>
                                <div class="form-check">
                                    <input  class="form-check-input checkColor" type="checkbox" value="" id="checkColor_${color.id}" data-color-id="${color.id}">
                                    <label class="form-check-label" for="checkColor_${color.id}">
                                        ${color.descripcion}
                                    </label>
                                </div>
                            </td>
                        </tr>`;
            })

            tbody.innerHTML = filas;
        }
    </script>
@endpush