@extends('backend.template')
@section('main') 

    <div class="pagetitle">
      <h1>Pertanyaan</h1><br>
      <nav>
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
          <li class="breadcrumb-item">Pertanyaan</li>
          <li class="breadcrumb-item active">List Pertanyaan</li>
        </ol>
      </nav>
    </div><!-- End Page Title -->
<style>
  br {
   display: block !important;
   margin-top: 5px 0 !important;
}
</style>
    <section class="section">
      <div class="row">
        <div class="col-lg-12">

        @if(Session::has('gagal'))
`       <div class="alert alert-danger">
        {{Session::get('gagal')}}
        </div>
        @endif

        @if(Session::has('sukses'))
        <div class="alert alert-success">
        {{Session::get('sukses')}}
        </div>
        @endif
        
          <div class="card">
            <div class="card-body table-responsive">
              <h5 class="card-title" >List Pertanyaan</h5>
              <!-- <span>Pertanyaan Pengusaha Yang Masuk</span> -->

              <!-- Table with stripped rows -->
              <form method="post" action="{{route('pertanyaan.delete_all')}}" id="form-delete">
              @csrf
              <table class="table datatable" id="datatable-responsive" width="100%">
                <thead>
                  <tr>
                    <th width="8px;"><input id="check-all" type="checkbox"></th>
                    <th scope="col">#</th>
                    <th scope="col">No</th>
                    <th scope="col">No. Tiket</th>
                    <th scope="col">Tgl. Kirim</th>
                    <!-- <th scope="col">NIK</th>
                    <th scope="col">Alamat</th> -->
                    <!-- <th scope="col">Kabupaten</th>
                    <th scope="col">Kecamatan</th> -->
                    <th scope="col">Nama</th>
                    <th scope="col">Perusahaan</th>
                    <th scope="col">Pertanyaan</th>
                    <th scope="col"></th>
                  </tr>
                </thead>
                <tbody>
                </tbody>
              </table>
              <!-- End Table with stripped rows -->
          </form>
            </div>
          </div>

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

@endsection

@section('footer_scripts')
<link rel="stylesheet" type="text/css" href="{{asset('assets_backend/css/bootstrap_3.3.7.css')}}"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap.min.css"/>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap.min.js"></script>
<script>
 $(document).ready(function(){
  $.ajaxSetup({
          headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          }
  });
  var table = $('#datatable-responsive').DataTable({
        dom: '<"toolbar"><l>Bfrtip',
        processing: true,
        language: {
        processing: '<div class="spinner-border text-danger" style="width: 50px; height: 50px;margin:0px;padding:0px;" role="status"></div><small>Sedang Memuat Data ...</small>'
        },
        serverSide: true,
        ordering: false,
        destroy: true,
        initComplete:   function()  //Adding Custom button in Tools
        {
        $("div.toolbar").html(
            '<button type="button"  style="float:left;margin-right:10px;border:none;" onclick="delete_all()" class="badge bg-danger"><i class="bi bi-trash me-1"></i> Delete All</button>' +
            '<button type="button" style="float:left;border:none;" onclick="exportTableToExcel(\'datatable-responsive\', \'data_pertanyaan\')" class="badge bg-success"><i class="bi bi-file-earmark-excel me-1"></i> Export Excel</button>'
        );
        },
        ajax: '{{route('pertanyaan.jsondata')}}',
        columns:[                
            {data:'x', name:'Check All',orderable: false},  
            {data: 'action', name: 'action',className: "th-td-center"},
            {data:'No', name:'No',className: "th-td-center"},
            {data: 'no_tiket', name:'no_tiket',className: "th-td-center"},
            {data: 'tgl', name:'tgl',className: "th-td-center"},
            // {data: 'nik', name:'nik',className: "th-center"},
            // {data: 'alamat', name:'alamat',className: "th-center"},
            // {data: 'kabupaten', name:'kabupaten',className: "th-center"},
            // {data: 'kecamatan', name:'kecamatan',className: "th-center"},
            {data: 'nama', name:'nama',className: "th-center"},
            {data: 'perusahaan',  name:'perusahaan',className: "th-center"},
            {data: 'pertanyaan',  name:'pertanyaan',className: "th-td-center"},
            {data: 'jawab', name: 'jawab',className: "th-td-center"}
        ],
        "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
         var index = iDisplayIndex +1;
        $('td:eq(2)',nRow).html(index);
        return nRow;
       }
    });

    $(document).on('click','.btn-delete',function(e){
    e.preventDefault();
    var table   = $('#basic-datatables').DataTable();
    var href    = $(this).attr('href');
    var id      = $(this).data('id');
    
    swal({
                        title: 'Anda Yakin ?',
                        text: "Sistem Akan Menghapus data ini !",
                        type: 'warning',
                        buttons:{
                            confirm: {
                                text : 'Ya',
                                className : 'btn btn-success'
                            },
                            cancel: {
                                visible: true,
                                className: 'btn btn-danger'
                            }
                        }
                    }).then((Delete) => {
                        if (Delete) {
                            $.ajax({
                            type: "delete",
                            url: "{{route('pertanyaan.delete')}}",
                            data: {id:id},
                            success: function (data) {
                              $('#datatable-responsive').DataTable().ajax.reload()
                                swal('Data berhasil dihapus !', {
                                buttons: {        			
                                    confirm: {
                                        className : 'btn btn-success'
                                    }
                                },
                            });
                            }         
                        });
                        } else {
                            swal.close();
                        }
                    });
        
    });

  });


      //Checkbox all
      $(document).ready(function(){ 
    $("#check-all").click(function(){ 
      if($(this).is(":checked")) 
        $(".check-item").prop("checked", true); 
      else
        $(".check-item").prop("checked", false); 
    });
    
    
     

  });

  function delete_all(){
         swal({
                        title: 'Anda Yakin ?',
                        text: "Sistem Akan Menghapus data ini !",
                        type: 'warning',
                        buttons:{
                            confirm: {
                                text : 'Ya',
                                className : 'btn btn-success'
                            },
                            cancel: {
                                visible: true,
                                className: 'btn btn-danger'
                            }
                        }
                    }).then((Delete) => {
                        if (Delete) {
                                $("#form-delete").submit(); // Submit form
                                return true;
                                table.ajax.reload();
                               
                        } else {
                            swal.close();
                            $(this).find('button[type="submit"]').prop( 'disabled', true );
                            return false;
                        }
                    });       
    }

    // Export Excel hanya data hasil filter DataTables
    function exportTableToExcel(tableID, filename = ''){
        var table = $('#'+tableID).DataTable();
        var data = table.rows({ search: 'applied' }).data(); // hanya hasil filter

        // Header yang kita mau
        var headers = ["No","No. Tiket","Tgl. Kirim","Nama","Perusahaan","Pertanyaan"];

        // Buat HTML table manual
        var tableHTML = '<table border="1"><tr>';
        headers.forEach(function(h){
            tableHTML += '<th>'+h+'</th>';
        });
        tableHTML += '</tr>';

        // Helper untuk bersihkan HTML
        function stripHtml(html){
            if(!html) return "";
            var tmp = document.createElement("DIV");
            tmp.innerHTML = html;
            var text = tmp.textContent || tmp.innerText || "";
            return text.replace(/\u00a0/g, " "); // ganti &nbsp;
        }

        // Inisialisasi nomor urut
        var rowIndex = 1;

        // Loop data hasil filter
        data.each(function(row){
            tableHTML += '<tr>';
            // Gunakan rowIndex untuk nomor urut, bukan row.No
            tableHTML += '<td>'+rowIndex+'</td>';
            rowIndex++; // Tambah 1 untuk baris berikutnya

            tableHTML += '<td>'+stripHtml(row.no_tiket)+'</td>';
            tableHTML += '<td>'+stripHtml(row.tgl)+'</td>';
            tableHTML += '<td>'+stripHtml(row.nama)+'</td>';
            tableHTML += '<td>'+stripHtml(row.perusahaan)+'</td>';
            // ubah <br> jadi newline
            var pertanyaan = row.pertanyaan ? row.pertanyaan.replace(/<br\s*\/?>/gi, "\n") : '';
            tableHTML += '<td>'+stripHtml(pertanyaan)+'</td>';
            tableHTML += '</tr>';
        });
        tableHTML += '</table>';

        filename = filename ? filename + '.xls' : 'excel_data.xls';
        var downloadLink = document.createElement("a");
        document.body.appendChild(downloadLink);

        if(navigator.msSaveOrOpenBlob){
            var blob = new Blob(['\ufeff', tableHTML], { type: 'application/vnd.ms-excel' });
            navigator.msSaveOrOpenBlob(blob, filename);
        } else {
            downloadLink.href = 'data:application/vnd.ms-excel, ' + encodeURIComponent(tableHTML);
            downloadLink.download = filename;
            downloadLink.click();
        }
    }
</script>
@endsection