@extends('layouts.app')

@section('title', __('Sub Categories'))

@push('pre_css')
    @include('panel.inc.filepond.css')
@endpush

@push('css')
    @include('panel.inc.datatable.css')
@endpush

@section('content')
    <div class="page-header">
        <div class="row align-items-center">
            <div class="col-auto">
                <div class="page-pretitle">
                    {{ __('Data') }}
                </div>
                <h2 class="page-title">
                    {{ __("Manage Sub Categories") }}
                </h2>
            </div>
            <!-- Page title actions -->
            <div class="col-auto ml-auto d-print-none">
                <div class="btn-list">
                    @can('data-sub-categories-add')
                        <x-buttons.btn-add modal="categoryModal" :route="route('panel.data.sub-categories.modal')"/>
                    @endcan
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        {!! $dataTable->table() !!}
    </div>


@stop

@push('pre_script')
    @include('panel.inc.filepond.js')
    <script src="//unpkg.com/filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.js"></script>
@endpush

@push('script')
    @include('panel.inc.datatable.js')
    {!! $dataTable->scripts() !!}

    <script !src="">

        @can('data-sub-categories-delete')
        $(document).on('click', '.deleteModel', function(){
            let el = this;
            deletePopup({
                el: el,
                url: '{{ route('panel.data.sub-categories.delete') }}',
                params:{
                    moduleID: $(el).data('model-id')
                },
                datatable: $('#sub-categories-table').DataTable()
            });
        });
        @endcan
    </script>

@endpush