@extends('layouts.dashboard')

@section('dashboard')
    @if (session('message'))
        <div class="alert alert-success mb-3">
            {{ session('message') }}
        </div>
    @endif
    <ul class="breadcrumb m-0 p-0">
        <li><a href="/dashboard">Home</a></li>
        <li><strong>Parametros</strong></li>
    </ul>
    <div class="row align-items-center">
        <div class="col">
            <h1 class="titulo-h1 mb-4">Gestión de Dominios</h1>
        </div>
        <div class="col-auto">
            <form class="row align-items-end justify-content-end" onsubmit="return cargarGestionDominio()">
                <div class="col-auto">
                    <label for="dominio" class="small mb-0">Dominio</label>
                    <select name="dominio-id" class="form-control select2" required="required">
                        <option value="">Seleccionar dominio</option>
                        @foreach ($dominiosEmpresa as $dominio)
                            <option value="{{ $dominio->dominio_id }}">
                                {{ $dominio->dominio_url }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-auto">
                    <button type="submit" class="btn btn-primary btn-sm"><i class="fa fa-search"></i>Filtrar</button>
                </div>
            </form>
        </div>
    </div>

    <ul class="nav nav-tabs mt-2 mt-md-0" id="myTab" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" type="button"
                role="tab" aria-controls="home" aria-selected="true">Productos</button>
        </li>
        <li class="nav-item" role="contacto">
            <button class="nav-link" id="contacto-tab" data-toggle="tab" data-target="#contacto" type="button"
                role="tab" aria-controls="contacto" aria-selected="false">Contacto</button>
        </li>
    </ul>

    <div class="tab-content" id="myTabContent">
        <div class="tab-pane fade show active card box-gestion-dominio" id="home" role="tabpanel"
            aria-labelledby="home-tab">
            <div class="card-body">
                <div class="alert alert-warning text-center mb-0">
                    <p class="m-0">Por favor selecione un dominio para cargar la información.</p>
                </div>
            </div>
            {{-- @include('dashboard.parametros.form-gestion-dominio') --}}
        </div>

        <div class="tab-pane fade" id="contacto" role="tabpanel" aria-labelledby="contacto-tab">CONTACTO</div>
    </div>
@endsection


@section('scripts')
    <script>
        function cargarGestionDominio() {
            dominioId = document.querySelector('[name="dominio-id"]').value;
            modalCargando()
            fetch("/dashboard/cargar-gestion-dominio", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                        "X-CSRF-TOKEN": token
                    },
                    body: JSON.stringify({
                        dominioId: dominioId
                    })
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error("Hubo un error al cargar los datos.");
                    }
                    return response.text();
                })
                .then(data => {
                    cerrarCargando();
                    document.querySelector('.box-gestion-dominio').innerHTML = data;

                    $(".select2").select2();

                })
                .catch(error => {
                    console.error(error.message);
                });

            return false;
        }

        function cargarSelectMultipleCategoriasMarcas(tipo, opcion) {
            modalCargando()
            dominioId = document.querySelector('[name="dominio"]').value;
            fetch("/dashboard/cargar-select-multiple-categorias-marcas", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                        "X-CSRF-TOKEN": token
                    },
                    body: JSON.stringify({
                        tipo: tipo,
                        opcion: opcion,
                        'dominioId': dominioId
                    })
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error("Hubo un error al cargar los datos.");
                    }
                    return response.text();
                })
                .then(data => {
                    cerrarCargando();
                    //$(".select2").select2();
                    //alert(data)
                    if (tipo == 'categoria') {
                        document.querySelector('.div-categoria').innerHTML = data;
                    }

                    if (tipo == 'marca') {
                        document.querySelector('.div-marca').innerHTML = data;
                    }
                    $(".select2").select2();

                })
                .catch(error => {
                    console.error(error.message);
                });

            return false;
        }

        function guardarActualizarCategoriasMarcas() {
            modalCargando();

            dominioId = document.querySelector('[name="dominio"]').value;

            var categorias = $('select[name="categorias[]"] option:selected').map(function() {
                return this.value;
            }).get();

            var marcas = $('select[name="marcas[]"] option:selected').map(function() {
                return this.value;
            }).get();
            //alert(marcas);
            fetch("/dashboard/registrar-productos-dominios", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                        "X-CSRF-TOKEN": token
                    },
                    body: JSON.stringify({
                        dominio: dominioId,
                        marcas: marcas,
                        categorias: categorias
                    })
                })
                .then(response => response.json())
                .then(data => {
                    console.log(data); // Esto te mostrará qué contiene data
                    if (data.success) {
                        simpleAlert(data.message)
                        cerrarCargando();
                        localStorage.setItem('successMessage', data.message);
                        //window.location.href = '/dashboard/productos-dominios';
                    } else {
                        alert(data.message);
                    }
                })

                .catch(errorResponse => {
                    // Manejo de errores de validación
                    errorResponse.json().then(errorData => {
                        if (errorData.errors) {
                            let errors = '';
                            for (let field in errorData.errors) {
                                errors += `${field}: ${errorData.errors[field].join(', ')}\n`;
                            }
                            alert(errors);
                        } else {
                            alert('Error al guardar la información.');
                        }
                    }).catch(error => {
                        // Aquí manejas el caso en el que la respuesta no pueda convertirse a JSON
                        console.error('Error procesando la respuesta:', error);
                    });
                });

            return false;
        }
    </script>
@endsection