@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" />
  <link type="text/css" href="//gyrocode.github.io/jquery-datatables-checkboxes/1.2.12/css/dataTables.checkboxes.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/kasir">Kasir</a></li>
      <li class="breadcrumb-item active" aria-current="page">Retur</li>
    </ol>
  </nav>

  <div class="row">
    <div class="col-md-12 grid-margin stretch-card">
      <div class="card">
        <div class="card-body">
          <form>
            <div class="row">
              <div class="col-12 border p-2">
                <div class="row">
                  <div class="col-12">
                    <h5 class="pb-3">Detail Kontak</h5>
                    <p><b>Kode :</b> {{ $penjualan->pelanggan->kode }}</p>
                    <p><b>Nama :</b> {{ $penjualan->pelanggan->nama }}</p>
                    <p>
                      <b>Detail Kontak :</b>
                      <ul>
                        @forelse ($dataDetailKontak as $vDetailKontak)
                          <li>Telepon: {{ $vDetailKontak->value }}</li>
                        @empty
                          Belum Terdapat Data
                        @endforelse
                      </ul>
                    </p>
                    <p>
                      <b>Alamat :</b>
                      <br />{{ $penjualan->pelanggan->alamat ?? '-' }}
                    </p>
                  </div>
                </div>
                <div class="row">
                  <div class="col-12">
                    <div class="col-12 mb-3">
                      <label>Tanggal Pengembalian</label>
                      <input
                        class="form-control resetForm required"
                        type="date"
                        name="tanggal_pengembalian"
                        id="tanggal_pengembalian"
                        placeholder="Tanggal pengembalian"
                        value="{{ $penjualan->retur ? date('Y-m-d', strtotime($penjualan->retur->tanggal)) : date('Y-m-d') }}"
                        required
                        onclick="this.showPicker()"
                      >
                    </div>
                    <div class="col-12">
                      <label>Keterangan</label>
                      <textarea
                        class="form-control resetForm resetForm"
                        name="keterangan"
                        id="keterangan"
                        placeholder="Keterangan"
                      >{{ $penjualan->retur->keterangan ?? '' }}</textarea>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-12 mt-3">
                <div class="row">
                  <div class="col-12">
                    <h5 class="pb-3">Daftar Transaksi</h5>
                  </div>
                  <div class="col-12">
                    <div class="table-responsive">
                      <table class="table table-bordered table-hover table-sm table-number" style="width: 100%;">
                        <thead>
                          <tr>
                            <th>No</th>
                            <th>Produk</th>
                            <th>No Urut</th>
                            <th class="text-end">QTY</th>
                            <th class="text-end">QTY Retur</th>
                            <th class="text-end">Harga</th>
                            <th class="text-end">Total</th>
                            <th class="kolomKeterangan">Keterangan</th>
                            <th>Aksi</th>
                          </tr>
                        </thead>
                        <tbody class="tampil-barang">
                          <tr id="empty-data" @if($penjualan->retur) style="display: none" @endif>
                            <td colspan="9" class="text-center">Belum Terdapat Data</td>
                          </tr>
                          @foreach($penjualan->retur->details ?? [] as $index => $retur_detail)
                            @php
                              $stok_barang = $retur_detail->stokBarang;
                            @endphp
                            <tr
                              id="list-barang-retur-{{ $retur_detail->id_stok_barang }}"
                              class="list-barang-retur"
                              data-id_penjualan_detail="{{ $retur_detail->id_penjualan_detail }}"
                              data-id_penjualan_detail_item="{{ $retur_detail->id_penjualan_detail_item }}"
                              data-qty="{{ $retur_detail->qty }}"
                              data-harga="{{ $retur_detail->penjualanDetail->harga }}"
                              data-id_stok_barang="{{ $retur_detail->id_stok_barang }}"
                            >
                              <td class="number">{{ $index + 1 }}</td>
                              <td>
                                {{ $stok_barang->produk->namaProduk }}
                                @if (!$stok_barang->qty)
                                  <div>
                                    <small class="text-danger">Stok Barang sudah keluar</small>
                                  </div>
                                @endif
                              </td>
                              <td>{{ $stok_barang->sort }}</td>
                              <td class="text-end">{{ $stok_barang->qtyWithUnit($retur_detail->penjualanDetailItem->qty_timbang) }}</td>
                              <td class="text-end">
                                <input
                                  type="text"
                                  class="form-control qty text-end formatInputUang"
                                  name="qty"
                                  value="{{ formatNumber($retur_detail->qty) }}"
                                  required
                                  onchange="minMax(this, 0, {{ $retur_detail->penjualanDetailItem->qty_timbang }});updateSubTotal(this, {{ $retur_detail->id_stok_barang }})"
                                />
                              </td>
                              <td class="text-end">{{ formatNumberComma($retur_detail->penjualanDetail->harga) }}</td>
                              <td class="text-end" id="sub-total-{{ $retur_detail->id_stok_barang }}">{{ formatNumberComma($retur_detail->sub_total) }}</td>
                              <td>
                                <textarea class="form-control keterangan" name="keterangan" id="keterangan" placeholder="Keterangan" rows="1">{{ $retur_detail->keterangan }}</textarea>
                              </td>
                              <td>
                                @if ($stok_barang->qty && !$penjualan->is_batal)
                                  <button type="button" onclick="hapusBarang({{ $retur_detail->id_stok_barang }})" class="btn btn-danger btn-custom5 btn-sm">
                                    <span class="mdi mdi-delete"></span>
                                  </button>
                                @endif
                              </td>
                            </tr>
                          @endforeach
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
                @if (!$penjualan->is_batal)
                  <div class="row mt-3">
                    <div class="col-12 mb-3">
                      <button type="button" id="btnTambahBarang" class="btn btn-light" style="width: 100% !important;">Tambah Barang</button>
                    </div>
                  </div>
                @endif
                <div class="row mt-0">
                  @if (!$penjualan->is_batal)
                    <div class="col-6">
                      <button id="btnSimpanData1" class="btn btn-success btn-custom1" style="width: 100% !important;">Simpan Data Retur & Cashback</button>
                    </div>
                    <div class="col-6">
                      <button id="btnSimpanData2" class="btn btn-success btn-custom1" style="width: 100% !important;">Simpan Data Retur & Deposit</button>
                    </div>
                    @if ($penjualan->retur)
                      <div class="col-12 mt-3">
                        <button type="button" id="btnHapusData" onclick="hapusData()" class="btn btn-danger btn-custom5" style="width: 100% !important;">Hapus Data Retur</button>
                      </div>
                    @endif
                  @endif
                  <div class="col-12 mt-3">
                    <a href="/penjualan/kasir/history" class="btn btn-warning btn-custom8" style="width: 100% !important;">Kembali ke Halaman Sebelumnya</a>
                  </div>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>

  {{-- Modal --}}
  <div id="modalBarang" 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 Barang</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">
                <table class="table table-sm table-number-modal table-modal-bordered" id="tableBarang">
                  <thead>
                    <tr>
                      <th>No</th>
                      <th>Produk</th>
                      <th>No Urut</th>
                      <th class="text-end">QTY</th>
                      <th class="text-end">Harga</th>
                      <th class="text-end">Total</th>
                      <th class="kolomAksi"></th>
                    </tr>
                  </thead>
                  <tbody>
                  </tbody>
                </table>
              </div>
              <div class="col-12 mt-3" style="text-align: right;">
                <button type="button" id="btnSimpanBarang" class="btn btn-primary btn-custom1">Simpan</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>
  <script type="text/javascript" src="//gyrocode.github.io/jquery-datatables-checkboxes/1.2.12/js/dataTables.checkboxes.min.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>
    $('#btnTambahBarang').on('click', function() {
      $('#modalBarang').modal('show');
      $('#tableBarang').DataTable().clear().destroy();
      $('#tableBarang').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
          url: "{{ route('penjualan.kasir.retur.get-data-barang', $penjualan->id) }}",
          type: "GET",
          data: {
            exclude: $('.list-barang-retur').map(function() {
              return $(this).data('id_penjualan_detail_item');
            }).get()
          }
        },
        order: [[ 0, "asc" ]],
        columns: [
          {data: 'DT_RowIndex', name: 'id', searchable: false},
          {data: 'penjualan_detail.produk.nama_produk', name: 'penjualan_detail.produk.nama_produk', searchable: false, orderable: false},
          {data: 'stok_barang.sort', className: 'text-center', name: 'stok_barang.sort', searchable: false, orderable: false},
          {data: 'qty', name: 'qty', className: 'text-end', searchable: false, orderable: false},
          {data: 'harga', name: 'harga', className: 'text-end', searchable: false, orderable: false},
          {data: 'sub_total', name: 'sub_total', className: 'text-end', searchable: false},
          {data: 'id', name: 'id', searchable: false, orderable: false},
        ],
          columnDefs: [
            {
              targets: 6,
              checkboxes: {
                selectRow: true
              },
            }
          ],
          select: {
            style: 'multi'
          }
      });
    });

    $('#btnSimpanBarang').on('click', function() {
      let barangSelected = $('#tableBarang').DataTable().column(6).checkboxes.selected();
      if (parseInt(barangSelected.length) <= 0) {
        swal('Perhatian', 'Pastikan Centang Barang Terlebih Dahulu', 'info');
        return;
      }

      const data = {
        _token: "{{ csrf_token() }}",
        ids: []
      }
      $.each(barangSelected, function(index, id) {
        data.ids.push(parseInt(id));
      });

      sendJson(
        "{{ route('penjualan.kasir.retur.add-data-barang', $penjualan->id) }}",
        data,
        simpanBarang
      );
    });

    function simpanBarang(datas) {
      swal.close();
      $('#modalBarang').modal('hide');
      $('#empty-data').hide();

      $.each(datas, function(i, data) {
        let tr = `
          <tr id="list-barang-retur-${data.id_stok_barang}" class="list-barang-retur" data-id_penjualan_detail="${data.id_penjualan_detail}" data-id_penjualan_detail_item="${data.id}" data-qty="${data.qty}" data-harga="${data.harga}" data-id_stok_barang="${data.id_stok_barang}">
            <td class="number">${i + 1}</td>
            <td>${ data.nama_produk }</td>
            <td class="text-center">${ data.nomor_urut }</td>
            <td class="text-end">${data.qty_unit }</td>
            <td class="text-end">
              <input
                type="text"
                class="form-control qty text-end formatInputUang"
                name="qty"
                value="${formatNumber(data.qty)}"
                min="1"
                required
                onchange="minMax(this, 0, ${data.qty});updateSubTotal(this, ${data.id_stok_barang})"
              />
            </td>
            <td class="text-end">${formatNumberComma(data.harga)}</td>
            <td class="text-end" id="sub-total-${data.id_stok_barang}"">${formatNumberComma(data.sub_total)}</td>
            <td>
              <textarea class="form-control keterangan" name="keterangan" id="keterangan" placeholder="Keterangan" rows="1"></textarea>
            </td>
            <td>
              <button type="button" onclick="hapusBarang(${data.id_stok_barang})" class="btn btn-danger btn-custom5 btn-sm">
                <span class="mdi mdi-delete"></span>
              </button>
            </td>
          </tr>
        `;

        $('.tampil-barang').append(tr);
      })

    }

    function hapusBarang(id) {
      $('#list-barang-retur-' + id).remove();
      if($('.list-barang-retur').length == 0) {
        $('#empty-data').show();
      }

      updateTableNumbers();
      updateTableNumbersModal();
    }

    $('#btnSimpanData1').on('click', function(e){
      formSubmit();
    })

    $('#btnSimpanData2').on('click', function(e){
      formSubmit2();
    })

    function formSubmit(){
      event.preventDefault();

      // if("{{ $penjualan->retur }}"){
      //   swal('Perhatian', 'Fitur edit belum tersedia', 'warning');
      //   return;
      // }


      if($('.list-barang-retur').length == 0){
        swal('Perhatian', 'Pilih minimal satu barang', 'warning');
        return;
      }

      let data = {
        _token: '{{ csrf_token() }}',
        tanggal: $('#tanggal_pengembalian').val(),
        keterangan: $('#keterangan').val(),
        details: $('.list-barang-retur').map(function() {
          return {
            id_penjualan_detail: $(this).data('id_penjualan_detail'),
            id_penjualan_detail_item: $(this).data('id_penjualan_detail_item'),
            keterangan: $(this).find('.keterangan').val(),
            qty: formatInputUangToFloat($(this).find('input[name="qty"]').val()),
            harga: $(this).data('harga'),
            id_stok_barang: $(this).data('id_stok_barang')
          }
        }).get()
      }

      let url = "{{ route('penjualan.kasir.retur.store', ':id') }}";
      url = url.replace(':id', '{{ $penjualan->id }}');

      sendJson(url, data, callbackAfterSubmit);
    }

    function formSubmit2(){
      event.preventDefault();

      // if("{{ $penjualan->retur }}"){
      //   swal('Perhatian', 'Fitur edit belum tersedia', 'warning');
      //   return;
      // }


      if($('.list-barang-retur').length == 0){
        swal('Perhatian', 'Pilih minimal satu barang', 'warning');
        return;
      }

      let data = {
        _token: '{{ csrf_token() }}',
        tanggal: $('#tanggal_pengembalian').val(),
        keterangan: $('#keterangan').val(),
        details: $('.list-barang-retur').map(function() {
          return {
            id_penjualan_detail: $(this).data('id_penjualan_detail'),
            id_penjualan_detail_item: $(this).data('id_penjualan_detail_item'),
            keterangan: $(this).find('.keterangan').val(),
            qty: formatInputUangToFloat($(this).find('input[name="qty"]').val()),
            harga: $(this).data('harga'),
            id_stok_barang: $(this).data('id_stok_barang')
          }
        }).get()
      }

      let url = "{{ route('penjualan.kasir.retur.store2', ':id') }}";
      url = url.replace(':id', '{{ $penjualan->id }}');

      sendJson(url, data, callbackAfterSubmit);
    }

    function callbackAfterSubmit(data) {
      let titles = data.type == "success" ? "Sukses" : (data.type == "error" ? "Gagal" : "Info");
      swal({
        title: titles,
        text: data.response,
        type: data.type,
        confirmButtonText: "OK"
      }).then(function() {
        if (data.type == "success") {
          window.location.href = "/penjualan/kasir/history";
        }
      })
    }

    function hapusData(){
      swal({
        title: "Apakah Anda Yakin?",
        text: "Data Retur Penjualan akan dihapus",
        type: "warning",
        showCancelButton: true,
        confirmButtonText: "Ya, Hapus!",
        cancelButtonText: "Tidak, Batalkan!",
        closeOnConfirm: false,
        closeOnCancel: false
      }).then(function(isConfirm) {
        if (isConfirm) {
          let url = "{{ route('penjualan.kasir.retur.destroy', ':id') }}";
          url = url.replace(':id', '{{ $penjualan->id }}');

          sendJson(url, {_token: '{{ csrf_token() }}'}, callbackAfterSubmit);
        }
      });
    }

    function updateTableNumbersModal() {
      // $('.table-number-modal tbody tr:not(.d-none) .number-modal').each(function(index) {
      //   $(this).text(index + 1);
      // });
    }

    function updateSubTotal(e, idStokBarang){
      let qty = formatInputUangToFloat($(e).val());
      let harga = $('#list-barang-retur-' + idStokBarang).data('harga');
      let subTotal = qty * harga;

      $('#sub-total-' + idStokBarang).text(formatNumberComma(subTotal));
    }
  </script>
@endpush