@extends('layouts.vendor')

@section('title', 'Agregar producto')

@section('css')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <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">Agregar productos</h3>
        </div>

        <form autocomplete="off" action="{{ Route('storeVendorProduct') }}" method="POST" id="form-products"
            enctype="multipart/form-data">
            @csrf
            <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 @error('name') is-invalid @enderror" id="name"
                                name="name" placeholder="Ingresa el nombre"
                                value="{{ old('name') ?? ($product->display_name ?? null) }}" minlength="3" maxlength="50"
                                pattern="^\S.*" required>
                            <span id="error-name" class="text-danger"></span>
                            @if ($errors->has('name'))
                                <span class="text-danger">{{ $errors->first('name') }}</span>
                            @endif
                        </div>

                        <div class="form-group">
                            <label for="model">Modelo:</label>
                            <input type="text" class="form-control @error('model') is-invalid @enderror" id="model"
                                name="model" placeholder="Ingresa el modelo"
                                value="{{ old('model') ?? ($product->model ?? ($modelValidated ?? null)) }}" minlength="3"
                                maxlength="50" pattern="^\S.*" required>
                            <span id="error-model" class="text-danger"></span>
                            @if ($errors->has('model'))
                                <span class="text-danger">{{ $errors->first('model') }}</span>
                            @endif
                        </div>

                        <div class="form-group">
                            <label for="description">Descripción:</label>
                            <textarea name="description" id="description" class="form-control @error('description') is-invalid @enderror"
                                rows="3" minlength="10" maxlength="500" placeholder="Ingresa una descripcion" pattern="^\S.*"
                                style="resize: none;" required>{{ old('description') ?? ($product->description ?? null) }}</textarea>
                            <span id="error-description" class="text-danger"></span>
                            @if ($errors->has('description'))
                                <span class="text-danger">{{ $errors->first('description') }}</span>
                            @endif
                        </div>
                        <div class="form-group">
                            <label for="price">Precio:</label>
                            <input class="form-control" type="number" name="price" id="price"
                                value="{{ old('price') ?? ($product->price ?? null) }}" step="0.01"
                                placeholder="Ingrese el precio" required>
                            <span id="error-price" class="text-danger"></span>
                            @if ($errors->has('price'))
                                <span class="text-danger">{{ $errors->first('price') }}</span>
                            @endif
                        </div>
                        {{--<div class="form-group">
                            <label for="cost">Costo USD:</label>
                            <input class="form-control" type="number" name="cost" id="cost"
                                placeholder="Ingrese cuanto costo el producto" required>
                            <span id="error-cost" class="text-danger"></span>
                            @if ($errors->has('cost'))
                                <span class="text-danger">{{ $errors->first('cost') }}</span>
                            @endif
                        </div>--}}
                    </div>
                    <div class="col-lg-3 col-sm-12 bg-light">
                        {{-- Categorías --}}
                        <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 @error('brand') is-invalid @enderror w-100" id="brand"
                                name="brand" required>
                                <option value="" disabled selected>*Selecciona una*</option>
                                @foreach ($brands as $brand)
                                    <option value="{{ $brand->id }}" @selected(old('brand') ?? $product && $product->iam_brand_id == $brand->id)>
                                        {{ $brand->display_name }}
                                    </option>
                                @endforeach
                            </select>
                            @if ($errors->has('brand'))
                                <span class="text-danger">{{ $errors->first('brand') }}</span>
                            @endif
                            <button type="button" id="addBrand" class="btn btn-link p-0 text-decoration-none"
                                data-bs-toggle="popover" data-bs-html="true" title="Agregar marca">
                                No encuentras una marca? Puedes agregarla
                            </button>
                        </div>

                        {{-- Video link --}}
                        <div class="form-group mt-3" id="brandSelect">
                            <label for="video_link">Link de video promocional (opcional)</label>
                            <input type="text" class="form-control @error('video_link') is-invalid @enderror"
                                id="video_link" name="video_link" placeholder="Ingresa el enlace del video"
                                value="{{ old('video_link') ?? ($product->video_link ?? null) }}" minlength="3">
                        </div>
                        <div class="form-group">
                            <label for="datasheet">Ficha técnica del producto (opcional):</label>
                            <div id="datasheetWrapper">
                                @if ($product && file_exists('uploads/datasheet/' . $product->datasheet))
                                    <input type="file" id="fileInput" name="fileInput" class="form-control">
                                    <small>Extensiones permitidas: pdf | Max: 2MB</small>
                                @else
                                    <input type="text" class="form-control @error('datasheet') is-invalid @enderror"
                                        id="datasheet" name="datasheet"
                                        placeholder="Ingresa el enlace de los datos técnicos"
                                        value="{{ old('datasheet') ?? ($product->datasheet ?? null) }}" minlength="3">
                                @endif
                            </div>
                            <span id="error-datasheet" class="text-danger"></span>
                            <span id="error-fileInput" class="text-danger"></span>
                            @if ($errors->has('datasheet'))
                                <span class="text-danger">{{ $errors->first('datasheet') }}</span>
                            @endif
                            @if ($errors->has('fileInput'))
                                <span class="text-danger">{{ $errors->first('fileInput') }}</span>
                            @endif
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value=""
                                    id="changeDatasheet"@if ($product && file_exists('uploads/datasheet/' . $product->datasheet)) checked @endif>
                                <label class="form-check-label" id="typeDatasheet" for="changeDatasheet">
                                    @if ($product && file_exists('uploads/datasheet/' . $product->datasheet))
                                        Cambiar a enlace
                                    @else
                                        Cambiar a archivo
                                    @endif
                                </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" {{ old('type') == 1 ? 'checked' : '' }} required
                                    @checked($product && $product->iam_type_id == 1)>
                                <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" {{ old('type') == 2 ? 'checked' : '' }} required
                                    @checked($product && $product->iam_type_id == 2)>
                                <label class="form-check-label" for="type2">
                                    > Digital
                                </label>
                            </div>
                            @if ($errors->has('type'))
                                <span class="text-danger">{{ $errors->first('type') }}</span>
                            @endif
                        </div>

                        <div class="form-group" id="package"></div>
                        @if ($errors->has('weight'))
                            <span class="text-danger">{{ $errors->first('weight') }}</span>
                        @endif
                        @if ($errors->has('length'))
                            <span class="text-danger">{{ $errors->first('length') }}</span>
                        @endif
                        @if ($errors->has('width'))
                            <span class="text-danger">{{ $errors->first('width') }}</span>
                        @endif
                        @if ($errors->has('height'))
                            <span class="text-danger">{{ $errors->first('height') }}</span>
                        @endif

                        <div class="form-group" id="digitalProduct"></div>
                        @if ($errors->has('product'))
                            <span class="text-danger">{{ $errors->first('product') }}</span>
                        @endif
                        {{-- / right column --}}
                    </div>
                    {{-- / row --}}
                </div>
            </div>
            <div class="card-footer mt-3">
                <button type="submit" class="btn btn-success mt-3" id="submitProduct">Agregar producto</button>
                {{-- <button type="submit" class="btn btn-info mt-3" id="addOtherProduct">Agregar otro producto</button> --}}
            </div>
        </form>
    </div>
@endsection

@section('js')
    @vite('resources/js/products/validationsProducts.js')
    @vite('resources/js/products/addProducts.js')
    @vite('resources/js/products/vendor/addBrand.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