@extends('admin.app')
@section('toolbar')
<div class="toolbar d-flex align-items-stretch">
    <div class="container-fluid py-6 py-lg-0 d-flex flex-column flex-lg-row align-items-lg-stretch justify-content-lg-between">
        <div class="page-title d-flex justify-content-center flex-column me-5">
            <h1 class="d-flex flex-column text-dark fw-bold fs-3 mb-0">Lista de videos</h1>
            <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 pt-1">
                <li class="breadcrumb-item text-muted"><a href="{{route('admin.index')}}" class="text-muted text-hover-primary">Inicio</a></li>
                <li class="breadcrumb-item"><span class="bullet bg-gray-200 w-5px h-2px"></span></li>
                <li class="breadcrumb-item text-dark">videos</li>
            </ul>
        </div>
    </div>
</div>
@endsection
@section('content')
    <div class="d-flex flex-column flex-row-fluid gap-7 gap-lg-10">
        @include('admin._includes.flash')
        <div class="card card-flush">
            <div class="card-header px-5">
                <div class="card-title">
                    <div class="d-flex align-items-center position-relative">
                        <span class="svg-icon svg-icon-1 position-absolute ms-2">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <rect opacity="0.5" x="17.0365" y="15.1223" width="8.15546" height="2" rx="1" transform="rotate(45 17.0365 15.1223)" fill="currentColor"></rect>
                                <path d="M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z" fill="currentColor"></path>
                            </svg>
                        </span>
                        <input type="text" data-kt-table-filter="search" class="form-control form-control-sm form-control-solid w-300px ps-12" placeholder="Buscar por nombre ...">
                    </div>
                </div>
                <div class="card-toolbar gap-3">
                    <button type="button" class="btn btn-sm btn-light-info" type="button" id="kt_table_reload">
                        <span class="svg-icon svg-icon-2">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M14.5 20.7259C14.6 21.2259 14.2 21.826 13.7 21.926C13.2 22.026 12.6 22.0259 12.1 22.0259C9.5 22.0259 6.9 21.0259 5 19.1259C1.4 15.5259 1.09998 9.72592 4.29998 5.82592L5.70001 7.22595C3.30001 10.3259 3.59999 14.8259 6.39999 17.7259C8.19999 19.5259 10.8 20.426 13.4 19.926C13.9 19.826 14.4 20.2259 14.5 20.7259ZM18.4 16.8259L19.8 18.2259C22.9 14.3259 22.7 8.52593 19 4.92593C16.7 2.62593 13.5 1.62594 10.3 2.12594C9.79998 2.22594 9.4 2.72595 9.5 3.22595C9.6 3.72595 10.1 4.12594 10.6 4.02594C13.1 3.62594 15.7 4.42595 17.6 6.22595C20.5 9.22595 20.7 13.7259 18.4 16.8259Z" fill="currentColor"/>
                                <path opacity="0.3" d="M2 3.62592H7C7.6 3.62592 8 4.02592 8 4.62592V9.62589L2 3.62592ZM16 14.4259V19.4259C16 20.0259 16.4 20.4259 17 20.4259H22L16 14.4259Z" fill="currentColor"/>
                            </svg>
                        </span> Recargar
                    </button>
                    <a href="{{route('admin.videos.create')}}" class="btn btn-sm btn-light-primary">Agregar nuevo</a>
                </div>
            </div>
            <div class="card-body p-0">
                <table class="table align-middle table-striped fs-6 gx-5 gy-2" id="kt_table_videos">
                    <thead>
                        <tr class="text-start text-gray-400 fw-bolder fs-7 text-uppercase gs-0">
                            <th class="min-w-30px text-center">#</th>
                            <th class="min-w-130px">Nombre</th>
                            <th class="min-w-130px">Posición</th>
                            <th class="min-w-130px">Estado</th>
                            <th class="text-end min-w-100px">Acciones</th>
                        </tr>
                    </thead>
                    <tbody class="text-gray-600 fw-bold"></tbody>
                </table>
            </div>
        </div>
    </div>
@endsection
@push('styles')
    <link href="/assets/dash/3rdparty/datatables/datatables.bundle.css?v=1.2.0" rel="stylesheet" type="text/css" />
@endpush
@push('scripts')
    <script src="/assets/dash/3rdparty/datatables/datatables.bundle.js?v=1.2.0"></script>
    <script type="text/javascript">
        KTUtil.onDOMContentLoaded(function () {
            var dt = $("#kt_table_videos").DataTable({
                searchDelay: 500,
                serverSide: true,
                processing: true,
                search: {return: false},
                order: [[2, 'asc']],
                stateSave: true,
                ajax: {
                    type: "GET",
                    url: "{{route('admin.videos.ajax')}}",
                    headers: {
                        'X-CSRF-Token': document.querySelector('meta[name=csrf-token]').getAttribute('content'),
                    },
                },
                columns: [
                    { "searchable": false, "orderable": true,  data: 'id' },
                    { "searchable": true,  "orderable": true,  data: 'name' },
                    { "searchable": false, "orderable": true,  data: 'position' },
                    { "searchable": false, "orderable": true,  data: 'status' },
                    { "searchable": false, "orderable": false, data: null },
                ],
                columnDefs: [
                    {
                        targets: 0,
                        className: 'text-center',
                        render: function (data, type, row) {
                            return  `<span class="fw-bolder text-center">${data}</span>`;
                        },
                    },
                    {
                        targets: 1,
                        render: function (data, type, row) {
                            return `
                                <div class="d-flex align-items-center">
                                    <div class="d-flex justify-content-start flex-column">
                                        <span class="text-gray-800 fw-bold text-hover-primary mb-1 fs-6">${data}</span>
                                    </div>
                                </div>`;
                        },
                    },
                    {
                        targets: 2,
                        className: 'text-center',
                        render: function (data, type, row) {
                            return `<span class="badge badge-primary fw-bolder">${data}</span>`;
                        },
                    },
                    {
                        targets: 3,
                        className: 'text-center',

                        render: function (data) {
                            var status = {
                                0: { title: 'Desactivado', class: 'badge-danger'},
                                1: { title: 'Activado', class: 'badge-success'},
                            };
                            return `<span class="badge ${status[data].class}">${status[data].title}</span>`;
                        },
                    },
                    {
                        targets: -1,
                        data: null,
                        className: 'text-end',
                        render: function (data, type, row) {
                            return `
                                <button type="button" class="btn btn-secondary btn-active-light-primary btn-sm" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end" data-kt-menu-flip="top-end">
                                    Acciones
                                    <span class="svg-icon svg-icon-5 m-0">
                                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                <polygon points="0 0 24 0 24 24 0 24"></polygon>
                                                <path d="M6.70710678,15.7071068 C6.31658249,16.0976311 5.68341751,16.0976311 5.29289322,15.7071068 C4.90236893,15.3165825 4.90236893,14.6834175 5.29289322,14.2928932 L11.2928932,8.29289322 C11.6714722,7.91431428 12.2810586,7.90106866 12.6757246,8.26284586 L18.6757246,13.7628459 C19.0828436,14.1360383 19.1103465,14.7686056 18.7371541,15.1757246 C18.3639617,15.5828436 17.7313944,15.6103465 17.3242754,15.2371541 L12.0300757,10.3841378 L6.70710678,15.7071068 Z" fill="currentColor" fill-rule="nonzero" transform="translate(12.000003, 11.999999) rotate(-180.000000) translate(-12.000003, -11.999999)"></path>
                                            </g>
                                        </svg>
                                    </span>
                                </button>
                                <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-bold fs-7 w-175px py-4" data-kt-menu="true">
                                    <div class="menu-item px-3">
                                        <a data-kt-table="ajax" href="/admin/videos/${row.id}/status" class="menu-link px-3">${row.status?'Desactivar':'Activar'}</a>
                                    </div>
                                    <div class="menu-item px-3">
                                        <a href="/admin/videos/${row.id}/edit" class="menu-link px-3">Editar</a>
                                    </div>
                                    <div class="menu-item px-3">
                                        <a href="/admin/videos/${row.id}/destroy" class="menu-link px-3" data-kt-table="delete_row">Eliminar</a>
                                    </div>
                                </div>
                            `;
                        },
                    },
                ],
            });

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

            $('[data-kt-filter="status"]').on('change.select2', function () {
                let statusID = document.querySelector('[data-kt-filter="status"]');
                let searchable ='';
                if(statusID.value != 666){
                    searchable = `${statusID.value}|status`
                }
                dt.search(searchable).draw();
            });

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

            @include('admin._includes._dtScripts')
        });
    </script>
@endpush