@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 = "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>
      <a class="btn-sm btn btn-primary" href="{{ url('anggota') }}/tambah/{{ session()->get('kantor') }}">
        Tambah
      </a>
    </div>
    <div class="block-content block-content-full">
      <div class="col-md-8 col-sm-12">
        <div class="row">
          <div class="col-md-6">
            <div class="form-group">
              <select name="iddesa" id="filter-desa" class="form-control form-select mb-4">
                <option class="fw-bold" value="">-- SEMUA DESA --</option>
                @foreach($desa as $item)
                <option value="{{ $item['IDDESA'] }}">{{ $item['NAMADESA'] }} - {{ $item['IDDESA'] }}</option>
                @endforeach
              </select>
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-group">
              <select name="idmajelis" id="filter-rumpun" class="form-control form-select mb-4">
                <option class="fw-bold" value="">-- SEMUA RUMPUN --</option>
              </select>
            </div>
          </div>
        </div>
      </div>
      <table class="table table-striped" id="tbl-anggota">
        <thead class="thead-light">
          <tr>
            <th>No</th>
            <th>ID Anggota</th>
            <th>Nama</th>
            <th>Status</th>
            <th>Rumpun</th>
            <th>Aksi</th>
          </tr>
        </thead>
      </table>
    </div>
  </div>

@endsection

@section('js')
<script type='text/javascript'>
  let table = $('#tbl-anggota').DataTable({
    processing: true,
    serverSide: true,
    autoWidth: false,
    ajax: '{{ url("anggota") }}/{{ session()->get("kantor") }}',
    columns: [
      {
        data: 'DT_RowIndex',
        name: 'DTROWIDX'
      },
      {
        data: 'IDANGGOTA',
        name: 'IDANGGOTA'
      },
      {
        data: 'NAMA',
        name: 'NAMA'
      },
      {
        data: 'STSANGGOTA',
        name: 'STSANGGOTA'
      },
      {
        data: 'IDMAJELIS',
        name: 'IDMAJELIS'
      },
      {
        data: 'IDANGGOTA',
        name: 'ACTION'
      }
    ],
    columnDefs: [
      {
        targets: 0,
        className: 'dt-body-center',
        width: '60px',
        orderable: false,
        searchable: false
      },
      {
        targets: 3,
        className: 'dt-body-center',
        render: function(data) {
          let bgStatus;
          let btnText;
          let status;

          if(data === '0') {
            bgStatus = 'bg-warning-light';
            btnText = 'text-warning';
            status = 'Tidak Aktif';
          }
          else if(data === '1')
          {
            bgStatus = 'bg-success-light';
            btnText = 'text-success';
            status = 'Aktif';
          }
          else if(data === '3') {
            bgStatus = 'bg-danger-light';
            btnText = 'text-danger';
            status = 'Keluar';
          }

          let span = '<span class="fs-xs fw-semibold d-inline-block py-1 px-3 rounded-pill '+ bgStatus + ' ' + btnText + '">';
            span += status;
            span += '</span>';

          return span;
        }
      },
      {
        targets: 4,
        orderable: false,
        visible: false
      },
      {
        targets: -1,
        className: 'dt-body-center',
        width: '150px',
        orderable: false,
        searchable: false,
        render: function(data) {
          let button = '<div class="btn-group">';
            button += '<a href="{{ url("anggota") }}/detail/{{ session()->get("kantor") }}/' + data + '" class="btn btn-sm btn-primary">';
            button += '<i class="fa fa-eye"></i>';
            button += '</a>';
            button += '<a href="{{ url("anggota") }}/edit/{{ session()->get("kantor") }}/' + data + '" class="btn btn-sm btn-success">';
            button += '<i class="fa fa-pencil-alt"></i>';
            button += '</a>';
            button += '<a href="{{ url("anggota") }}/{{ session()->get("kantor") }}/' + data + '" id="btn-trash-anggota" class="btn btn-sm btn-danger">';
            button += '<i class="fa fa-trash"></i>';
            button += '</a>';
            button += '</div>';

          return button; 
        }
      }
    ],
    createdRow: function (row, data, dataIndex) {
        $(row).children(':first').addClass('fw-bold');
        // $(row).children(':last').addClass('d-flex justify-content-center');
    }
  });

  // Reorder table
  table.on('order.dt search.dt', function () {
      let i = 1;

      table.cells(null, 0, { search: 'applied', order: 'applied' }).every(function (cell) {
          this.data(i++);
      });
  }).draw();

  $('#filter-desa').change(function() {
    const value = $(this).val();
    const rumpunElm = $('#filter-rumpun');

    if(value === '') {
      // Reset Filter Table
      table
        .columns(4).search('')
        .draw();
      
      $('#filter-rumpun').html('<option class="fw-bold" value="">-- SEMUA RUMPUN --</option>');

      return;
    }

    $.ajax({
      type: 'GET',
      url: '{{ url("rumpun") }}/getbydesa/{{ session()->get("kantor") }}/' + value,
      success: function(data) {
        // console.log(data);
        rumpunElm.html('<option class="fw-bold" value="">-- SEMUA RUMPUN --</option>');

        $.each(data, function(i, val) {
          rumpunElm.append('<option value="' + val.IDMAJELIS + '">' + val.NAMAMAJELIS + ' - ' + val.IDMAJELIS +'</option>');
        });
      }
    });
  });

  // Event Change
  $(document).on('change', '#filter-rumpun', function() {
    const value = $(this).val();

    table
      .columns(4).search(value)
      .draw();
  });

  // Delete
  $(document).on('click', '#btn-trash-anggota', function(e) {
      e.preventDefault();

      swal.fire({
        title: "Yakin Mau Hapus Data Ini?",
        icon: "info",
        confirmButtonText: "YA",
        cancelButtonText: "BATAL",
        showCancelButton: true,
      }).then((result) => {
        if(result.isConfirmed) {
          const url = $(this).attr('href');
          const self = $(this);

          $.ajax({
            type: 'GET',
            url: url,
            success: function(res) {
              if(res.success) {
                // Remove selected Data
                table.row(self.parents('tr')).remove().draw();

                swal.fire(
                  'Sukses',
                  res.message,
                  'success'
                )
              }
            }
          });
        }
      });
    })
</script>
@endsection