@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">
      @if ($message = Session::get('error'))
        <div class="alert alert-danger alert-dismissible">
          <p class="mb-0">{{ $message }}</p>
          <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
      @endif
      <div class="col-md-7">
        <form class="space-y-4" target="_blank" action="{{ url("anggota-buku-simpanan/print-transaksi") }}/{{ session()->get("kantor") }}" method="POST">
					@csrf
          <input type="hidden" id="nmkant" name="nmkant">
          <input type="hidden" id="namaanggota" name="namaanggota">
          <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 text-end" 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 text-end" name="salwjb" readonly>
            </div>
          </div>

          <div class="row">
            <label class="col-sm-4 col-form-label">Saldo Berencana</label>
            <div class="col-sm-8">
              <input id="salbrc" type="text" class="form-control text-end" name="salbrc" 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" id="startdate" class="form-control" name="startdate" onchange="startDateSettled(this)">
                    <span class="input-group-text">s/d</span>
                    <input type="date" id="enddate" class="form-control" name="enddate">
                  </div>
                </div>
              </div>
              <div class="row">
                <label class="col-sm-4 col-form-label">Baris</label>
                <div class="col-sm-8">
                  <div class="input-group">
                    <input type="text" id="startfrom" class="form-control number-separator text-end" name="startfrom" value="1">
                    <span class="input-group-text">s/d</span>
                    <input type="text" id="endto" class="form-control number-separator text-end" name="endto" value="30">
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-sm-8 ms-auto">
              {{-- <button type="button" class="btn btn-success" id="btn-preview" onclick="preview()">Preview</button> --}}
              <button type="button" class="btn btn-primary" onclick="printPage()">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  -->

	<!-- Modal Print Preview  -->
  {{-- <div class="modal" id="modal-preview" tabindex="-1" aria-labelledby="modal-preview" aria-modal="true" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div id="block-preview" class="block block-rounded block-mode-fullscreen block-mode-loading-oneui mb-0">
          <div class="block-header block-header-default">
            <h3 class="block-title">Print Preview</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="table-responsive">
                  <table id="tbl-preview" class="table table-bordered table-striped table-vcenter table-sm" style="width:100%">
                      <thead class="thead-light">
                        <tr>
                          <th rowspan="2" class="dt-head-center">No</th>
                          <th rowspan="2" class="dt-head-center">Tanggal</th>
                          <th rowspan="2" class="dt-head-center">Kode</th>
                          <th colspan="2" class="dt-head-center">Pokok/Wajib</th>
                          <th colspan="2" class="dt-head-center">Sukarela</th>
                          <th colspan="2" class="dt-head-center">Berencana</th>
                          <th rowspan="2" class="dt-head-center">Validasi</th>
                        </tr>
                        <tr>
                          <th class="dt-head-center">Transaksi</th>
                          <th class="dt-head-center">Saldo</th>
                          <th class="dt-head-center">Transaksi</th>
                          <th class="dt-head-center">Saldo</th>
                          <th class="dt-head-center">Transaksi</th>
                          <th class="dt-head-center">Saldo</th>
                        </tr>
                      </thead>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div> --}}
  <!-- End Modal Print Preview  -->
@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');
    }
  });

	// Init Table Anggota
  // let tablePreview = $('#tbl-preview').DataTable({
  //   processing: true,
  //   serverSide: false,
  //   autoWidth: false,
	// 	paging: false,
	// 	searching: false,
  //   ordering: false,
  //   info: false,
  //   columns: [
  //     {
  //       data: 'DT_RowIndex',
  //       name: 'DTROWIDX'
  //     },
  //     {
  //       data: 'TGLTRA',
  //       name: 'TGLTRA'
  //     },
	// 		{
  //       data: 'KODE',
  //       name: 'KODE'
  //     },
	// 		{
  //       data: 'TRAWJB',
  //       name: 'TRAWJB'
  //     },
  //     {
  //       data: 'SALMODAL',
  //       name: 'SALMODAL'
  //     },
  //     {
  //       data: 'TRASKR',
  //       name: 'TRASKR'
  //     },
	// 		{
  //       data: 'SALSKR',
  //       name: 'SALSKR'
  //     },
	// 		{
  //       data: 'TRABRC',
  //       name: 'TRABRC'
  //     },
	// 		{
  //       data: 'SALBRC',
  //       name: 'SALBRC'
  //     },
  //     {
  //       data: 'IDINPT',
  //       name: 'IDINPT'
  //     }
  //   ],
  //   columnDefs: [
  //     {
  //       targets: 0,
  //       className: 'dt-body-center',
  //       width: '60px',
  //       orderable: false,
  //       searchable: false,
  //       render: function (data, type, row, meta) {
  //         return meta.row + meta.settings._iDisplayStart + 1;
  //       }
  //     },
  //     {
  //       targets: 1,
  //       render: function(data) {
  //         const date = new Date(data);
  //         const result = date.toLocaleDateString('en-GB', {
  //           year: 'numeric',
  //           month: '2-digit',
  //           day: '2-digit'
  //         });

  //         return result;
  //       }
  //     },
  //     {
  //       targets: 2,
  //       className: 'dt-body-center'
  //     },
	// 		{
  //       targets: [3, 4, 5, 6, 7, 8],
	// 			className: 'dt-body-right',
  //       render: function(data) {
  //         return app.numberSeparator(data);
  //       }
  //     }
  //   ],
  //   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();
      // $('#btn-preview').hide();
      $('form').attr('action', '{{ url("anggota-buku-simpanan/print-cover") }}/{{ session()->get("kantor") }}');
    }
    else if (this.value == 'trans') {
      $('#cetak-transaksi').show();
      // $('#btn-preview').show();
      $('form').attr('action', '{{ url("anggota-buku-simpanan/print-transaksi") }}/{{ session()->get("kantor") }}');
    }
  });

  // Handle Set Anggota
  function setAnggota() {
    tableAnggota.ajax.url('{{ url("anggota-buku-simpanan/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();

    $('#nmkant').val(row.NMKANT);
    $('#idanggota').val(row.IDANGGOTA);
    $('#namaanggota').val(row.NAMA);
    $('#nama').val(row.NAMA + ' (' + row.RUMPUN + ') ');
    $('#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));
    $('#salbrc').val(app.numberSeparator(row.SALBRC));
    $('#modal-anggota').modal('hide');
  }

  // Handle Set Minimun End Date
  function startDateSettled(self) {
    $('#enddate').attr('min', $(self).val());
  }

	// Handle Preview
	// function preview() {
  //   if(!validateData()) {
  //     return;
  //   }

	// 	const data = {
	// 		_token: $('input[name=_token]').val(),
	// 		idanggota: $('#idanggota').val(),
	// 		startdate: $('#startdate').val(),
	// 		enddate: $('#enddate').val(),
  //     startfrom: $('#startfrom').val(),
  //     endto: $('#endto').val()
	// 	};

	// 	// console.log(JSON.stringify(data));

	// 	$.ajax({
	// 		type: 'POST',
	// 		url: '{{ url("anggota-buku-simpanan/preview") }}/{{ session()->get("kantor") }}',
	// 		data: data,
	// 		beforeSend: function() {
	// 			One.block('state_loading', '#block-preview');
  //   		$('#modal-preview').modal('show');
	// 		},
	// 		success: function(res) {
	// 			// console.log(res);
	// 			tablePreview.clear().rows.add(res).draw();
	// 			One.block('state_normal', '#block-preview');
	// 		}
	// 	});
	// }

	// Handle After Load Table Preview
	// function afterLoadTblPreview() {
	// 	One.block('state_normal', '#block-preview');
	// }

  // Handle Print
  function printPage() {
    if(!validateData()) {
      return;
    }

    $('form').submit()
  }

  // Handle Validation Before Saving Data
  function validateData() {
    if($('input[type=radio][name=jncetak]:checked').val() === 'cover') {
      if($('#idanggota').val() === '') {
        document.activeElement.blur();

        swal.fire(
          'Informasi',
          'Tentukan Anggota!',
          'warning'
        )
        .then(function() {
          $("#btn-idanggota").focus();
        });

        return;
      }

      return true
    }

    if($('#idanggota').val() === '') {
      document.activeElement.blur();

      swal.fire(
        'Informasi',
        'Tentukan Anggota!',
        'warning'
      )
      .then(function() {
        $("#btn-idanggota").focus();
      });

      return;
    }

		if($('#startdate').val() === '' || $('#startdate').val() === null) {
      document.activeElement.blur();

      swal.fire(
        'Informasi',
        'Tentukan Mulai Dari Tanggal!',
        'warning'
      )
      .then(function() {
        $("#startdate").focus();
      });

      return;
    }

    if($('#enddate').val() === '' || $('#enddate').val() === null) {
      document.activeElement.blur();

      swal.fire(
        'Informasi',
        'Tentukan Sampai Dengan Tanggal!',
        'warning'
      )
      .then(function() {
        $("#enddate").focus();
      });

      return;
    }

    if(parseInt($('#startfrom').val()) < 1) {
      document.activeElement.blur();

      swal.fire(
        'Informasi',
        'Baris Mulai Dari Tidak Boleh Lebih Kecil Dari 1!',
        'warning'
      )
      .then(function() {
        $("#startfrom").focus();
      });

      return;
    }

    if(parseInt($('#endto').val()) < parseInt($('#startfrom').val())) {
      document.activeElement.blur();

      swal.fire(
        'Informasi',
        'Baris Sampai Dengan Tidak Boleh Lebih Kecil Dari ' + parseInt($('#startfrom').val()) + '!',
        'warning'
      )
      .then(function() {
        $("#endto").focus();
      });

      return;
    }

    if((parseInt($('#endto').val()) - parseInt($('#startfrom').val())) >= 30) {
      document.activeElement.blur();

      swal.fire(
        'Informasi',
        'Tidak Boleh Lebih Dari 30 Baris!',
        'warning'
      )
      .then(function() {
        $("#endto").focus();
      });

      return;
    }

    return true;
  }
</script>
@endsection