@extends('layout.backoffice')
@section('content')
    <div class="row">
        <div class="col-lg-4">
            <div class="card card-primary card-outline">
                <div class="card-header">
                    <h5 class="card-title mb-0">{{ isset($stickerEntidad['id_producto_sticker']) ? 'Editar' : 'Crear' }} sticker</h5>
                </div>
                <div class="card-body">
                    <form id="form-sticker">
                        <input type="hidden" name="id" value="{{ $stickerEntidad['id_producto_sticker'] ?? '' }}"/>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">Nombre</label>
                                <input type="text" name="nombre" class="form-control system_validador_vacio" value="{{ $stickerEntidad['nombre'] ?? '' }}"/>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Prioridad</label>
                                <input type="number" name="prioridad" class="form-control" value="{{ $stickerEntidad['prioridad'] ?? 0 }}"/>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Estado</label>
                                @php $estadoSel = (string)($stickerEntidad['estado'] ?? '1'); @endphp
                                <select name="estado" class="form-select">
                                    <option value="1" {{ $estadoSel==='1' ? 'selected' : '' }}>Activo</option>
                                    <option value="0" {{ $estadoSel==='0' ? 'selected' : '' }}>Inactivo</option>
                                </select>
                            </div>

                            <div class="col-md-4">
                                <label class="form-label">Fecha inicio</label>
                                <input type="date" name="fecha_inicio" class="form-control system_validador_vacio" value="{{ isset($stickerEntidad['fecha_inicio']) ? \Carbon\Carbon::parse($stickerEntidad['fecha_inicio'])->format('Y-m-d') : '' }}"/>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Fecha fin</label>
                                <input type="date" name="fecha_fin" class="form-control system_validador_vacio" value="{{ isset($stickerEntidad['fecha_fin']) ? \Carbon\Carbon::parse($stickerEntidad['fecha_fin'])->format('Y-m-d') : '' }}"/>
                            </div>

                            <div class="col-md-9">
                                <label class="form-label">URL de imagen</label>
                                <div class="input-group">
                                    {{--                                    <input type="file" id="file-sticker" accept="image/*" class="d-none"/>--}}
                                    {{--                                    <input type="hidden" name="imagen_url" id="imagen_url" class="form-control system_validador_vacio" placeholder="https://..." value="{{ $stickerEntidad['imagen_url'] ?? '' }}"/>--}}
                                    {{--                                    <button class="btn btn-outline-secondary" type="button" id="btn-subir-imagen">--}}
                                    {{--                                        <i class='bx bx-upload'></i> Seleccionar imagen--}}
                                    {{--                                    </button>--}}


                                    <input type="file" class="form-control info-img" id="info-img">
                                    <input type="hidden" name="imagen_url" id="imagen_url" class="imagen_url" value="{{ $stickerEntidad['imagen_url'] ?? '' }}"/>
                                </div>
                                <div class="form-text">Puedes pegar la URL o subir una imagen. Se recomienda PNG/WebP con fondo transparente.</div>
                            </div>
                            <div class="col-md-3 text-center">
                                <label class="form-label d-block">Previsualización</label>
                                <img id="prev-sticker" src="{{ $stickerEntidad['imagen_url'] ?? '' }}" alt="previsualizacion" style="max-width:100%; max-height:80px; border:1px solid #e1e1e1; border-radius:4px; padding:2px; background:#fff"/>
                            </div>

                            <div class="col-12">
                                <hr/>
                                <h6 class="mb-1">Reglas de aplicación</h6>
                            </div>
                            <div class="col-md-12">
                                <label class="form-label">Marcas</label>
                                <select id="reglas_marcas_sel" class="form-control select2" multiple>
                                    @if(!empty($listadoMarcas))
                                        @foreach($listadoMarcas as $marca)
                                            <option value="{{ $marca }}">{{ $marca }}</option>
                                        @endforeach
                                    @endif
                                </select>
                                <small class="text-muted">Puede seleccionar varias marcas</small>
                            </div>
                            <div class="col-md-12">
                                <label class="form-label">Categorías</label>
                                <select id="reglas_categorias_sel" class="form-control select2" multiple>
                                    @if(!empty($listadoCategorias))
                                        @php
                                            function renderCatOptions($lista, $prefijo = '') {
                                                foreach ($lista as $cat) {
                                                    $nombre = $cat['nombre'] ?? '';
                                                    $ruta = trim($prefijo . ($prefijo ? ' > ' : '') . $nombre);
                                                    echo '<option value="' . e($ruta) . '">' . e($ruta) . '</option>';
                                                    if (!empty($cat['sub_cat'])) {
                                                        renderCatOptions($cat['sub_cat'], $ruta);
                                                    }
                                                }
                                            }
                                            renderCatOptions($listadoCategorias ?? []);
                                        @endphp
                                    @endif
                                </select>
                                <small class="text-muted">Puede seleccionar varias categorías</small>
                            </div>
                            <div class="col-md-12">
                                <label class="form-label">Productos (códigos separados por coma)</label>
                                @php
                                    $reglasEntidad = $stickerEntidad['reglas'] ?? [];
                                    if (is_string($reglasEntidad)) { $reglasEntidad = json_decode($reglasEntidad, true) ?: []; }
                                    $productosTxt = '';
                                    if (!empty($reglasEntidad['productos']) && is_array($reglasEntidad['productos'])) {
                                        $productosTxt = implode(', ', $reglasEntidad['productos']);
                                    }
                                @endphp
                                <input type="text" id="reglas_productos_sel" class="form-control" placeholder="SKU001, SKU002" value="{{ $productosTxt }}"/>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="card-footer d-flex">
                    <div>
                        @if(validarAccion("crear_actualizar_productos"))
                            <button type="button" class="btn btn-primary btn-sm" id="btn-guardar-sticker">
                                <i class="bx bx-save"></i> {{ isset($stickerEntidad['id_producto_sticker']) ? 'Actualizar' : 'Guardar' }}
                            </button>
                            @if(isset($stickerEntidad['id_producto_sticker']))
                                <a href="{{ url('backoffice/producto/sticker') }}" class="btn btn-secondary btn-sm ms-1">
                                    <i class="bx bx-x"></i> Cancelar
                                </a>
                            @endif
                        @endif
                    </div>
                    @if(isset($stickerEntidad['id_producto_sticker']))
                        <div class="ms-auto">
                            <button type="button" class="btn btn-danger btn-sm" id="btn-eliminar" data-id="{{ $stickerEntidad['id_producto_sticker'] }}">
                                <i class="bx bx-trash"></i> Eliminar
                            </button>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="col-lg-8 mb-4">
            <div class="card card-primary card-outline">
                <div class="card-header">
                    <h3 class="card-title">Stickers Registrados</h3>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover table-striped" id="tabla-stickers">
                            <thead>
                            <tr>
                                <th>Nombre</th>
                                <th>Imagen</th>
                                <th>Prioridad</th>
                                <th>Estado</th>
                                <th>Vigencia</th>
                                <th>Reglas</th>
                                <th style="width:140px;">Acciones</th>
                            </tr>
                            </thead>
                            <tbody>
                            @if(!empty($stickers))
                                @foreach($stickers as $sticker)
                                    @php
                                        $idSt = $sticker['id_producto_sticker'] ?? null;
                                        $estado = (int)($sticker['estado'] ?? 0);
                                    @endphp
                                    <tr>
                                        <td>{{$sticker["nombre"]}}</td>
                                        <td><img src="{{$sticker["imagen_url"]}}" style="max-height:30px"/></td>
                                        <td>{{$sticker["prioridad"] ?? 0}}</td>
                                        <td><span class="badge bg-{{ $estado ? 'success' : 'danger' }} rounded-pill">{{ $estado ? 'Activo' : 'Inactivo' }}</span></td>
                                        <td>{{\Carbon\Carbon::parse($sticker["fecha_inicio"])->format('d/m/Y') . ' al ' . \Carbon\Carbon::parse($sticker["fecha_fin"])->format('d/m/Y')}}</td>
                                        <td>
                                            @php
                                                $reglas = $sticker['reglas'] ?? null;
                                                $reglas = is_string($reglas) ? json_decode($reglas, true) : $reglas;
                                            @endphp
                                            @if(!empty($reglas['marcas']))
                                                <b>Marcas:</b> {{ implode(', ', $reglas['marcas']) }}<br>
                                            @endif
                                            @if(!empty($reglas['categorias']))
                                                <b>Categorías:</b> {{ implode(', ', $reglas['categorias']) }}<br>
                                            @endif
                                            @if(!empty($reglas['productos']))
                                                <b>Productos:</b> {{ implode(', ', $reglas['productos']) }}
                                            @endif</td>
                                        <td>
                                            <div class="btn-group btn-group-sm">
                                                <a href="{{ url('backoffice/producto/sticker/' . $idSt) }}" class="btn btn-sm btn-outline-primary"><i class="bx bx-edit"></i></a>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        function cargarOpciones(selectId, values) {
            const $sel = jQuery('#' + selectId);
            (values || []).forEach(function (v) {
                if (!$sel.find('option[value="' + String(v).replaceAll('"', '\\"') + '"]').length) {
                    const opt = new Option(v, v, true, true);
                    $sel.append(opt);
                }
            });
        }

        async function guardarSticker() {
            if (!system_validarcampos('form-sticker')) {
                return;
            }

            await cargarDocImg('#info-img', 'imagenes/sticker', '#imagen_url');

            const marcasSel = jQuery('#reglas_marcas_sel').val() || [];
            const categoriasSel = jQuery('#reglas_categorias_sel').val() || [];
            const productosTxt = jQuery('#reglas_productos_sel').val() || '';
            const productosSel = productosTxt
                .split(',')
                .map(v => v.trim())
                .filter(v => v.length > 0);

            const formData = getDataJson('form-sticker');
            const payload = {
                id: formData.id || '',
                form: formData,
                reglas: {
                    marcas: marcasSel,
                    categorias: categoriasSel,
                    productos: productosSel,
                }
            };

            Mostrarloader();
            const resp = await axios.post('productos/sticker/guardar', payload);
            Ocultarloader();
            if (resp?.data?.error === 1) {
                notificarUsuario('Error guardando sticker');
                return;
            }
            window.location.href = "{{ url('backoffice/producto/sticker') }}";
        }

        function eliminarSticker(id) {
            Swal.fire({
                title: '¿Seguro que desea eliminar este sticker?',
                text: "Esta acción no se puede revertir.",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Si',
                cancelButtonText: 'No'
            }).then((result) => {
                if (result.value) {
                    Mostrarloader()
                    axios.delete('productos/sticker/' + (id)).then(function (resp) {
                        Ocultarloader()
                        if (resp.data.error === 0) {
                            Swal.fire("Sticker eliminado", '', 'success').then(function () {
                                window.location.href = "{{ url('backoffice/producto/sticker') }}";
                            });
                        } else {
                            notificarUsuario(resp.data.mensaje);
                        }
                    });
                }
            });
        }

        jQuery(document).ready(function () {
            // Inicializar select2
            jQuery('#reglas_marcas_sel').select2({
                placeholder: 'Seleccione marcas',
                allowClear: true
            });
            jQuery('#reglas_categorias_sel').select2({
                placeholder: 'Seleccione categorías',
                allowClear: true
            });

            // Precargar reglas si hay entidad
            const reglasEntidad = @json($reglasEntidad ?? []);
            if (reglasEntidad) {
                cargarOpciones('reglas_marcas_sel', reglasEntidad.marcas || []);
                cargarOpciones('reglas_categorias_sel', reglasEntidad.categorias || []);
                jQuery('#reglas_marcas_sel').val(reglasEntidad.marcas || []).trigger('change');
                jQuery('#reglas_categorias_sel').val(reglasEntidad.categorias || []).trigger('change');
            }

            jQuery('#btn-guardar-sticker').on('click', function () {
                guardarSticker();
            });

            jQuery('#btn-eliminar').on('click', function () {
                let id = jQuery(this).data("id")
                eliminarSticker(id);
            });

            jQuery('#imagen_url').on('change', function () {
                const url = jQuery(this).val();
                jQuery('#prev-sticker').attr('src', url || '');
            });

            jQuery('#info-img').on('change', function (event) {
                let file = event.target.files[0];
                let preview = jQuery('#prev-sticker');
                if (file) {
                    let reader = new FileReader();
                    reader.onload = function (e) {
                        preview.attr('src', e.target.result).show();
                    }
                    reader.readAsDataURL(file);
                }
            });
        });
    </script>
@endsection