@extends('layouts.user_type.auth')

@section('content')
  <div>
    @if (session('success'))
      <div class="alert alert-success alert-dismissible fade show" role="alert">
        <span class="alert-icon"><i class="ni ni-like-2"></i></span>
        <span class="alert-text"><strong>Success!</strong> Data berhasil ditambahkan!</span>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
    @endif
    <div class="row">
      <div class="col-12">
        <div class="card mb-4 mx-4">
          <div class="card-header pb-0">
            <div class="d-flex flex-row justify-content-between">
              <div>
                <h5 class="mb-0">Pagu Usulan Per Departement</h5>
              </div>
              <!-- Button trigger modal -->
              <a href="#" class="btn bg-gradient-primary btn-sm mb-0" data-bs-toggle="modal"
                data-bs-target="#addPaguModal" type="button">
                <i class="fas fa-plus"></i> Tambah Pagu
              </a>
            </div>
          </div>
          <div class="card-body px-0 pt-0 pb-2">
            <div class="table-responsive p-0">
              <table class="table align-items-center mb-0">
                <thead>
                  <tr>
                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                      No
                    </th>
                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">
                      Departement
                    </th>
                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">
                      Tahun Anggaran
                    </th>
                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                      Total Pagu
                    </th>
                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                      Action
                    </th>
                  </tr>
                </thead>
                <tbody>
                  @forelse ($paguUsulans as $pagu)
                    <tr>
                      <td class="ps-4">{{ $loop->iteration }}</td>
                      <td class="ps-4">{{ $pagu->departement->nm_dpt ?? '-' }}</td>
                      <td class="ps-4">{{ $pagu->tahun_anggaran }}</td>
                      <td class="text-center">Rp {{ number_format($pagu->total_pagu, 0, ',', '.') }}
                      </td>
                      <td class="text-center">
                        <a href="#" class="mx-3" data-bs-toggle="tooltip" data-bs-original-title="Edit pagu"
                          onclick="editPagu({{ $pagu }})">
                          <i class="fas fa-edit text-secondary"></i>
                        </a>
                        <a href="#" class="mx-3" data-bs-toggle="tooltip" data-bs-original-title="Delete pagu"
                          onclick="deletePagu('{{ $pagu->id }}')">
                          <i class="fas fa-trash text-danger"></i>
                        </a>
                      </td>
                    </tr>
                  @empty
                    <tr>
                      <td colspan="6" class="text-center text-muted">Belum ada data pagu usulan</td>
                    </tr>
                  @endforelse
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Modal Tambah/Edit Pagu -->
  <div class="modal fade" id="addPaguModal" tabindex="-1" aria-labelledby="addPaguModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <form id="formPagu" method="POST">
        @csrf
        <input type="hidden" id="methodInput" name="_method" value="POST">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="addPaguModalLabel">Tambah Pagu Usulan</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="departement_id" class="form-label">Departement</label>
              <select name="departement_id" id="departement_id" class="form-control" required>
                <option value="">-- Pilih Departement --</option>
                @foreach ($departements as $dept)
                  <option value="{{ $dept->id }}">{{ $dept->nm_dpt }}</option>
                @endforeach
              </select>
            </div>
            <div class="mb-3">
              <label for="tahun_anggaran" class="form-label">Tahun Anggaran</label>
              <input type="number" name="tahun_anggaran" id="tahun_anggaran" class="form-control"
                value="{{ date('Y') }}" required min="2020" max="2099">
            </div>
            <div class="mb-3">
              <label for="total_pagu" class="form-label">Total Pagu</label>
              <input type="text" name="total_pagu" id="total_pagu" class="form-control"
                placeholder="Rp. 0" required>
            </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('scripts')
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

  <script>
    const formPagu = document.getElementById('formPagu');
    const methodInput = document.getElementById('methodInput');
    const modalTitle = document.getElementById('addPaguModalLabel');
    const totalPaguInput = document.getElementById('total_pagu');

    // Format input total pagu
    totalPaguInput.addEventListener('input', function(e) {
      let value = this.value.replace(/[^0-9]/g, '');
      if (!value) {
        this.value = '';
        return;
      }
      this.value = 'Rp ' + formatRupiah(value);
    });

    function formatRupiah(angka) {
      let number_string = angka.replace(/[^,\d]/g, ''),
        split = number_string.split(','),
        sisa = split[0].length % 3,
        rupiah = split[0].substr(0, sisa),
        ribuan = split[0].substr(sisa).match(/\d{3}/gi);

      if (ribuan) {
        let separator = sisa ? '.' : '';
        rupiah += separator + ribuan.join('.');
      }
      return rupiah;
    }

    function editPagu(pagu) {
      console.log(pagu);
      modalTitle.textContent = 'Edit Pagu Usulan';
      methodInput.value = 'PUT';
      formPagu.action = `/pagu-usulan/${pagu.id}`;

      document.getElementById('departement_id').value = pagu.departement_id;
      document.getElementById('tahun_anggaran').value = pagu.tahun_anggaran;
      document.getElementById('total_pagu').value = 'Rp ' + formatRupiah(pagu.total_pagu.toString());

      const modal = new bootstrap.Modal(document.getElementById('addPaguModal'));
      modal.show();
    }

    function deletePagu(paguId) {
      Swal.fire({
        icon: 'warning',
        title: 'Konfirmasi Hapus',
        text: 'Yakin ingin menghapus pagu ini?',
        showCancelButton: true,
        confirmButtonText: 'Hapus',
        cancelButtonText: 'Batal',
        confirmButtonColor: '#dc3545'
      }).then((result) => {
        if (result.isConfirmed) {
          fetch(`/pagu-usulan/${paguId}`, {
            method: 'DELETE',
            headers: {
              'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
              'Content-Type': 'application/json'
            }
          })
            .then(response => response.json())
            .then(data => {
              if (data.success) {
                Swal.fire({
                  icon: 'success',
                  title: 'Berhasil',
                  text: 'Pagu berhasil dihapus',
                  timer: 1500
                }).then(() => {
                  location.reload();
                });
              } else {
                Swal.fire({
                  icon: 'error',
                  title: 'Gagal',
                  text: data.message || 'Terjadi kesalahan'
                });
              }
            });
        }
      });
    }

    // Reset form ketika modal ditutup
    document.getElementById('addPaguModal').addEventListener('hidden.bs.modal', function() {
      formPagu.reset();
      methodInput.value = 'POST';
      formPagu.action = '{{ route("pagu-usulan.store") }}';
      modalTitle.textContent = 'Tambah Pagu Usulan';
      document.getElementById('tahun_anggaran').value = new Date().getFullYear();
    });
  </script>
@endpush