@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">
        <button type="button" class="btn btn-sm btn-primary" id="create" onclick="addData()">
          <i class="fa fa-plus"></i> TAMBAH BARU
        </button>
        <button type="button" class="btn btn-sm btn-success" onclick="accessData()">
          HAK AKSES
        </button>
        <button type="button" class="btn btn-sm btn-success" onclick="dataYears()">
          TAHUN
        </button>
      </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="row justify-content-center py-sm-3">
        <div class="table-responsive">
          <table id="tbl-database" 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">Nomor Kantor</th>
                  <th class="dt-head-center">Nama Kantor</th>
                  <th class="dt-head-center">Host</th>
                  <th class="dt-head-center">Nama Database</th>
                  <th class="dt-head-center">Lokasi Database</th>
                  <th class="dt-head-center">No. Urut</th>
                  <th class="dt-head-center">Aksi</th>
                </tr>
              </thead>
          </table>
        </div>
      </div>
    </div>
  </div>

  <!-- Modal Create Or Edit  -->
  <div class="modal" id="modal-coe" tabindex="-1" aria-labelledby="modal-coe" aria-modal="true" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div id="block-coe" class="block block-rounded block-mode-fullscreen block-mode-loading-oneui mb-0">
          <div class="block-header block-header-default">
            <h3 class="block-title">Registrasi Koneksi Database</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-8">
                <form action="" id="registration-form">
                  @csrf
                  <div class="row g-3 mb-4">
                    <div class="col-6">
                      <label class="form-label" for="nokant">Nomor Kantor</label>
                      <input type="text" class="form-control" name="nokant" id="nokant">
                    </div>
                    <div class="col-6">
                      <label class="form-label" for="nmkant">Nama Kantor</label>
                      <input type="text" class="form-control" name="nmkant" id="nmkant">
                    </div>
                    <div class="col-6">
                      <label class="form-label" for="nourut">Nomor Urut</label>
                      <input type="text" class="form-control" name="nourut" id="nourut">
                    </div>
                    <div class="col-6">
                      <label class="form-label" for="namadb">Nama Database</label>
                      <input type="text" class="form-control" name="namadb" id="namadb">
                    </div>
                    <div class="col-6">
                      <label class="form-label" for="dirdb">Lokasi Database</label>
                      <input type="text" class="form-control normal-text" name="dirdb" id="dirdb">
                    </div>
                    <div class="col-6">
                      <label class="form-label" for="dirbk">Lokasi Database Thn. Lalu</label>
                      <input type="text" class="form-control normal-text" name="dirbk" id="dirbk">
                    </div>
                    <div class="col-6">
                      <label class="form-label" for="tglreg">Tanggal</label>
                      <input type="date" class="form-control" name="tglreg" id="tglreg">
                      <input type="hidden" name="tgltra" id="tgltra">
                      <input type="hidden" name="tglber" id="tglber">
                    </div>
                    <div class="col-6">
                      <label class="form-label" for="hostname">Hostname</label>
                      <input type="text" class="form-control normal-text" name="hostname" id="hostname">
                    </div>
                    <div class="col-6">
                      <label class="form-label" for="port">Port</label>
                      <input type="text" class="form-control" name="port" id="port">
                    </div>
                    <div class="col-6">
                      <label class="form-label" for="userdb">User Database</label>
                      <input type="text" class="form-control normal-text" name="userdb" id="userdb">
                    </div>
                    <div class="col-6">
                      <label class="form-label" for="paswdb">Password Database</label>
                      <input type="text" class="form-control normal-text" name="paswdb" id="paswdb">
                    </div>
                    <div class="col-6">
                      <label class="form-label" for="repaswdb">Konfirmasi Password Database</label>
                      <input type="text" class="form-control normal-text" name="repaswdb" id="repaswdb">
                    </div>
                    <div class="col-12">
                      <label class="form-label">Aktif</label>
                      <div class="space-x-2 mt-1">
                        <div class="form-check form-check-inline">
                          <input class="form-check-input" type="radio" name="flkant" id="flkant1" value="Y" checked>
                          <label class="form-check-label" for="flkant1">
                            YA
                          </label>
                        </div>
                        <div class="form-check form-check-inline">
                          <input class="form-check-input" type="radio" name="flkant" id="flkant2" value="T">
                          <label class="form-check-label" for="flkant2">
                            TIDAK
                          </label>
                        </div>
                      </div>
                    </div>
                    <div class="col-12 mt-4">
                      <div class="d-flex justify-content-end">
                        <button type="button" class="btn btn-sm btn-primary" onclick="saveData()">
                          <div id="save-spinner" style="display: none;">
                            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" ></span>
                            Loading...
                          </div>
                          <div id="save-submit">{{ strtoupper("Simpan") }}</div>
                        </button>
                      </div>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- End Modal Create Or Edit  -->

  <!-- Modal Hak Akses  -->
  <div class="modal" id="modal-access" tabindex="-1" aria-labelledby="modal-access" aria-modal="true" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div id="block-access" class="block block-rounded block-mode-fullscreen block-mode-loading-oneui mb-0">
          <div class="block-header block-header-default">
            <h3 class="block-title">Hak Akses Database</h3>
            <div class="block-options d-flex justify-content-between">
              <button type="button" 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-3">
                @include('perkakas.database.access')
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- End Modal Hak Akses  -->

  <!-- Modal Tahun  -->
  <div class="modal" id="modal-years" tabindex="-1" aria-labelledby="modal-years" aria-modal="true" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div id="block-years" class="block block-rounded block-mode-fullscreen block-mode-loading-oneui mb-0">
          <div class="block-header block-header-default">
            <h3 class="block-title">Tahun Database</h3>
            <div class="block-options d-flex justify-content-between">
              <button type="button" 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">
                @include('perkakas.database.years')
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- End Modal Tahun  -->
@endsection

@section('js')
<script type='text/javascript'>
  // Init Table Database
  let table = $('#tbl-database').DataTable({
    processing: true,
    serverSide: false,
    autoWidth: false,
    ajax: '{{ url("perkakas/database/") }}',
    columns: [
      {
        data: 'DT_RowIndex',
        name: 'DTROWIDX'
      },
      {
        data: 'NOKANT',
        name: 'NOKANT'
      },
			{
        data: 'NMKANT',
        name: 'NMKANT'
      },
			{
        data: 'HOSTNAME',
        name: 'HOSTNAME'
      },
      {
        data: 'NAMADB',
        name: 'NAMADB'
      },
      {
        data: 'DIRDB',
        name: 'DIRDB'
      },
      {
        data: 'NOURUT',
        name: 'NOURUT'
      },
      {
        data: 'NOKANT',
        name: 'ACTION'
      },
    ],
    columnDefs: [
      {
        targets: 0,
        className: 'dt-body-center',
        width: '60px',
        orderable: false,
        searchable: false
      },
      {
        targets: -1,
        className: 'dt-body-center',
				width: '100px',
        orderable: false,
        searchable: false,
        render: function(data) {
          let button = '<div class="btn-group">';
            button += '<button id="edit" class="btn btn-sm btn-success" onclick="editData(this)">';
            button += '<i class="fa fa-pencil-alt"></i>';
            button += '</button>';
            button += '<button id="delete" class="btn btn-sm btn-danger" data-id="' + data + '" onclick="deleteData(this)">';
            button += '<i class="fa fa-trash-alt"></i>';
            button += '</button>';
            button += '</div>';

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

  // Handle Table On Draw
  table.on('draw', function() {
    reorderNumber();
  });

  // Handle Reset Form
  $('#modal-coe').on('hidden.bs.modal', function () {
		$('#registration-form')[0].reset();
    $('#tgltra').val('');
    $('#tglber').val('');
    $('#nokant').prop('readonly', false);
  });
  
  // Handle Reorder Number
  function reorderNumber() {
    let i = 1;

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

  // Handle Tambah Data
  function addData() {
    One.block('state_loading', '#block-coe');
    showModalCoe();

    $.ajax({
      type: 'GET',
      url: '{{ url("perkakas/database/nourut") }}',
      success: function(res) {
        // console.log(res);
        const nextNumb = res[0].NOURUT + 1;

        $('#nourut').val(nextNumb);
        One.block('state_normal', '#block-coe');
      }
    });
  }

  // Handle Edit Data
  function editData(self) {
    const row = table.row($(self).parents('tr')).data();

    $('#nokant').val(row.NOKANT);
    $('#nokant').prop('readonly', true);
    $('#nmkant').val(row.NMKANT);
    $('#nourut').val(row.NOURUT);
    $('#namadb').val(row.NAMADB);
    $('#dirdb').val(row.DIRDB);
    $('#dirbk').val(row.DIRBK);
    $('#tglreg').val(
      row.TGLREG !== '1899-12-30 00:00:00' && row.TGLREG !== null ?
      row.TGLREG.split(' ')[0] : ''
    );
    $('#tgltra').val(
      row.TGLTRA !== '1899-12-30 00:00:00' && row.TGLTRA !== null ?
      row.TGLTRA.split(' ')[0] : ''
    );
    $('#tglber').val(
      row.TGLBER !== '1899-12-30 00:00:00' && row.TGLBER !== null ?
      row.TGLBER.split(' ')[0] : ''
    );
    $('#hostname').val(row.HOSTNAME);
    $('#port').val(row.PORT);
    $('#userdb').val(row.USERDB);
    $('#paswdb').val(row.PASWDB);
    $('#repaswdb').val(row.PASWDB);
    $('input[name=flkant][value="' + row.FLKANT + '"]').prop('checked', true);
    showModalCoe();
  }

  // Handle Show Modal
  function showModalCoe() {
    $('#modal-coe').modal('show');
  }

  // Handle Close Modal
  function closeModalCoe() {
    $('#modal-coe').modal('hide');
  }

  // Handle Save Data
  function saveData() {
    if(!validateData()) {
      return;
    }

    const params = {
      '_token': $('input[name="_token"]').val(),
      'nokant': $('#nokant').val(),
      'nmkant': $('#nmkant').val(),
      'nourut': $('#nourut').val(),
      'namadb': $('#namadb').val(),
      'dirdb': $('#dirdb').val(),
      'dirbk': $('#dirbk').val(),
      'tglreg': $('#tglreg').val(),
      'tgltra': $('#tgltra').val(),
      'tglber': $('#tglber').val(),
      'hostname': $('#hostname').val(),
      'port': $('#port').val(),
      'userdb': $('#userdb').val(),
      'paswdb': $('#paswdb').val(),
      'flkant': $('input[name=flkant]:checked').val()
    };

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

    // Disabled Button And Show Loading
    app.showSpinner('#save-spinner', '#save-submit', true);

    $.ajax({
      type: 'POST',
      url: '{{ url("perkakas/database/store-or-update") }}/{{ session()->get("kantor") }}',
      data: params,
      success: function(res) {
        // console.log(res);
        if(res.success) {
          table.ajax.url('{{ url("perkakas/database/") }}').load(closeModalCoe, false);

          // Show Notif Success
          swal.fire(
            'Sukses',
            res.message,
            'success'
          );
        }
        else {
            // Show Notif Fails
          swal.fire(
            'Informasi',
            res.message,
            'warning'
          );
        }

        // Enable Button
        app.hideSpinner('#save-spinner', '#save-submit', false);
      },
      error: function(err) {
        console.log(err);
      }
    });
  }

  // Handle Validation Before Saving Data
  function validateData() {
    if($('#nokant').val() === '') {
      document.activeElement.blur();

      swal.fire(
        'Informasi',
        'Tentukan Nomor Kantor!',
        'warning'
      )
      .then(function() {
        $("#nokant").focus();
      });

      return false;
    }

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

      swal.fire(
        'Informasi',
        'Tentukan Nama Kantor!',
        'warning'
      )
      .then(function() {
        $("#nmkant").focus();
      });

      return false;
    }

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

      swal.fire(
        'Informasi',
        'Tentukan Nomor Urut!',
        'warning'
      )
      .then(function() {
        $("#nourut").focus();
      });

      return false;
    }

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

      swal.fire(
        'Informasi',
        'Tentukan Nama Database!',
        'warning'
      )
      .then(function() {
        $("#namadb").focus();
      });

      return false;
    }

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

      swal.fire(
        'Informasi',
        'Tentukan Lokasi Database!',
        'warning'
      )
      .then(function() {
        $("#dirdb").focus();
      });

      return false;
    }

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

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

      return false;
    }

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

      swal.fire(
        'Informasi',
        'Tentukan Hostname!',
        'warning'
      )
      .then(function() {
        $("#host").focus();
      });

      return false;
    }

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

      swal.fire(
        'Informasi',
        'Tentukan Port!',
        'warning'
      )
      .then(function() {
        $("#port").focus();
      });

      return false;
    }

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

      swal.fire(
        'Informasi',
        'Tentukan User Database!',
        'warning'
      )
      .then(function() {
        $("#userdb").focus();
      });

      return false;
    }

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

      swal.fire(
        'Informasi',
        'Tentukan Password!',
        'warning'
      )
      .then(function() {
        $("#paswdb").focus();
      });

      return false;
    }

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

      swal.fire(
        'Informasi',
        'Konfirmasi Password!',
        'warning'
      )
      .then(function() {
        $("#repaswdb").focus();
      });

      return false;
    }

    if($('#paswdb').val() !== $('#repaswdb').val()) {
      document.activeElement.blur();

      swal.fire(
        'Informasi',
        'Konfirmasi Password Tidak Sesuai!',
        'warning'
      )
      .then(function() {
        $("#repaswdb").focus();
      });

      return false;
    }

    return true;
  }

  // Handle Delete Data
  function deleteData(self) {
    swal.fire({
      title: "Yakin Mau Hapus Data Ini?",
      icon: "info",
      confirmButtonText: "YA",
      cancelButtonText: "BATAL",
      showCancelButton: true,
    }).then((result) => {
      if(result.isConfirmed) {
        const id = $(self).data('id');
        const url = '{{ url("perkakas/database") }}/' + id;

        $.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'
              )
            }
            else {
              swal.fire(
                'Informasi',
                res.message,
                'warning'
              )
            }
          }
        });
      }
    });
  };
</script>
@endsection