@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">
          @php
          $title = "otorisasi mutasi anggota"
          @endphp
          {{ 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">{{ $title }}</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="table-responsive">
        <table class="table table-sm table-vcenter table-bordered" id="tbl-list" style="width:100%">
          <thead class="thead-light">
            <tr>
              <th class="dt-head-center">No</th>
              <th class="dt-head-center">No Anggota</th>
              <th class="dt-head-center">Nama</th>
              <th class="dt-head-center">Mutasi</th>
              <th class="dt-head-center">Tgl Mutasi</th>
              <th class="dt-head-center">AKSI</th>
            </tr>
          </thead>
        </table>
      </div>
    </div>
  </div>

  <!-- Edit Modal -->
  <div class="modal fade" id="ShowMutasi" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="max-width: 50%;" role="document">>
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">{{ strtoupper($title) }}</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          @csrf
          <div class="block-header block-header-default">
            <div class="col-md-6">
              <div class="form-group">
                <label>ID ANGGOTA</label>
                <input type="text" id="idanggota" class="name form-control" readonly >
                <input type="text" id="notran" class="name form-control" hidden >    
              </div>
            </div>
          
            <div class="col-md-6" id="Buka_rumpun">
              <label>NAMA ANGGOTA</label>
              <input type="text" id="nama" class="name form-control" readonly >
            </div>
          </div>
          <div class="block-header block-header-default">
            <div class="col-md-6">
              <div class="form-group">
                <label>MAJELIS</label>
                <input type="text" id="idmajelis" class="name form-control" readonly >
                    
              </div>
            </div>
          
            <div class="col-md-6" id="Buka_rumpun">
              <label>MUTASI</label>
              <input type="text" id="jnmutasi" class="name form-control" readonly>
            </div>
          </div>
          <div class="block-header block-header-default">
            <div class="col-md-6">
              <div class="form-group">
                <label>PETUGAS</label>
                <input type="text" id="idpetugas" class="name form-control" readonly>
                    
              </div>
            </div>
          
            <div class="col-md-6" id="Buka_rumpun">
              <label>TGL. MUTASI</label>
              <input type="text" id="tgmutasi" class="name form-control" readonly>
            </div>
          </div>
          <div class="block-header block-header-default">
            <div class="col-md-6">
              <div class="form-group">
                <label>PENYEBAB</label>
                <input type="text" id="jnsebab" class="name form-control" readonly>
                    
              </div>
            </div>
          
            <div class="col-md-6" id="Buka_rumpun">
              <label>KETERANGAN</label>
              <input type="text" id="ketera" class="name form-control" readonly>
            </div>
          </div>
          

          <label>MAJELIS BARU</label>
          <input type="text" id="idmajbaru" class="name form-control" readonly>
          <input type="text" id="idmajbar" class="name form-control" hidden>
          <label>DESA</label>
          <input type="text" id="desa" class="name form-control" readonly>
          <label>KECAMATAN</label>
          <input type="text" id="kecamatan" class="name form-control" readonly>
          <label>KAB/KOTA</label>
          <input type="text" id="kabupaten" class="name form-control" readonly>
        </div>
        <div class="modal-footer">
          <button type="button" id="btn-posting" class="btn btn-sm btn-danger" onclick="deleteData()">
            <div id="del-spinner" style="display: none;">
              <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" ></span>
              Loading...
            </div>
            <div id="del-submit">{{ strtoupper("Batal") }}</div>
          </button>
          <button type="button" id="btn-posting" class="btn btn-sm btn-success" onclick="postingData()">
            <div id="approve-spinner" style="display: none;">
              <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" ></span>
              Loading...
            </div>
            <div id="approve-submit">{{ strtoupper("Setujui") }}</div>
          </button>
        </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- End Modal Tambah Data -->
@endsection

@section('js')
  <!-- Script -->
  <script type='text/javascript'>
    // Init Datatable
    let table = $('#tbl-list').DataTable({
      processing: true,
      serverSide: false,
      autoWidth: false,
      ajax: '{{ url("anggota-mutasi/posting") }}/{{ session()->get("kantor") }}',
      columns: [
        {
          data: 'DT_RowIndex',
          name: 'DTROWIDX'
        },
        {
          data: 'IDANGGOTA',
          name: 'IDANGGOTA'
        },
        {
          data: 'NAMA',
          name: 'NAMA'
        },
        {
          data: 'JNMUTASI',
          name: 'JNMUTASI'
        },
        {
          data: 'TGMUTASI',
          name: 'TGMUTASI'
        },
        {
          data: 'IDANGGOTA',
          name: 'ACTION'
        },
      ],
      columnDefs: [
        {
          targets: 0,
          className: 'dt-body-centery',
          width: '60px',
          orderable: false,
          searchable: false
        },
        {
          targets: 3,
          render: function(data) {
            let jenis = '';

            switch (data) {
              case '2':
                jenis = 'PINDAH RUMPUN';
                break;
              case '3':
                jenis = 'KELUAR';
                break;
            }

            return jenis;
          }
        },
        {
          targets: 4,
          render: function(data) {
            const newDate = new Date(data);
            const date = newDate.toLocaleDateString('en-GB', {
              year: 'numeric',
              month: '2-digit',
              day: '2-digit'
            });

            return date;
          }
        },
        {
          targets: -1,
          className: 'dt-body-center',
          width: '100px',
          orderable: false,
          searchable: false,
          render: function(data) {
            const button = '<button type="button" class="btn-detail btn btn-sm btn-primary">DETAIL</button>';

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

    // Handle Set Selected Row
    $('#tbl-list tbody').on('click', 'tr', function () {
        if (!$(this).hasClass('selected')) {
          table.$('tr.selected').removeClass('selected');
          $(this).addClass('selected');
        }
    });

    // Handle Show Detail Data
    $(document).on('click', '.btn-detail', function(e) {
      e.preventDefault();

      const row = table.row($(this).parents('tr')).data();
      const newDate = new Date(row.TGMUTASI);
      const date = newDate.toLocaleDateString('en-GB', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit'
      });
      
      $('#notran').val(row.NOTRAN);
      $('#idanggota').val(row.IDANGGOTA);
      $('#nama').val(row.NAMA);
      $('#idmajelis').val(row.NAMAMAJELIS);
      $('#jnmutasi').val((row.JNMUTASI)== 2 ? 'PINDAH RUMPUN' : 'KELUAR');
      $('#idpetugas').val(row.PETUGAS);
      $('#tgmutasi').val(date);
      $('#jnsebab').val(row.SEBAB.toUpperCase());
      $('#ketera').val(row.KETERA);
      $('#idmajbaru').val(row.MAJELISBARU);
      $('#idmajbar').val(row.IDMAJBAR);
      $('#desa').val(row.DESA);
      $('#kecamatan').val(row.KECAMATAN);
      $('#kabupaten').val(row.KABUPATEN);
      $('#ShowMutasi').modal('show');
    });

    // Handle Posting Data
    function postingData() {
      const token = $('input[name=_token]').val();
      const notran = $('#notran').val();
      const userId = @json(session()->get('name'));
      const url = '{{ url("anggota-mutasi/posting/store") }}/{{ session()->get("kantor") }}';

      swal.fire({
        title: "Lanjutkan Proses Otorisasi?",
        icon: "question",
        confirmButtonText: "YA",
        cancelButtonText: "BATAL",
        showCancelButton: true,
      }).then((result) => {
        if(result.isConfirmed) {
          app.showSpinner('#approve-spinner', '#approve-submit', true);

          $.ajax({
            type: 'POST',
            url: url,
            data: {_token: token, notran: notran, userid: userId},
            success: function(res) {
              // console.log(res);
              if(res.success) {
                table.row('.selected').remove().draw();
                $('#ShowMutasi').modal('hide');

                swal.fire(
                  'Sukses',
                  res.message,
                  'success'
                );
              }
              else {
                swal.fire(
                  'Informasi',
                  res.message + ' ' + res.detail,
                  'warning'
                );
              }

              app.hideSpinner('#approve-spinner', '#approve-submit', false);
            }
          });
        }
      });
    }

    // Handle Delete Data
    function deleteData() {
      swal.fire({
        title: "Yakin Mau Hapus Data Ini?",
        icon: "info",
        confirmButtonText: "YA",
        cancelButtonText: "BATAL",
        showCancelButton: true,
      }).then((result) => {
        if(result.isConfirmed) {
          table.row('.selected').remove().draw();
          app.showSpinner('#del-spinner', '#del-submit', true);

          const token = $('input[name=_token]').val();
          const notran = $('#notran').val();;
          const url = '{{ url("anggota-mutasi/posting/destroy") }}/{{ session()->get("kantor") }}';

          $.ajax({
            type: 'POST',
            url: url,
            data: {_token: token, notran: notran},
            success: function(res) {
              if(res.success) {
                // Remove selected Data
                table.row('.selected').remove().draw();
                $('#ShowMutasi').modal('hide');

                swal.fire(
                  'Sukses',
                  res.message,
                  'success'
                )
              }
              else {
                swal.fire(
                  'Informasi',
                  res.message,
                  'warning'
                )
              }

              app.hideSpinner('#del-spinner', '#del-submit', false);
            }
          });
        }
      });
    };
  </script>
@endsection