@extends('layouts.app')


@section('css')
    <style>
        .overflow-table-y {
            height: 400px;
            overflow-y: auto;
        }
    </style>
@endsection
@section('contenido')

    <div class="panel panel-default">
        <div class="panel-heading">

            <h3>Ver Catálogo
                @can('catalogos-list')
                    <div class="pull-right">
                        <a class="btn btn-primary" href="{{ route('catalogos.index') }}"> Regresar</a>
                    </div>
                @endcan
            </h3>

        </div>

        <div class="panel-body">
            @if ($errors->any())
                <div class="alert alert-danger">
                    <strong>Oops!</strong> Hubo algunos problemas con tus datos.<br><br>
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            {{-- <h4>Especificaciones</h4> --}}

            <form action="{{ route('catalogos.update', $catalogo->id) }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')

                <div class="form-row">
                    <div class="form-group col-xs-12 col-sm-12 col-md-4">
                        <label for="nombre">Nombre del catálogo:</label>
                        <input type="text" class="form-control" id="nombre" name="nombre"
                            placeholder="Escriba un nombre para el catálgo"
                            value="{{ $catalogo->nombre }}" required disabled>
                    </div>

                    <div class="form-group col-xs-12 col-sm-12 col-md-4 text-left">
                        <label for="estatus">Temporada:</label>
                        <select class="form-control" disabled>
                            @foreach ($temporadas as $temporada)
                                {{-- Verificar si la temporada actual es igual a $catalogo->temporadas_id --}}
                                <option value="{{ $temporada->id }}" {{ $temporada->id == $catalogo->temporadas_id ? 'selected' : '' }}>{{ $temporada->nombre }}</option>
                            @endforeach
                        </select>
                        <input type="hidden" id="temporadas_id" name="temporadas_id" name="" value="{{ $catalogo->temporadas_id }}">
                    </div>


                    <div class="col-xs-12 col-sm-12 col-md-3">
                        {{-- <div class="form-group">
                            <label>{{ trans('empresas.label_estatus') }}</label>
                            <select name="estatus" class="form-control" id="estatus">
                                <option class="form-control" value="0"
                                    @if ($catalogo->getEstatusValue() == 0) @selected(true) @endif>
                                    {{ trans('empresas.select_inactivo') }}
                                </option>
                                <option @if ($catalogo->getEstatusValue() == 1) @selected(true) @endif class="form-control"
                                    value="1">{{ trans('empresas.select_activo') }}</option>

                            </select>
                        </div> --}}
                    </div>

                    <div class="form-group col-xs-12 col-sm-12 col-md-12">
                        <label for="estatus">Lineas:</label>
                        <select class="form-control js-example-basic-multiple" id="lineas" name="lineas[]" multiple="multiple" disabled>
                            @foreach ($lineas as $key => $linea)
                                {{-- Verificar si la línea actual está en $dataLineas --}}
                                @if (in_array($linea->id, $lineasCatalogo))
                                    {{-- Si está en $dataLineas, seleccionar automáticamente la opción --}}
                                    <option value="{{ $linea->id }}" selected>{{ $linea->nombre }}</option>
                                @else
                                    {{-- Si no está en $dataLineas, simplemente mostrar la opción --}}
                                    <option value="{{ $linea->id }}">{{ $linea->nombre }}</option>
                                @endif
                            @endforeach
                        </select>
                    </div>

                </div>

                {{-- <div class="row">

                    <div class="col-md-12">
                        <div class="row">
                            <div class="col-xs-12 col-sm-12 col-md-9">
                                <h4>Productos del Catálogo</h4>
                            </div>
                            <div class="text-right col-xs-12 col-sm-12 col-md-3">
                                <button id="btnAgregarProductos" type="button" class="btn btn-info" disabled>Agregar Productos</button>
                            </div>

                        </div>


                        <table id="productosCatalogo" class="table table-striped responsive nowrap" style="width:100%">
                            <thead>
                                <tr>
                                    <th class="d-none">ID</th>
                                    <th>Estilo</th>
                                    <th>Linea</th>
                                    <th>Tallas</th>
                                    <th>Color</th>
                                    <th>Temporada</th>
                                    <th>Precio Público</th>
                                    <th class="text-center">Borrar</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($groupedProducts as $key => $item)
                                    <tr>
                                        <td class="d-none">
                                            <input name="productos[]" type="text" value="{{ $item->id }}" readonly>'
                                        </td>
                                        <td>{{ $item->estilo }}</td>
                                        <td>
                                            @if($item->linea)
                                                {{ $item->linea->nombre }}
                                            @endif
                                        </td>
                                        <td>{{ $item->talla}}</td>
                                        <td>{{ $item->color}}</td>
                                        <td>
                                            @if($item->temporada)
                                                {{ $item->temporada->nombre}}
                                            @endif
                                        </td>
                                        <td>{{ $item->precio}}</td>
                                        <td class="text-center">
                                            <button type="button" class="btn" onclick="$(this).closest('tr').remove()" disabled>
                                                <i style="color: red; !important"class="far fa-trash-alt"></i>
                                            </button>
                                            </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                </div> --}}


                <div class="row">

                    <div class="col-md-12">
                        <div class="row">
                            <div class="col-xs-12 col-sm-12 col-md-9">
                                <h4>Productos del Catálogo</h4>
                            </div>
                            {{-- <div class="text-right col-xs-12 col-sm-12 col-md-3">
                                <button id="btnAgregarProductos" type="button" class="btn btn-info" disabled>Agregar Productos</button>
                            </div> --}}

                        </div>
                        <div class="row form-group">
                            <div class="form-group col-xs-12 col-sm-12 col-md-3 text-left">
                                <input type="text" class="form-control" id="searchText"
                                    placeholder="Filtrar por código o nombre"
                                >
                            </div>

                            <button id="searchButton" type="button" class="btn btn-primary buscar-filtro">Buscar</button>
                            <button id="limpiarButton" type="button" class="btn btn-default buscar-filtro">Limpiar</button>

                        </div>
                        <table style="padding-bottom: 0; margin-bottom: 0" class="table table-striped responsive nowrap" style="width:100%">
                            <thead>
                                <tr>
                                    <th class="d-none">ID</th>
                                    <th style="width:12% !important">Codigo</th>
                                    <th style="width:15% !important">Estilo</th>
                                    <th style="width:15% !important">Linea</th>
                                    <th style="width:10% !important">Tallas</th>
                                    <th style="width:10% !important">Marca</th>
                                    <th style="width:10% !important">Temporada</th>
                                    <th style="width:15% !important" class="text-right">Precio Público</th>
                                    {{-- <th style="width:10% !important;"  class="text-center"><u>Borrar</u></th> --}}
                                    <th style="width:2% !important"></th>
                                </tr>
                            </thead>
                        </table>
                        <div id="products-container">

                            @include('catalogos.load_products')

                        </div>

                    </div>

                </div>
                <hr>

                <div style="padding:10px;border-radius:10px;margin-bottom:20px"  class="content bg-danger">
                    <div class="row">
                        <div class="col-xs-12 col-sm-12 col-md-12">
                            <h4>Generar PDF</h4>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12 col-sm-12 col-md-6">

                            <div class="form-group">
                                <label class="form-label">Imagen Portada</label>
                                <input type="file"
                                       name="portada"
                                       id="portada"
                                       class="form-control validar-img"
                                       accept="image/jpeg, image/png"
                                       data-max-width="1200"   {{-- px --}}
                                       data-max-height="1600" {{-- px --}}
                                       data-max-size="200"    {{-- Kb --}}
                                       data-container-img="preview_portada"
                                       data-container-error="invalidImage"
                                       disabled
                                >
                            </div>
                            <span style="color:red !important;" id="invalidImage" class="d-none text-danger p-3"></span>

                        </div>
                        <div class="col-xs-12 col-sm-12 col-md-6">
                            <div class="form-group">
                                <label class="form-label">Imagen Final</label>
                                <input type="file"
                                       name="portada_final"
                                       id="portada_final"
                                       class="form-control validar-img"
                                       accept="image/jpeg, image/png"
                                       data-max-width="1200"   {{-- px --}}
                                       data-max-height="1600" {{-- px --}}
                                       data-max-size="200"    {{-- Kb --}}
                                       data-container-img="preview_final"
                                       data-container-error="invalidImageFinal"
                                       disabled
                                >
                            </div>
                            <span style="color:red !important;" id="invalidImageFinal" class="d-none text-danger p-3"></i></span>
                        </div>

                        <div class="col-xs-12 col-sm-12 col-md-6">
                            <div class="form-group">
                                @if ($catalogo->url_imagen_portada)
                                    <img style="max-width: 250px"
                                         id="preview_portada"
                                         name="preview_portada"
                                         src="{{ route('storage', ['typeFile' => 'catalogos_digitales/' . $catalogo->nameDirectory , 'filename' => $catalogo->url_imagen_portada]) }}"
                                    >
                                @endif
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-12 col-md-6">
                            <div class="form-group">
                                @if ($catalogo->url_imagen_final)
                                    <img style="max-width: 250px"
                                         id="preview_final"
                                         name="preview_final"
                                         src="{{ route('storage', ['typeFile' => 'catalogos_digitales/' . $catalogo->nameDirectory , 'filename' => $catalogo->url_imagen_final]) }}"
                                    >
                                @endif
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-xs-12 col-sm-12 col-md-6 mt-5">
                            <div class="form-group">
                                <label class="form-label">Imagen de fondo</label>
                                <input type="file"
                                    name="imagen_de_fondo"
                                    id="imagen_de_fondo"
                                    class="form-control validar-img"
                                    accept="image/jpeg, image/png"
                                    data-max-width="1200"   {{-- px --}}
                                    data-max-height="1600" {{-- px --}}
                                    data-max-size="200"    {{-- Kb --}}
                                    data-container-img="preview_imagen_de_fondo"
                                    data-container-error="invalidImageDeFondo"
                                    disabled
                                >
                            </div>
                            <span style="color:red !important;" id="invalidImageDeFondo" class="d-none text-danger p-3"></i></span>
                        </div>

                        <div class="col-xs-12 col-sm-12 col-md-6" style="float: none;">
                            <div class="form-group">
                                @if ($catalogo->fondo_pagina_dos)
                                    <img style="max-width: 250px"
                                        id="preview_imagen_de_fondo"
                                        name="preview_imagen_de_fondo"
                                        src="{{ route('storage', ['typeFile' => 'catalogos_digitales/' . $catalogo->nameDirectory , 'filename' => $catalogo->fondo_pagina_dos]) }}"
                                    >
                                @endif
                            </div>
                        </div>
                    </div>

                </div>

                <div style="padding:10px;border-radius:10px;margin-bottom:20px;background:rgb(220, 242, 255);"
                    class="content">
                    <div class="row">
                        <div class="col-xs-12 col-sm-12 col-md-12">
                            <h4>Cargar PDF sustituto</h4>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12 col-sm-12 col-md-6">

                            <div class="form-group">
                                <label class="form-label">Seleccionar catálogo pdf</label>
                                <input type="file" name="archivo" id="archivo" class="form-control validar-pdf"
                                    accept="application/pdf" data-max-size="10000" {{-- Kb, ejem: 10 Megabytes --}}
                                    {{-- data-container-pdf="preview_pdf" --}} data-container-error="invalidPDF" disabled>
                            </div>
                            @if ($catalogo->archivo)
                                <span style="margin-bottom:1rem;color:rgb(150, 150, 150);width:100%"
                                    class="col-xs-12 col-sm-12 col-md-5">{{ $catalogo->archivo }}</span>
                            @else
                                <span style="margin-bottom:1rem;color:rgb(150, 150, 150);width:100%"
                                    class="col-xs-12 col-sm-12 col-md-5">No hay ningun catálogo PDF cargado</span>
                            @endif
                                <span style="color:red !important;" id="invalidPDF"
                                    class="d-none text-danger p-3"></span>
                        </div>
                        <div class="col-xs-12 col-sm-12 col-md-5">
                            <div>
                                <label class="text-md-right" for="color_1">
                                    <span class="requerido">* </span>
                                    Activar pdf de catalogo
                                </label>
                                <label class="switch">
                                    <input type="checkbox" name="archivo_estatus" disabled
                                        @if ($catalogo->archivo_estatus == 1) checked="true" @endif>
                                    <span class="slider round"></span>
                                </label>
                            </div>
                            <span>
                                <small>OFF / ON swich para activar o desactivar mostrar el catalogo cargado,
                                    por defecto estará en OFF
                                </small>
                            </span>
                            <div
                                style="width:100%;padding-top:1rem;display:flex;align-items:center;justify-content:space-between;">
                                <label class="text-md-right" for="color_1">
                                    Eliminar PDF del catálogo
                                </label>
                                <button type="button" class="btn btn-danger disabled">Eliminar</button>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12 col-sm-12 col-md-6">

                            <div class="form-group">
                                {{-- <canvas id="preview_pdf" name="preview_pdf" style="max-width: 250px" src=""> --}}
                            </div>

                        </div>
                    </div>
                </div>

                <div class="row mb-4">
                    <div class="col-xs-12 col-sm-12 col-md-6 mb-3">
                        <div class="form-group">
                            <strong>Vigencia:</strong>
                            <input type="text" class="form-control" id="vigencia" name="vigencia" placeholder="Vigencia"
                                value="{{ $catalogo->vigencia }}" required disabled>
                        </div>
                    </div>
                </div>

                <div style="padding:10px;border-radius:10px;margin-bottom:20px" class="content bg-warning mt-4">
                    <div class="row">
                        <div class="col-xs-12 col-sm-12 col-md-12">
                            <h4>Aplicación Movil</h4>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-xs-12 col-sm-12 col-md-6">

                            <div class="form-group">
                                <label class="form-label">Imagen Banner</label>
                                <input type="file"
                                       name="banner"
                                       id="banner"
                                       class="form-control validar-img"
                                       accept="image/jpeg, image/png"
                                       data-max-width="1020"   {{-- px --}}
                                       data-max-height="400" {{-- px --}}
                                       data-max-size="200"    {{-- Kb --}}
                                       data-container-img="preview_banner"
                                       data-container-error="invalidImageBanner"
                                       disabled
                                >

                            </div>
                            <span style="color:red !important;" id="invalidImageBanner" class="d-none p-3"></span></i>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-xs-12 col-sm-12 col-md-6">
                            <div class="form-group">
                                @if ($catalogo->url_imagen_portada_ecommerce)
                                    <img style="max-width: 500px"
                                         id="preview_banner"
                                         name="preview_banner"
                                         src="{{ route('storage', ['typeFile' => 'catalogos_digitales/' . $catalogo->nameDirectory , 'filename' => $catalogo->url_imagen_portada_ecommerce]) }}"
                                    >
                                @endif
                            </div>
                        </div>
                    </div>

                </div>
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-6">
                        <div class="contenedor-select">
                            <label class="text-md-right" for="color_1">
                                <span class="requerido">* </span>
                                Activación de catalogo
                            </label>
                            <label class="switch">
                                <input type="checkbox" name="estatus" @if($catalogo->estatus == 1) checked="true" @endif disabled>
                                <span class="slider round"></span>
                            </label>

                        </div>
                        <span>
                            <small>OFF / ON swich para activar o desactivar el catalogo
                                para que sea visible o no desde la Aplicación Móvil, por defecto estará en OFF
                            </small>
                        </span>
                    </div>
                </div>

                <div class="row">

                    <div class="col-xs-12 col-sm-12 col-md-12 text-center">
                        <a class="btn btn-primary" href="{{ route('catalogos.index') }}">Regresar</a>
                        {{-- <button type="submit" class="btn btn-primary">Guardar</button> --}}
                    </div>
                </div>

            </form>
        </div>
    </div>

    <p class="text-center text-primary"><small>-</small></p>
@endsection

@section('js')

    <script>

    $(document).ready(function() {
        $('.js-example-basic-multiple').select2();
    });

    function getTemplateModalProducts() {
        return `
        <div class="row">
            <div class="form-group col-xs-12 col-sm-12 col-md-3 text-left">
                        <label for="nombre">Estilo:</label>
                        <input type="text" class="form-control" id="estilo" name="estilo"
                            placeholder=""
                            value="">
            </div>


            <div class="form-group col-xs-12 col-sm-12 col-md-3 text-left">
                <label for="estatus">Temporada:</label>
                <select class="form-control" id="temporada" name="temporada">
                    <option value="0" >Todos</option>
                    @foreach ($temporadas as $key => $temporada)
                        <option value="{{ $temporada->id }}">{{ $temporada->nombre }}</option>
                    @endforeach
                </select>
            </div>

            <div class="form-group col-xs-12 col-sm-12 col-md-2 text-left">
                <label for="estatus">Linea:</label>
                <select class="form-control" id="linea" name="linea">
                    <option value="0" >Todos</option>
                    @foreach ($lineas as $key => $linea)
                        <option value="{{ $linea->id }}">{{ $linea->nombre }}</option>
                    @endforeach
                </select>
            </div>
            <div class="form-group col-xs-12 col-sm-12 col-md-2 text-left">
                <label for="estatus">Descripción:</label>
                <select class="form-control" id="descripcion" name="descripcion">
                    <option value="0" >Todos</option>
                    @foreach ($descripciones as $key => $item)
                        <option value="{{ $item->id }}">{{ $item->nombre }}</option>
                    @endforeach
                </select>
            </div>

            <div class="form-group col-xs-12 col-sm-12 col-md-2 pull-right text-right botones-buscar">
                <button type="button" onclick="getFilteredProducts()" class="btn btn-primary buscar-filtro">
                    Buscar
                </button>
                <button type="button" onclick="quitarFiltros()" class="btn btn-default buscar-filtro-2">
                    Limpiar
                </button>
            </div>


        </div>
        <hr>
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12">
                <table style="padding-bottom:0; margin-bottom:0" class="table table-striped" width="100%">
                        <thead>
                            <tr>
                                <th style="width:5% !important">ID</th>
                                <th style="width:15% !important">Estilo</th>
                                <th style="width:15% !important">Linea</th>
                                <th style="width:10% !important" class="text-center">Tallas</th>
                                <th style="width:10% !important" class="text-center">Color</th>
                                <th style="width:10% !important" class="text-center">Temporada</th>
                                <th style="width:5% !important">Precio</th>
                                <th style="width:10% !important" class="text-center">Seleccionar
                                </th>
                            </tr>
                        </thead>
                </table>
                <div style="padding-top:0" class="overflow-table-y">
                    <table style="padding-top:0" id="seleccionProductos" class="table table-striped" width="100%">
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        `;

    }

    </script>

    <script src="{{ asset('js/catalogos.js?v=' . time()) }}"></script>
    <script>

    $(document).ready(function() {

            $('#searchButton').on('click', function (e) {
                e.preventDefault();
                if($('#searchText').val() == '') return;
                loadProducts('{{route('catalogos.show',$catalogo->id)}}'); // Llama a la función para buscar
            });

            $('#limpiarButton').on('click', function (e) {
                e.preventDefault();
                if($('#searchText').val() == '') return;
                $('#searchText').val('');
                loadProducts('{{route('catalogos.show',$catalogo->id)}}'); // Llama a la función para buscar
            });

            $('a.ease-in-out').on('click', function (e) {
                e.preventDefault();
                const url = $(this).attr('href');
                loadProducts(url);
            });

            function loadProducts(url) {

                const query = $('#searchText').val(); // Obtiene el valor de búsqueda

                $.ajax({
                    url: url,
                    type: 'get',
                    data: {
                         search: query
                    },
                    dataType: 'html',
                    success: function (data) {
                        $('#products-container').html(data);

                        $('a.ease-in-out').on('click', function (e) {
                            e.preventDefault();
                            const url = $(this).attr('href');
                            loadProducts(url);
                        });

                    },
                });
            }

        });

    </script>



@stop