@extends('templates.master')

@section('breadcrumb')
  <div class="content content-full">
    <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center py-2">
      <div class="flex-grow-1">
        <h1 class="h3 fw-bold mb-2">
          {{ strtoupper($title) }}
        </h1>
      </div>
      <nav class="flex-shrink-0 mt-3 mt-sm-0 ms-sm-3" aria-label="breadcrumb">
        <ol class="breadcrumb breadcrumb-alt">
          <li class="breadcrumb-item">
            <a class="link-fx" href="javascript:void(0)">Dashboard</a>
          </li>
          <li class="breadcrumb-item" aria-current="page">
            {{ ucfirst($title) }}
          </li>
        </ol>
      </nav>
    </div>
  </div>
@endsection

@section('content')
  <div class="block block-rounded">
    <div class="block-header block-header-default">
      <h3 class="block-title">
        {{ strtoupper('Anggota') }}
      </h3>
      <button type="button" class="btn-block-option" data-toggle="block-option" data-action="fullscreen_toggle">
        <i class="si si-size-fullscreen"></i>
      </button>
    </div>
    <div class="block-content block-content-full">
      <div class="col-md-7">
        <form class="space-y-4" action="#" method="POST">
          <div class="row">
            <label class="col-sm-4 col-form-label">ID Anggota</label>
              <div class="col-sm-8">
                <div class="input-group">
                  <button type="button" class="btn btn-primary" id="btn-idanggota" onclick="setAnggota()">Pilih</button>
                  <input type="text" class="form-control" name="idanggota" id="idanggota" readonly>
                </div>
              </div>
          </div>

          <div class="row">
            <label class="col-sm-4 col-form-label">Nama</label>
            <div class="col-sm-8">
              <input type="text" id="nama" class="form-control" name="nama" readonly>
            </div>
          </div>
          
          <div class="row">
            <label class="col-sm-4 col-form-label">Tanggal Regis</label>
            <div class="col-sm-8">
              <input type="date" id="tglreg" class="form-control" name="tglreg" readonly>
            </div>
          </div>

          <div class="row">
            <label class="col-sm-4 col-form-label">Saldo Sukarela</label>
            <div class="col-sm-8">
              <input id="salskr" type="text" class="form-control" name="salskr" readonly>
            </div>
          </div>

          <div class="row">
            <label class="col-sm-4 col-form-label">Saldo Wajib</label>
            <div class="col-sm-8">
              <input id="salwjb" type="text" class="form-control" name="salwjb" readonly>
            </div>
          </div>
          
          <div class="row">
            <label class="col-sm-4 col-form-label" for="example-hf-password">Jenis Cetak</label>
            <div class="col-sm-8">
              <div class="space-x-2">
                <div class="form-check form-check-inline">
                  <input class="form-check-input" type="radio" id="jncetak1" name="jncetak" value="cover">
                  <label class="form-check-label" for="jncetak1">Cetak Cover</label>
                </div>
                <div class="form-check form-check-inline" >
                  <input class="form-check-input" type="radio" id="jncetak2" value="trans" name="jncetak" checked>
                  <label class="form-check-label" for="jncetak2">Cetak Transaksi</label>
                </div>
              </div>
            </div>
          </div>

          <div id="cetak-transaksi">
            <div class="space-y-4">
              <div class="row">
                <label class="col-sm-4 col-form-label">Tanggal Transaksi</label>
                <div class="col-sm-8">
                  <div class="input-group">
                    <input type="date" class="form-control" name="">
                    <span class="input-group-text">s/d</span>
                    <input type="date" class="form-control" name="">
                  </div>
                </div>
              </div>
              <div class="row">
                <label class="col-sm-4 col-form-label">Mulai Baris Ke</label>
                <div class="col-sm-8">
                  <div class="input-group">
                    <input type="text" class="form-control number-separator text-end" name="" value="0">
                    <button type="button" class="btn btn-success" id="btn-preview" onclick="preview()">Preview</button>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-sm-8 ms-auto">
              <button type="submit" class="btn btn-primary">Cetak</button>
            </div>
          </div>
        </form>
    </div>
  </div>

  <!-- Modal List Anggota  -->
  <div class="modal" id="modal-anggota" tabindex="-1" aria-labelledby="modal-anggota" aria-modal="true" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div id="block-anggota" class="block block-rounded block-mode-fullscreen block-mode-loading-oneui mb-0">
          <div class="block-header block-header-default">
            <h3 class="block-title">Pilih Anggota</h3>
            <div class="block-options d-flex justify-content-between">
              <button type="button" id="btn-close-modal" class="btn-block-option" data-bs-dismiss="modal" aria-label="close">
                <i class="si si-close"></i>
              </button>
            </div>
          </div>
          <div class="block-content">
            <div class="row justify-content-center py-sm-3">
              <div class="col-sm-10 col-md-6">
                <div class="d-flex justifify-flex-start">
                  <div class="form-group me-2">
                    <select class="form-control form-select mb-4" onchange="searchDataAnggota(this)">
                      <option class="fw-bold" value="" data-name="">-- SEMUA DESA --</option>
                      @foreach($desa as $item)
                      <option value="{{ $item['IDDESA'] }}" data-name="{{ $item['NAMADESA'] }}">{{ $item['NAMADESA'] }} ( {{ $item['IDDESA'] }} )</option>
                      @endforeach
                    </select>
                  </div>
                </div>
                <div class="table-responsive">
                  <table id="tbl-anggota" class="table table-bordered table-striped table-vcenter table-sm" style="width:100%">
                      <thead class="thead-light">
                        <tr>
                          <th class="dt-head-center">No</th>
                          <th class="dt-head-center">ID. Anggota</th>
                          <th class="dt-head-center">Nama</th>
                          <th class="dt-head-center">Rumpun</th>
                          <th class="dt-head-center">Desa</th>
                          <th class="dt-head-center">Aksi</th>
                        </tr>
                      </thead>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- End Modal List Anggota  -->
@endsection

@section('js')
<!-- Script -->
<script type='text/javascript'>
  // Init Table Anggota
  let tableAnggota = $('#tbl-anggota').DataTable({
    processing: true,
    serverSide: false,
    autoWidth: false,
    columns: [
      {
        data: 'DT_RowIndex',
        name: 'DTROWIDX'
      },
      {
        data: 'IDANGGOTA',
        name: 'IDANGGOTA'
      },
			{
        data: 'NAMA',
        name: 'NAMA'
      },
			{
        data: 'RUMPUN',
        name: 'RUMPUN'
      },
      {
        data: 'DESA',
        name: 'DESA'
      },
      {
        data: 'IDANGGOTA',
        name: 'ACTION'
      },
    ],
    columnDefs: [
      {
        targets: 0,
        className: 'text-center',
        width: '60px',
        orderable: false,
        searchable: false,
        render: function (data, type, row, meta) {
          return meta.row + meta.settings._iDisplayStart + 1;
        }
      },
      {
        targets: -1,
        className: 'dt-body-center',
				width: '100px',
        orderable: false,
        searchable: false,
        render: function(data) {
          let button = '<div class="btn-group">';
            button += '<button class="btn btn-sm btn-success" onclick="anggotaSettled(this)">';
            button += '<i class="fa fa-check"></i>';
            button += '</button>';
            button += '</div>';

          return button; 
        }
      }
    ],
    createdRow: function (row, data, dataIndex) {
      $(row).children(':first').addClass('fw-bold');
    }
  });

  // Handle Change Jenis Cetak
  $('input[type=radio][name=jncetak]').change(function() {
    if (this.value == 'cover') {
      $('#cetak-transaksi').hide();
    }
    else if (this.value == 'trans') {
      $('#cetak-transaksi').show();
    }
  });

  // Handle Set Anggota
  function setAnggota() {
    tableAnggota.ajax.url('{{ url("anggota-buku-simpanan-lama/anggota") }}/{{ session()->get("kantor") }}').load(afterLoadTblAnggota);
    One.block('state_loading', '#block-anggota');
    $('#modal-anggota').modal('show');
  }

  // Handle After Load Table Anggota
  function afterLoadTblAnggota() {
    One.block('state_normal', '#block-anggota');
  }

  // Handle Search Anggota By Desa
  function searchDataAnggota(self) {
    const value = $(self).find(':selected').data('name');

    tableAnggota
      .column(4)
      .search(value)
      .draw();
  };

  // Handle On Select Anggota
  function anggotaSettled(self) {
    const row = tableAnggota.row($(self).parents('tr')).data();

    console.log(row);

    $('#idanggota').val(row.IDANGGOTA);
    $('#nama').val(row.NAMA);
    $('#tglreg').val(
      row.TGLREG !== '1899-12-30 00:00:00' && row.TGLREG !== null ?
      row.TGLREG.split(' ')[0] : ''
    );
    $('#salskr').val(app.numberSeparator(row.SALSKR));
    $('#salwjb').val(app.numberSeparator(row.SALWJB));
    $('#modal-anggota').modal('hide');
  }
</script>
@endsection