@extends('admin.layouts.main')

@section('title', 'Kategori Post')

@section('menu', 'Kategori Post')

@push('css')
    <!-- Datatable Src -->
    <link href="{{ asset('assets/metronic/plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css"/>
    <!-- Datatable Src -->
@endpush

@section('breadcrumb')
<div class="toolbar" id="kt_toolbar">
    <div id="kt_toolbar_container" class="container-fluid d-flex justify-content-end flex-stack">
        <ol class="breadcrumb text-muted fs-6 fw-bold">
            <li class="breadcrumb-item pe-3"><a href="{{ route('admin.dashboard') }}" class="pe-3">Dashboard</a></li>
            <li class="breadcrumb-item px-3 text-muted">Kategori Post</li>
        </ol>
    </div>
</div>
@endsection

@section('content')
    <div id="kt_app_content_container" class="app-container container-fluid">
        <div class="card card-flush">
            <div class="card-header">
                <h3 class="card-title">Data Kategori Post</h3>
                <div class="card-toolbar">
                    <button type="button" class="btn btn-sm btn-light-primary me-3" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
                        <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="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>
                        Filter
                    </button>
                    <div class="menu menu-sub menu-sub-dropdown w-300px w-md-325px" data-kt-menu="true" id="kt-toolbar-filter">
                        <div class="px-7 py-5">
                            <div class="fs-4 text-dark fw-bold">Pilihan Filter</div>
                        </div>
                        <div class="separator border-gray-200"></div>
                        <div class="px-7 py-5">
                            <div class="mb-10">
                                <label class="form-label fs-5 fw-semibold mb-3">Status Kategori:</label>
                                <div class="d-flex flex-column flex-wrap fw-semibold" data-kt-docs-table-filter="room_type_status">
                                    <label class="form-check form-check-sm form-check-custom form-check-solid mb-3 me-5">
                                        <input class="form-check-input" type="radio" id="post-category-status-all" name="post_category_status" value="1" checked="checked">
                                        <span class="form-check-label text-gray-600">Semua</span>
                                    </label>
                                    <label class="form-check form-check-sm form-check-custom form-check-solid mb-3 me-5">
                                        <input class="form-check-input" type="radio" id="post-category-status-active" name="post_category_status" value="">
                                        <span class="form-check-label text-gray-600">Aktif</span>
                                    </label>
                                    <label class="form-check form-check-sm form-check-custom form-check-solid mb-3">
                                        <input class="form-check-input" type="radio" id="post-category-status-inactive" name="post_category_status" value="0">
                                        <span class="form-check-label text-gray-600">Tidak Aktif</span>
                                    </label>
                                </div>
                            </div>
                            <div class="d-flex justify-content-end">
                                <button type="reset" class="btn btn-sm btn-light btn-active-light-primary me-2" data-kt-menu-dismiss="true" data-kt-docs-table-filter="reset" onclick="filterPostCategories(true)">Reset</button>
                                <button type="submit" class="btn btn-sm btn-primary" data-kt-menu-dismiss="true" data-kt-docs-table-filter="filter" onclick="filterPostCategories()">Terapkan</button>
                            </div>
                        </div>
                    </div>

                    <button type="button" class="btn btn-sm btn-primary" onclick="createPostCategory()">
                        Tambah Kategori
                    </button>
                </div>
            </div>
            <div class="card-body py-5">
                <table id="datatable-post-categories" class="table table-striped border table-row-bordered gy-5 gs-7">
                    <thead>
                        <tr class="fw-semibold fs-6 text-muted">
                            <th style="width: 5rem;">#</th>
                            <th>Nama Kategori</th>
                            <th style="width: 10rem;">Status</th>
                            <th style="width: 15rem;">Tindakan</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <!-- Product Category Modal -->
    <div class="modal fade" tabindex="-1" id="modal-post-category">
        <div class="modal-dialog">
            <div class="modal-content">
                <form id="form-post-category" method="post" action="" enctype="multipart/form-data" autocomplete="off">
                    @csrf
                    <div class="modal-header p-5">
                        <h3 class="modal-title" id="modal-title">Tambah Kategori Post</h3>
                        <div class="btn btn-icon btn-sm btn-active-light-danger ms-2" data-bs-dismiss="modal" aria-label="Close">
                            <span class="svg-icon svg-icon-1">
                                <i class="fa-solid fa-times"></i>
                            </span>
                        </div>
                    </div>

                    <div class="modal-body" id="modal-loading">
                        <div class="d-flex justify-content-center">
                            <div class="spinner-border" role="status">
                                <span class="sr-only">Loading...</span>
                            </div>
                        </div>
                    </div>

                    <div class="modal-body" id="modal-body">
                        <div class="mb-5">
                            <label class="form-label" for="category-name">Nama Kategori<span class="text-danger ms-1">*</span></label>
                            <input type="text" class="form-control" name="category_name" id="category-name" placeholder="contoh: Berita" value="{{ old('category_name') }}" required>
                        </div>
                    </div>

                    <div class="modal-footer p-5">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-primary" id="submit-button">Simpan</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- Product Category Modal -->
    <!-- Modal -->
@endsection

@push('js')
    <!-- Asset -->
    <script src="{{ asset('assets/metronic/plugins/custom/datatables/datatables.bundle.js') }}"></script>
    <!-- Asset -->

    <!-- Datatable -->
    <script>
        $(document).ready( function () {
            datatablePostCategories = $("#datatable-post-categories").DataTable({
                autoWidth: false,
                processing: true,
                serverSide: true,
                ajax: {
                        url : "{{ route('admin.post.category.index') }}",
                        data : function(d){
                            d.status = $('[name=post_category_status]:checked').val();
                        }
                    },
                columns: [
                    { data: 'DT_RowIndex', class:'align-middle', orderable: false, searchable: false },
                    { data: 'category_name', class: 'align-middle' },
                    { data: 'status', class:"text-center align-middle", orderable: false, searchable: false, render: function ( data, type, row ) { return data; } },
                    { data: 'action', class:"text-center", orderable: false, searchable: false, render: function ( data, type, row ) { return data; } },
                ],
                dom:
                    "<'row'" +
                    "<'col-sm-6 d-flex align-items-center justify-conten-start'l>" +
                    "<'col-sm-6 d-flex align-items-center justify-content-end'f>" +
                    ">" +

                    "<'table-responsive'tr>" +

                    "<'row'" +
                    "<'col-sm-12 col-md-5 d-flex align-items-center justify-content-center justify-content-md-start'i>" +
                    "<'col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end'p>" +
                    ">",
                pageLength: 10,
                lengthMenu: [[10, 20, 35, 50], [10, 20, 35, 50]],
                oLanguage: {
                    sSearch: "Cari:",
                    sSearchPlaceholder: "Kategori post...",
                    sZeroRecords: "Tidak ada data",
                    infoEmpty: "Menampilkan 0 data",
                    infoFiltered: "(from _MAX_ Data)",
                    sLengthMenu: "Menampilkan _MENU_ data",
                },
                language: {
                    paginate: {
                        previous: 'Sebelumnya',
                        next: 'Selanjutnya'
                    },
                    info: "Menampilkan _END_ dari _MAX_ data",
                    processing: "Sedang diproses ..."
                },
                fnDrawCallback: function (oSettings) {
                    $('table').on('draw.dt', function() {
                        $('[data-bs-toggle="tooltip"]').tooltip();
                    })
                },
            });
        });
    </script>
    <!-- Datatable -->

    <!-- Main Script -->
    <script>
        $(document).ready( function () {
            /* Set Nav-Link Active */
            $('#menu-item-posts').addClass('here show');
            $('#menu-link-post-categories').addClass('active');

            /* Modal on Close Listener*/
            $('#modal-post-category').on('hidden.bs.modal', function (e) {
                $('#category-name').prop('disabled', false);
                $('#submit-button').show();
            });
        });

        /* Create Post Category */
        function createPostCategory() {
            var url = '{{ route("admin.post.category.store") }}';
            $('#form-post-category').attr('action', url);
            $('#modal-title').text('Tambah Kategori');

            $('#modal-loading').hide();
            $('#modal-body').show();
            $('#modal-post-category').modal('show');
        }

        /* Edit Post Category */
        function editPostCategory(id){
            $('#modal-loading').show();
            $('#modal-body').hide();
            $('#modal-title').text('Edit Kategori');
            $('#modal-post-category').modal('show');
            var url = '{{ route("admin.post.category.findById") }}';
            jQuery.ajax({
            url: url,
            method: 'get',
            data: {
                id: id
            },
            success: function(result){
                    if(result.status){
                        var url = '{{ route("admin.post.category.update", ':id') }}';
                        url = url.replace(':id', id);
                        $('#form-post-category').attr('action', url);
                        $('#category-name').val(result.data.category_name);
                        $('#modal-loading').hide();
                        $('#modal-body').show();
                    }else{
                        $('#modal-post-category').modal('hide');
                    }
                }
            });
        }

        /* Show Post Category */
        function showPostCategory(id){
            $('#category-name').prop('disabled', true);
            $('#submit-button').hide();
            $('#modal-title').text('Detail Kategori');
            $('#modal-body').hide();
            $('#modal-loading').show();
            $('#modal-post-category').modal('show');
            var url = '{{ route("admin.post.category.findById") }}';
            url = url.replace(':id', id);
            jQuery.ajax({
            url: url,
            method: 'get',
            data: {
                id: id
            },
            success: function(result){
                    if(result.status){
                        $('#category-name').val(result.data.category_name);
                        $("#modal-loading").hide();
                        $("#modal-body").show();
                    }else{
                        $('#modal-post-category').modal('hide');
                    }
                }
            });
        }

        /* Delete Post Category */
        function deletePostCategory(id, name){
            Swal.fire({
                title: 'Nonaktifkan Kategori Post',
                text: 'Apakah anda yakin ingin menonaktifkan data kategori post "'+name+'"?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Ya, nonaktifkan',
                cancelButtonText: 'Tidak',
                customClass: {
                    confirmButton: "btn btn-primary",
                    cancelButton: 'btn btn-danger'
                }
                }).then((result) => {
                    if (result.isConfirmed) {
                        var url = '{{ route("admin.post.category.delete", ':id') }}';
                        url = url.replace(':id', id);
                        jQuery.ajax({
                        url: url,
                        method: 'post',
                        data: {
                            "_token": '{{ csrf_token() }}',
                        },
                        success: function(result){
                                if(result.status){
                                    datatablePostCategories.ajax.reload();
                                    alertSuccess('Success', result.message);
                                }else{
                                    alertError('Error', result.message);
                                }
                            }
                        });
                    }
                })
        }

        /* Restore Post Category */
        function restorePostCategory(id, name){
            Swal.fire({
                title: 'Aktifkan Kategori Post',
                text: 'Apakah anda yakin ingin mengaktifkan data kategori post "'+name+'"?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Ya, aktifkan',
                cancelButtonText: 'Tidak',
                customClass: {
                    confirmButton: "btn btn-primary",
                    cancelButton: 'btn btn-danger'
                }
                }).then((result) => {
                    if (result.isConfirmed) {
                        var url = '{{ route("admin.post.category.restore", ':id') }}';
                        url = url.replace(':id', id);
                        jQuery.ajax({
                        url: url,
                        method: 'post',
                        data: {
                            "_token": '{{ csrf_token() }}',
                        },
                        success: function(result){
                                if(result.status){
                                    datatablePostCategories.ajax.reload();
                                    alertSuccess('Success', result.message);
                                }else{
                                    alertError('Error', result.message);
                                }
                            }
                        });
                    }
                })
        }

        /* Post Categories Filter */
        function filterPostCategories(reset = false){
            if(reset){
                $('#post-category-status-all').prop('checked', true);
            }
            datatablePostCategories.ajax.reload();
        }
    </script>
    <!-- Main Script -->

    <!-- Validation -->
    <script>
        $(document).ready(function() {
            /* Add custom method */
            jQuery.validator.addMethod("custom", function(value, element) {
                return this.optional(element) || /^[A-Z0-9 _]*[A-Z0-9][A-Z0-9 _.,\r\n]*$/i.test(value);
            }, "Cannot contains symbol");

            /* Create room type validation */
            $('#form-post-category').validate({
                rules: {
                    category_name: {
                        required: true,
                        minlength: 3,
                        maxlength: 50,
                        custom: true,
                    }
                },
                messages: {
                    category_name: {
                        required: "Nama kategori wajib diisi",
                        minlength: "Nama kategori minimal 3 karakter",
                        maxlength: "Nama kategori maksimal 50 karakter",
                        custom: "Nama kategori tidak boleh mengandung simbol",
                    }
                },
                errorPlacement: function (error, element) {
                    if(element.hasClass('select2') && element.next('.select2-container').length) {
                        error.insertAfter(element.next('.select2-container'));
                    }else {
                        error.insertAfter(element);
                    }
                }
            });

            /* Edit room type validation */
            $("#form-edit-post-category").validate({
                rules: {
                    edit_category_name: {
                        required: true,
                        minlength: 3,
                        maxlength: 50,
                        custom: true,
                    }
                },
                messages: {
                    edit_category_name: {
                        required: "Kategori produk wajib diisi",
                        minlength: "Kategori produk minimal terdiri dari 3 karakter",
                        maxlength: "Kategori produk maksimal terdiri dari 50 karakter",
                        custom: "Kategori produk tidak boleh mengandung simbol"
                    }
                },
                errorPlacement: function (error, element) {
                    if(element.hasClass('select2') && element.next('.select2-container').length) {
                        error.insertAfter(element.next('.select2-container'));
                    }else {
                        error.insertAfter(element);
                    }
                }
            });
        });
    </script>
    <!-- Validation -->

    <!-- Server side validation handler -->
    @if($errors->any())
        <script>
            $(document).ready( function () {
                alertError('Gagal', '{{ $errors->first() }}');
            });
        </script>
    @endif
    <!-- Server side validation handler -->
@endpush