@extends('adminlte::page')

@section('title', 'Modificar productos')

@section('content_header')
    <h1>Dashboard</h1>
@endsection


@section('css')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <style>
        .category-tree {
            max-height: 250px;
            overflow-y: auto;
            border: 1px solid #ddd;
            padding: 10px;
            border-radius: 5px;
        }

        .category {
            margin-bottom: 5px;
        }

        .subcategory {
            margin-left: 20px;
        }
    </style>
@endsection

@section('content')
    <div class="card card-primary">
        <div class="card-header">
            <h3 class="card-title">Modificar productos en borrador <span class="badge bg-danger rounded-pill"><span
                        id="counter"></span> de {{ $inDraft }}</span></h3>
        </div>

        <form autocomplete="off" action="{{ Route('saveProduct') }}" method="POST" id="form-products"
            enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="idProduct" id="idProduct" value="">
            <div class="card-body">
                <div class="row">
                    <div class="col-lg-9 col-sm-12">
                        <div class="form-group">
                            <label for="name">Nombre:</label>
                            <input type="text" class="form-control" id="name" name="name"
                                placeholder="Ingresa el nombre" value="" minlength="3" maxlength="50" pattern="^\S.*"
                                required>
                            <span id="error-name" class="text-danger"></span>
                        </div>

                        <div class="form-group">
                            <label for="model">Modelo:</label>
                            <input type="text" class="form-control" id="model" name="model"
                                placeholder="Ingresa el modelo" value="" minlength="3" maxlength="50" pattern="^\S.*"
                                required>
                            <span id="error-model" class="text-danger"></span>
                        </div>

                        <div class="form-group">
                            <label for="description">Descripción:</label>
                            <textarea name="description" id="description" class="form-control" rows="3" minlength="10" maxlength="500"
                                placeholder="Ingresa una descripcion" pattern="^\S.*" style="resize: none;" required></textarea>
                            <span id="error-description" class="text-danger"></span>
                        </div>

                        <div class="form-group">
                            <label for="stock">Cantidad en el inventario:</label>
                            <input class="form-control" type="number" name="stock" id="stock" value=""
                                step="1" placeholder="Ingrese el inventario en existencia" required>
                            <span id="error-stock" class="text-danger"></span>

                            <input type="checkbox" name="reserve" id="reserve" value="1">
                            <label for="reserve">Se puede reservar</label>
                        </div>
                        <div class="form-group" style="display: none;" id="deliveryTime">
                            <label for="deliveryTime">Tiempo de entrega</label>
                            <input class="form-control" type="number" name="deliveryTime"
                                placeholder="Ingrese tiempo de entrega (en dias)" value="">
                                <span id="error-deliveryTime" class="text-danger"></span>
                        </div>

                        <div class="form-group">
                            <label for="price">Precio MXN:</label>
                            <input class="form-control" type="number" name="price" id="price" value=""
                                step="0.01" placeholder="Ingrese el precio" required>
                            <span id="error-price" class="text-danger"></span>
                        </div>
                        <div class="form-group">
                            <label for="cost">Costo USD:</label>
                            <input class="form-control" type="number" name="cost" id="cost"
                                value="" placeholder="Ingrese cuanto costo el producto"
                                required>
                            <span id="error-cost" class="text-danger"></span>
                        </div>
                        <div class="form-group">
                            <label for="inventoryLocation">En que almacen esta el producto</label>
                            <select class="form-control" name="inventoryLocation" id="inventoryLocation">
                                <option value="" disabled selected>Seleccione una opción</option>
                                @foreach ($stores as $store)
                                    <option value="{{ $store->id }}">{{ $store->store_name }}</option>
                                @endforeach
                            </select>
                            @if ($errors->has('inventoryLocation'))
                                <span class="text-danger">{{ $errors->first('inventoryLocation') }}</span>
                            @endif
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-12 bg-light">
                        {{-- Categories --}}
                        <label for="categories">Categorías y subcategorías</label>
                        <select id="categories" name="categories[]" class="form-control select2" multiple>
                            @foreach ($categoriesData as $categoryId => $subcategories)
                                @php $category = $categories->find($categoryId); @endphp

                                <option value="{{ $categoryId }}" @if (in_array($categoryId, old('categories', $productCategories ?? []))) selected @endif>
                                    {{ $category->display_name }} ({{ $category->products->count() }})
                                </option>

                                @foreach ($subcategories as $subcategory)
                                    <option value="sub_{{ $subcategory->id }}"
                                        @if (in_array($subcategory->id, old('subcategories', $productsubcategories ?? []))) selected @endif>
                                        └ {{ $subcategory->display_name }} ({{ $subcategory->products->count() }})
                                    </option>
                                @endforeach
                            @endforeach
                        </select>

                        {{-- Brand --}}
                        <div class="form-group mt-3" id="brandSelect">
                            <label for="brand">Marca</label>
                            <select class="form-control select2 w-100" id="brand" name="brand" required>
                                <option value="" disabled selected>*Selecciona una*</option>
                                @foreach ($brands as $brand)
                                    <option value="{{ $brand->id }}">
                                        {{ $brand->display_name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        {{-- Attributes --}}
                        <div class="form-group" id="attribSelect">
                            <label for="attribs">Atributos para el producto</label>
                            <select class="form-control attribs" id="attribs" name="attribs[]"
                                data-placeholder="Selecciona un atributo" style="width: 100%;" required>
                                <option value="" disabled>*Selecciona una*</option>
                                @foreach ($attributesData as $attributeName => $attributeValues)
                                    <optgroup label="{{ $attributeName }}">
                                        @foreach ($attributeValues as $value)
                                            <option value="{{ $value->id }}">
                                                {{ $value->display_name }}
                                            </option>
                                        @endforeach
                                    </optgroup>
                                @endforeach
                            </select>
                        </div>

                        {{-- Datasheet --}}
                        <div class="form-group">
                            <label for="datasheet">Ficha técnica del producto (opcional):</label>
                            <div id="datasheetWrapper">
                                <input type="text" class="form-control" id="datasheet" name="datasheet"
                                    placeholder="Ingresa el enlace de los datos técnicos" value="" minlength="3"
                                    maxlength="250">
                            </div>
                            <span id="error-datasheet" class="text-danger"></span>
                            <span id="error-fileInput" class="text-danger"></span>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="" id="changeDatasheet">
                                <label class="form-check-label" id="typeDatasheet" for="changeDatasheet">
                                    Cambiar a archivo
                                </label>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="type">¿Que tipo de producto es?</label>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="type" id="type1"
                                    value="1" required>
                                <label class="form-check-label" for="type1">
                                    > Fisico
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="type" id="type2"
                                    value="2" required>
                                <label class="form-check-label" for="type2">
                                    > Digital
                                </label>
                            </div>
                        </div>
                        <div class="form-group" id="package"></div>

                        <div class="form-group" id="digitalProduct"></div>

                        {{-- / right column --}}
                    </div>
                    {{-- / row --}}
                </div>
            </div>
            <div class="card-footer mt-3">
                <button type="submit" class="btn btn-success mt-3" id="submitProduct">Publicar producto</button>
                <button class="btn btn-primary mt-3" id="nextDraft">Guardar y siguiente producto</button>
            </div>
        </form>
        <div id="optionsButtons" class="mb-3 p-3 d-flex justify-content-center">
            <button class="btn btn-info px-5 m-1 addImages" id="addImages" data-product-id="" disabled>Agregar
                imagenes</button>
            <button type="button" class="btn btn-warning px-5 m-1 modImages" id="modImages" data-product-id=""
                disabled>Modificar imagenes</button>
            {{-- <button type="button" class="btn btn-danger mt-3 dropImages" id="dropImages" data-product-id=""
                disabled>Borrar
                imagenes</button> --}}
            <button type="button" class="btn btn-danger dropProduct px-5 m-1" id="dropProduct" data-product-id=""
                data-product-name="">Borrar producto</button>

            <form id="dropProductForm" action="{{ route('dropDraft') }}" method="POST">
                @csrf
                @method('DELETE')
                <input type="hidden" name="idProductToDrop" id="idProductToDrop" value="">
            </form>
        </div>
    </div>

    {{-- Add images in a product --}}
    <div class="modal fade" id="addImagesModal" tabindex="-1" role="dialog" aria-labelledby="notLinkedModal"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title text-info" id="notLinkedModal">Agregar imagenes al producto</h5>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Cerrar">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form autocomplete="off" id="addImagesForm" enctype="multipart/form-data"
                        action="{{ Route('addProductImages') }}" method="post">
                        @csrf
                        <input type="hidden" name="idProduct" id="idProduct" value="">
                        <p>Agregue imagenes para publicar el producto en la tienda</p>
                        <ul class="list-group" id="imageFieldsContainer">
                            <li class="list-group-item">
                                <small>Seleccione una opción de imagen para añadir</small>
                                <select class="form-control mt-1" id="imagesView">
                                </select>
                                <small>Dimensiones recomendadas por imagen: 0px X 0px</small>
                                <small>Extensiones permitidas:jpeg, png, jpg | max:2MB por imagen</small>
                            </li>
                            {{-- This should contain the images in others li input --}}
                        </ul>
                    </form>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-info" id="addProductImages" disabled>Añadir
                            imagenes</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Mod images in a product --}}
    <div class="modal fade" id="modImagesModal" tabindex="-1" role="dialog" aria-labelledby="notLinkedModal"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable modal-xxl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title text-warning" id="notLinkedModal">Modificar imagenes del producto</h5>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Cerrar">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form autocomplete="off" id="modImagesForm" enctype="multipart/form-data"
                        action="{{ Route('modProductImages') }}" method="post">
                        @csrf
                        <input type="hidden" name="idProductImages" id="idProductImages" value="">
                        <input type="hidden" name="current_view" id="current_view" value="modDrafts">

                        <small>Dimensiones recomendadas por imagen: 0px X 0px.</small>
                        <small>Extensiones permitidas:jpeg, png, jpg | max:2MB por imagen</small>
                        <div id="imagesContainer" class="text-center">
                            {{-- Here should have the images of the product --}}
                        </div>
                    </form>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-warning" id="modProductImages" disabled>Hacer
                            cambios</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    @vite('resources/js/products/validationsProducts.js')
    @vite('resources/js/products/modDraft.js')
    @vite('resources/js/products/addProductImages.js')
    @vite('resources/js/products/modProductImages.js')
    {{--@vite('resources/js/products/dropProductImages.js')--}}
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(document).ready(function () {
        $('.select2').select2({
            placeholder: "Selecciona una o varias categorías...",
            allowClear: true,
            width: '100%'
        });
    });
    </script>
@endsection