@extends('admin.layout.layout')
@section('title',__('Sub Categories'))

@section('breadcrumbs')
<li class="breadcrumb-item pe-3 text-muted">{{ __('Sub Categories') }}</li>
@endsection

@section('content')
    <div class="post d-flex flex-column-fluid mb-8" id="kt_post">
        <!--begin::Container-->
        <div id="kt_content_container" class="container-xxl">
            <!--begin::Products-->
            <div class="card card-flush">
                <!--begin::Card header-->
                <div class="card-header align-items-center py-5 gap-2 gap-md-5">
                    <!--begin::Card title-->
                    <div class="card-title">
                        <!--begin::Search-->
                        <div class="d-flex align-items-center position-relative my-1">
                            @include('admin.data-table-header-ajax')
                        </div>
                        <!--end::Search-->
                    </div>
                    <!--end::Card title-->
                    <!--begin::Card toolbar-->
                    <div class="card-toolbar flex-row-fluid justify-content-end gap-5">
                        <div class="m-0">
                            <!--begin::Menu toggle-->
                            <a class="btn btn-light btn-active-primary fw-bolder" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
                            <!--begin::Svg Icon | path: icons/duotune/general/gen031.svg-->
                            <span class="svg-icon svg-icon-5 svg-icon-gray-500 me-1">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <path d="M19.0759 3H4.72777C3.95892 3 3.47768 3.83148 3.86067 4.49814L8.56967 12.6949C9.17923 13.7559 9.5 14.9582 9.5 16.1819V19.5072C9.5 20.2189 10.2223 20.7028 10.8805 20.432L13.8805 19.1977C14.2553 19.0435 14.5 18.6783 14.5 18.273V13.8372C14.5 12.8089 14.8171 11.8056 15.408 10.964L19.8943 4.57465C20.3596 3.912 19.8856 3 19.0759 3Z" fill="currentColor"></path>
                                </svg>
                            </span>
                            <!--end::Svg Icon-->{{ __('Filter') }}</a>
                            <!--end::Menu toggle-->
                            <!--begin::Menu 1-->
                            <div class="menu menu-sub menu-sub-dropdown w-250px w-md-300px" data-kt-menu="true" id="kt_menu_6244760202ebb" style="">
                                <!--begin::Header-->
                                <div class="px-7 py-5">
                                    <div class="fs-5 text-dark fw-bolder">{{ __('Filter Options') }}</div>
                                </div>
                                <!--end::Header-->
                                <!--begin::Menu separator-->
                                <div class="separator border-gray-200"></div>
                                <!--end::Menu separator-->
                                <!--begin::Form-->
                                <div class="px-7 py-5">
                                    <!--begin::Input group-->
                                    <div class="mb-10">
                                        <!--begin::Label-->
                                        <label class="form-label fw-bold">{{ __('Categories') }}</label>
                                        <!--end::Label-->
                                        <!--begin::Input-->
                                        <div>
                                            <select id="category_id" name="status" aria-label="{{ __('Select category') }}" data-control="select2" data-placeholder="{{ __('Select category') }}" class="form-select form-select-solid form-select-lg select2-hidden-accessible" tabindex="-1" aria-hidden="true" data-allow-clear="true">
                                                <option value="">{{ __('Select category') }}</option>
                                                @foreach($categories as $category)
                                                    <option value="{{ $category->id }}">{{ $category->getTranslation('title',app()->getLocale()) }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <!--end::Input-->
                                    </div>
                                    <!--end::Input group-->
                                    <!--begin::Input group-->
                                    <div class="mb-10">
                                        <!--begin::Label-->
                                        <label class="form-label fw-bold">{{ __('Status') }}</label>
                                        <!--end::Label-->
                                        <!--begin::Input-->
                                        <div>
                                            <select id="status" name="status" aria-label="{{ __('Select sub category status') }}" data-control="select2" data-placeholder="{{ __('Select sub category status') }}" class="form-select form-select-solid form-select-lg select2-hidden-accessible" tabindex="-1" aria-hidden="true" data-allow-clear="true">
                                                <option value="">{{ __('Select sub category status') }}</option>
                                                <option value="0">{{ __('Not Active') }}</option>
                                                <option value="1">{{ __('Active') }}</option>
                                            </select>
                                        </div>
                                        <!--end::Input-->
                                    </div>
                                    <!--end::Input group-->
                                </div>
                                <!--end::Form-->
                            </div>
                            <!--end::Menu 1-->
                        </div>
                        <!--begin::Add product-->
                        <a href="{{ route('Admin.sub-categories.create') }}" class="btn btn-primary">{{ __('Add Sub Category') }}</a>
                        <!--end::Add product-->
                    </div>
                    <!--end::Card toolbar-->
                </div>
                <!--end::Card header-->
                <!--begin::Card body-->
                <div class="card-body pt-0">
                    <!--begin::Table-->
                    <div id="kt_ecommerce_sales_table_wrapper" class="dataTables_wrapper dt-bootstrap4 no-footer">
                        <div class="table-responsive">
                            <table class="table align-middle table-row-dashed fs-6 gy-5 dataTable no-footer"
                                id="kt_ecommerce_sales_table">
                                <!--begin::Table head-->
                                <thead>
                                    <!--begin::Table row-->
                                    <tr class="text-center text-gray-400 fw-bolder fs-7 text-uppercase gs-0">
                                        <th class="min-w-100px sorting" tabindex="0"
                                            aria-controls="kt_ecommerce_sales_table" rowspan="1" colspan="1"
                                            aria-label="Id: activate to sort column ascending"
                                            style="width: 109.297px;">{{ __('Id') }}</th>
                                        <th class="min-w-175px sorting" tabindex="0"
                                            aria-controls="kt_ecommerce_sales_table" rowspan="1" colspan="1"
                                            aria-label="Title: activate to sort column ascending"
                                            style="width: 231.547px;">{{ __('Title') }}</th>
                                        <th class="min-w-100px sorting" tabindex="0"
                                            aria-controls="kt_ecommerce_sales_table" rowspan="1" colspan="1"
                                            aria-label="Category: activate to sort column ascending"
                                            style="width: 109.297px;">{{ __('Category') }}</th>
                                        <th class="text-center min-w-70px sorting" tabindex="0"
                                            aria-controls="kt_ecommerce_sales_table" rowspan="1" colspan="1"
                                            aria-label="Image: activate to sort column ascending"
                                            style="width: 83.3906px;">{{ __('Image') }}</th>
                                        <th class="text-center min-w-100px sorting" tabindex="0"
                                            aria-controls="kt_ecommerce_sales_table" rowspan="1" colspan="1"
                                            aria-label="Status: activate to sort column ascending" style="width: 109.297px;">
                                            {{ __('Status') }}</th>
                                        <th class="text-center min-w-100px sorting" tabindex="0"
                                            aria-controls="kt_ecommerce_sales_table" rowspan="1" colspan="1"
                                            aria-label="Date: activate to sort column ascending"
                                            style="width: 109.297px;">{{ __('Date') }}</th>
                                        <th class="text-center min-w-100px sorting_disabled" rowspan="1" colspan="1"
                                            aria-label="Actions" style="width: 109.375px;">{{ __('Actions') }}</th>
                                    </tr>
                                    <!--end::Table row-->
                                </thead>
                                <!--end::Table head-->
                                <!--begin::Table body-->
                                <tbody class="fw-bold text-gray-600 text-center">

                                </tbody>
                                <!--end::Table body-->
                            </table>
                        </div>

                    </div>
                    <!--end::Table-->
                </div>
                <!--end::Card body-->
            </div>
            <!--end::Products-->
        </div>
        <!--end::Container-->
    </div>
@endsection

@push('scripts')
    <script>
        var table1 = $('#kt_ecommerce_sales_table').DataTable({
            serverSide: true,
            fixedHeader: true,
            processing: true,
            order: [[0,"asc"]],
            "columnDefs": [{"orderable": false,"targets": [6]}],
            ajax: {
                url: '{{ route('Admin.sub-categories-ajax-data-table') }}',
                data: function(d) {
                    d.searchText = $('#searchText').val();
                    d.category_id = $('#category_id').val();
                    d.status = $('#status').val();
                }
            },
            columns: [
                {data: 'id', name: 'id', defaultContent: '-'},
                {data: 'title', name: 'title', defaultContent: '-'},
                {data: 'category_id', name: 'category_id', defaultContent: '-'},
                {data: 'image', name: 'image', defaultContent: '-'},
                {data: 'status', name: 'status', defaultContent: '-'},
                {data: 'created_at', name: 'created_at',orderable: false, searchable: false},
                {data: 'actions', name: 'actions', orderable: false, searchable: false}

            ], createdRow: function (row, data, index) {
                $(row).attr('id', 'row-' + data['id']);
            },
            buttons: [
                {extend: 'copyHtml5', className: 'buttons-copy', exportOptions: {columns: ':visible:not(:eq(3),:eq(6))'}},
                {extend: 'excelHtml5', className: 'buttons-excel', exportOptions: {columns: ':visible:not(:eq(3),:eq(6))'}},
                {extend: 'print', className: 'buttons-print', exportOptions: {columns: ':visible:not(:eq(3),:eq(6))'},customize: function(doc) { customizePrint(doc,'{{ app()->getLocale() }}'); }}
            ]
        });

        document.querySelectorAll('.export').forEach(function(el) {
            el.addEventListener('click', function () {
                const type = el.dataset.type;
                table1.button('.buttons-' + type).trigger();
            });
        });
        
        $('#searchText').on('keyup change', function () {
            table1.ajax.reload();
        });
        $('#category_id').on('keyup change', function () {
            table1.ajax.reload();
        });
        $('#status').on('keyup change', function () {
            table1.ajax.reload();
        });
    </script>
    <script>
        function deleteId(id) {
            Swal.fire({
                title: '{{ __("Are you sure?") }}',
                text: "{{ __('Do you want to delete this item') }}",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#DC143C',
                cancelButtonColor: '#696969',
                cancelButtonText: "{{ __('Cancel') }}",
                confirmButtonText: '{{ __("Yes, delete it!") }}'
            }).then((result) => {
                if (result.isConfirmed) {
                    window.location.href = '/admin/delete/subCategory/' + id;
                }
            });
        }
    </script>
@endpush