@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">COA</li>
    <li class="breadcrumb-item active" aria-current="page">Kode Bantu</li>
  </ol>
</nav>

<div class="row">
  <div class="col-md-12 grid-margin stretch-card">
    <div class="card">
      <div class="card-body">
        <h6 class="card-title">Data Kode Bantu - {{ $coa->nama }}</h6>
        <table id="datatable-serverside" class="table table-sm" style="width: 100%;">
          <thead>
            <tr>
              <th class="kolomNomor">No.</th>
              <th>Kode Bantu</th>
              <th>Nama Kontak</th>
              <th>Relasi</th>
              <th class="kolomAksi">Aksi</th>
            </tr>
          </thead>
        </table>
      </div>
      <div class="card-footer" style="text-align: right;">
        @can('master-data.create')
        <button class="btn btn-info btn-custom1" data-bs-toggle="modal" data-bs-target="#createModal">
          Tambah Data
        </button>
        @endcan
        <a href="/master/coa" class="btn btn-light btn-custom8">Kembali</a>
      </div>
    </div>
  </div>
</div>

{{-- Modal --}}
<div id="createModal" class="modal fade" data-bs-backdrop="static">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title h4">Tambah Data</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
      </div>
      <div class="modal-body">
        <form id="form-create" class="forms-sample" onsubmit="storeData(this)">
          <div class="row">
            <div class="col-12">
              <div class="mb-3">
                <label class="form-label" for="kode_bantu">Kode Bantu</label>
                <input type="text" class="form-control required" id="kode_bantu" name="kode_bantu" autocomplete="off"
                  placeholder="Kode Bantu">
              </div>
            </div>
            <div class="col-12">
              <div class="mb-3">
                <label class="form-label" for="id_master_kontak">Relasi ke Kontak</label>
                <select onchange="resetPasangan('id_user')" class="form-control select2CustomModalCreate" id="id_master_kontak" name="id_master_kontak">
                  <option value="">Pilih Kontak</option>
                  @foreach ($listMasterKontak as $kontak)
                    <option value="{{ $kontak->id }}">{{ $kontak->name_in_list }}</option>
                  @endforeach
                </select>
              </div>
            </div>
            <div class="col-12">
              <div class="mb-3">
                <label class="form-label" for="id_user">Relasi ke Karyawan</label>
                <select onchange="resetPasangan('id_master_kontak')" class="form-control select2CustomModalCreate" id="id_user" name="id_user">
                  <option value="">Pilih User</option>
                  @foreach ($listUser as $user)
                    <option value="{{ $user->id }}">{{ $user->name }}</option>
                  @endforeach
                </select>
              </div>
            </div>
            <div class="col-12" style="text-align: right;">
              <button type="submit" 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>

<div id="editModal" class="modal fade" data-bs-backdrop="static">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title h4">Edit Data</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
      </div>
      <div class="modal-body">
        <form id="form-edit" class="forms-sample" onsubmit="updateData(this)">
          <input type="hidden" name="id">
          <div class="row">
            <div class="col-12">
              <div class="mb-3">
                <label class="form-label" for="edit_kode_bantu">Kode Bantu</label>
                <input type="text" class="form-control required" id="edit_kode_bantu" name="kode_bantu" autocomplete="off"
                  placeholder="Kode Bantu">
              </div>
            </div>
            <div class="col-12">
              <div class="mb-3">
                <label class="form-label" for="edit_id_master_kontak">Relasi ke Kontak</label>
                <select onchange="resetPasangan('edit_id_user')" class="form-control select2CustomModalEdit" id="edit_id_master_kontak" name="id_master_kontak">
                  <option value="">Pilih Kontak</option>
                  @foreach ($listMasterKontak as $kontak)
                    <option value="{{ $kontak->id }}">{{ $kontak->name_in_list }}</option>
                  @endforeach
                </select>
              </div>
            </div>
            <div class="col-12">
              <div class="mb-3">
                <label class="form-label" for="edit_id_user">Relasi ke Karyawan</label>
                <select onchange="resetPasangan('edit_id_master_kontak')" class="form-control select2CustomModalEdit" id="edit_id_user" name="id_user">
                  <option value="">Pilih User</option>
                  @foreach ($listUser as $user)
                    <option value="{{ $user->id }}">{{ $user->name }}</option>
                  @endforeach
                </select>
              </div>
            </div>
            <div class="col-12" style="text-align: right;">
              <button type="submit" 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>
@endpush

@push('custom-scripts')
<script src="{{ asset('assets/js/data-table.js') }}"></script>
<script src="{{ asset('assets/js/sweet-alert.js') }}"></script>

<script>
  let isResetting = false;

  let datatable = $('#datatable-serverside').DataTable({
    lengthMenu: lengthMenuDatatable(),
    processing: true,
    serverSide: true,
    ajax: "/master/coa/{{ $id_master_coa }}/kode-bantu",
    columns: [
      {
        data: 'DT_RowIndex',
        name: 'id',
        searchable: boolPhpToJs("{{ isColumnSearchable(\App\Http\Controllers\KodeKontakController::columnSearchable(), 'id') }}"),
        orderable: boolPhpToJs("{{ isColumnOrderable(\App\Http\Controllers\KodeKontakController::columnOrderable(), 'id') }}"),
      },
      {
        data: 'kode_bantu',
        name: 'kode_bantu',
        searchable: boolPhpToJs("{{ isColumnSearchable(\App\Http\Controllers\KodeKontakController::columnSearchable(), 'kode_bantu') }}"),
        orderable: boolPhpToJs("{{ isColumnOrderable(\App\Http\Controllers\KodeKontakController::columnOrderable(), 'kode_bantu') }}"),
      },
      {
        data: 'relationable.name',
        name: 'relationable.name',
        searchable: boolPhpToJs("{{ isColumnSearchable(\App\Http\Controllers\KodeKontakController::columnSearchable(), 'relationable.name') }}"),
        orderable: boolPhpToJs("{{ isColumnOrderable(\App\Http\Controllers\KodeKontakController::columnOrderable(), 'relationable.name') }}"),
      },
      {
        data: 'aksi',
        name: 'aksi',
        searchable: boolPhpToJs("{{ isColumnSearchable(\App\Http\Controllers\KodeKontakController::columnSearchable(), 'aksi') }}"),
        orderable: boolPhpToJs("{{ isColumnOrderable(\App\Http\Controllers\KodeKontakController::columnOrderable(), 'aksi') }}"),
        class: 'text-center'
      },
    ],
  });

  $(`
    <div class="form-text text-wrap" style="width: 220px">
      Column: ` +
        `{!! columnSearchableToString(\App\Http\Controllers\KodeKontakController::columnSearchable()) !!}` +
        `
    </div>
  `).insertAfter(".dataTables_filter [type='search']");

  const storeData = (element) => {
    event.preventDefault();
    if (cekForm('form-create') == true) {
      let data = {
        _token: "{{ csrf_token() }}",
        kode_bantu: $(element).find('[name="kode_bantu"]').val(),
        id_master_kontak: $(element).find('[name="id_master_kontak"]').val(),
        id_user: $(element).find('[name="id_user"]').val(),
      }

      sendJson("/master/coa/{{ $id_master_coa }}/kode-bantu", data, callbackReloadDatatable);
      $('#createModal').modal('hide');
    }
  }

  $('#createModal').on('hidden.bs.modal', function() {
    $('#form-create input').val('');
    $('#form-create select').val('').trigger('change');
  });

  const editData = (data) => {
    isResetting = true;
    $('#editModal').find('[name="id"]').val(data.id);
    $('#editModal').find('[name="kode_bantu"]').val(data.kode_bantu);
    $('#editModal').find('[name="id_master_kontak"]').val(data.id_master_kontak).trigger('change');
    $('#editModal').find('[name="id_user"]').val(data.id_user).trigger('change');
    $('#editModal').modal('show');
  }

  const updateData = (element) => {
    event.preventDefault();
    if (cekForm('form-edit') == true) {
      let data = {
        _token: "{{ csrf_token() }}",
        kode_bantu: $(element).find('[name="kode_bantu"]').val(),
        id_master_kontak: $(element).find('[name="id_master_kontak"]').val(),
        id_user: $(element).find('[name="id_user"]').val(),
      }

      let id = $(element).find('[name="id"]').val();
      let url = "/master/coa/{{ $id_master_coa }}/kode-bantu/" + id;

      sendJson(url, data, callbackReloadDatatable);
      $('#editModal').modal('hide');
    }
  }

  $('#editModal').on('hidden.bs.modal', function() {
    $('#form-create input').val('');
    $('#form-create select').val('').trigger('change');
  });

  $('.select2CustomModalCreate').select2({
    dropdownParent: $('#createModal'),
    width: '100%'
  });
  $('.select2CustomModalEdit').select2({
    dropdownParent: $('#editModal'),
    width: '100%'
  });

  function resetPasangan(targetId) {
    if (isResetting) return;

    const targetElement = document.getElementById(targetId);
    if (targetElement && targetElement.value !== '') {
      isResetting = true;

      targetElement.value = '';
      const event = new Event('change', { bubbles: true });
      targetElement.dispatchEvent(event);

      isResetting = false;
    }
  }
</script>
@endpush