@extends('admin.app')
<x-navigation page-title="Todos los productos" group-name="Todos los productos"/>
@section('content')
    @include('admin._includes.flash')
    <div class="d-flex flex-column fap-7 gap-lg-10">
        <div class="card card-flush shadow-sm">
            <div class="card-header align-items-center py-5 gap-2 gap-md-5">
                <div class="card-title">
                    <h1>Tabla de Categorías</h1>
                </div>
                <div class="card-toolbar flex-row-fluid justify-content-end gap-5">
                    <button class="btn btn-icon-dark btn-text-dark bg-gray-300 btn-active-danger" type="button" id="kt_table_reset_category_products">
                        <i class="ki-duotone ki-cross-circle fs-3">
                            <i class="path1"></i>
                            <i class="path2"></i>
                        </i> Resetear Filtro
                    </button>
                    <x-datatable.buttons :create-link="route('admin.category_products.create')"/>
                </div>
            </div>
            <div class="card-header">
                <div class="card-title col m-0">
                    <x-datatable.search placeholder="Buscar por nombre de la categoría ..." suffix="-category_products"/>
                </div>
            </div>
            <div class="card-body p-0">
                <x-datatable table-name="kt_table_category_products">
                    <th class="w-50px">#</th>
                    <th class="min-w-150px">Nombre</th>
                    <th class="min-w-150px">N° Marcas</th>
                    <th class="min-w-150px">Posición</th>
                    <th class="min-w-150px">Estado</th>
                    <th class="text-end min-w-200px">Acciones</th>
                </x-datatable>
            </div>
        </div>

        <div class="card card-flush shadow-sm">
            <div class="card-header align-items-center py-5 gap-2 gap-md-5">
                <div class="card-title">
                    <h1>Tabla de Marcas</h1>
                </div>
                <div class="card-toolbar flex-row-fluid justify-content-end gap-5">
                    <button class="btn btn-icon-dark btn-text-dark bg-gray-300 btn-active-danger" type="button" id="kt_table_reset_subcategory_products">
                        <i class="ki-duotone ki-cross-circle fs-3">
                            <i class="path1"></i>
                            <i class="path2"></i>
                        </i> Resetear Filtro
                    </button>
                    <x-datatable.buttons :create-link="route('admin.subcategory_products.create')"/>
                </div>
            </div>
            <div class="card-header">
                <div class="card-title col m-0">
                    <x-datatable.search placeholder="Buscar por nombre de la marca..." suffix="-subcategory_products"/>
                </div>
            </div>
            <div class="card-body p-0">
                <x-datatable table-name="kt_table_subcategory_products">
                    <th class="w-50px">#</th>
                    <th class="min-w-150px">Nombre</th>
                    <th class="min-w-150px">Categoría</th>
                    <th class="min-w-150px">N° marcas</th>
                    <th class="min-w-100px">Posición</th>
                    <th class="min-w-150px">Estado</th>
                    <th class="text-end min-w-150px">Acciones</th>
                </x-datatable>
            </div>
        </div>

        <div class="card card-flush shadow-sm">
            <div class="card-header align-items-center py-5 gap-2 gap-md-5">
                <div class="card-title">
                    <h1>Tabla de Productos</h1>
                </div>
                <div class="card-toolbar flex-row-fluid justify-content-end gap-5">
                    <button class="btn btn-icon-dark btn-text-dark bg-gray-300 btn-active-danger" type="button" id="kt_table_reset">
                        <i class="ki-duotone ki-cross-circle fs-3">
                            <i class="path1"></i>
                            <i class="path2"></i>
                        </i> Resetear Filtro
                    </button>
                    <x-datatable.buttons :create-link="route('admin.products.create')"/>
                </div>
            </div>
            <div class="card-header">
                <div class="card-title col m-0">
                    <x-datatable.search placeholder="Buscar por nombre del producto o marca..." suffix="-products"/>
                </div>
            </div>
            <div class="card-body p-0">
                <x-datatable table-name="kt_table_products">
                    <th class="w-50px">#</th>
                    <th class="min-w-150px">Nombre</th>
                    <th class="min-w-150px">Marca</th>
                    <th class="min-w-150px">Posición</th>
                    <th class="min-w-150px">Estado</th>
                    <th class="text-end min-w-200px">Acciones</th>
                </x-datatable>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script type="text/javascript">

        var dt;
        var dtCategory;
        var dtSubcategory;

        KTUtil.onDOMContentLoaded(function () {
            <x-datatable.scripts table-name="kt_table_products" order="[[0, 'asc']]" ajax-url="{{route('admin.products.ajax')}}" datatable-variable="dt">
                <x-slot name="columns">
                    { "searchable": false, "orderable": true,  "className": 'text-center', data: "id"},
                    { "searchable": true,  "orderable": true,  "className": null,          data: "name"},
                    { "searchable": false, "orderable": false, "className": 'text-center', data: "subcategoryproduct.name"},
                    { "searchable": false, "orderable": true,  "className": 'text-center', data: "position"},
                    { "searchable": false, "orderable": true,  "className": 'text-center', data: "status"},
                    { "searchable": false, "orderable": false, "className": null,          data: null },
                </x-slot>
                <x-slot name="columnDefinition">
                    {   targets: 1,
                        render: function (data, type, row) {
                            return`
                                <div class="d-flex align-items-center">
                                    <a href="${row.cover}" class="symbol symbol-50px symbol-2by3 w-125px">
                                        <span class="symbol-label w-100 bg-transparent" style="background-image:url(${row.cover});background-size:contain;"></span>
                                    </a>
                                    <div class="ms-5">
                                        <span class="text-gray-800 text-hover-primary fs-5 fw-bold">${data}</span>
                                        <div class="text-muted fs-7 fw-bold">Imagen</div>
                                    </div>
                                </div>
                            `;
                        },
                    },
                    {   targets: 2,
                        render: function (data) {
                            return `
                                <span class="btn btn-sm btn-flex btn-light-info">
                                    <span class="d-flex flex-column align-items-center">
                                        <span class="fs-7 fw-bold">${data}</span>
                                    </span>
                                </span>
                                `;
                        },
                    },
                    {   targets: 3,
                        render: function (data, type, row) {
                            return `<button type="button" class="btn btn-sm badge badge-light-primary">${data}</button>`;
                        },
                    },
                    {   targets: 4,
                        render: function (data, type, row) {
                            var status = {
                                title: data ? 'Activado': 'Desactivado',
                                class: data ? 'badge-light-success': 'badge-light-danger',
                            };

                            return `<span class="badge py-3 px-4 fs-7 ${status.class}">${status.title}</span>`;
                        },
                    }
                </x-slot>
                <x-slot name="actions">
                    <div class="menu-item px-3">
                        <a href="/admin/products/${row.id}/status" class="menu-link px-3" data-table-action="ajax">${row.status?'Desactivar':'Activar'}</a>
                    </div>
                    <div class="menu-item px-3">
                        <a href="/admin/products/${row.id}/edit" class="menu-link px-3">Editar</a>
                    </div>
                    <div class="menu-item px-3">
                        <a href="/admin/products/${row.id}/destroy" class="menu-link px-3" data-table-action="delete">Eliminar</a>
                    </div>
                </x-slot>
            </x-datatable.scripts>

            <x-datatable.scripts table-name="kt_table_category_products" order="[[3, 'asc']]" ajax-url="{{route('admin.category_products.ajax')}}" datatable-variable="dtCategory" >
                <x-slot name="columns">
                    { "searchable": false, "orderable": true,  "className": 'text-center', data: "id"},
                    { "searchable": false, "orderable": false, "className": 'text-start',  data: "name"},
                    { "searchable": false, "orderable": false, "className": 'text-center', data: "subcategoryproducts_count"},
                    { "searchable": false, "orderable": false, "className": 'text-center', data: "position"},
                    { "searchable": false, "orderable": false, "className": 'text-center', data: "status"},
                    { "searchable": false, "orderable": false, "className": 'text-end',    data: null },
                </x-slot>
                <x-slot name="config">
                    paging: false,
                    info: false,
                </x-slot>
                <x-slot name="columnDefinition">
                    {   targets: 1,
                        render: function (data, type, row) {
                            return `<span class="text-gray-800 text-hover-primary fs-5 fw-bold">${data}</span>`;
                        },
                    },
                    {   targets: 2,
                        render: function (data, type, row) {
                            return `
                                <span class="btn btn-sm btn-flex btn-light-info">
                                    <i class="ki-duotone ki-magnifier fs-2">
                                        <span class="path1"></span>
                                        <span class="path2"></span>
                                    </i>
                                    <span class="d-flex flex-column align-items-center ms-2">
                                        <span class="fs-7 fw-bold">${row.subcategoryproducts_count} subcategorías</span>
                                    </span>
                                </span>
                            `;
                        },
                    },
                    {   targets: 3,
                        render: function (data, type, row) {
                            return `<button type="button" class="btn btn-sm badge badge-light-primary">${data}</button>`;
                        },
                    },
                    {   targets: 4,
                        render: function (data, type, row) {
                            var status = {
                                title: data ? 'Activado': 'Desactivado',
                                class: data ? 'badge-light-success': 'badge-light-danger',
                            };
                            return `
                                <div class="d-flex justify-content-center gap-3">
                                    <span class="badge py-3 px-4 fs-7 ${status.class}">${status.title}</span>
                                </div>
                            `;
                        },
                    }
                </x-slot>
                <x-slot name="actions">
                    <div class="menu-item px-3">
                        <a href="/admin/category_products/${row.id}/status" class="menu-link px-3" data-table-action="ajax">${row.status?'Desactivar':'Activar'}</a>
                    </div>
                    <div class="menu-item px-3">
                        <a href="/admin/category_products/${row.id}/edit" class="menu-link px-3">Editar</a>
                    </div>
                    <div class="menu-item px-3">
                        <a href="/admin/category_products/${row.id}/destroy" class="menu-link px-3"  data-table-action="delete">Eliminar</a>
                    </div>
                </x-slot>
            </x-datatable.scripts>

            <x-datatable.scripts table-name="kt_table_subcategory_products" order="[[3, 'asc']]" ajax-url="{{route('admin.subcategory_products.ajax')}}" datatable-variable="dtSubcategory" >
                <x-slot name="columns">
                    { "searchable": false, "orderable": true,  "className": 'text-center', data: "id"},
                    { "searchable": false, "orderable": false, "className": 'text-start',  data: "name"},
                    { "searchable": false, "orderable": false, "className": 'text-center', data: "categoryproducts.name"},
                    { "searchable": false, "orderable": false, "className": 'text-center', data: "products_count"},
                    { "searchable": false, "orderable": false, "className": 'text-center', data: "position"},
                    { "searchable": false, "orderable": false, "className": 'text-center', data: "status"},
                    { "searchable": false, "orderable": false, "className": 'text-end',    data: null },
                </x-slot>
                <x-slot name="config">
                    paging: false,
                    info: false,
                </x-slot>
                <x-slot name="columnDefinition">
                    {   targets: 1,
                        render: function (data, type, row) {
                            return `<div class="d-flex align-items-center">
                                    <a href="${row.cover}" class="symbol symbol-50px symbol-2by3 w-125px">
                                        <span class="symbol-label w-100 bg-transparent" style="background-image:url(${row.cover});background-size:contain;"></span>
                                    </a>
                                    <div class="ms-5">
                                        <span class="text-gray-800 text-hover-primary fs-5 fw-bold">${data}</span>
                                        <div class="text-muted fs-7 fw-bold">Imagen</div>
                                    </div>
                                </div>`;
                        },
                    },
                    {   targets: 2,
                        render: function (data, type, row) {
                            return `
                                <span class="btn btn-sm btn-flex btn-light-info">
                                    <span class="d-flex flex-column align-items-center">
                                        <span class="fs-7 fw-bold">${row.categoryproduct.name}</span>
                                    </span>
                                </span>
                            `;
                        },
                    },
                    {   targets: 3,
                        render: function (data, type, row) {
                            return `
                                <span class="btn btn-sm btn-flex btn-light-info">
                                    <i class="ki-duotone ki-magnifier fs-2">
                                        <span class="path1"></span>
                                        <span class="path2"></span>
                                    </i>
                                    <span class="d-flex flex-column align-items-center ms-2">
                                        <span class="fs-7 fw-bold">${row.products_count} marcas</span>
                                    </span>
                                </span>
                            `;
                        },
                    },
                    {   targets: 4,
                        render: function (data, type, row) {
                            return `<button type="button" class="btn btn-sm badge badge-light-primary">${data}</button>`;
                        },
                    },
                    {   targets: 5,
                        render: function (data, type, row) {
                            var status = {
                                title: data ? 'Activado': 'Desactivado',
                                class: data ? 'badge-light-success': 'badge-light-danger',
                            };
                            return `
                                <div class="d-flex justify-content-center gap-3">
                                    <span class="badge py-3 px-4 fs-7 ${status.class}">${status.title}</span>
                                </div>
                            `;
                        },
                    }
                </x-slot>
                <x-slot name="actions">
                    <div class="menu-item px-3">
                        <a href="/admin/subcategory_products/${row.id}/status" class="menu-link px-3" data-table-action="ajax">${row.status?'Desactivar':'Activar'}</a>
                    </div>
                    <div class="menu-item px-3">
                        <a href="/admin/subcategory_products/${row.id}/edit" class="menu-link px-3">Editar</a>
                    </div>
                    <div class="menu-item px-3">
                        <a href="/admin/subcategory_products/${row.id}/destroy" class="menu-link px-3"  data-table-action="delete">Eliminar</a>
                    </div>
                </x-slot>
            </x-datatable.scripts>

            dt.on('draw', function () {
                KTMenu.createInstances();
            });

            document.querySelector('[data-kt-table-filter="search-products"]').addEventListener('keyup', debounce((e) => {
                dt.search(e.target.value).draw()
            }, 500));

            dtCategory.on('draw', function () {
                KTMenu.createInstances();
            });

            document.querySelector('[data-kt-table-filter="search-category_products"]').addEventListener('keyup', debounce((e) => {
                dtCategory.search(e.target.value).draw()
            }, 500));

            dtSubcategory.on('draw', function () {
                KTMenu.createInstances();
            });

            document.querySelector('[data-kt-table-filter="search-subcategory_products"]').addEventListener('keyup', debounce((e) => {
                dtSubcategory.search(e.target.value).draw()
            }, 500));

            document.querySelector('#kt_table_reset').addEventListener('click', function(e){
                e.preventDefault();

                document.querySelector('[data-kt-table-filter="search-products"]').value = ""
                dt.search("").draw();
            })

            document.querySelector('#kt_table_reset_category_products').addEventListener('click', function(e){
                e.preventDefault();

                document.querySelector('[data-kt-table-filter="search-category_products"]').value = ""
                dtCategory.search("").draw();
            })


            document.querySelector('#kt_table_reset_subcategory_products').addEventListener('click', function(e){
                e.preventDefault();

                document.querySelector('[data-kt-table-filter="search-subcategory_products"]').value = ""
                dtSubcategory.search("").draw();
            })

            <x-datatable.extra-script variable-name="dt" table-name="kt_table_products"/>

            <x-datatable.extra-script variable-name="dtCategory" table-name="kt_table_category_products"/>

            <x-datatable.extra-script variable-name="dtSubcategory" table-name="kt_table_subcategory_products"/>

        });
    </script>
@endpush