    <!-- Main Content -->
    <div class="hk-pg-wrapper">
			<!-- Container -->
            <div class="container-fluid mt-xl-50 mt-sm-30 mt-15">

            <div class="hk-pg-header mb-10">
                    <div>
						<h4 class="hk-pg-title"><span class="pg-title-icon"><span class="feather-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-activity"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg></span></span>Manage Delivery</h4>
                    </div>
					<div class="d-flex dropdown">
                    <button type="button" id="openModalBtn2" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLarge02">
                                            Lihat Data
                                        </button>
                    </div>
                </div>


		<div class="row">
        <div class="col-xl-12">
            
          </div>
          <div class="col-xl-12">
            <section class="hk-sec-wrapper">
              <h5 class="hk-sec-title">Item Details</h5>
                  <div class="table-responsive">
                        <table id="orders-table" class="table dataTable no-footer">
                                        <thead>
                                            <tr>
                                                <th>Tanggal Order</th>
                                                <th>No Invoice</th>
                                                <th>Nama Customer</th>
                                                <th>File</th>
                                                <th>Nama Bahan</th>
                                                <th>Length</th>
                                                <th>Width</th>
                                                <th>PCS</th>
                                                <th>Hasil Qc</th>
                                                <th>kirim</th>
                                                <th>aksi</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                        </table>
                  </div>

                <button id="submit-btn" class="btn btn-primary">Kirim Data Terpilih</button>

                    <!--- Card Body END -->
          </section>
          </div>
        </div>
		


    </div>
    
                                    <div class="modal fade show" id="exampleModalLarge01" tabindex="-1" role="dialog" aria-labelledby="exampleModalLarge01" style="display: none; padding-right: 15px;" aria-modal="true">
                                        <div class="modal-dialog modal-xl" role="document">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5 class="modal-title">Create Delivery Order</h5>
                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                        <span aria-hidden="true">×</span>
                                                    </button>
                                                </div>
                                                <div class="modal-body">
                                                <section class="hk-sec-wrapper">
                                                                <div class="user-activity">
                                                                        <fieldset>
                                                                            <div class="form-group">
                                                                                <select class="form-control" id="client" name="client" style="width:80%;"  required>
                                                                                <option value=""></option>
                                                                                </select>
                                                                                <button id="refreshClientData" class="btn btn-icon btn-icon-circle btn-light " type="button"><i class="icon-refresh"></i></button><button id="modalclientbtn" class="btn btn-icon btn-icon-circle btn-light" type="button" style="margin-left: 5px;" data-toggle="modal" data-target="#modalclient"><i class="icon-plus"></i></button>
                                                                            </div>    
                                                                            <div class="form-group">
                                                                                <label for="customer_name">Customer Name</label>
                                                                                <input required type="text" class="form-control" id="customer_name" name="customer_name" placeholder="Enter Customer Name" autocomplete="off" / required>
                                                                            </div>
                                                                            <div class="form-group">
                                                                                <label for="customer_phone">Customer Phone</label>
                                                                                <input required type="text" class="form-control" id="customer_phone" name="customer_phone" placeholder="Enter Customer Phone" autocomplete="off" required>
                                                                            </div>
                                                                            <div class="form-group">
                                                                                <label for="customer_address">Delivery Address</label>
                                                                                <textarea required id="customer_address" name="customer_address" class="form-control" maxlength="300" rows="8" placeholder="Enter Customer Address"></textarea>
                                                                            </div>
                                                                            <select type="text" class="form-control mt-2 pt-5" id="jenis_kirim" name="jenis_kirim">                                
                                                                                    <option value="Self-Pickup">Self-Pickup</option>
                                                                                    <option value="Gosend">Gosend</option>
                                                                                    <option value="Gocar">Gocar</option>
                                                                                    <option value="Grab">Grab</option>
                                                                                    <option value="JNT">JNT</option>
                                                                                    <option value="JNE">JNE</option>
                                                                                    <option value="Sicepat">Sicepat</option>
                                                                                    <option value="AnterAja">AnterAja</option>
                                                                                    <option value="Deliveree">Deliveree</option>
                                                                                    <option value="Wahana">Wahana</option>
                                                                                    <option value="Lalamove">Lalamove</option>
                                                                                    <option value="Lainnya">Lainnya</option>
                                                                            </select>
                                                                        </fieldset>
                                                                            <div class="table-responsive mt-3">
                                                                                    <table id="Now-table" class="table dataTable no-footer">
                                                                                                    <thead>
                                                                                                        <tr>
                                                                                                            <th>Tanggal Order</th>
                                                                                                            <th>No Invoice</th>
                                                                                                            <th>Nama Customer</th>
                                                                                                            <th>File</th>
                                                                                                            <th>Nama Bahan</th>
                                                                                                            <th>Length</th>
                                                                                                            <th>Width</th>
                                                                                                            <th>PCS</th>
                                                                                                            <th>Hasil Qc</th>
                                                                                                            <th>kirim</th>
                                                                                                            <th>aksi</th>
                                                                                                        </tr>
                                                                                                    </thead>
                                                                                                    <tbody>
                                                                                                    </tbody>
                                                                                    </table>
                                                                            </div>

                                                                            <div class="form-group">
                                                                                <label for="customer_address">Notes</label>
                                                                                <textarea id="notes" name="notes" class="form-control" maxlength="300" rows="8" placeholder="Enter Customer Address"></textarea>
                                                                            </div>
                                                                        </div>
                                                            <!--- Card Body END -->
                                                </section>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                                    <button type="button" id="submit-delivery" class="btn btn-primary">Save changes</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="modal fade show" id="exampleModalLarge02" tabindex="-1" role="dialog" aria-labelledby="exampleModalLarge02" style="display: none; padding-right: 15px;" aria-modal="true">
                                        <div class="modal-dialog modal-xl" role="document">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5 class="modal-title">Delivery Order List</h5>
                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                        <span aria-hidden="true">×</span>
                                                    </button>
                                                </div>
                                                <div class="modal-body">
                                                <section class="hk-sec-wrapper">
                                                                <div class="user-activity">
                                                                            <div class="table-responsive mt-3">
                                                                                    <table id="getTableSJ" class="table dataTable no-footer">
                                                                                                    <thead>
                                                                                                        <tr>
                                                                                                        <th>ID</th>
                                                                                                        <th>Kode</th>
                                                                                                        <th>Nama</th>
                                                                                                        <th>Waktu Kirim</th>
                                                                                                        <th>Jenis Kirim</th>
                                                                                                        <th>Address</th>
                                                                                                        <th>Phone</th>
                                                                                                        <th>Notes</th>
                                                                                                        <th>action</th>
                                                                                                        </tr>
                                                                                                    </thead>
                                                                                                    <tbody>
                                                                                                    </tbody>
                                                                                    </table>
                                                                            </div>                                                                          
                                                                        </div>
                                                            <!--- Card Body END -->
                                                </section>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                                    <button type="button" id="submit-delivery" class="btn btn-primary">Save changes</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

    <script src="https://texapp.is3.cloudhost.id/api/v2/assets/vendors/sweetalert2/sweetalert2.min.js"></script>
  <script src="https://texapp.is3.cloudhost.id/api/v2/assets/vendors/promise-polyfill/polyfill.min.js"></script> 
<script type="text/javascript">

$(document).ready(function () {
    var tableNow;
    var tableSJ;
    $('#openModalBtn').on('click', function() {
        $('#exampleModalLarge01').modal('show'); // Memanggil modal dengan ID tertentu
        getNowTable();
    });

    $('#openModalBtn2').on('click', function() {
        $('#exampleModalLarge02').modal('show'); // Memanggil modal dengan ID tertentu
        getTableSJ();
    });


    


    var baseUrl = "<?php echo base_url(); ?>";
    var table = $('#orders-table').DataTable({
        ajax: function (data, callback, settings) {
            $.ajax({
                url: baseUrl + 'invoice/getDelivery',
                type: "GET",
                dataType: "json",
                success: function (response) {
                    callback(response);
                },
                error: function (xhr, status, error) {
                    console.error(xhr.responseText);
                }
            });
        },
        columns: [
            { "data": "tanggal_order" },
            { "data": "bill_no" },
            { "data": "customer_name" },
            { "data": "product_name" },
            { "data": "details" },
            { "data": "length" },
            { "data": "width" },
            { "data": "pcs" },
            { "data": "hasilqc" },
            {
                "data": null,
                "render": function (data, type, row) {
                    return '<div class="form-check form-check-inline"><input type="text" class="form-control" placeholder="0" value=""></div>';
                }
            },
            {
                "data": null,
                "render": function (data, type, row) {
                    return '<div class="form-check form-check-inline"><input type="checkbox" value="' + data.id + '" class="orderCheckbox form-check-input success" id="success2-check"><label class="form-check-label" for="success2-check">Pilih</label></div>';
                }
            },
        ],
        order: [0, 'desc'],
    });


    // Handle form submission
    $('#submit-btn').on('click', function () {

        var selectedData = [];

        table.rows().every(function() {
            var rowData = this.data();
            var isChecked = this.nodes().to$().find('.orderCheckbox').prop('checked');

            if (isChecked) {
                var inputValue = $(this.node()).find('input[type="text"]').val();
            
            // Combine row data with input value
            var combinedRowData = Object.assign({}, rowData, { input_value: inputValue });
            selectedData.push(combinedRowData);            }
        });


        console.log(selectedData);

        // Send POST request to server with input values
        $.ajax({
            url: baseUrl + 'orders/addDelivery',
            type: 'POST',
            data: { data: selectedData },
            success: function (response) {
                Swal.fire({
                    icon: 'success',
                    title: 'Success!',
                    text: response.message,
                    onClose: function() {
                        // Setelah SweetAlert ditutup, atur semua kotak centang kembali menjadi tidak tercentang
                        $('.orderCheckbox').prop('checked', false);
                    }
                });
            },
            error: function (xhr, status, error) {
                Swal.fire({
                    icon: 'error',
                    title: 'Oops...',
                    text: 'Something went wrong!'
                });
            }
        });
    });

    
$(".select_group").select2();
	$.getJSON("<?= site_url('dashboard/client') ?>", function(data) {
		// Iterasi data dan tambahkan opsi ke select box
		$.each(data, function(key, value) {
			$('#client').append('<option value="' + value.client_key + '">' + value.client_name + '</option>');
		});
	});
	$('#client').select2({
		placeholder: 'Pilih Client',
		allowClear: true
	});
	
	$('#refreshClientData').on('click', function() {
		refreshclient();
	});

	$('#client').change(function(){
		getClientData();
	});

	function refreshclient() {
		$('#client').find('option').not(':first').remove();
		$('.overlay').addClass('active');
		$.getJSON("<?= site_url('dashboard/client') ?>", function(data) {
			$.each(data, function(key, value) {
				$('#client').append('<option value="' + value.client_key + '">' + value.client_name + '</option>');
			});
			$('.overlay').removeClass('active');
			$('#client').val(null).trigger('change');
		});
	}
	function getClientData() {
		var client_key = $("#client").val();
		$("#client").val(client_key);
		if (client_key == "") {
			$("#customer_name").val("");
		} else {
			console.log("Sending AJAX request for client_key:", client_key);

			$.ajax({
				url: '<?= site_url('dashboard/clientbyid') ?>',
				type: 'post',
				data: { client_key: client_key },
				dataType: 'json',
				success: function(response) {
					$("#customer_name").val(response[0].client_name);
					$("#customer_phone").val(response[0].client_phone);
					$("#customer_address").val(response[0].client_address);
					console.log(response);
				}
			});
		}
	}
    $('#Now-table').on('click', '.deleteBtn', function() {
        var itemCode = $(this).data('item-code'); // Ambil nilai item_code dari tombol yang diklik
        // Panggil fungsi untuk menghapus item dengan item_code tertentu
        deleteItem(itemCode);
    });
    $('#submit-delivery').on('click', function () {
        var clientdata = {
              client_key: $("#client").val(),
              customer_name: $("#customer_name").val(),
              customer_phone: $("#customer_phone").val(),
              customer_address: $("#customer_address").val(),
              notes: $("#notes").val(),
              jenis_kirim: $("#jenis_kirim").val()
          };
          var deliveryDataArray = [];

          tableNow.rows().every(function() {
                var rowData = this.data();
                var inputValue = $(this.node()).find('input[type="text"]').val();


                var deliverydata = Object.assign({}, rowData, { input_value: inputValue }); // Salin rowData ke deliverydata



                deliveryDataArray.push(deliverydata); // Tambahkan objek yang berisi kedua data ke dalam array
            });

            var combinedData = {
            item: deliveryDataArray, // Objek pertama dengan rowData
            client: clientdata // Objek kedua dengan clientdata
            };

        console.log(combinedData);

        // Send POST request to server with input values
        $.ajax({
            url: baseUrl + 'orders/saveDelivery',
            type: 'POST',
            data: { data: combinedData},
            success: function (response) {
                Swal.fire({
                    icon: 'success',
                    title: 'Success!',
                    text: response.message,
                    onClose: function() {
                        // Setelah SweetAlert ditutup, atur semua kotak centang kembali menjadi tidak tercentang
                        window.location.reload();
                    }
                });
            },
            error: function (xhr, status, error) {
                Swal.fire({
                    icon: 'error',
                    title: 'Oops...',
                    text: 'Something went wrong!'
                });
            }
        });
    });

    function deleteItem(itemCode) {
    // Kirim AJAX request ke controller untuk menghapus item dengan item_code tertentu
    $.ajax({
        url: baseUrl + 'orders/deleteItem',
        type: "POST",
        data: { item_code: itemCode },
        success: function(response) {
            // Lakukan sesuatu setelah item dihapus, misalnya refresh datatable
            tableNow.ajax.reload(); // Refresh datatable setelah item dihapus
        },
        error: function(xhr, status, error) {
            console.error(xhr.responseText);
        }
    });
        }

    function getNowTable()
    {    
        if ($.fn.DataTable.isDataTable('#Now-table')) {
        $('#Now-table').DataTable().destroy();
        }

        tableNow = $('#Now-table').DataTable({
        ajax: function (data, callback, settings) {
            $.ajax({
                url: baseUrl + 'orders/getNow',
                type: "GET",
                dataType: "json",
                success: function (response) {
                    callback(response);
                },
                error: function (xhr, status, error) {
                    console.error(xhr.responseText);
                }
            });
        },
        columns: [
            { "data": "tanggal_order" },
            { "data": "bill_no" },
            { "data": "customer_name" },
            { "data": "product_name" },
            { "data": "details" },
            { "data": "length" },
            { "data": "width" },
            { "data": "pcs" },
            { "data": "hasilqc" },
            {
                "data": null,
                "render": function (data, type, row) {
                    return '<div class="form-check form-check-inline"><input type="text" class="form-control" placeholder="0" value="' + data.kirim + '" style="width:100px;"></div>';
                }
            },
            {
                "data": null,
                "render": function (data, type, row) {
                    return '<button type="button" class="btn btn-danger deleteBtn" data-item-code="' + data.item_code + '">Hapus</button>';
                }
            },
        ],
        order: [0, 'desc'],
    });

    }

    function getTableSJ()
    {    
        if ($.fn.DataTable.isDataTable('#getTableSJ')) {
        $('#getTableSJ').DataTable().destroy();
        }

        tableSJ = $('#getTableSJ').DataTable({
        ajax: function (data, callback, settings) {
            $.ajax({
                url:  baseUrl + 'orders/getSuratJalan',
                type: "GET",
                dataType: "json",
                success: function (response) {
                    callback(response);
                },
                error: function (xhr, status, error) {
                    console.error(xhr.responseText);
                }
            });
        },
        columns: [
                    { "data": "id" },
                    { "data": "kode" },
                    { "data": "nama" },
                    { "data": "waktu_kirim" },
                    { "data": "jenis_kirim" },
                    { "data": "address" },
                    { "data": "phone" },
                    { "data": "notes" },
                    {
                        "data": null,
                        "render": function(data, type, row) {
                          var printButton = '<a class="btn btn-primary" href="https://client.texprint.id/share/print?kode=' + data.kode + '" target="blank"><i class="fa fa-print"></i></a>';
                            var linkButton = '<a class="btn btn-secondary" href="https://client.texprint.id/share/do?kode=' + data.kode + '" target="blank"><i class="fa fa-external-link"></i></a>';
                          var photoButton = '<a class="btn btn-info" href="https://app.texprint.my.id/ajax/delivery_upload/' + data.kode + '"><i class="fa fa-camera"></i></a>';
                          return printButton + linkButton + photoButton;                        }
                    }
                ],
        order: [0, 'desc'],
         });

    }
});


    </script>

            <!-- /Container -->



