@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/template-arus-kas">Template Arus Kas</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">
            <label class="form-label" for="tag">Nama Tag</label>
            <input type="text" name="tag" id="tag" class="form-control required"/>
          </div>
          <div class="col-12">
            <label class="form-label" for="keterangan">Nama Keterangan</label>
            <input type="text" name="keterangan" id="keterangan" class="form-control required"/>
          </div>
          <div class="col-12">
            <label class="form-label" for="grup">Grup</label>
            <select name="grup" id="grup" required class="form-select required select2Custom">
              @foreach ($grupList as $key => $item)
                <option value="{{ $key }}">{{ $item }}</option>
              @endforeach
            </select>
          </div>
          <div class="col-12">
            <label class="form-label" for="urutan">Urutan</label>
            <input type="number" name="urutan" id="urutan" class="form-control required"/>
          </div>
          <div class="col-12">
            <label class="form-label" for="rumus">Rumus</label>
            <select name="rumus" id="rumus" class="form-select select2Custom">
              <option value="">Pilih Rumus</option>
              @foreach ($rumusList as $key => $item)
                <option value="{{ $key }}">{{ $item }}</option>
              @endforeach
            </select>
          </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>Coa</th>
                    <th class="kolomAksi">Aksi</th>
                  </tr>
                </thead>
                <tbody data-repeater-list="item">
                  <tr data-repeater-item>
                    <td class="number"></td>
                    <td>
                      <select name="id_coa" class="form-select required select2Custom">
                        @foreach ($coaList as $coa)
                          <option value="{{ $coa->id }}">{{ $coa->kode_nama }}</option>
                        @endforeach
                      </select>
                    </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>
    </div>

    <div class="row mt-3">
      <div class="col-6">
        <button type="submit" class="btn btn-success btn-custom1 w-100">
          Simpan Data Template Arus Kas
        </button>
      </div>
      <div class="col-6">
        <a href="{{ route('finance.template-arus-kas.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.template-arus-kas.function')
  <script>
    const formSubmit = () => {
      event.preventDefault();
      if (cekForm('form')) {
        const data = {
          _token: '{{ csrf_token() }}',
          tag: $('#tag').val(),
          keterangan: $('#keterangan').val(),
          grup: $('#grup').val(),
          urutan: $('#urutan').val(),
          rumus: $('#rumus').val(),
          items: $('.repeater').repeaterVal().item.map((item) => {
            return item.id_coa;
          })
        }

        sendJson("{{ route('finance.template-arus-kas.store') }}", data, callbackAjax);
      }
    }

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