@extends('layout.master')

@push('plugin-styles')
  <link href="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.css') }}" rel="stylesheet" />
  <link href="{{ asset('assets/plugins/@mdi/css/materialdesignicons.min.css') }}" rel="stylesheet" />
@endpush

@section('content')
<nav class="page-breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Penjualan</a></li>
    <li class="breadcrumb-item active" aria-current="page">Kasir</li>
  </ol>
</nav>

<div class="row">
  <div class="col-md-12 grid-margin stretch-card">
    <div class="card">
      <div class="card-header bg-white">
        <h4>Data Kasir</h4>
      </div>
      <div class="card-body">
        <div class="row">
          <div class="col-12 col-md-4">
            <div class="mb-2">
              <select name="status[]" multiple id="status" class="form-control" placeholder="Pilih Status">
                @foreach ($statusList as $key => $val)
                  <option value="{{ $key }}">{{ $val }}</option>
                @endforeach
              </select>
            </div>
          </div>
          <div class="col-12 col-md-2 col-lg-2">
            <div class="mb-2 d-flex justify-content-between gap-2">
              <button
                type="button"
                onclick="filter()"
                class="btn btn-primary btn-custom2 w-100"
              >
                <span class="mdi mdi-filter"></span>
              </button>
              <button
                type="button"
                class="btn btn-light btn-custom8 w-100"
                onclick="filterReset()"
                title="Reset"
              >
                <span class="mdi mdi-refresh"></span>
              </button>
            </div>
          </div>
        </div>
        <div class="row mt-5">
          <div class="col-md-12">
            <div class="table-responsive" style="overflow-x: auto;">
          <table id="datatable-serverside" class="table table-sm" style="width: 100%;">
            <thead>
              <tr>
                <th class="kolomNomor">No.</th>
                <th>Nomor Faktur</th>
                <th style="min-width: 180px">NSFP</th>
                <th>Pelanggan</th>
                <th>T. Faktur</th>
                <th>T. Terima Order</th>
                <th>T. Timbang Order</th>
                <th>Grand Total</th>
                <th>Paid</th>
                <th>Balance</th>
                <th>Status</th>
                <th>Validasi Pembayaran</th>
                <th class="kolomAksi">Aksi</th>
              </tr>
            </thead>
          </table>
        </div>
          </div>
        </div>
      </div>
      <div class="card-footer" style="text-align: right;">
        <a class="btn btn-secondary" href="/penjualan/kasir/history">History Kasir</a>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="JurnalModal">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title h4">Laporan Jurnal</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
      </div>
      <div class="modal-body"></div>
    </div>
  </div>
</div>
@include('pages.penjualan.kasir.validasi-pembayaran-modal')
@endsection

@push('plugin-scripts')
  <script src="{{ asset('assets/plugins/datatables-net/jquery.dataTables.js') }}"></script>
  <script src="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.js') }}"></script>
@endpush

@push('custom-scripts')
  <script src="{{ asset('assets/js/data-table.js') }}"></script>
  <script src="{{ asset('assets/js/sweet-alert.js') }}"></script>

  <script>
    var URLs = "{{ url('penjualan/kasir') }}";

    let datatable = $('#datatable-serverside').DataTable({
      lengthMenu: lengthMenuDatatable(),
      processing: true,
      serverSide: true,
      ajax: URLs+'/get-data',
      columns: [
        {data: 'DT_RowIndex', name: 'id', searchable: false},
        {data: 'nomor_nota', name: 'nomor_nota'},
        {
            data: 'nomor_faktur_pajak',
            name: 'nomor_faktur_pajak',
            defaultContent: '-',
            // render: function(data, type, row) {
            //     return `
            //         <form class="form-nomor-faktur-pajak">
            //             <div class="input-group">
            //                 <input type="hidden" name="id_penjualan" value="${row.id}">
            //                 <input type="text" class="form-control required" name="nomor_faktur_pajak" value="${data || ''}" />
            //                 <button type="submit" class="btn btn-sm btn-primary input-group-text">Simpan</button>
            //             </div>
            //         </form>
            //     `;
            // }
        },
        {data: 'detail_pelanggan', name: 'detail_pelanggan', searchable: false},
        {data: 'tanggal_faktur', name: 'tanggal_faktur', searchable: false, defaultContent: '-'},
        {data: 'tanggal_terima_order', name: 'tanggal_terima_order', searchable: false},
        {data: 'tanggal_timbang_order', name: 'tanggal_timbang_order', searchable: false},
        {data: 'grand_total', name: 'grand_total', searchable: false},
        {data: 'total_bayar', name: 'total_bayar', searchable: false},
        {data: 'kurang_bayar', name: 'kurang_bayar', searchable: false},
        {data: 'status_label', name: 'status_label', searchable: false},
        {data: 'validasi_pembayaran', name: 'validasi_pembayaran', searchable: false, orderable: false},
        {data: 'aksi', name: 'aksi', searchable: false, orderable: false},
      ],
      order: [[ 0, "desc" ]],
    });

    function filter() {
      let statuses = $('#status').val();
      datatable.ajax.url(URLs + '/get-data?statuses=' + statuses).load();
    }

    function filterReset() {
      $('#status').val(null).trigger('change');
      datatable.ajax.url(URLs + '/get-data').load();
    }

    function lihatJurnal(id) {
      $('#JurnalModal').modal('show');
      let modal = $('#JurnalModal');
      modal.find('.modal-body').html('<div class="text-center"><div class="spinner-border" role="status"><span class="visually-hidden">Loading...</span></div></div>');

      $.ajax({
        method: "GET",
        url: "{{ url('jurnal/kasir') }}",
        data: {
          penjualan_id: id,
        },
        success: function(result) {
          if(result.type == 'error'){
            modal.find('.modal-body').html(result.response);
          }else{
            modal.find('.modal-body').html(result)
          }
        },
        error: function(xhr, status, error) {
          console.log(xhr);
          modal.find('.modal-body').html(xhr.responseText);
        }
      })
    }

    $('#status').select2({
      width: '100%',
      placeholder: 'Filter Status',
      allowClear: true,
    });

    $(document).on('submit', '.form-nomor-faktur-pajak', function(e) {
        e.preventDefault();
        const data = {
            nomor_faktur_pajak: $(this).find('input[name="nomor_faktur_pajak"]').val(),
            _token: "{{ csrf_token() }}"
        }
        const id = $(this).find('input[name="id_penjualan"]').val();
        sendJson(`${URLs}/${id}/update-nomor-faktur-pajak`, data);
    });
  </script>
  @include('pages.penjualan.kasir.validasi-pembayaran-script')
@endpush