@extends('layouts.default')

@section('title', 'Produk')

@push('css')
    <link href="{{ asset('assets/plugins/datatables/css/dataTables.bootstrap4.css') }}" rel="stylesheet" />
    <link href="{{ asset('assets/plugins/datatables/css/buttons/buttons.bootstrap4.css') }}" rel="stylesheet" />
    <link href="{{ asset('assets/plugins/datatables/css/responsive/responsive.bootstrap4.css') }}" rel="stylesheet" />
    <link href="{{ asset('assets/plugins/gritter/css/jquery.gritter.css') }}" rel="stylesheet" />
@endpush

@section('content')
    <!-- begin breadcrumb -->
    <ol class="breadcrumb pull-right">
        <li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
        <li class="breadcrumb-item"><a href="javascript:;">Master</a></li>
        <li class="breadcrumb-item active">Produk</li>
    </ol>
    <!-- end breadcrumb -->
    <!-- begin page-header -->
    <h1 class="page-header">Data Aset BMN / Non BMN <small>header small text goes here...</small></h1>
    <!-- end page-header -->

    <!-- begin row -->
    <div class="row">
        <!-- begin alert -->
        <div class="alert ">
            <span class="label label-inverse m-r-5">NOTE!</span> NVD3 Chart is not supported in old browser like IE8.
        </div>
        <!-- end alert -->
        <!-- begin col-10 -->
        <div class="col-lg-12">
            <!-- begin panel -->
            <div class="panel panel-inverse">
                <!-- begin panel-heading -->
                <div class="panel-heading">
                    <div class="panel-heading-btn">
                        <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default"
                            data-click="panel-expand"><i class="fa fa-expand"></i></a>
                        <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success"
                            data-click="panel-reload"><i class="fa fa-redo"></i></a>
                        <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning"
                            data-click="panel-collapse"><i class="fa fa-minus"></i></a>
                        <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-danger"
                            data-click="panel-remove"><i class="fa fa-times"></i></a>
                    </div>
                    <h4 class="panel-title">Data Produk</h4>
                </div>
                <!-- end panel-heading -->
                <!-- begin alert -->
                <div id="alert-box" class="alert fade show" " style=" display:none;">
                    <button type="button" class="close" data-dismiss="alert">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <span class="label label-inverse m-r-5">NOTE!</span> <span id="alert-massage"> Pesan </span>
                </div>




                <!-- end alert -->
                <!-- begin panel-body -->
                <div class="panel-body">

                    <table id="data-table-buttons" class="table table-striped table-bordered">
                        <thead>
                            <tr>
                                <th width="1%"></th>

                                <th>Nama</th>
                                <th>Merek</th>
                                <th>Tipe</th>
                                <th>kategori</th>
                                <th>Tahun</th>
                                <th>Gambar</th>
                                <th>Deskripsi</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>

                    <!-- #modal-form -->
                    <div class="modal fade" id="modal-form">
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h4 class="modal-title" id="modal-title"></h4>
                                    <button type="button" class="close" data-dismiss="modal" onclick="reset_form()"
                                        aria-hidden="true">×</button>
                                </div>
                                <div class="modal-body">
                                    <div class="alert alert-danger m-b-0">
                                        <h5><i class="fa fa-info-circle"></i> Alert Header</h5>
                                        <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
                                            sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus
                                            viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec
                                            lacinia congue felis in faucibus.</p>
                                    </div>
                                    <div id="modal_content">
                                        @include('pages.produk.forminput')
                                    </div>



                                </div>


                            </div>
                        </div>
                    </div>

                    <!-- #modal-detail -->
                    <div class="modal fade" id="modal-detail">
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h4 class="modal-title">Detail Produk</h4>
                                    <button type="button" class="close" data-dismiss="modal" onclick="reset_form()"
                                        aria-hidden="true">×</button>
                                </div>
                                <div class="modal-body">


                                    @include('pages.produk.detail')


                                </div>


                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end panel -->
        </div>
        <!-- end panel-body -->
    </div>
    <!-- end panel -->
    </div>
    <!-- end col-12 -->
    </div>
    <!-- end row -->
@endsection

@push('scripts')
    <script src="{{ asset('assets/plugins/datatables/js/jquery.dataTables.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables/js/dataTables.bootstrap4.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables/js/buttons/dataTables.buttons.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables/js/buttons/buttons.bootstrap4.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables/js/buttons/buttons.flash.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables/js/buttons/jszip.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables/js/buttons/pdfmake.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables/js/buttons/vfs_fonts.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables/js/buttons/buttons.html5.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables/js/buttons/buttons.print.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables/js/responsive/dataTables.responsive.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables/js/responsive/responsive.bootstrap4.js') }}"></script>
    <script src="{{ asset('assets/js/demo/table-manage-buttons.demo.js') }}"></script>
    <script src="{{ asset('assets/plugins/gritter/js/jquery.gritter.js') }}"></script>
    <script src="{{ asset('assets/plugins/sweetalert/sweetalert.min.js') }}"></script>
    <script src="{{ asset('assets/js/demo/ui-modal-notification.demo.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        $(document).ready(function () {
            Notification.init();
        });
    </script>





    <script type="text/javascript">



        /* =============================== */
        /* EDIT ACTION */
        /* =============================== */

        function edit_action(this_el, item_id) {
            modal_content("input");
            $('#item_id').val(item_id);
            $('#modal-form').modal('show');
            $('#btnSave-title').html("Update");
            $('#modal-title').html("Update Data Produk");

            var url = `{{ url('produk') }}/${item_id}`;


            $.ajax({
                type: 'GET',
                url: url,
                dataType: 'json',
                success: function (data) {
                    console.log('AJAX Response:', data);

                    // Ambil payload sebenarnya (handle kedua pola: {status:..., data:...} atau langsung objek)
                    let payload = null;
                    if (data && data.data !== undefined) {
                        payload = data.data;
                    } else {
                        payload = data;
                    }

                    // Jika payload adalah string JSON, coba parse
                    if (typeof payload === 'string') {
                        try {
                            payload = JSON.parse(payload);
                        } catch (e) {
                            // biarkan saja jika bukan JSON
                        }
                    }

                    // Tentukan element: kalau array ambil index 0, kalau object pakai langsung
                    let element = null;
                    if (Array.isArray(payload)) {
                        element = payload.length > 0 ? payload[0] : null;
                    } else if (payload && typeof payload === 'object') {
                        element = payload;
                    }

                    if (!element) {
                        Swal.fire({
                            icon: 'warning',
                            title: 'Data tidak ditemukan',
                            text: 'Data tidak tersedia atau telah dihapus.',
                            timer: 2000,
                            showConfirmButton: false
                        });
                        return;
                    }

                    // --------------------
                    // Set value input form
                    // --------------------
                    $('#nama_produk').val(element.nama_produk ?? '');
                    $('#merek').val(element.merek ?? '');

                    // Untuk tipe: prefer element.tipe (yang sepertinya string '3'), fallback ke nested tipe_produk.id_tipe_produk
                    let tipeValue = element.tipe ?? (element.tipe_produk && element.tipe_produk.id_tipe_produk) ?? '';
                    // Jika select memakai select2, set value + trigger change agar select2 menampilkan label
                    $('#tipe').val(tipeValue).trigger('change');

                    // Deskripsi
                    $('#deskripsi_produk').val(element.deskripsi_produk ?? '');

                    // Tahun (datepicker expects string; jika ada nilai, panggil update)
                    if (element.tahun_produk !== undefined && element.tahun_produk !== null && element.tahun_produk !== '') {
                        // pastikan tipe string
                        $('#tahun_produk').datepicker('update', String(element.tahun_produk));
                    } else {
                        $('#tahun_produk').datepicker('update', '');
                    }

                    // Optional: set hidden id item jika ada
                    if (element.id !== undefined) {
                        $('#item_id').val(element.id);
                    }

                    // Preview gambar
                    var imageUrl = element.gambar_produk
                        ? '/assets/images/gambar_produk/' + element.gambar_produk
                        : '/assets/images/default.png';


                    // Preview gambar produk (jika ada dari server)
                    if (element.gambar_produk) {
                        $('#preview_gambar').attr('src', imageUrl);
                        $('#preview-container').show();
                    } else {
                        $('#preview-container').hide();
                        $('#preview_gambar').attr('src', '');
                    }

                    console.log('Data item:', element);
                },
                error: function (xhr, status, error) {
                    console.error('AJAX Error:', error);

                    let msg = 'Gagal memuat data produk.';
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        msg = xhr.responseJSON.message;
                    }

                    Swal.fire({
                        title: 'Error!',
                        text: msg,
                        icon: 'error',
                        timer: 2000,
                        showConfirmButton: false
                    });
                }

            });
        }


        /* =============================== */
        /* DETAIL ACTION */
        /* =============================== */

        function detail_action(this_el, item_id) {
            $('#item_id-detail').val(item_id);

            Swal.fire({
                title: 'Memuat Data...',
                text: 'Mohon tunggu sebentar',
                allowOutsideClick: false,
                showConfirmButton: false,
                willOpen: () => {
                    Swal.showLoading();
                }
            });

            const url = `{{ url('produk') }}/${item_id}`;

            $.ajax({
                type: 'GET',
                url: url,
                dataType: 'json',

                success: function (response) {
                    Swal.close();
                    $('#modal-detail').modal('show');
                    console.log('✅ AJAX Response:', response);

                    // Ambil data produk dengan fleksibilitas struktur
                    let element = null;
                    if (response?.data && !Array.isArray(response.data)) {
                        // { data: {id:.., nama_produk:..} }
                        element = response.data;
                    } else if (response?.data && Array.isArray(response.data)) {
                        // { data: [ {id:..}, {...} ] }
                        element = response.data[0];
                    } else if (Array.isArray(response) && response.length > 0) {
                        // [ {id:..} ]
                        element = response[0];
                    } else if (typeof response === 'object' && response.id) {
                        // langsung objek produk
                        element = response;
                    }

                    if (!element) {
                        console.warn('⚠️ Data produk kosong atau format tidak dikenali');
                        Swal.fire({
                            title: 'Data Tidak Ditemukan',
                            text: 'Produk yang diminta tidak tersedia.',
                            icon: 'warning',
                            timer: 2000,
                            showConfirmButton: false
                        });
                        return;
                    }

                    console.log('🎯 Parsed Produk Data:', element);

                    // Set nilai detail ke modal
                    $('#nama_produk-detail').text(element.nama_produk || '-');
                    $('#merek-detail').text(element.merek || '-');

                    // Ambil nama_tipe dari relasi tipe_produk jika ada
                    const tipeProduk = element.tipe_produk ? element.tipe_produk.nama_tipe : (element.tipe || '-');
                    $('#tipe-detail').text(tipeProduk);

                    // Ambil kategori dari relasi tipe_produk jika ada

                    const tipeKategori = element.tipe_produk && element.tipe_produk.kategori ? element.tipe_produk.kategori : '-';

                    $('#kategori-detail').text(tipeKategori);

                    $('#deskripsi_produk-detail').text(element.deskripsi_produk || '-');
                    $('#tahun_produk-detail').text(element.tahun_produk || '-');

                    // Gambar produk (fallback ke default)
                    const image_url = element.gambar_produk
                        ? `/assets/images/gambar_produk/${element.gambar_produk}`
                        : `/assets/images/default.png`;

                    $('#gambar_produk-detail').html(`
                    <img src="${image_url}" alt="${element.nama_produk || 'Produk'}" class="img-fluid rounded w-100" />
                `);

                    // Jalankan datatable yang berhubungan
                    datatable_inventaris();
                    datatable_pemeliharaan();
                },

                error: function (xhr, status, error) {
                    Swal.close();
                    console.error('❌ AJAX Error:', error, xhr.responseText);

                    let msg = 'Gagal memuat data produk.';
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        msg = xhr.responseJSON.message;
                    }

                    Swal.fire({
                        title: 'Error!',
                        text: msg,
                        icon: 'error',
                        timer: 2000,
                        showConfirmButton: false
                    });
                }
            });
        }


        /* =============================== */
        /* DELETE ACTION */
        /* =============================== */
        function delete_action(item_id) {
            var table = $('#data-table-buttons').DataTable();
            var url = `{{ url('produk') }}/${item_id}`;

            Swal.fire({
                title: 'Apakah Anda yakin?',
                text: 'Data produk ini akan dihapus secara permanen!',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Ya, hapus',
                cancelButtonText: 'Batal',
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: url,
                        type: "POST",
                        data: {
                            '_method': 'DELETE',
                            '_token': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function (response) {

                            // ✅ Notifikasi sukses (alert-box lokal)
                            $('#alert-massage').text("Data Berhasil Dihapus");
                            $('#alert-box').addClass("alert-danger").removeClass("alert-success").show();

                            // ✅ Notifikasi SweetAlert
                            Swal.fire({
                                title: 'Berhasil!',
                                text: response.message || "Data berhasil dihapus.",
                                icon: 'success',
                                timer: 1500,
                                showConfirmButton: false
                            });

                            table.ajax.reload();
                        },
                        error: function (xhr) {
                            let message = "Terjadi kesalahan pada server.";

                            // Ambil pesan error yang lebih spesifik
                            if (xhr.responseJSON) {
                                message = xhr.responseJSON.message || xhr.responseJSON.error;
                            } else if (xhr.responseText) {
                                try {
                                    const parsed = JSON.parse(xhr.responseText);
                                    message = parsed.message || message;
                                } catch (e) {
                                    message = xhr.responseText; // fallback jika bukan JSON
                                }
                            }

                            console.error("Delete Error:", message);

                            // ❌ Notifikasi gagal (alert-box lokal)
                            $('#alert-massage').text("Data Gagal Dihapus");
                            $('#alert-box').addClass("alert-danger").removeClass("alert-success").show();

                            // ❌ Notifikasi SweetAlert
                            Swal.fire({
                                title: 'Oops...',
                                text: message,
                                icon: 'error',
                                timer: 2500,
                                showConfirmButton: false
                            });

                            table.ajax.reload();
                        }
                    });
                } else {
                    Swal.fire({
                        title: 'Dibatalkan',
                        text: 'Data batal dihapus.',
                        icon: 'info',
                        timer: 1200,
                        showConfirmButton: false
                    });
                }
            });
        }




        function reset_form() {
            $('#ProdukForm').trigger("reset");
            $('#item_id').val("");
            $('#nama_produk').val("");
            $('#merek').val("");
            $('#tipe').val("");
            $('#tahun_produk').val("");
            $('#gambar_produk').val("");
            $('#deskripsi_produk').val("");
        }

        function modal_content($content) {
            var modal_content = null
            if ($content == "detail") {
                modal_content = 'detail';

            }
            else {
                modal_content = 'input';
            }
        }



        /* =============================== */
        /* DATATABLE */
        /* =============================== */
        /* =========================================================================================*/
        $(document).ready(function () {



            $('#data-table-buttons').DataTable({
                dom: 'Bfrtipl',

                buttons: [
                    {
                        text: '<i class="fas fa-plus fa-sm"></i>',
                        className: 'btn btn-sm btn-success',
                        id: 'btnAdd',
                        action: function (e, dt, node, config) {

                            modal_content("input");
                            reset_form();
                            $('#modal-form').modal('show');
                            $('#btnSave-title').html("Save");
                            $('#modal-title').html("Create New Produk");


                        }
                    }

                ],
                "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
                responsive: true,
                paging: true,
                responsive: true,
                autoWidth: false,
                scrollX: true,
                paging: true,
                processing: true,
                serverSide: false,
                ajax: '{{ url('produk') }}',
                order: [
                    [0, 'desc']
                ],
                columns: [
                    { data: 'id', name: 'id' },
                    { data: 'nama_produk', name: 'nama_produk' },
                    { data: 'merek', name: 'merek' },
                    { data: 'tipe_produk.nama_tipe', name: 'tipe' },
                    { data: 'tipe_produk.kategori', name: 'kategori' },

                    { data: 'tahun_produk', name: 'tahun_produk' },
                    { data: 'gambar_produk', name: 'gambar_produk' },
                    { data: 'deskripsi_produk', name: 'deskripsi_produk' },
                    { data: null, name: 'action' },

                ],
                'columnDefs': [
                    {
                        'targets': -1,
                        'defaultContent': '-',
                        'searchable': false,
                        'orderable': false,
                        'width': '10%',
                        'className': 'dt-body-center',
                        'render': function (data, type, full_row, meta) {
                            return '<div class="btn-group">' +
                                '<button onclick="detail_action(this, ' + full_row.id + ')" class="btn btn-xs btn-success" data-toggle="modal" data-target="#modal_detail"><i class="fa fa-eye"></i> </button>' +
                                '<button onclick="edit_action(this, ' + full_row.id + ')" class="btn btn-xs btn-warning " data-toggle="modal" data-target="#modal_form"><i class="fa fa-edit"></i> </button>' +
                                '<button onclick="delete_action(' + full_row.id + ')" class="btn btn-xs btn-danger" data-click="swal-danger"><i class="fa fa-trash"></i> </button>' +
                                '</div>';
                        }

                    }
                ],


            });


            var table = $('#data-table-buttons').DataTable();

            table.button().add(1, {
                action: function (e, dt, button, config) {
                    dt.ajax.reload();
                },
                text: '<i class="fas fa-sync fa-sm"></i>',
                className: 'btn-warning'
            });


            new $.fn.dataTable.Buttons(table, {
                buttons: [
                    { extend: 'copy', className: 'btn-sm btn-success' },
                    { extend: 'csv', className: 'btn-sm btn-success' },
                    { extend: 'excel', className: 'btn-sm btn-success' },
                    { extend: 'pdf', className: 'btn-sm btn-success' },
                    { extend: 'print', className: 'btn-sm btn-success' }
                ]
            });

            table.buttons(1, null).container().appendTo(
                table.table().container()
            );
        });
    </script>


    <script type="text/javascript">
        $(function () {

            var table = $('#data-table-buttons').DataTable();

            /* Declare CSRF Token for validation auth laravel*/
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            /*

             $('#btnAdd').click(function () {
                 $('#btnSave').val("create-Customer");
                 $('#Customer_id').val('');
                 $('#CustomerForm').trigger("reset");
                 $('#modelHeading').html("Create New Customer");
                 $('#ajaxModel').modal('show');
             });

             $('body').on('click', '.editCustomer', function () {
               var Customer_id = $(this).data('id');
               $.get("" +'/' + Customer_id +'/edit', function (data) {
                   $('#modelHeading').html("Edit Customer");
                   $('#btnSave').val("edit-user");
                   $('#ajaxModel').modal('show');
                   $('#Customer_id').val(data.id);
                   $('#name').val(data.name);
                   $('#detail').val(data.detail);
               })
            });
            */


            /* =============================== */
            /* SAVE & UPDATE ACTION */
            /* =============================== */

            /* =========================================================================================*/
            var form = document.getElementById('ProdukForm');

            $('#ProdukForm').on('submit', function (e) {
                e.preventDefault();

                var fileVar = new FormData(form);
                var file = $('#gambar_produk').file;
                fileVar.append('gambar_produk', file);

                console.log('data form :', fileVar);
                $('#ProdukForm').parsley().validate();

                if ($('#ProdukForm').parsley().isValid()) {
                    let $btn = $('#btnSave');
                    let btnOriginalText = $('#btnSave-title').html();
                    $btn.prop('disabled', true);
                    $('#btnSave-title').html('<i class="fa fa-spinner fa-spin"></i> Sending...');

                    Swal.fire({
                        title: 'Menyimpan Data...',
                        text: 'Mohon tunggu sebentar',
                        allowOutsideClick: false,
                        showConfirmButton: false,
                        willOpen: () => {
                            Swal.showLoading();
                        }
                    });

                    // === INSERT DATA ===
                    if ($('#item_id').val() == "") {
                        $.ajax({
                            data: fileVar,
                            url: "{{ url('produk') }}",
                            type: "POST",
                            dataType: "json",
                            async: true, // Changed to true for loading animation
                            cache: false,
                            processData: false,
                            contentType: false,
                            success: function (data) {
                                reset_form();
                                $('#modal-form').modal('hide');
                                table.page('last').draw('page');
                                table.ajax.reload();

                                $('#alert-massage').text("Data Berhasil Di Tambahkan");
                                $('#alert-box').addClass("alert-success").removeClass("alert-danger").show();

                                Swal.fire({
                                    title: 'Berhasil!',
                                    text: 'Data berhasil disimpan.',
                                    icon: 'success',
                                    timer: 1500,
                                    showConfirmButton: false
                                });
                            },
                            error: function (data) {
                                console.log('Error:', data);
                                $('#alert-massage').text("Data Gagal Di Tambahkan");
                                $('#alert-box').addClass("alert-danger").removeClass("alert-success").show();

                                Swal.fire({
                                    title: 'Gagal!',
                                    text: 'Data gagal disimpan. Periksa kembali input Anda.',
                                    icon: 'error',
                                    timer: 2000,
                                    showConfirmButton: false
                                });
                            },
                            complete: function() {
                                $btn.prop('disabled', false);
                                $('#btnSave-title').html(btnOriginalText);
                            }
                        });
                    }

                    // === UPDATE DATA ===
                    else {
                        Swal.close(); // Close previous loading because we open a confirmation
                        var item_id = $('#item_id').val();
                        var url = '/produk/' + item_id;
                        fileVar.append('_method', 'PUT');

                        Swal.fire({
                            title: 'Konfirmasi Perubahan',
                            text: 'Apakah Anda yakin ingin memperbarui data ini?',
                            icon: 'question',
                            showCancelButton: true,
                            confirmButtonText: 'Ya, perbarui!',
                            cancelButtonText: 'Batal',
                            reverseButtons: true
                        }).then((result) => {
                            if (result.isConfirmed) {
                                // Show loading again
                                Swal.fire({
                                    title: 'Menyimpan Data...',
                                    text: 'Mohon tunggu sebentar',
                                    allowOutsideClick: false,
                                    showConfirmButton: false,
                                    willOpen: () => {
                                        Swal.showLoading();
                                    }
                                });

                                $.ajax({
                                    data: fileVar,
                                    url: url,
                                    type: "POST",
                                    dataType: "json",
                                    async: true,
                                    cache: false,
                                    processData: false,
                                    contentType: false,
                                    success: function (data) {
                                        reset_form();
                                        $('#modal-form').modal('hide');
                                        table.page('last').draw('page');
                                        table.ajax.reload();

                                        $('#alert-massage').text("Data Berhasil Diperbarui");
                                        $('#alert-box').addClass("alert-success").removeClass("alert-danger").show();

                                        Swal.fire({
                                            title: 'Berhasil!',
                                            text: 'Data berhasil diperbarui.',
                                            icon: 'success',
                                            timer: 1500,
                                            showConfirmButton: false
                                        });
                                    },
                                    error: function (data) {
                                        console.log('Error:', data);
                                        $('#alert-massage').text("Data Gagal Diperbarui");
                                        $('#alert-box').addClass("alert-danger").removeClass("alert-success").show();

                                        Swal.fire({
                                            title: 'Gagal!',
                                            text: 'Data gagal diperbarui. Periksa kembali input Anda.',
                                            icon: 'error',
                                            timer: 2000,
                                            showConfirmButton: false
                                        });
                                    },
                                    complete: function() {
                                        $btn.prop('disabled', false);
                                        $('#btnSave-title').html(btnOriginalText);
                                    }
                                });
                            } else {
                                $btn.prop('disabled', false);
                                $('#btnSave-title').html(btnOriginalText);
                                Swal.fire({
                                    title: 'Dibatalkan',
                                    text: 'Perubahan data dibatalkan.',
                                    icon: 'info',
                                    timer: 1500,
                                    showConfirmButton: false
                                });
                            }
                        });
                    }
                }
            });


            /* $('body').on('click', '.deleteCustomer', function () {

                var Customer_id = $(this).data("id");
                confirm("Are You sure want to delete !");

                $.ajax({
                    type: "DELETE",
                    url: ""+'/'+Customer_id,
                    success: function (data) {
                        table.draw();
                    },
                    error: function (data) {
                        console.log('Error:', data);
                    }
                });
            });*/

        });
    </script>
@endpush