@extends('layouts.index')
@section('title')
    Kategori Artikel
@endsection
@section('css')
    <link href="{{ asset('back') }}/extra-libs/datatables.net-bs4/css/dataTables.bootstrap4.css" rel="stylesheet" />
@endsection
@section('content')
    <div class="page-titles">
        <div class="row">
            <div class="col-lg-8 col-md-6 col-12 align-self-center">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 d-flex align-items-center">
                        <li class="breadcrumb-item">
                            <a href="index.html" class="link"><i class="ri-home-3-line fs-5"></i></a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">
                            Kategori Artikel
                        </li>
                    </ol>
                </nav>
                <h1 class="mb-0 fw-bold">Kategori Artikel</h1>
            </div>
        </div>
    </div>
    <!-- ============================================================== -->
    <!-- End Bread crumb and right sidebar toggle -->
    <!-- ============================================================== -->
    <!-- ============================================================= -->
    <!-- Container fluid  -->
    <!-- ============================================================= -->
    <div class="container-fluid">
        <!-- ============================================================= -->
        <!-- Start Page Content -->
        <!-- ============================================================= -->
        <div class="row">
            <!-- Column -->
            <div class="col-lg-12 col-xl-12 col-md-12">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex no-block align-items-center mb-4">
                            <h4>Semua Kategori Artikel</h4>
                            <div class="ms-auto">
                                <div class="btn-group">
                                    <a href="#!"
                                        class="
                      btn btn-primary          
                      font-weight-medium
                      px-4
                    "
                                        data-bs-toggle="modal" data-bs-target="#createmodel">
                                        <i class="fa fa-plus"></i>
                                        Tambah Kategori Artikel
                                    </a>
                                </div>
                            </div>
                        </div>

                        <div id="tableLoad">
                            @csrf
                            @include('kategori_artikel.table_load')
                        </div>
                        
                    </div>
                </div>
            </div>
            <!-- Column -->
        </div>
        <!-- ============================================================= -->
        <!-- End PAge Content -->
        <!-- ============================================================= -->
    </div>
    <!-- create Modal -->
    <div class="modal fade" id="createmodel" tabindex="-1" role="dialog" aria-labelledby="createModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header d-flex align-items-center">
                    <h5 class="modal-title" id="createModalLabel">
                        <i class="ti-marker-alt me-2"></i> Tambah Kategori Artikel Baru
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="tambah">
                        <div class="input-group mb-3">
                            <button type="button" class="btn btn-info">
                                <i data-feather="tag" class="feather-sm fil-white"></i>
                            </button>
                            <input type="text" class="form-control" placeholder="Masukan nama kategori artikel"
                                aria-label="name" id="name_tambah" name="nama" />
                        </div>
                </div>
                <div class="modal-footer">
                    <button type="button"
                        class="
                    btn btn-light-danger
                    text-danger
                    font-weight-medium
                    rounded-pill
                    px-4
                "
                        data-bs-dismiss="modal">
                        Batal
                    </button>
                    <button type="submit" class="btn btn-success rounded-pill px-4">
                        Simpan
                    </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- update Modal -->
    <div class="modal fade" id="updatemodel" tabindex="-1" role="dialog" aria-labelledby="createModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header d-flex align-items-center">
                    <h5 class="modal-title" id="createModalLabel">
                        <i class="ti-marker-alt me-2"></i> Ubah Kategori Artikel
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="ubah">
                        <input type="hidden" name="id" id="id_ubah">
                        <div class="input-group mb-3">
                            <button type="button" class="btn btn-info">
                                <i data-feather="tag" class="feather-sm fil-white"></i>
                            </button>
                            <input type="text" class="form-control" placeholder="Masukan nama kategori artikel"
                                aria-label="name" id="name_ubah" name="nama" />
                        </div>
                        <div class="input-group mb-3">
                            <button type="button" class="btn btn-info">
                                <i data-feather="activity" class="feather-sm fil-white"></i>
                            </button>
                            <select name="status" class="form-select " id="status_ubah">
                                <option value="Y">Aktif</option>
                                <option value="T">Tidak Aktif</option>
                            </select>
                        </div>
                </div>
                <div class="modal-footer">
                    <button type="button"
                        class="
                    btn btn-light-danger
                    text-danger
                    font-weight-medium
                    rounded-pill
                    px-4
                "
                        data-bs-dismiss="modal">
                        Close
                    </button>
                    <button type="submit" class="btn btn-success rounded-pill px-4">
                        Save
                    </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('js')
    <!--This page plugins -->
    <script src="{{ asset('back') }}/extra-libs/datatables.net/js/jquery.dataTables.min.js"></script>
    <!-- start - This is for export functionality only -->
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>
    <script src="{{ asset('back') }}/js/pages/datatable/datatable-advanced.init.js"></script>
    <script>
        //Aksi Tambah
        const tambah = document.getElementById('tambah');

        tambah.addEventListener('submit', async (e) => {
            e.preventDefault();

            const nama = tambah.nama.value;
            const _token = "{{ csrf_token() }}";

            let formData = new FormData();
            formData.append("nama", nama);

            try {
                let response = await fetch("{{ route('kategori-artikel.store-modal') }}", {
                    method: "POST",
                    body: formData,
                    headers: {
                        "X-CSRF-TOKEN": _token
                    }
                });
                var datasend = await response.json();

                if (datasend.status == 'success') {

                    var res_id = datasend.data.id;
                    var res_nama = datasend.data.nama;
                    var res_status = datasend.data.status;
                    var res_badge = 'success';
                    var res_status_value = 'Aktif';

                    if (res_status == 'T') {
                        res_badge = 'danger';
                        res_status_value = 'Tidak Aktif';
                    }

                    var row = '<tr id="list_' + res_id + '"> <td>' + res_nama + '</td> <td>';
                    row += '<span class="badge bg-' + res_badge + '">' + res_status_value + '</span>';
                    row += '</td> <td> <button type="button" data-uid="' + res_id + '" data-nama="' + res_nama +
                        '" onclick="listUpdate(this)" class="btn btn-info btn-sm"><i class="fa fa-edit"></i> Edit</button>';
                    row += '<button type="button" onclick="listDelete(' + res_id +
                        ')" class="btn btn-danger btn-sm"><i class="fa fa-trash"></i> Hapus</button> </td> </tr>';

                    $('#name_tambah').val("");
                    $('#list').append(row);
                    $('#createmodel').modal('hide');
                    Swal.fire('kategori artikel berhasil ditambahkan', '', 'success')
                }

            } catch (err) {
                console.log(err);
            }

            return false;
        });

        //Aksi Ubah

        function listUpdate(obj) {

            var id = obj.getAttribute('data-uid');
            var nama = obj.getAttribute('data-nama');
            var status = obj.getAttribute('data-status');

            $('#id_ubah').val(id);
            $('#name_ubah').val(nama);
            $('#status_ubah').val(status);

            $('#updatemodel').modal('show');
        }

        const ubah = document.getElementById('ubah');

        ubah.addEventListener('submit', async (e) => {
            e.preventDefault();

            const id = ubah.id.value;
            const nama = ubah.nama.value;
            const status = ubah.status.value;
            const _token = "{{ csrf_token() }}";

            let formData = new FormData();
            formData.append("id", id);
            formData.append("nama", nama);
            formData.append("status", status);

            try {
                let response = await fetch("{{ route('kategori-artikel.update-modal') }}", {
                    method: "POST",
                    body: formData,
                    headers: {
                        "X-CSRF-TOKEN": _token
                    }
                });
                var datasend = await response.json();

                if (datasend.status == 'success') {

                    var res_id = datasend.data.id;
                    var res_nama = datasend.data.nama;
                    var res_status = datasend.data.status;
                    var res_badge = 'success';
                    var res_status_value = 'Aktif';

                    if (res_status == 'T') {
                        res_badge = 'danger';
                        res_status_value = 'Tidak Aktif';
                    }

                    var row = '<tr id="list_' + res_id + '"> <td>' + res_nama + '</td> <td>';
                    row += '<span class="badge bg-' + res_badge + '">' + res_status_value + '</span>';
                    row += '</td> <td> <button type="button" data-status="' + res_status + '" data-uid="' +
                        res_id + '" data-nama="' + res_nama +
                        '" onclick="listUpdate(this)" class="btn btn-info btn-sm"><i class="fa fa-edit"></i> Edit</button>';
                    row += '<button type="button" onclick="listDelete(' + res_id +
                        ')" class="btn btn-danger btn-sm"><i class="fa fa-trash"></i> Hapus</button> </td> </tr>';

                    $('#name_ubah').val("");
                    $('#list_' + res_id).replaceWith(row);
                    $('#updatemodel').modal('hide');
                    Swal.fire('kategori artikel berhasil diperbaharui', '', 'success')
                }

            } catch (err) {
                console.log(err);
            }

            return false;
        });

        function listDelete(id) {
            Swal.fire({
                title: 'apakah kamu yakin menghapus kategori artikel ini?',
                icon: 'info',
                confirmButtonText: `Ya, Hapus !`,
            }).then((result) => {
                /* Read more about isConfirmed, isDenied below */
                if (result.isConfirmed) {
                    $.ajax({
                        url: "{{ route('kategori-artikel.delete-modal') }}",
                        method: "POST",
                        data: {
                            "_token": "{{ csrf_token() }}",
                            "id": id
                        },

                        success: function(result) {
                            Swal.fire('kategori artikel berhasil dihapus', '', 'success')
                            $('#list_' + id).remove();
                        }
                    });
                } else {

                }
            });
        }

        // Pagintaion

        $(document).ready(function(){
    
            $(document).on('click', '.page-link', function(event){
                event.preventDefault(); 
                var page = $(this).attr('href').split('page=')[1];
                loadTable(page);
            });
            
            function loadTable(page) {
                var _token = "{{ csrf_token() }}";
                $.ajax({
                    url:"{{ route('kategori-artikel.load-table') }}",
                    method:"POST",
                    data:{_token:_token, page:page},
                    success:function(data) {
                            $('#tableLoad').html(data);
                    }
                });
            }

        });
    </script>
@endsection