@extends('layout.master')
@push('plugin-styles')
  <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="#!">Finance</a></li>
      <li class="breadcrumb-item"><a href="/finance/jurnal-umum">Jurnal Umum</a></li>
      <li class="breadcrumb-item active" aria-current="page">Create</li>
    </ol>
  </nav>

  <form method="post" onsubmit="formSubmit()" id="form">
    <div class="card">
      <div class="card-body repeater">
        <div class="row gy-3">
          <div class="col-12 col-md-6">
            <label class="form-label" for="tanggal">Tanggal</label>
            <input type="date" name="tanggal" id="tanggal" class="form-control required cursor-pointer"
              value="{{ date('Y-m-d') }}" onclick="this.showPicker()">
          </div>
          <div class="col-12 col-md-6">
            <label class="form-label" for="jenis_posting">Jenis Posting</label>
            <select name="jenis_posting" id="jenis_posting" class="form-select required select2Custom">
              <option value="0">Normal</option>
              <option value="1">Pembalik</option>
            </select>
          </div>
          <div class="col-12">
            <label class="form-label" for="keterangan">Keterangan</label>
            <textarea name="keterangan" id="keterangan" class="form-control"></textarea>
          </div>
        </div>

        <div class="row mt-3">
          <div class="col-12">
            <div class="table-responsive">
              <table class="table table-bordered table-hover table-number" id="table-item">
                <thead>
                  <tr>
                    <th class="kolomNomor">No</th>
                    <th>Tipe</th>
                    <th>Coa</th>
                    <th class="text-end">Jumlah</th>
                    <th class="kolomAksi">Aksi</th>
                  </tr>
                </thead>
                <tbody data-repeater-list="item">
                  <tr data-repeater-item>
                    <td class="number"></td>
                    <td>
                      <select name="tipe" class="form-select required select2Custom" onchange="updateDebitCredit()">
                        <option value="debit">Debit</option>
                        <option value="credit">Kredit</option>
                      </select>
                    </td>
                    <td>
                      <select name="coa" class="form-select required select2Custom" onchange="updateDebitCredit()">
                        @foreach ($coaList as $coa)
                          <option value="{{ $coa->id }}">{{ $coa->kode_nama }}</option>
                        @endforeach
                      </select>
                    </td>
                    <td>
                      <input type="text" name="jumlah" class="form-control required formatInputUang text-end"
                        onkeyup="updateDebitCredit()" value="0" />
                    </td>
                    <td>
                      <button data-repeater-delete class="btn btn-danger btn-sm" type="button">
                        <span class="mdi mdi-delete"></span>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>

        <div class="row mt-3">
          <div class="col-12">
            <button data-repeater-create type="button" class="btn btn-light btn-custom2 w-100">
              Tambah item
            </button>
          </div>
        </div>

        <div class="row mt-2 gy-3">
          <div class="col-12 col-md-6">
            <label for="total_debit" class="form-label">Total Debit</label>
            <input type="text" class="form-control text-end formatInputUang" disabled readonly id="total_debit" value="0">
          </div>
          <div class="col-12 col-md-6">
            <label for="total_credit" class="form-label">Total Kredit</label>
            <input type="text" class="form-control text-end formatInputUang" disabled readonly id="total_credit" value="0">
          </div>
        </div>
      </div>
    </div>

    <div class="row mt-3">
      <div class="col-6">
        <button type="submit" class="btn btn-success btn-custom1 w-100">
          Simpan Data Jurnal Umum
        </button>
      </div>
      <div class="col-6">
        <a href="{{ route('finance.jurnal-umum.index') }}" class="btn btn-warning btn-custom8 w-100">Kembali ke Halaman
          Sebelumnya
        </a>
      </div>
    </div>
  </form>
@endsection

@push('plugin-scripts')
  <script src="https://cdn.jsdelivr.net/npm/jquery.repeater@1.2.1/jquery.repeater.min.js"></script>
@endpush

@push('custom-scripts')
  @include('pages.finance.jurnal-umum.function')
  <script>
    const formSubmit = () => {
      event.preventDefault();
      if (cekForm('form') && checkDebitCreditValue()) {
        const data = {
          _token: '{{ csrf_token() }}',
          tanggal: $('#tanggal').val(),
          jenis_posting: $('#jenis_posting').val(),
          keterangan: $('#keterangan').val(),
          items: $('.repeater').repeaterVal().item.map((item) => {
            return {
              tipe: item.tipe,
              coa: item.coa,
              jumlah: formatInputUangToFloat(item.jumlah),
            }
          })
        }

        sendJson("{{ route('finance.jurnal-umum.store') }}", data, callbackAjax);
      }
    }

    $(document).ready(() => {
      setRepeater();
    });
  </script>
@endpush