@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="#">Master</a></li>
      <li class="breadcrumb-item"><a href="/master/kontak">Kontak</a></li>
      <li class="breadcrumb-item active" aria-current="page">{{ $data->nama }}</li>
    </ol>
  </nav>

  <div class="row">
    <div class="col-md-12 grid-margin stretch-card">
      <div class="card">
        <div class="card-body">
          <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item">
              <a class="nav-link active" id="deposit-tab" data-bs-toggle="tab" href="#deposit" role="tab" aria-controls="deposit" aria-selected="true">Deposit</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="soon-tab" data-bs-toggle="tab" href="#soon" role="tab" aria-controls="soon" aria-selected="false">Soon</a>
            </li>
          </ul>
          <div class="tab-content border border-top-0 p-3" id="myTabContent">
            <div class="tab-pane fade show active" id="deposit" role="tabpanel" aria-labelledby="deposit-tab">
              <form onsubmit="formFilter()">
                <div class="row mb-2">
                  <div class="col-12 col-md-9">
                    <div class="mb-2">
                      <select name="tipe_filter" id="tipe_filter" class="form-control select2Custom">
                          <option value="">Pilih Tipe</option>
                          <option value="retur_beli">Retur Beli</option>
                          <option value="retur_jual">Retur Jual</option>
                      </select>
                    </div>
                  </div>
                  <div class="col-12 col-md-3">
                    <div class="row">
                      <div class="col-6 pe-1">
                        <button type="submit" 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>
              </form>
              <table id="datatable-serverside" class="table table-sm" style="width: 100%;">
                <thead>
                  <tr>
                    <th class="kolomNomor">No.</th>
                    <th>Nomor</th>
                    <th>Nomor Faktur</th>
                    <th>Tipe</th>
                    <th>Tanggal</th>
                    <th>Amount</th>
                  </tr>
                </thead>
                <tfoot>
                  <tr>
                    <th colspan="5" class="text-end">Total</th>
                    <th>0</th>
                  </tr>
                </tfoot>
              </table>
            </div>
            <div class="tab-pane fade" id="soon" role="tabpanel" aria-labelledby="soon-tab">
              Coming Soon
            </div>
          </div>
        </div>
        <div class="card-footer text-end">
          <a href="/master/kontak" class="btn btn-light btn-custom8">Kembali</a>
        </div>
      </div>
    </div>
  </div>
@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 defer>
    let URLs = "/master/kontak/{{$data->id}}";
    let datatable = $('#datatable-serverside').DataTable({
      lengthMenu: lengthMenuDatatable(),
      processing: true,
      serverSide: true,
      ajax: URLs,
      columns: [
        {data: 'DT_RowIndex', name: 'id'},
        {data: 'nomor', name: 'nomor', searchable: false, orderable: false},
        {data: 'nomor_faktur', name: 'nomor_faktur', searchable: false, orderable: false},
        {
          data: 'tipe',
          name: 'tipe',
          render(h) {
            return h.split("_").join(" ").toLowerCase().replace(/(?<= )[^\s]|^./g, a=>a.toUpperCase());
          },
        },
        {data: 'tanggal', name: 'tanggal'},
        {
          data: 'amount',
          name: 'amount',
          render(h) {
            return formatNumber(h)
          },
        },
      ],
      footerCallback: function (row, data, start, end, display) {
        let api = this.api();
        api.column(5).footer().innerHTML = "{{formatNumber($total_deposit ?? 0)}}"
      }
    });

    function formFilter() {
      event.preventDefault();
      let url = URLs + `?tipe=${$('#tipe_filter').val()}`;
      datatable.ajax.url(url).load();
    }

    function filterReset() {
      $('#tipe_filter').val('').trigger('change');
      datatable.ajax.url(URLs).load();
    }
  </script>
@endpush