@extends('layouts.app')
@section('content')
    @include('_flash-alerts')
    <div class="x_panel">

        <div class="x_title">
            <h3>Administrar Productos</h3>
            <small>
                online->items
            </small>
        </div>
        <span>Filtros</span>
        <div class="bg-malva-700 p-5 rounded ">

            <div>
                <form action="{{ route('items.index') }}" method="get" class="ml-3">
                    <label for="">
                        <i style="color: #00000063;">Buscador</i>
                        <div class="input-group mb-3">
                            <input type="text" class="form-control rounded-start-5" id="searchItem"
                                placeholder="Encontrar coincidencias" id="search" name="search"
                                aria-label="Recipient's username" aria-describedby="button-addon2"
                                value="{{ request('search') }}">
                            <button class="btn btn-malva rounded-end-5" type="submit" id="button-addon2"
                                onclick="openLoading()">Buscar</button>
                        </div>
                    </label>

                </form>
            </div>
            <div>
                <form action="{{ route('items.index') }}" method="get">
                    <div class="row">
                        <div class="col-md-11">
                            <div>
                                <label for="" class="text-malva ml-1">
                                    <b> Marca:</b>
                                    <select name="brand" id="brand" class="form-control rounded"
                                        onchange="updateUrlDownload()">
                                        <option value="none" selected readonly>Marca</option>
                                        @foreach ($brands as $brand)
                                            <option value="{{ $brand->id }}">
                                                {{ $brand->Description }}
                                            </option>
                                        @endforeach
                                    </select>
                                </label>
                                <label for="" class="text-malva ml-1">
                                    <b> Referencia/Barras:</b>
                                    <input type="text" class="rounded form-control " placeholder="Ejm: 89589444575">
                                </label>
                                <label for="" class="text-malva ml-1">
                                    <b> Categoría:</b>
                                    <select name="category" id="category" class="form-control rounded">
                                        <option value="" selected readonly>Categoría</option>
                                        @foreach ($categories as $category)
                                            <option value="{{ $category->id }}"> {{ $category->name }}</option>
                                        @endforeach
                                    </select>
                                </label>
                                {{-- <label for="" class="text-malva ml-1">
                                    <b> Proveedor:</b>
                                    <select name="vendor" class="form-control rounded">
                                        <option value="" selected readonly>Proveedor</option>
                                        @foreach ($vendors as $vendor)
                                            <option value="{{ $vendor->id }}">
                                                {{ $vendor->id }}-{{ $vendor->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </label> --}}
                            </div>
                        </div>
                        <div class="col-md-1">
                            <label for="">
                                <b>filtros</b>
                                <button type="submit" class="btn btn-malva" onclick="openLoading()">
                                    Aplicar
                                </button>
                            </label>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="x_panel " id="inicio" class="position-relative">
        <div class="m-0 sticky-top">
            <div class="float-right mt-3 mr-3 p-1">
                <a href="#inicio" class="rounded-pill bg-malva text-white p-3">
                    <i class="fa fa-arrow-up"></i>
                </a>
                <a class="rounded-pill bg-malva text-white p-3 " onclick="window.scrollTo(0,1000000)">
                    <i class="fa fa-arrow-down"></i>
                </a>
            </div>
        </div>
        <div class="x_title">
            <a class="btn btn-malva align-right btn-sm" href="{{ route('items.create') }}" onclick="openLoading()">
                <i class="fa fa-plus-square-o p-1" onclick="openLoading()" v-if="false"></i>Nuevo</a>
            <a class="btn btn-malva align-right btn-sm" href="{{ route('items.create-massive') }}" onclick="openLoading()">
                <i class="fa  fa-cloud-upload" onclick="openLoading()"></i>
                Carga Masivo
            </a>
            <a class="btn btn-malva align-right btn-sm" id="templateBrand" href="" onclick="downloadTemplate()"
                style="display: none;">
                <i class="fa  fa-download"></i>
                Descargar Plantilla
            </a>
        </div>
        {{ $items->links() }}
        @foreach ($items as $item)
            <div class="border  m-3 p-3 shadow rounded boxItem">
                <h3 class="mb-3 text-malva" id="name"> {{ $item->title ?? '' }}</h3>
                <b><sup>BASE:{{ $item->code_base }}&nbsp; GRUPO:{{ $item->code_group }}</sup></b>

                <div class="row mt-2">
                    <div class="col-md-3">
                        <img src="{{ $item->imgs[0]->url ?? asset('images/placeholder.png') }}" alt=""
                            class="img_min">
                    </div>
                    <div class="col-md-2">
                        <label class="text-malva">
                            <b>Marca:</b>
                            <i>{{ $item->brand->Description }}</i>
                        </label>
                        <label class="text-malva">
                            <b>Categoría:</b>
                            <i>{{ $item->category->name ?? '' }}</i>
                        </label>
                    </div>
                    <div class="col-md-5">
                        <label class="text-malva bg-malva-secondary p-3 rounded-3">
                            <b>Descripcion:</b>
                            <i>{{ $item->description }}</i>
                        </label>
                    </div>
                    <div class="col-md-2 d-flex justify-content-end">
                        <div>
                            <label class="text-malva mr-3">
                                <b>Estado:</b>
                                <i>{{ $item->status }}</i>
                            </label>
                        </div>
                        <div>
                            <a href="{{ route('items.edit', $item->id) }}" id="editItem" class="btn btn-info"
                                onclick="openLoading()">
                                <i class="fa fa-edit"></i>
                            </a>
                        </div>
                        <form action="{{ route('items.destroy', $item->id) }}" method="POST">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-danger btn/sm" onclick="openLoading()">
                                <i class="fa fa-trash"></i>
                            </button>
                        </form>
                    </div>
                </div>
                <div class="mt-3"><b>Variaciones:</b></div>
                <div class="row p-2">
                    @foreach ($item->variations as $variant)
                        <div class="col-md-3 m-2 bg-malva text-white p-3 rounded-3">
                            @php
                                $size = $variant->attributes->firstWhere('name', 'TALLA');
                                
                                $color = $variant->attributes->firstWhere('name', 'COLOR PRINCIPAL');
                            @endphp
                            <table>
                                <tbody class="text-white">
                                    <tr>
                                        <td>Sku Malva:</td>
                                        <td class="mr-2"><small>{{ $variant->sku_malva }}</small></td>
                                        <td class="mr-2">
                                            <span
                                                class="badge bg-info">{{ isset($size->pivot) ? $size->pivot->value : '' }}</span>
                                            <span
                                                class="badge bg-warning text-dark">{{ isset($color->pivot) ? $color->pivot->value : '' }}</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Código de Barras: </td>
                                        <td class="mr-2"><small> {{ $variant->ean13 }}</small></td>
                                    </tr>
                                    <tr>
                                        <td>Sku Marca:</td>
                                        <td class="pr-2"><small>{{ $variant->sku_marca }}</small></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    @endforeach
                </div>
            </div>
        @endforeach
        {{ $items->links() }}
    </div>
@endsection

@push('scripts')
    <script>
        const link_templateBrand = document.querySelector('#templateBrand')
        const inp_brand = document.querySelector('#brand')
        const inp_category = document.querySelector('#category')
        const inp_search = document.querySelector('#search')
        const url_params = window.location.search.replace('?', '')

        function updateUrlDownload() {

            let brand = inp_brand.value
            let url = `/items-export/${brand}/resume`

            link_templateBrand.href = url

            link_templateBrand.style.display = 'inline-block'

        }


        let params = url_params.split('&')
        params.forEach(param => {
            let [name, value] = param.split('=')
            if (name == 'brand') {
                inp_brand.value = value
                updateUrlDownload()
            }
            if (name == 'category') {
                inp_category.value = value
            }
            if (name == 'search') {
                inp_search.value = value
            }
        });
    </script>
@endpush