@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"><a href="/penjualan/timbang-order">Timbang Order</a></li>
    <li class="breadcrumb-item active" aria-current="page">History Timbang</li>
  </ol>
</nav>

<div class="row">
  <div class="col-md-12 grid-margin stretch-card">
    <div class="card">
      <div class="card-header">
          <h4>Data Timbang Order</h4>
      </div>
      <div class="card-body">
        <div class="row">
            <div class="col-12 col-md-3">
                <div class="mb-2">
                    <input type="text" name="daterange_terima" id="daterange_terima" class="form-control daterange-picker" placeholder="Tanggal Terima" readonly>
                </div>
            </div>
            <div class="col-12 col-md-3">
                <div class="mb-2">
                    <select name="pelanggan_filter" id="pelanggan_filter" class="form-control select2Custom">
                        <option value="">Pilih Pelanggan</option>
                    </select>
                </div>
            </div>
            <div class="col-12 col-md-3">
                <div class="mb-2">
                    <input type="text" name="daterange_timbang" id="daterange_timbang" class="form-control daterange-picker" placeholder="Tanggal Timbang" readonly>
                </div>
            </div>
            <div class="col-12 col-md-2">
                <div class="mb-2">
                    <select name="status_filter" id="status_filter" class="form-control select2Custom">
                        <option value="">Pilih Status</option>
                        @foreach ($statusList as $key => $value)
                            <option value="{{ $key }}">{{ $value }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="col-12 col-md-3">
                <div class="mb-2">
                    <select name="type_filter" id="type_filter" class="form-control select2Custom">
                        <option value="">Pilih Tipe Order</option>
                        <option value="normal">NORMAL</option>
                        <option value="titipan">TITIPAN</option>
                    </select>
                </div>
            </div>
            <div class="col-12 col-md-3">
                <div class="row">
                    <div class="col-6 pe-1">
                        <button type="button" id="btnFilter" class="btn btn-primary btn-custom2 w-100">Filter</button>
                    </div>
                    <div class="col-6 ps-1">
                        <button type="button" class="btn btn-light btn-custom8 w-100" onclick="filterReset()">Reset</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="table-responsive mt-3" style="overflow-x: auto;">
          <table id="datatable-serverside" class="table table-sm" style="width: 100%;">
            <thead>
              <tr>
                <th class="kolomNomor">No.</th>
                <th>Nomor Terima Order</th>
                <th>Tanggal Terima Order</th>
                <th>Tipe</th>
                <th>Pelanggan</th>
                <th>Nomor Faktur</th>
                <th>Tanggal Timbang Order</th>
                <th>Status</th>
                <th class="kolomAksi">Aksi</th>
              </tr>
            </thead>
          </table>
        </div>
      </div>
      <div class="card-footer" style="text-align: right;">
        <a class="btn btn-secondary" href="/penjualan/timbang-order">Kembali</a>
      </div>
    </div>
  </div>
</div>

{{-- Modal --}}
<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>
{{-- Akhiran 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/timbang-order') }}";

    let datatable = $('#datatable-serverside').DataTable({
      lengthMenu: lengthMenuDatatable(),
      processing: true,
      serverSide: true,
      ajax: URLs+'/get-data-history',
      columns: [
        {data: 'DT_RowIndex', name: 'id', searchable: false},
        {data: 'nomor_terima_order', name: 'nomor_terima_order'},
        {data: 'tanggal_terima_order', name: 'tanggal_terima_order', searchable: false},
        {
            data: 'tipe_order',
            name: 'tipe_order',
            searchable: false,
            orderable: false,
            render: function(data, type, row) {
                return data.toUpperCase();
            }
        },
        {data: 'detail_pelanggan', name: 'detail_pelanggan', searchable: false},
        {data: 'nomor_nota', name: 'nomor_nota', searchable: false},
        {data: 'tanggal_timbang_order', name: 'tanggal_timbang_order', searchable: false},
        {data: 'status_label', name: 'status_label', searchable: false},
        {data: 'aksi', name: 'aksi', searchable: false, orderable: false},
      ],
      order: [[ 0, "desc" ]],
    });

    function hapusData(id){
        swal({
            title: "Konfirmasi",
            text: "Apakah anda ingin menghapus data ?",
            type: "warning",
            showCancelButton: true,
            cancelButtonText: "Batal",
            confirmButtonText: "Lanjutkan"
        }).then(function(){
            var data = {act: "delete", id: id, _token:'{{ csrf_token() }}'};
            sendJson(URLs+"/delete", data, rSends);
        })
    }

    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/timbang-order') }}",
        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);
        }
      })
    }

    function filterReset(){
        $('#daterange_terima').val('');
        $('#pelanggan_filter').val('').trigger('change');
        $('#daterange_timbang').val('');
        $('#status_filter').val('').trigger('change');
        $('#type_filter').val('').trigger('change');
        datatable.ajax.url(URLs + "/get-data-history").load();
    }

    $('#btnFilter').on('click', function(e){
        let URLFilter = URLs + "/get-data-history";
        URLFilter += `?daterange_terima=${$('#daterange_terima').val()}`;
        URLFilter += `&pelanggan_filter=${$('#pelanggan_filter').val()}`;
        URLFilter += `&daterange_timbang=${$('#daterange_timbang').val()}`;
        URLFilter += `&status_filter=${$('#status_filter').val()}`;
        URLFilter += `&type_filter=${$('#type_filter').val()}`;
        datatable.ajax.url(URLFilter).load();
    });

    $('#pelanggan_filter').select2({
        ajax: {
            url: '{{ route("kontak.pelanggan") }}',
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                    search: params.term
                };
            },
            processResults: function (data) {
                return {
                    results: $.map(data, function (item) {
                        return {
                            text: item.nama,
                            id: item.id
                        }
                    })
                };
            },
            cache: true
        },
        minimumInputLength: 3,
    });
  </script>
@endpush