@extends('adminlte::page')

@section('title', 'Categorias')

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

@section('content')
    {{-- Categories --}}
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Categorias</h3>
                </div>
                <div class="d-flex justify-content-between col-sm mt-3 px-4">
                    <a href="{{ Route('addCategory') }}" class="btn btn-success px-4">
                        Agregar nueva Categoría/subcategoría
                    </a>
                    <div class="btn-group dropstart">
                        <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown"
                            aria-expanded="false">
                            <i class="bi bi-tools"></i>
                            Herramientas
                        </button>

                        <ul class="dropdown-menu">
                            @if ($notLinked->count() > 0)
                                <li class="fw-bold dropdown-item disabled">
                                    Tienes subcategorias sin asignar
                                    <span class="badge bg-danger rounded-pill">{{ $notLinked->count() }}</span>
                                </li>
                                <li>
                                    <hr class="dropdown-divider">
                                </li>
                                <li><a href="" class="dropdown-item" id="deleteNotLinked"
                                        data-not-linked="{{ $notLinked->count() }}">Borrar subcategorías desenlazadas</a>
                                </li>
                                <li><a href="" class="dropdown-item" id="assignCategory"
                                        data-not-linked="{{ $notLinked->count() }}">Enlazar subcategorías</a>
                                </li>
                                <li><a class="dropdown-item" href="#">...</a></li>
                            @else
                                <li class="fw-bold dropdown-item disabled">
                                    No tienes subcategorias sin asignar
                                    <span class="badge bg-danger rounded-pill">{{ $notLinked->count() }}</span>
                                </li>
                            @endif

                        </ul>
                    </div>
                </div>
                <div class="d-flex row mt-3 p-3">
                    <div class="col-8">
                    </div>
                    <div class="col-4">
                        <form action="{{ Route('searchCategories') }}" method="GET">
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-10">
                                        <input class="form-control" type="text" placeholder="Buscar categoria/subcategoria..."
                                            name="query">
                                    </div>
                                    <div class="col-2">
                                        <button class="btn custom-hover-button" type="submit"><i
                                                class="bi bi-search"></i></button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="card-body">
                    <div class="">
                        <table class="table table-bordered table-hover">
                            <thead>
                                <tr>
                                    <th>Nombre</th>
                                    <th style="width: 100%;">Descripción</th>
                                    <th style="width: 10%;">Slug</th>
                                    <th>Stock</th>
                                    <th style="width: 5%; height: 5%; align-items:center;">Imagen</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($categories as $category)
                                    <tr data-widget="expandable-table" aria-expanded="false" class="row-loading">
                                        <td>{{ $category->display_name }}</td>
                                        <td>{{ $category->description }}</td>
                                        <td>{{ $category->slug }}</td>
                                        <td>{{ $category->stock }}</td>
                                        <td class="text-center">
                                            @if ($category->category_image == null)
                                                <img src="{{ Asset('assets/carrito.png') }}" alt="Image"
                                                    class="img-fluid rounded align-middle border" alt="Sin imagen2"
                                                    width="50%" height="50%">
                                            @else
                                                <img src="{{ Asset('uploads/categories/' . $category->category_image) }}"
                                                    class="img-fluid rounded align-middle border" alt="Sin imagen1"
                                                    width="50%" height="50%">
                                            @endif
                                        </td>
                                    </tr>
                                    {{-- Actions --}}
                                    <tr class="expandable-body row-loading">
                                        <td colspan="5" disabled>
                                            <div class="d-flex mx-auto justify-content-between">
                                                <p class="mt-1">Ultima Modificación: {{ $category->updated_at }}</p>
                                                <div class="row p-1">
                                                    <a href="{{ Route('modCategory', $category->slug) }}"
                                                        class="btn btn-warning m-1">Modificar</a>

                                                    <a href="" class="btn btn-danger dropCategory m-1"
                                                        data-category-id="{{ $category->id }}"
                                                        data-category-name="{{ $category->display_name }}">Borrar</a>

                                                    <form id="dropCategory_{{ $category->id }}"
                                                        action="{{ route('dropCategories', ['id' => $category->id]) }}"
                                                        method="POST">
                                                        @csrf
                                                        @method('DELETE')
                                                    </form>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td class="bg-secondary" colspan="5" align="center">Sin categorias, agrege una
                                            nueva
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Sub categories --}}
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">SubCategorias</h3>
                </div>

                <div class="card-body">
                    <div class="">
                        <table id="subCategories" class="table table-bordered table-hover">
                            <thead>
                                <tr>
                                    <th>Nombre</th>
                                    <th style="width: 20%;">Descripción</th>
                                    <th>Slug</th>
                                    <th>Stock</th>
                                    <th>Categoria padre</th>
                                </tr>
                            </thead>
                            <tbody>
                                {{-- Actions --}}
                                @if ($categories->count() == 0 && $subcategories->count() > 0)
                                    <tr class="bg-secondary" colspan="9" align="center">
                                        <td colspan="9">Sin categorias padre, agregue una nueva para poder usar las
                                            subcategorias</td>
                                    </tr>
                                @else
                                    @forelse ($subcategories as $subCategory)
                                        <tr data-widget="expandable-table" aria-expanded="false" class="row-loading">
                                            <td>{{ $subCategory->display_name }}</td>
                                            <td>{{ $subCategory->description }}</td>
                                            <td>{{ $subCategory->slug }}</td>
                                            <td>{{ $subCategory->stock }}</td>
                                            @php
                                                $parent = $parents->where('id', $subCategory->iam_category_id)->first();
                                            @endphp
                                            @if ($parent == null)
                                                <td class="text-danger">Se requiere vicular a una categoría</td>
                                            @else
                                                <td>{{ $parent->display_name }}</td>
                                            @endif
                                        </tr>
                                        <tr class="expandable-body row-loading">
                                            <td colspan="5" disabled>
                                                <div class="d-flex mx-auto justify-content-between">
                                                    <p class="mt-1">Ultima Modificación: {{ $subCategory->updated_at }}
                                                    </p>
                                                    <div class="row p-1">
                                                        <a href="{{ Route('modSubCategory', $subCategory->slug) }}"
                                                            class="btn btn-warning m-1">Modificar</a>

                                                        <a href="" class="btn btn-danger dropSubCategory m-1"
                                                            data-subcategory-id="{{ $subCategory->id }}"
                                                            data-subcategory-name="{{ $subCategory->display_name }}">Borrar</a>

                                                        <form id="dropSubCategory_{{ $subCategory->id }}"
                                                            action="{{ route('dropCategories', ['id' => $subCategory->id, 'sub' => true]) }}"
                                                            method="POST">
                                                            @csrf
                                                            @method('DELETE')
                                                        </form>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td class="bg-secondary" colspan="5" align="center">Sin subcategorias,
                                                agrege
                                                una
                                                nueva
                                            </td>
                                        </tr>
                                    @endforelse
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
                @if ($categories->count() > 0)
                    <div class="container d-flex justify-content-center">
                        {{ $subcategories->links() }}
                    </div>
                @endif
            </div>
        </div>
    </div>

    {{-- Form select subcat unlinked to drop in this module --}}
    <div class="modal fade" id="dropSubcat" tabindex="-1" role="dialog" aria-labelledby="notLinkedModal"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title text-danger" id="notLinkedModal">Borrar subcategorias desenlazadas</h5>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Cerrar">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form autocomplete="off" id="dropSubCatForm" action="{{ Route('dropUnlinkCat') }}" method="post">
                    @csrf
                    @method('DELETE')
                    <div class="modal-body">
                        <p>Seleccione las subcategorias a borrar</p>
                        <ul class="list-group">
                            <li class="list-group-item bg-secondary">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="catToDropAll">
                                    <label class="form-check-label" for="catToDropAll">
                                        Seleccionar todo
                                    </label>
                                </div>
                            </li>
                            @foreach ($notLinked as $cat)
                                <li class="list-group-item list-group-item-action sc">
                                    <div class="form-check">
                                        <input class="form-check-input subCategories" type="checkbox"
                                            value="{{ $cat->id }}" id="catToDrop{{ $cat->id }}"
                                            name="subCategories[]">
                                        <label class="form-check-label" for="catToDrop{{ $cat->id }}">
                                            {{ $cat->display_name }}
                                        </label>
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" id="dropUnsignedCats">Borrar seleccionados</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Form select subcat unlinked to assignment in this module --}}
    <div class="modal fade" id="assingModal" tabindex="-1" role="dialog" aria-labelledby="notLinkedModal"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title text-success" id="notLinkedModal">Asignar subcategorias desenlazadas</h5>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Cerrar">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form autocomplete="off" id="assignSubCatForm" action="{{ Route('assignSubcategory') }}"
                    method="post">
                    @csrf
                    <div class="modal-body">
                        <div class="row">
                            <div class="d-flex form-group px-2" id="categorySelect">
                                <label for="categoryParent">Seleccione la categoria para asignar</label>
                                <select class="form-control" id="categoryParent" name="categoryParent" required>
                                    <option value="" disabled selected>*Selecciona una*</option>
                                    @foreach ($categories as $category)
                                        <option value="{{ $category->id }}">
                                            {{ $category->display_name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <p>Elija las categorias:</p>
                        <ul class="list-group">
                            @foreach ($notLinked as $cat)
                                <li class="list-group-item list-group-item-action sc">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" value="{{ $cat->id }}"
                                            id="catToAssign{{ $cat->id }}" name="AsSubcategories[]">
                                        <label class="form-check-label" for="catToAssign{{ $cat->id }}">
                                            {{ $cat->display_name }}
                                        </label>
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-success" id="assignUnsignedCats">Asignar
                            seleccionados</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('js')
    @vite('resources/js/categories/listCategories.js')
@endsection