@extends('layouts.default')

@section('title', 'Pemeliharaan')

@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" />
    <link href="{{ asset('assets/plugins/lightbox2/css/lightbox.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">Pemeliharaan</li>
	</ol>
	<!-- end breadcrumb -->
	<!-- begin page-header -->
	<h1 class="page-header">Managed Tables - Buttons <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 Pemeliharaan</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 >ID Produk</th>
								<th >Tanggal Pemeriksaan</th>
								<th >Tanggal Perawatan</th>
								<th >Vendor Pengerjaan</th>
								<th >Kondisi</th>
								<th >Keterangan</th>
								<th >Foto Pemeliharaan</th>
								<th >Aksi</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.pemeliharaan.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"><i class="fa fa-suitcase"></i>Detail Pemeliharaan</h4>
									<button type="button" class="close" data-dismiss="modal" onclick="reset_form()"aria-hidden="true">×</button>
								</div>
								<div class="modal-body">
									
									
										@include('pages.pemeliharaan.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="{{ asset('assets/plugins/lightbox2/js/lightbox.min.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://cdn.jsdelivr.net/npm/lightgallery@2.7.2/lightgallery.umd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/lightgallery@2.7.2/plugins/zoom/lg-zoom.umd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/lightgallery@2.7.2/plugins/thumbnail/lg-thumbnail.umd.min.js"></script>


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

	


	
<script type="text/javascript">





function edit_action(this_el, item_id) {
    // 🔹 Tampilkan SweetAlert Loading
    Swal.fire({
        title: 'Loading...',
        text: 'Sedang memuat data...',
        allowOutsideClick: false,
        showConfirmButton: false,
        didOpen: () => {
            Swal.showLoading();
        }
    });

    $.ajax({
        url: `/pemeliharaan/${item_id}`,
        type: 'GET',
        dataType: 'json',
        success: function(res) {
            Swal.close(); // Tutup loading saat berhasil

            modal_content("input"); // Set Helper Mode (input)
            $('#modal-form').modal('show');
            $('#modal-title').html("Edit Data Pemeliharaan");
            $('#btnSave-title').html('Update');
            reset_form();

            const d = res.data;

            // Isi field text biasa
            $('#item_id').val(d.id);
            $('#tgl_pemeriksaan').val(d.tgl_pemeriksaan || '');
            $('#tgl_perawatan').val(d.tgl_perawatan || '');
            $('#petugas_perawatan').val(d.petugas_perawatan || '');
            $('#kondisi').val(d.kondisi || '');
            $('#keterangan').val(d.keterangan || '');

            // 🔹 Populate Select2 #id_produk
            if (d.id_produk) {
                // Ambil Nama Produk jika API mengirimkannya (di relasi produk)
                let namaProduk = d.nama_produk || (d.produk ? d.produk.nama_produk : 'Produk #' + d.id_produk);

                // Buat Option Baru & Trigger Change
                // (Opsi ke-3 'true' berarti selected, opsi ke-4 'true' berarti highlighted)
                var newOption = new Option(namaProduk, d.id_produk, true, true);
                $('#id_produk').append(newOption).trigger('change');

                // Trigger manual agar Select2 UI update
                $('#id_produk').trigger({
                    type: 'select2:select',
                    params: {
                        data: {
                            id: d.id_produk,
                            text: namaProduk
                        }
                    }
                });
            }

            // Hapus requirement gambar saat edit (opsional)
            // $('#gambar_pemeriksaan').removeAttr('required').attr('data-parsley-required', 'false');
            // Jika menggunakan Parsley:
            if ($('#PemeliharaanForm').parsley()) {
                 $('#PemeliharaanForm').parsley().reset();
            }
        },
        error: function(xhr) {
            console.error('Error edit:', xhr);
            Swal.fire('Error', 'Gagal memuat data pemeliharaan.', 'error');
        }
    });
}

function detail_action(this_el, id_pemeliharaan) {
    // 🔹 Tampilkan Loading
    Swal.fire({
        title: 'Loading...',
        text: 'Sedang mengambil detail data...',
        allowOutsideClick: false,
        showConfirmButton: false,
        didOpen: () => {
            Swal.showLoading();
        }
    });

    $('#item_id-detail').val(id_pemeliharaan);
    
    // Reset semua field text
    $('#nama_produk-detail, #tgl_pemeriksaan-detail, #tgl_perawatan-detail, #petugas-detail, #kondisi-detail, #keterangan-detail').text('-');
    $('#nomor_pengajuan-detail, #status_pengajuan-detail, #tanggal_pengajuan-detail, #nama_user-detail, #catatan_pengajuan-detail').text('-');
    $('#produk-detail, #ruangan-detail, #uraian_kerusakan-detail, #usulan_tindakan-detail').text('-');

    // Reset gambar
    $('#gambar_pemeliharaan-detail').html('<img src="/assets/images/default.png" class="img-thumbnail w-100" alt="Gambar Pemeriksaan">');
    $('#gambar_pengajuan-detail').html('<img src="/assets/images/default.png" class="img-thumbnail" width="100" height="100" alt="Gambar Pengajuan">');

    const urlDetail = `/pemeliharaan/${id_pemeliharaan}`;
    const urlTimeline = `/pemeliharaan/timeline/${id_pemeliharaan}`;

    // 🔹 1️⃣ Ambil data pemeliharaan utama
    $.ajax({
        type: 'GET',
        url: urlDetail,
        dataType: 'json',
        success: function (res) {
            Swal.close(); // Tutup loading
            $('#modal-detail').modal('show'); // Tampilkan modal

            const data = res.data || {};

            $('#nama_produk-detail').text(data.nama_produk || '-');
            $('#tgl_pemeriksaan-detail').text(data.tgl_pemeriksaan || '-');
            $('#tgl_perawatan-detail').text(data.tgl_perawatan || '-');
            $('#petugas-detail').text(data.petugas_perawatan || '-');
            $('#kondisi-detail').text(data.kondisi || '-');
            $('#keterangan-detail').text(data.keterangan || '-');

            const img = data.gambar_pemeriksaan
                ? `/assets/images/pemeliharaan/${data.gambar_pemeriksaan}`
                : `/assets/images/default.png`;
            $('#gambar_pemeliharaan-detail').html(`<img src="${img}" class="img-thumbnail w-100" alt="Gambar Pemeriksaan">`);
        },
        error: function (xhr) {
            console.error('Gagal memuat data pemeliharaan:', xhr.responseText);
            Swal.fire('Error', 'Gagal mengambil detail pemeliharaan.', 'error');
        }
    });

    // 🔹 2️⃣ Ambil timeline pemeliharaan
    $.ajax({
        type: 'GET',
        url: urlTimeline,
        dataType: 'json',
        success: function (response) {
            const timeline = response.data || [];

            // cari baris pengajuan utama
            const utama = timeline.find(x => x.is_pengajuan_utama);
            if (utama) {
                // isi semua field di bagian Data Pengajuan Awal
                $('#nomor_pengajuan-detail').text(utama.nomor_pengajuan || '-');
                $('#status_pengajuan-detail').html(`<span class="badge badge-info">${utama.status || '-'}</span>`);
                $('#tanggal_pengajuan-detail').text(utama.tanggal_kegiatan || '-');
                $('#nama_user-detail').text(utama.nama_user || '-');
                $('#catatan_pengajuan-detail').text(utama.catatan || '-');
                $('#produk-detail').text(utama.produk || '-');
                $('#ruangan-detail').text(utama.ruangan || '-');
                $('#uraian_kerusakan-detail').text(utama.uraian_kerusakan || '-');
                $('#usulan_tindakan-detail').text(utama.usulan_tindakan || '-');

                const img = utama.gambar_pendukung
                    ? `/assets/images/pengajuan/${utama.gambar_pendukung}`
                    : `/assets/images/default.png`;
                $('#gambar_pengajuan-detail').html(`<img src="${img}" class="img-thumbnail" width="100" height="100" alt="Gambar Pengajuan">`);
            }

            // isi tabel riwayat
            datatable_pemeliharaan(timeline, id_pemeliharaan);
        },
        error: function (xhr) {
            console.error('Gagal memuat timeline:', xhr.responseText);
            Swal.fire('Error', 'Gagal mengambil data riwayat pemeliharaan.', 'error');
        }
    });
}





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

    Swal.fire({
        title: 'Apakah Anda yakin?',
        text: "Data ini akan dihapus secara permanen dan tidak dapat dikembalikan!",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Ya, hapus!',
        cancelButtonText: 'Batal',
        confirmButtonColor: '#d33',
        cancelButtonColor: '#6c757d'
    }).then((result) => {
        if (result.isConfirmed) {
            // 🔹 Loading Hapus
            Swal.fire({
                title: 'Sedang Menghapus...',
                text: 'Mohon tunggu sebentar.',
                allowOutsideClick: false,
                showConfirmButton: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });

            $.ajax({
                url: url,
                type: "POST",
                data: {
                    '_method': 'DELETE',
                    '_token': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    Swal.fire({
                        title: 'Berhasil!',
                        text: response.message || 'Data berhasil dihapus.',
                        icon: 'success',
                        timer: 1500,
                        showConfirmButton: false
                    });
                    table.ajax.reload(null, false); // reload tanpa reset paging
                },
                error: function(xhr) {
                    let message = 'Terjadi kesalahan saat menghapus data.';
                    
                    // 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
                        }
                    }

                    Swal.fire({
                        title: 'Gagal!',
                        text: message,
                        icon: 'error'
                    });
                }
            });
        }
    });
}


    function reset_form(){
    	$('#PemeliharaanForm').trigger("reset");
    	$('#item_id').val("");
    	$('#nama_pemeliharaan').val("");
    	$('#merek').val("");
    	$('#tipe').val("");
    	$('#tahun_pemeliharaan').val("");
    	$('#gambar_pemeliharaan').val("");
    	$('#deskripsi_pemeliharaan').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 Pemeliharaan");
	                $('#gambar_pemeriksaan').attr('data-parsley-required', true);
			      

	            }
	        }
	   		 
	      ],
        "lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ],
	  	responsive: true,
		paging: true,
        responsive: true,
        autoWidth: false,
        scrollX: true, 
		processing: true,
		serverSide: false,
		ajax: '{{ url('pemeliharaan') }}',
		order: [
        [0, 'desc']
   		 ],
		columns: [
			{ data: 'id', name: 'id' },
			{ 
                data: 'produk.nama_produk', 
                title: 'Nama Produk',
                defaultContent: '-', 
                render: function (data, type, row) {
                    return row.produk ? row.produk.nama_produk : '-';
                }
            },
			{ data: 'tgl_pemeriksaan', name: 'Tanggal Pemeriksaan' },
			{ data: 'tgl_perawatan', name: 'Tanggal Perawatan' },
			{ 
                data: 'vendor.nama_vendor',
                title: 'Vendor Pengerjaan',
                defaultContent: '-',
                render: function (data, type, row) {
                    return row.vendor ? row.vendor.nama_vendor : '-';
                }
            },
			{ data: 'kondisi', name: 'Kondisi' },
			{ data: 'keterangan', name: 'Keterangan' },
            {
            data: 'gambar_pemeriksaan',
            orderable: false,
            searchable: false,
            className: 'text-center',
            render: function (data, type, row) {
                if (!data) return '-';
                const src = `/assets/images/pemeliharaan/${data}`;
                return `
                <a href="${src}" data-lightbox="pemeliharaan-${row.id}" data-title="${row.produk?.nama_produk || 'Gambar Pemeliharaan'}">
                    <img src="${src}" 
                        class="img-thumbnail" 
                        alt="Preview" 
                        style="width: 60px; height: 60px; object-fit: cover; cursor: zoom-in;">
                </a>
                `;
            }
            },


			{ 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 dengan SweetAlert2 + Konfirmasi Update
   ========================================================================================= */
var form = document.getElementById('PemeliharaanForm');

$('#btnSave').click(function (e) {
    e.preventDefault();

    var fileVar = new FormData(form);
    $('#PemeliharaanForm').parsley().validate();

    if ($('#PemeliharaanForm').parsley().isValid()) {
        var isNew = $('#item_id').val() == "";
        var item_id = $('#item_id').val();
        var url = isNew ? "{{ url('pemeliharaan') }}" : `{{ url('pemeliharaan') }}/${item_id}`;
        var method = isNew ? "POST" : "POST";

        if (!isNew) {
            fileVar.append('_method', 'PUT');
        }

        // Fungsi kirim data AJAX
        function sendData() {
            // 🔹 Loading Simpan/Update
            Swal.fire({
                title: isNew ? 'Menyimpan...' : 'Memperbarui...',
                text: 'Mohon tunggu, data sedang diproses.',
                allowOutsideClick: false,
                showConfirmButton: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });

            $.ajax({
                data: fileVar,
                url: url,
                type: method,
                dataType: "json",
                async: false,
                cache: false,
                processData: false,
                contentType: false,
                success: function (data) {
                    reset_form();
                    $('#modal-form').modal('hide');
                    $('#btnSave-title').html(isNew ? 'Save' : 'Update');
                    table.ajax.reload(null, false);

                    Swal.fire({
                        icon: 'success',
                        title: isNew ? 'Berhasil!' : 'Berhasil Diperbarui!',
                        text: isNew
                            ? 'Data berhasil ditambahkan ke dalam sistem.'
                            : 'Data berhasil diperbarui di dalam sistem.',
                        showConfirmButton: false,
                        timer: 2000
                    });
                },
                error: function (xhr) {
                    console.error('Error:', xhr);
                    $('#modal-form').modal('hide');
                    $('#btnSave-title').html(isNew ? 'Save' : 'Update');

                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal!',
                        text: isNew
                            ? 'Terjadi kesalahan saat menambahkan data.'
                            : 'Terjadi kesalahan saat memperbarui data.',
                        confirmButtonText: 'Tutup'
                    });
                }
            });
        }

        // Jika data baru → langsung kirim
        if (isNew) {
            sendData();
        } 
        // Jika update → tampilkan konfirmasi dulu
        else {
            Swal.fire({
                title: 'Yakin ingin memperbarui data ini?',
                text: "Perubahan akan disimpan permanen di sistem.",
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Ya, perbarui!',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    sendData();
                }
            });
        }
    }
});



    // Event handler tombol preview
    $(document).on('click', '.preview-item', function () {
        const imageUrl = $(this).data('src');

        if (!imageUrl) {
            Swal.fire('Oops!', 'Gambar tidak tersedia.', 'warning');
            return;
        }

        // Hapus instansi lightGallery lama (mencegah duplikasi)
        if (window.lgInstance) {
            window.lgInstance.destroy(true);
        }

        // Inisialisasi lightGallery dinamis
        const container = document.getElementById('lightgallery-container') || document.createElement('div');
        container.id = 'lightgallery-container';
        document.body.appendChild(container);

        // 🔹 Buat instansi baru
        window.lgInstance = lightGallery(container, {
            dynamic: true,
            dynamicEl: [{
                src: imageUrl,
                thumb: imageUrl,
            }],
            plugins: [lgZoom, lgThumbnail],
            licenseKey: '0000-0000-000-0000', // dummy
            speed: 400,
            zoom: true,
            thumbnail: true,
            download: false,
        });

        // 🔹 Buka galeri di index 0
        window.lgInstance.openGallery(0);
    });


    lightbox.option({
    'resizeDuration': 300,
    'fadeDuration': 300,
    'wrapAround': true,
    'albumLabel': "Gambar %1 dari %2"
    });


  });
</script>
@endpush