@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">Terima Order</li>
  </ol>
</nav>

<div class="row">
  <div class="col-md-12 grid-margin stretch-card">
    <div class="card">
      <div class="card-body">
        <div class="table-responsive" style="overflow-x: auto;">
          <h6 class="card-title">Data Terima Order</h6>
          <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>Pelanggan</th>
                <th>Status</th>
                <th>Timbang</th>
                <th>Validasi Uang Muka</th>
                <th class="kolomAksi">Aksi</th>
              </tr>
            </thead>
          </table>
        </div>
      </div>
      <div class="card-footer" style="text-align: right;">
        @can('terima-order.create')
          <a href="/penjualan/terima-order/input-data" class="btn btn-info btn-custom1">Tambah Data</a>
        @endcan
      </div>
    </div>
  </div>
</div>

{{-- Modal --}}
<div id="modalCekDataAwal" class="modal fade bd-example-modal-xl" data-bs-backdrop="static">
  <div class="modal-dialog modal-xl">
      <div class="modal-content">
          <div class="modal-header">
              <h5 class="modal-title h4">Data Uang Muka</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
          </div>
          <div class="modal-body">
              <form class="forms-sample">
                  <div class="row">
                      <div class="col-12">
                          <div class="table-responsive">
                              <table class="table table-sm table-modal-bordered" id="tableCekDataAwal" style="width: 100% !important;">
                                  <thead>
                                      <tr>
                                          <th class="text-start">Metode Bayar</th>
                                          <th class="text-start">Tanggal</th>
                                          <th class="text-start">Nominal</th>
                                          <th class="text-start">Nomor Referensi</th>
                                          <th class="kolomAksi text-start">Aksi</th>
                                      </tr>
                                  </thead>
                                  <tbody>
                                  </tbody>
                              </table>
                          </div>
                      </div>
                      <div class="col-12 mt-3" style="text-align: right;">
                          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Keluar</button>
                      </div>
                  </div>
              </form>
          </div>
      </div>
  </div>
</div>
<div id="modalCekData" class="modal fade bd-example-modal-lg" data-bs-backdrop="static">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title h4">Form Valid DP</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
            </div>
            <div class="modal-body">
                <form id="form_cek_data" class="forms-sample">
                    <div class="row">
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Metode Bayar</label>
                                <select name="metode_bayar_id" id="metode_bayar_id" class="form-control">
                                  <option value="">Silahkan Pilih</option>
                                  @foreach($listMetodeBayar as $vMB)
                                    <option value="{{ $vMB->id }}">{{ $vMB->nama }}</option>
                                  @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Rekening Perusahaan</label>
                                <input type="text" class="form-control" id="rekening_perusahaan" autocomplete="off" placeholder="Rekening Perusahaan" readonly="readonly">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Nomor Referensi</label>
                                <input type="text" class="form-control" id="nomor_transaksi" autocomplete="off" placeholder="Nomor Referensi">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Tanggal Pembayaran</label>
                                <input type="datetime-local" class="form-control" id="tanggal_transaksi" autocomplete="off" placeholder="Tanggal Pembayaran">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Nominal</label>
                                <input type="text" class="form-control" id="nominal" autocomplete="off" placeholder="Nominal" onkeyup="dottocomma(this)" onchange="formatInputUang(this);">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Bukti Pembayaran</label>
                                <input type="file" class="form-control" id="file_bukti" autocomplete="off" placeholder="Berkas Pembayaran">
                                <small><b>File Terupload: </b><a href=""><span id="buktiPembayaran"></span></a></small>
                            </div>
                        </div>
                        <div class="col-12" style="text-align: right;">
                            <button type="button" id="btnValidData" class="btn btn-primary btn-custom1">Valid Data</button>
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Keluar</button>
                        </div>
                    </div>
                </form>
            </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/terima-order') }}";

    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_terima_order', name: 'nomor_terima_order'},
        {data: 'tanggal_terima_order', name: 'tanggal_terima_order', searchable: false},
        {data: 'detail_pelanggan', name: 'detail_pelanggan', searchable: false},
        {data: 'status_label', name: 'status_label', searchable: false, orderable: false},
        {data: 'timbang', name: 'timbang', searchable: false},
        {data: 'validasi_dp', name: 'validasi_dp', searchable: false, orderable: 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 cekDataAwal(id){
      var data = {
        id: id,
        _token: "{{ csrf_token() }}"
      }
      reads(URLs+"/cek-data-awal", data, rCekDataAwal);
    }

    function rCekDataAwal(data){
        swal.close();
        $('#tableCekDataAwal tbody').html('');
        $('#tableCekDataAwal').DataTable().clear().destroy();
        $('#modalCekDataAwal').modal('show');
        IDBarang = [];
        $.each(data, function(i, v){
          var btn = '-';
          if(v.verified_at == null || v.verified_at == '' || v.verified_by == null || v.verified_by == ''){
            btn = '<a href="#" onclick="cekData(\''+v.id+'\')">Detail</a>';
          }
          $('#tableCekDataAwal tbody').append(
              '<tr class="rowCekDataAwal" id="rowCekDataAwal'+v.id+'">'+
              '<td style="min-width: 23px !important; max-width: 23px !important; white-space: normal; word-break:break-all; text-align: left !important;">'+v.metode_bayar+'</td>'+
              '<td style="min-width: 23px !important; max-width: 23px !important; white-space: normal; word-break:break-all; text-align: center !important;">'+v.tanggal_transaksi+'</td>'+
              '<td style="min-width: 23px !important; max-width: 23px !important; white-space: normal; word-break:break-all; text-align: right !important;">'+formatNumberComma(v.nominal)+'</td>'+
              '<td style="min-width: 23px !important; max-width: 23px !important; white-space: normal; word-break:break-all; text-align: left !important;">'+v.nomor_transaksi+'</td>'+
              '<td>'+btn+'</td>'+
              '</tr>'
          );
        });
        $('#tableCekDataAwal').DataTable().draw();
        $('#tableCekDataAwal').DataTable();
    }

    function cekData(id){
      IDs = id;
      var data = {
            id: id,
            _token: "{{ csrf_token() }}"
        };
        reads(URLs+"/cek-data", data, rCekData);
    }

    function rCekData(data) {
        swal.close();
        $('#modalCekDataAwal').modal("hide");
        $('#modalCekData').modal("show");
        $('#metode_bayar_id').val(data.metode_bayar);
        $('#rekening_perusahaan').val(data.rekening_perusahaan);
        $('#nomor_transaksi').val(data.nomor_transaksi);
        $('#tanggal_transaksi').val(data.tanggal_transaksi);
        $('#nominal').val(formatNumberComma(data.nominal));

        if(data.file_pembayaran != null && data.file_pembayaran != ''){
          var url = "{{ asset('berkas_file_pembayaran/') }}" + '/' + data.file_pembayaran;
          $('#buktiPembayaran').html('<a href="'+url+'">'+data.file_pembayaran+'</a>');
        }else{
          $('#buktiPembayaran').html('-');
        }
    }

    $('#modalCekData').on('hidden.bs.modal', function(e){
        $('#metode_bayar_id').val('');
        $('#rekening_perusahaan').val('');
        $('#nomor_transaksi').val('');
        $('#tanggal_transaksi').val('');
        $('#nominal').val('');
        $('#buktiPembayaran').html('-');

        IDs = 0;
    });

    $('#btnValidData').on('click', function(e){
        // var data = {
        //     id: IDs,
        //     _token: "{{ csrf_token() }}"
        // };
        // sendJson(URLs+"/valid-data", data, rSends);

        var data = new FormData();
        data.append("_token", "{{ csrf_token() }}");
        data.append("id", IDs);
        data.append("metode_bayar_id", $('#metode_bayar_id').val());
        data.append("nomor_transaksi", $('#nomor_transaksi').val());
        data.append("tanggal_transaksi", $('#tanggal_transaksi').val());
        data.append("nominal", $('#nominal').val().replace(/\./g, '')?.replace(/\,/g, '.'));
        
        if($('#file_bukti').val() != null && $('#file_bukti').val() != ''){
            data.append("file", $('#file_bukti')[0].files[0]);
        }
        uploads(URLs+"/valid-data", data, rSends);
    });

    $('#metode_bayar_id').on('change', function(e){
      $('#rekening_perusahaan').val('');

      var isian = $(this).val();
      if(isian != null && isian != ''){
        var data = {
          id: isian,
          _token: "{{ csrf_token() }}"
        }  
        sendJson(URLs+"/metode-bayar", data, rMetodeBayar);
      }
    });

    function rMetodeBayar(data){
      swal.close();
      $('#rekening_perusahaan').val(data.rekening_perusahaan);
    }
  </script>
@endpush