@extends('layout.backoffice')
@section('content')
    <div class="row justify-content-center">
        <div class="col-lg-5">
            <div class="card card-primary card-outline ">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <div>
                        <ul class="nav nav-tabs">
                            <li class="nav-item">
                                <a class="nav-link active" aria-current="page" href="#gestionar" role="tab" data-toggle="tab">Gestionar Marca</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#logos" role="tab" data-toggle="tab">Logos</a>
                            </li>
                        </ul>
                    </div>
                    <a href="{{ url('backoffice/administrar/marcas') }}" class="ml-auto">
                        <button class="btn btn-primary btn-sm">Volver</button>
                    </a>
                </div>
                <br>
                <div class="card-body">
                    <div class="tab-content" id="myTabContent">
                        <div class="tab-pane active" id="gestionar" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">
                            <form id="formGestion">
                                <input type="hidden" value="{{ $datosVista['id'] }}" name="id">
                                <div class="row">
                                    <div class="col-5 mr-3">
                                        <div class="form-group">
                                            <label for="nombre">Nombre</label>
                                            <input type="text" value="{{ $datosVista['marca'] }}" name="nombre" id="nombre" class="form-control form-control-border border-width-2 system_validador_vacio">
                                        </div>
                                        <div class="form-group">
                                            <label for="categoria">Categoría</label>
                                            <select name="categoria" id="categoria" class="form-control form-control-border border-width-2 system_validador_vacio">
                                                <option value="">Seleccione una opcion</option>
                                                <option value="económica">Económica (Bronce)</option>
                                                <option value="calidad">Calidad (Plata)</option>
                                                <option value="premium">Premium (Oro)</option>
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label for="pais">Pais</label>
                                            <select name="pais" id="pais" class="form-control form-control-border system_validador_vacio border-width-2">
                                                <option value=""></option>
                                                @foreach($datosVista['paises'] as $pais)
                                                    <option value="{{ $pais['id_pais'] }}" {{ $datosVista['pais'] == $pais['nombre'] ? 'selected' : '' }}>
                                                        {{ $pais['nombre'] }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-5 ml-3">
                                        <div class="form-group">
                                            <label for="imagen">Imagen Logo</label>
                                            <input type="file" value="" name="imagen" id="imagen" class="form-control form-control-border border-width-2 " accept="image/*">
                                        </div>
                                        <div class="form-group">
                                            <label for="tamano">Tamaño</label>
                                            <select name="tamano" id="tamano" class="form-control form-control-border system_validador_vacio border-width-2">
                                                <option value="267x58">267x58</option>
                                            </select>
                                        </div>
                                        <div id="imagen-preview" style="margin-top: 10px;">
                                            <img src="#" alt="" style="display: none; max-width: 100%;">
                                        </div>
                                    </div>
                                </div>
                            </form>
                            <button id="btn-guardar" class="btn btn-primary btn-sm">Guardar</button>
                        </div>

                        <div class="tab-pane" id="logos" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">
                            <table class="table table-hover text-nowrap py-4 table-sm" id="tablaLogos">
                                <thead>
                                <tr>
                                    <th>Imagen</th>
                                    <th>Tamaño</th>
                                    <th>Acciones</th>
                                </tr>
                                </thead>
                                <tbody>
                                @if (!empty($datosVista['logos']))
                                    @foreach ($datosVista['logos'] as $logo)
                                        <tr>
                                            <td>
                                                <a href="" data-lightbox="im-marcas">
                                                    <img class="img-responsive p-1 m-2" src="" width="300" height="auto" alt="imagen_comentario" style="border-radius: 10px"/>
                                                </a>
                                            </td>
                                            <td style="font-size: 17px">{{ $logo["tamano"] }}</td>
                                            <td>
                                                <a href="{{ $logo['ruta'] }}">
                                                    <button class="btn btn-primary btn-sm">Descargar</button>
                                                </a>
                                                <button class="btn btn-primary btn-sm" onclick="copiarRuta('{{ $logo['ruta'] }}')">Copiar</button>
                                                <button class="btn btn-primary btn-sm btn-eliminar" data-id="{{ $logo['id'] }}">Eliminar</button>
                                            </td>
                                        </tr>
                                    @endforeach
                                @endif
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        jQuery(document).ready(function () {
            dataTable(jQuery('#tablaLogos'))
        });
        $('#categoria').val("{{ mb_strtolower($datosVista['categoria']) ?? '' }}").change();

        jQuery('#btn-guardar').on('click', async function () {
            if (system_validarcampos("formGestion")) {
                let formData = new FormData(document.getElementById('formGestion'));
                MostrarLoader();
                await axios.post('/administrar/marca/gestionar', formData).then(function (resp) {
                    OcultarLoader();
                    if (resp.data.error === 0) {
                        Swal.fire("Datos guardados 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 logo?',
                text: "Esta acción no se puede revertir.",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Si',
                cancelButtonText: 'No',
                focusCancel: true
            }).then((result) => {
                MostrarLoader()
                if (result.value) {
                    axios.get('/administrar/marca/eliminar?id=' + id).then(function (resp) {
                        OcultarLoader()
                        if (resp.data.error === 0) {
                            Swal.fire("Logo eliminado.", '', 'success').then(function () {
                                window.location.reload();
                            });
                        } else {
                            notificarUsuario(resp.data.mensaje);
                        }
                    });
                }
            });
        });

        function copiarRuta(ruta) {
            navigator.clipboard.writeText(ruta).then(function () {
                Swal.fire({
                    icon: 'success',
                    title: '¡Copiado!',
                    timer: 1500,
                    showConfirmButton: false
                });
            });
        }

        $(document).ready(function () {
            $('#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();
                }
            });
        });
    </script>

@endsection