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

				<!-- Row -->
                <div class="row">
                    <div class="col-xl-12">
                       
						<div class="hk-row">
							<div class="col-lg-4">
                                <div class="card">
									<div class="card-header card-header-action">
										<h6>Detail Pergantian<small class="text-muted pl-10">pesan komplain</small></h6>
										<div class="d-flex align-items-center card-action-wrap">
											<div class="inline-block dropdown">
												<a class="dropdown-toggle no-caret" data-toggle="dropdown" href="#" aria-expanded="false" role="button"><i class="ion ion-ios-more"></i></a>
												<div class="dropdown-menu dropdown-menu-right">
													<a class="dropdown-item" href="#">Action</a>
													<a class="dropdown-item" href="#">Another action</a>
													<a class="dropdown-item" href="#">Something else here</a>
													<div class="dropdown-divider"></div>
													<a class="dropdown-item" href="#">Separated link</a>
												</div>
											</div>
										</div>
									</div>
									<div class="card-body">
                                        <div class="chatapp-wrap">
                                            <div class="chatapp-right" style="flex:100%;max-width:100%;">
                                                <header>
                                                    <a id="back_user_list" href="javascript:void(0)" class="back-user-list">
                                                        <span class="feather-icon"><i data-feather="chevron-left"></i></span>
                                                    </a>
                                                    <div class="media">
                                                        <div class="media-img-wrap">
                                                            <div class="avatar">
                                                                <img src="https://is3.cloudhost.id/texapp/ticket/pola/1731050815_72f4e6b305c16b4bb1b2.jpg" alt="user" class="avatar-img rounded-circle">
                                                            </div>
                                                            <span class="badge badge-success badge-indicator"></span>
                                                        </div>
                                                        <div class="media-body">
                                                            <div class="user-name"><?php echo $result['TicketData']['customer_name'] ?></div>
                                                        </div>
                                                    </div>
                                                    <div class="chat-options-wrap">
                                                        <a href="javascript:void(0)" class=""><span class="feather-icon"><i data-feather="video"></i></span></a>
                                                        <a href="javascript:void(0)" class=""><span class="feather-icon"><i data-feather="phone"></i></span></a>
                                                    </div>
                                                </header>
                                                <div class="chat-body">
                                                    <div class="nicescroll-bar">
                                                        <ul id="message-container" class="list-unstyled">

                                                        </ul>
                                                    </div>
                                                </div>
                                                <footer>
                                                    <div class="input-group">
                                                        <div class="input-group-prepend">
                                                            <div class="btn-file  btn btn-light">
                                                                <div class="btn-icon-wrap">
                                                                    <span class="feather-icon"><i data-feather="paperclip"></i></span>
                                                                    <input type="file">
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <input type="hidden" id="hiddenKode" name="hiddenKode" value="<?php echo $result['TicketData']['kode'] ?>">

                                                        <input type="text" id="messageInput" name="send-msg" class="input-msg-send form-control" placeholder="Type something">
                                                        <div class="input-group-append">
                                                            <button type="button" class="btn  btn-light  dropdown-toggle no-caret" data-toggle="dropdown"><span class="feather-icon"><i data-feather="at-sign"></i></span></button>
                                                        </div>
                                                    </div>
                                                </footer>
                                            </div>
                                        </div>
									</div>
								</div>
							</div>
							<div class="col-lg-8">
                                <div class="card card-refresh">
									<div class="refresh-container">
										<div class="loader-pendulums"></div>
									</div>
									<div class="card-header card-header-action">
										<div>
											<h6 class="mb-10">Pola Pergantian</h6>
											<p class="font-14 w-80">Costumer memasukan detail pola pergantian yang bermasalah lengkap qty bersama ukuran. Setelahnya kita akan melakukan pengecekan terhadap penyebab permasalahan pada masing2 pola.</p>
										</div>
										<div class="d-flex align-items-center card-action-wrap">
											<a href="#" class="inline-block refresh mr-15">
												<i class="ion ion-md-radio-button-off"></i>
											</a>
											<a href="#" class="inline-block full-screen">
												<i class="ion ion-md-expand"></i>
											</a>
										</div>
									</div>
									<div class="card-body"><p><button id="button">Row count</button></p>

                                        <div class="table-responsive">
                                            <table id="table-pola" class="table align-middle text-nowrap mb-0">
                                            <thead>
                                                <tr class="text-muted fw-semibold">
                                                <th scope="col"  style="width:20%">Pola</th>
                                                <th scope="col"style="width:20%">Ukuran</th>
                                                <th scope="col"style="width:20%">QTY</th>
                                                <th scope="col"style="width:20%">Jumlah</th>
                                                <th scope="col"style="width:20%">Status</th>
                                                </tr>
                                            </thead>
                                            <tbody class="border-top">
                                            <?php if(isset($result['ticket_item'])): ?>
                                            <?php $x = 1; ?>
                                            <?php foreach ($result['ticket_item'] as $key => $val): ?>
                                            <?php //print_r($v); ?>
                                                <tr id="row_<?php echo $x; ?>">
                                                <td class="ps-0">
                                                    <div class="d-flex align-items-center">
                                                    <div class="me-2 pe-1">
                                                        <img src="<?php echo $val['image_url'] ?>" class="rounded-circle" width="40" height="40" alt="">
                                                    </div>
                                                    <div>
                                                        <h6 class="ml-2 mb-1"><?php echo $val['description'] ?></h6>
                                                        <small class="text-muted pl-10"><?php echo $val['item_code'] ?></small>
                                                    </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    <p class="mb-0 fs-3"><?php echo $val['width'] ?> x <?php echo $val['length'] ?> </p>
                                                </td>
                                                <td>
                                                    <p class="mb-0 fs-3"><?php echo $val['qty'] ?> pcs</p>
                                                </td>                        
                                                <td>
                                                    <p class="fs-3 text-dark mb-0"><?php echo $val['subtotal'] ?> m</p>
                                                </td>
                                                <td>
                                                    <span class="badge fw-semibold py-1 w-85 bg-light-warning text-warning">Dalam Pemeriksaan</span>
                                                </td>
                                                </tr>
                                                <?php $x++; ?>
                                                <?php endforeach; ?>
                                                <?php endif; ?>
                                            </tbody>
                                            </table>
                                        </div>
									</div>
								</div>
                                <div class="card card-refresh">
									<div class="refresh-container">
										<div class="loader-pendulums"></div>
									</div>
									<div class="card-header card-header-action">
										<div>
											<h6 class="mb-10">File Pengganti</h6>
											<p class="font-14 w-80">data untuk file pengganti dari invoice #TPINV-2ABB7 yang bermasalah.</p>
										</div>
										<div class="d-flex align-items-center card-action-wrap">
											<a href="#" class="inline-block refresh mr-15">
												<i class="ion ion-md-radio-button-off"></i>
											</a>
											<a href="#" class="inline-block full-screen">
												<i class="ion ion-md-expand"></i>
											</a>
										</div>
									</div>
									<div class="card-body">
                                        <div class="table-responsive">
                                            <table class="table align-middle text-nowrap mb-0">
                                            <thead>
                                                <tr class="text-muted fw-semibold">
                                                <th scope="col"  style="width:20%">Pola</th>
                                                <th scope="col"style="width:20%">Ukuran</th>
                                                <th scope="col"style="width:20%">QTY</th>
                                                <th scope="col"style="width:20%">Jumlah</th>
                                                <th scope="col"style="width:20%">Status</th>
                                                </tr>
                                            </thead>
                                            <tbody class="border-top">
                                            <?php if(isset($result['ticket_file'])): ?>
                                            <?php $x = 1; ?>
                                            <?php foreach ($result['ticket_file'] as $key => $val): ?>
                                            <?php //print_r($v); ?>
                                                <tr id="row_<?php echo $x; ?>">
                                                <td class="ps-0">
                                                    <div class="d-flex align-items-center">
                                                    <div class="me-2 pe-1">
                                                        <img src="<?php echo $val['image_url'] ?>" class="rounded-circle" width="40" height="40" alt="">
                                                    </div>
                                                    <div>
                                                        <h6 class="fw-semibold mb-1"><?php echo $val['filename'] ?></h6>
                                                        <p class="fs-2 mb-0 text-muted"><?php echo $val['details'] ?></p>
                                                    </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    <p class="mb-0 fs-3"><?php echo $val['width'] ?> x <?php echo $val['length'] ?> </p>
                                                </td>
                                                <td>
                                                    <p class="mb-0 fs-3"><?php echo $val['qty'] ?> pcs</p>
                                                </td>                        
                                                <td>
                                                    <p class="fs-3 text-dark mb-0"><?php echo $val['subtotal'] ?> m</p>
                                                </td>
                                                <td>
                                                    <span class="badge fw-semibold py-1 w-85 light-warning text-warning">Dalam Pemeriksaan</span>
                                                </td>
                                                </tr>
                                                <?php $x++; ?>
                                                <?php endforeach; ?>
                                                <?php endif; ?>
                                            </tbody>
                                            </table>
                                        </div>
									</div>
								</div>
								
							</div>
						</div>

					</div>
                </div>
                <!-- /Row -->
            </div>
            <!-- /Container -->
<script>

$(document).ready(function() {

   
    var table = $('#table-pola').DataTable({

    });
    
    table.on('click', 'tbody tr', function (e) {
        e.currentTarget.classList.toggle('selected');
    });
    
    document.querySelector('#button').addEventListener('click', function () {
        var selectedData = table.rows('.selected').data();
        var dataToSend = [];

        // Konversi DataTables API menjadi array sederhana
        for (var i = 0; i < selectedData.length; i++) {
            dataToSend.push(selectedData[i]);
        }

        if (dataToSend.length === 0) {
            alert('No rows selected');
            return;
        }

        // Kirim data ke server menggunakan AJAX
        $.ajax({
            url: '/path/to/your/server', // Ganti dengan URL endpoint server Anda
            method: 'POST',
            data: { rows: dataToSend },
            success: function (response) {
                // Tampilkan respon dari server
                alert('Data successfully sent to the server!');
                console.log(response);
            },
            error: function (xhr, status, error) {
                // Tangani error
                alert('An error occurred: ' + error);
                console.error(xhr.responseText);
            }
        });
    });
 



    fetchAndRenderMessages(); // Panggil fungsi di sini

                $('#messageInput').on('keydown', function (event) {
                  if (event.key === 'Enter' || event.keyCode === 13) {
                      event.preventDefault();

                      const message = $(this).val().trim();
                      const kode = $('#hiddenKode').val(); // Nilai input hidden
                     

                      if (message) {
                          $.ajax({
                              url: 'post/chat', // Endpoint pengiriman
                              type: 'POST',
                              data: {
                                  message: message,
                                  kode: kode,
                              },
                              success: function (response) {
                                  console.log('Pesan berhasil dikirim:', response);
                                  $('#messageInput').val(''); // Kosongkan input
                                  fetchAndRenderMessages();

                              },
                              error: function (error) {
                                  console.error('Gagal mengirim pesan:', error);
                                  fetchAndRenderMessages();

                              }
                          });
                      }
                    }
                });


});
            function fetchAndRenderMessages() {
    const apiUrl = "<?= site_url('ticket/get/chat?id=' . $result['TicketData']['kode']) ?>";

    // Fetch JSON data
    fetch(apiUrl)
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            console.log("Data fetched:", data); // Debugging
            const container = document.getElementById('message-container');
            container.innerHTML = ""; // Clear container

            if (Array.isArray(data)) {
                data.forEach(item => {
                    const isSenderOne = item.sender === "2"; // Sender check
                    const dateSent = new Date(item.date_sent).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); // Format waktu
                    const template = `
                        <li class="media ${isSenderOne ? "sent" : "received"}">
                            ${!isSenderOne ? `
                                <div class="avatar">
                                    <img src="https://is3.cloudhost.id/texapp/ticket/pola/1731050815_72f4e6b305c16b4bb1b2.jpg" alt="user" class="avatar-img rounded-circle">
                                </div>` : ""}
                            <div class="media-body">
                                <div class="msg-box">
                                    <div>
                                        ${item.messages ? `<p>${item.messages}</p>` : ""}
                                        ${item.media_url ? `<div class="rounded-2 overflow-hidden mb-2"><img src="${item.media_url}" alt="" class="w-100"></div>` : ""}
                                        <span class="chat-time">${dateSent}</span>
                                        <div class="arrow-triangle-wrap">
                                            <div class="arrow-triangle ${isSenderOne ? "left" : "right"}"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    `;

                    // Append rendered template to container
                    container.innerHTML += template;
                });
            } else {
                console.error("Data is not an array:", data);
            }
        })
        .catch(error => {
            console.error("Error fetching JSON data:", error);
        });
}

</script>