@extends('admin.app')
<x-navigation page-title="Banners" group-name="Gestión de Sitio"/>
@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">
                    <x-datatable.search placeholder="Buscar por nombre ..." />
                </div>
                <div class="card-toolbar flex-row-fluid justify-content-end gap-5">
                    <x-datatable.buttons :create-link="route('admin.banners.create')"/>
                </div>
            </div>
            <div class="card-body p-0">
                <x-datatable table-name="kt_table_banners">
                    <th class="w-50px">#</th>
                    <th class="min-w-250px">Nombre</th>
                    <th class="min-w-150px">Posición</th>
                    <th class="min-w-150px">Estado</th>
                    <th class="text-end min-w-100px">Acciones</th>
                </x-datatable>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script type="text/javascript">

        var dt;

        KTUtil.onDOMContentLoaded(function () {
            <x-datatable.scripts table-name="kt_table_banners" order="[[0, 'asc']]" ajax-url="{{route('admin.banners.ajax')}}">
                <x-slot name="columns">
                    { "searchable": false, "orderable": true,  "className": 'text-center', data: "id"},
                    { "searchable": true,  "orderable": true,  "className": null,          data: "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">${row.type_position.name} - Imagen</div>
                                    </div>
                                </div>
                            `;
                        },
                    },
                    {   targets: 2,
                        render: function (data, type, row) {
                            return `<button type="button" class="btn btn-sm badge badge-light-primary">${data}</button>`;
                        },
                    },
                    {   targets: 3,
                        render: function (data, type, row) {
                            var status = {
                                title: data ? 'Activado': 'Desactivado',
                                class: data ? 'badge-light-success': 'badge-light-danger',
                            };

                            return `<span class="badge ${status.class}">${status.title}</span>`;
                        },
                    }
                </x-slot>
                <x-slot name="actions">
                    <div class="menu-item px-3">
                        <a href="/admin/banners/${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/banners/${row.id}/edit" class="menu-link px-3">Editar</a>
                    </div>
                    <div class="menu-item px-3">
                        <a href="/admin/banners/${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"]').addEventListener('keyup', debounce((e) => {
                dt.search(e.target.value).draw()
            }, 500));

            <x-datatable.extra-script variable-name="dt" table-name="kt_table_banners"/>
        });
    </script>
@endpush