@extends('layouts.admin')

@section('content')
<input type="hidden" id="headerdata" value="{{ __('CATEGORY') }}">
<input type="hidden" id="attribute_data" value="{{ __('ADD NEW ATTRIBUTE') }}">

<!-- [ breadcrumb ] start -->
<div class="page-header">
    <div class="page-block">
        <div class="row align-items-center">
            <div class="col-md-12">
                <ul class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">হোম</a></li>
                    <li class="breadcrumb-item"><a href="javascript: void(0)">সংগঠন</a></li>
                    <li class="breadcrumb-item" aria-current="page">Categories</li>
                </ul>
            </div>
            <div class="col-md-12">
                <div class="page-header-title">
                    <h2 class="mb-0">{{ __('Main Categories') }}</h2>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- [ breadcrumb ] end -->

<!-- [ Main Content ] start -->
<div class="row mb-3"><div class="col-lg-12 text-end"><a class="btn btn-primary text-white" data-href="{{route('categories.categoriesCreate')}}" id="add-data"><i class="ti ti-plus me-1"></i>{{ __('Add New Category') }}</a></div></div>

<div class="card">
    <div class="card-header"><h5>{{ __('Main Categories') }}</h5></div>
    <div class="card-body">
        @include('includes.admin.form-success')
        @include('includes.admin.flash-message')
        <div class="table-responsive">
            <table id="geniustable" class="table table-hover dt-responsive" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th>{{ __('Name') }}</th>
                        <th>{{ __('Slug') }}</th>
                        <th>{{ __('Language Name') }}</th>
                        <th>{{ __('Menu Order') }}</th>
                        <th>{{ __('Color') }}</th>
                        <th>{{ __('Show at Homepage') }}</th>
                        <th>{{ __('Show at Menu') }}</th>
                        <th>{{ __('Actions') }}</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>
<!-- [ Main Content ] end -->

{{-- ADD / EDIT MODAL --}}
<div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="modal1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="submit-loader"><img src="" alt=""></div>
            <div class="modal-header">
                <h5 class="modal-title"></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('Close') }}</button>
            </div>
        </div>
    </div>
</div>

{{-- DELETE MODAL --}}
<div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header d-block text-center">
                <h4 class="modal-title d-inline-block">{{ __('Confirm Delete') }}</h4>
                <button type="button" class="btn-close float-end" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p class="text-center">{{ __('You are about to delete this Category.Everything under this category will be deleted.') }}</p>
                <p class="text-center">{{ __('Do you want to proceed?') }}</p>
            </div>
            <div class="modal-footer justify-content-center">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('Cancel') }}</button>
                <a class="btn btn-danger btn-ok">{{ __('Delete') }}</a>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script type="text/javascript">
    var table = $('#geniustable').DataTable({
        ordering: false,
        serverSide: true,
        ajax: '{{ route('categories.datatables') }}',
        columns: [
            {data: 'title',name: 'title'},
            {data: 'slug',name: 'slug'},
            {data: 'language_id',name: 'language_id'},
            {data: 'category_order',name: 'category_order'},
            {data: 'color',name: 'color'},
            {data: 'show_at_homepage',name: 'show_at_homepage'},
            {data: 'show_on_menu',name: 'show_on_menu'},
            {data: 'action',searchable: false,orderable: false}
        ],
        drawCallback: function (settings) {
            $('.select').niceSelect();
        }
    });
</script>
@endsection
