@extends('layout.master')

@push('plugin-styles')
  <link href="{{ asset('assets/plugins/select2/select2.min.css') }}" rel="stylesheet" />
  <link href="{{ asset('assets/plugins/flatpickr/flatpickr.min.css') }}" rel="stylesheet" />
@endpush

@section('content')
<nav class="page-breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item active" aria-current="page">Signature</li>
  </ol>
</nav>

<div class="row">
  <div class="col-md-12 grid-margin stretch-card">
    <div class="card">
      <div class="card-body">
        <div class="d-flex justify-content-between align-items-end">
          <div class="p-2">
            <h6 class="card-title">List Signature</h6>
          </div>
          <div class="p-2">
            <!-- Tombol trigger modal -->
            <button type="button"
                    class="btn btn-primary"
                    data-bs-toggle="modal"
                    data-bs-target="#addSignatureModal">
              Add
            </button>
          </div>
        </div>
        <div class="table-responsive">
          <table class="table">
            <thead>
              <tr>
                <th class="text-center">No.</th>
                <th class="text-center">Nama Lengkap</th>
                <th class="text-center">NIP</th>
                <th class="text-center">Posisi/Jabatan</th>
                <th class="text-center">Wilayah</th>
                <th class="text-center">Wilayah Kerja/UPT</th>
                <th class="text-center">Action</th>
              </tr>
            </thead>
            <tbody>
                @foreach($data as $item)
              <tr data-id="{{ $item->id }}">
                <th class="text-center">{{ $loop->iteration }}</th>
                <td class="text-center">{{ $item->name }}</td>
                <td class="text-center">{{ $item->nip }}</td>
                <td class="text-center">{{ $item->position }}</td>
                <td class="text-center">{{ $item->wilayah }}</td>
                <td class="text-center">{{ $item->wilayah_kerja ?? '' }}</td>
                <td class="text-center">
                  <div class="d-flex justify-content-center">
                    <button class="btn btn-info btn-edit me-1">
                      <i data-feather="edit" style="width:15px;height:15px"></i>
                    </button>
                    <button class="btn btn-danger btn-delete">
                      <i data-feather="trash" style="width:15px;height:15px"></i>
                    </button>
                  </div>
                </td>
              </tr>
              @endforeach
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Modal: Tambah Signature -->
<div class="modal fade" id="addSignatureModal" tabindex="-1" aria-labelledby="addSignatureModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <form action="{{ route('signature.store') }}" method="POST">
      @csrf
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="addSignatureModalLabel">Tambah Signature</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="mb-3">
            <label for="signatureName" class="form-label">Nama Lengkap</label>
            <input type="text" class="form-control" id="signatureName" name="name" placeholder="Nama Lengkap" required>
          </div>
          <div class="mb-3">
            <label for="signatureNip" class="form-label">NIP</label>
            <input type="text" class="form-control" id="signatureNip" name="nip" data-inputmask-alias="99999999 999999 9 999" placeholder="NIP" required>
          </div>
          <div class="mb-3">
            <label for="signaturePosition" class="form-label">Posisi/Jabatan</label>
        
             <select class="form-select" id="signaturePosition" name="position">
                <option selected>Pilih Jabatan</option>
                <option value="Kepala Balai Besar">Kepala Balai Besar</option>
                <option value="Kepala Balai">Kepala Balai</option>
                <option value="Kepala Bidang KSDA Wilayah">Kepala Bidang KSDA Wilayah</option>
                <option value="Kepala Bidang Teknis">Kepala Bidang Teknis</option>
                <option value="Kepala Seksi">Kepala Seksi</option>
                <option value="Kepala Sub Bagian TU">Kepala Sub Bagian TU</option>
              </select>
              
          </div>
          <div class="mb-3">
            <label for="signatureWilayahKerja" class="form-label">Wilayah Kerja/UPT <small class="text-danger">*Diisi ketika posisi Kepala Seksi Wilayah</small></label>
            <input type="text" class="form-control" id="signatureWilayahKerja" name="wilayah_kerja" placeholder="Wilayah Kerja dalam bentuk angka ROMAWI">
          </div>
          <div class="mb-3">
            <label for="signatureWilayah" class="form-label">Wilayah</label>
            @if(!empty(Auth::user()->wilayah))
             <input type="text" class="form-control" id="signatureWilayah" name="wilayah" value="{{ strtoupper(Auth::user()->wilayah) }}" readonly>
             @else
            <select name="wilayah" id="signatureWilayah" class="form-control js-example-basic-single" required>
              <option value="" selected hidden>Pilih Wilayah</option>
            </select>
            @endif
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
          <button type="submit" class="btn btn-primary">Simpan</button>
        </div>
      </div>
    </form>
  </div>
</div>
@endsection

@push('plugin-scripts')
<script src="{{ asset('assets/plugins/select2/select2.min.js') }}"></script>
<script src="{{ asset('assets/plugins/flatpickr/flatpickr.min.js') }}"></script>
<script src="{{ asset('assets/plugins/bootstrap-maxlength/bootstrap-maxlength.min.js') }}"></script>
<script src="{{ asset('assets/plugins/jquery-validation/jquery.validate.min.js') }}"></script>
<script src="{{ asset('assets/plugins/inputmask/jquery.inputmask.min.js') }}"></script>

@endpush

@push('custom-scripts')
<script src="{{ asset('assets/js/inputmask.js') }}"></script>
<script src="{{ asset('assets/js/select2.js') }}"></script>
<script src="{{ asset('assets/js/flatpickr.js') }}"></script>
<script src="{{ asset('assets/js/bootstrap-maxlength.js') }}"></script>
<script>
$(document).ready(function(){

  $.ajax({
        url: "https://www.emsifa.com/api-wilayah-indonesia/api/provinces.json",
        // url : `/search-province`,
        type: "GET",
        success: function (response) {
            let signatureWilayah = $("#signatureWilayah");

            response.forEach(function (provinsi) {
                signatureWilayah.append(`<option value="${provinsi.name}">${provinsi.name}</option>`);
            });
        },
        error: function () {
            console.error("Error fetching provinsi");
        }
      });
      
  $.ajaxSetup({
    headers: { 
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
         "Authorization": "Bearer " + localStorage.getItem("token"),
    }
  });

  const $modal = $('#addSignatureModal');
  const $form  = $modal.find('form');
  const $tbody = $('table tbody');

  // Reset modal back to “Add” state
  function resetModal() {
    $modal.find('.modal-title').text('Tambah Signature');
    $form.attr('action', '/signature');
    $form.find('input[name="_method"]').remove();
    $form[0].reset();
    $modal.find('.js-example-basic-single').val('').trigger('change');
    $form.find('.is-invalid').removeClass('is-invalid');
  }

  // Build a table row HTML from a signature item
  function buildRow(item) {
    return `
      <tr data-id="${item.id}">
        <th class="text-center">#</th>
        <td class="text-center">${item.name}</td>
        <td class="text-center">${item.nip}</td>
        <td class="text-center">${item.position}</td>
        <td class="text-center">${item.wilayah ?? ''}</td>
        <td class="text-center">${item.wilayah_kerja ?? ''}</td>
        <td class="text-center">
          <button class="btn btn-info btn-sm btn-edit me-1"><i data-feather="edit"></i></button>
          <button class="btn btn-danger btn-sm btn-delete"><i data-feather="trash"></i></button>
        </td>
      </tr>
    `;
  }

  // Re-number the rows
  function refreshRowNumbers() {
    $tbody.find('tr').each((i, tr) => {
      $(tr).find('th').first().text(i + 1);
    });
  }

  // Open “Add” modal
  $('[data-bs-target="#addSignatureModal"]').on('click', resetModal);

  // Create or Update
  $form.on('submit', function(e){
    e.preventDefault();
    const url    = $form.attr('action');
    const method = $form.find('input[name="_method"]').val() || 'POST';
    const data   = $form.serialize();

    $.ajax({ url, method, data })
      .done(function(response){
          
          const item = response.data ?? response;
        
          if (method === 'POST') {
            $tbody.append(buildRow(item));
            showSwal('success', 'Signature berhasil ditambahkan');
          } else {
            const $old = $tbody.find(`tr[data-id="${item.id}"]`);
            $old.replaceWith(buildRow(item));
            showSwal('success', 'Signature berhasil diperbarui');
          }
        
            feather.replace({
              width: 15,
              height: 15
            });
            location.reload();
          refreshRowNumbers();
          $modal.modal('hide');
        })

      .fail(function(){
        // location.reload();
      });
  });

  // Edit button
    $tbody.on('click', '.btn-edit', function(){
      resetModal();
      const $row = $(this).closest('tr');
      const id   = $row.data('id');
    
      Swal.fire({
        title: 'Konfirmasi Edit',
        text:  'Apakah Anda yakin ingin mengubah data ini?',
        icon:  'warning',
        showCancelButton: true,
        confirmButtonText: 'Ya, edit',
        cancelButtonText: 'Batal',
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#6c757d'
      }).then((result) => {
        if (!result.isConfirmed) return;
    
        $.getJSON(`/signature/${id}`)
          .done(function(response){
            // ambil data sebenarnya
            const item = response.data;
    
            $modal.find('.modal-title').text('Edit Signature');
            $form.attr('action', `/signature/${id}`)
                 .append('<input type="hidden" name="_method" value="PUT">');
    
            // sekarang gunakan item.name, item.nip, dst.
            $form.find('[name="name"]').val(item.name);
            $form.find('[name="nip"]').val(item.nip);
            $form.find('[name="position"]').val(item.position);
            $form.find('[name="wilayah"]').val(item.wilayah).trigger('change');
            $form.find('[name="wilayah_kerja"]').val(item.wilayah_kerja);
    
            $modal.modal('show');
            refreshRowNumbers();
          })
          .fail(function(xhr){
            const resp = xhr.responseJSON;
            showSwal('error', resp?.message || 'Gagal memuat data');
          });
      });
    });



  // Delete button
    $tbody.on('click', '.btn-delete', function(){
      const $row = $(this).closest('tr');
      const id   = $row.data('id');
    
      Swal.fire({
        title: 'Konfirmasi Tindakan',
        text:  'Apakah Anda yakin ingin menghapus data ini?',
        icon:  'warning',
        showCancelButton: true,
        confirmButtonText: 'Ya, hapus!',
        cancelButtonText: 'Batal',
        confirmButtonColor: '#d33',
        cancelButtonColor: '#6c757d'
      }).then((result) => {
        if (!result.isConfirmed) return;
    
        // Baru jalankan AJAX delete
        $.ajax({
          url:    `/signature/${id}`,
          method: 'DELETE'
        })
        .done(function(){
          $row.remove();
          refreshRowNumbers();
          // gunakan showSwal untuk toast sukses
          showSwal('success', 'Signature berhasil dihapus');
        })
        .fail(function(xhr){
          const resp = xhr.responseJSON;
          showSwal('error', resp?.message || 'Gagal menghapus data');
        });
      });
    });

  
  

  // Initialize Select2 inside modal
  $modal.find('.js-example-basic-single').select2({
    dropdownParent: $modal,
    width: '100%'
  });

  // Load provinces
  // $.getJSON('https://www.emsifa.com/api-wilayah-indonesia/api/provinces.json')
  //   .done(function(list){
  //     const $sel = $('#signatureWilayah');
  //     list.forEach(p => {
  //       $sel.append(`<option value="${p.name}">${p.name}</option>`);
  //     });
  //   });

  // Render Feather icons
    feather.replace({
      width: 15,
      height: 15
    });
});
</script>

@endpush