@extends('backoffice.template.app')
@section('script')
  <script>
    $(document).ready(function() {
      $('#table-token').DataTable();
      $('#table-pilihanharga').DataTable();
    });

    function handleKonfirmasi(isiPulsa, url) {
      console.log(isiPulsa);
      console.log(url);
      $('#form-konfirmasi').attr('action', url);
    }

    function handleEdit(pilihanHarga, url) {
      $('#form-edit').attr('action', url);
      $('#nama-edit').val(pilihanHarga.nama);
      $('#nominal-edit').val(pilihanHarga.nominal);
      $('#biaya_admin-edit').val(pilihanHarga.biaya_admin);
      $('#biaya_pemasangan-edit').val(pilihanHarga.biaya_pemasangan);
      $('#deskripsi-edit').val(pilihanHarga.deskripsi);
      console.log(pilihanHarga);
      console.log(url);
    }

    function handleDelete(pilihanHarga, url) {
      $('#form-delete').attr('action', url);
    }
  </script>

  @if (session('success'))
    <script>
      Swal.fire({
        icon: 'success',
        title: 'Sukses',
        text: "{{ session('success') }}",
      })
    </script>
  @endif
@endsection

@section('content')
  <div class="d-flex justify-content-between align-items-center mb-4">
    <nav
      style="--bs-breadcrumb-divider: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='%236c757d'/%3E%3C/svg%3E&quot;);"
      aria-label="breadcrumb" class="fs-5">
      <ol class="breadcrumb mb-0">
        <li class="breadcrumb-item"><a href="">Layanan Digital</a></li>
        <li class="breadcrumb-item"><a class="text-primary">Wifi</a></li>
      </ol>
    </nav>
  </div>
  <div class="card  mb-3">
    <div class="card-header d-flex justify-content-between">
      <h5>Pilihan Paket</h5>
      <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal-create">Tambah Pilihan Paket</button>
    </div>
    <div class="card-body">
      <table class="table table-bordered" id="table-pilihanharga">
        <thead>
          <tr>
            <th>Nama</th>
            <th>Deskripsi</th>
            <th>Nominal</th>
            <th>Biaya Admin</th>
            <th>Biaya Pemasangan</th>
            <th>Total</th>
            <th class="text-center" style="width: 10px;">Action</th>
          </tr>
        </thead>
        <tbody>
          @foreach ($pilihan_pakets as $index => $pilihan_paket)
            <tr>
              <td>{{ $pilihan_paket->nama }}</td>
              <td>{{ $pilihan_paket->deskripsi }}</td>
              <td style="white-space: nowrap">Rp. {{ number_format($pilihan_paket->nominal, 0, 0, '.') }}</td>
              <td style="white-space: nowrap">Rp. {{ number_format($pilihan_paket->biaya_admin, 0, 0, '.') }}</td>
              <td style="white-space: nowrap">Rp. {{ number_format($pilihan_paket->biaya_pemasangan, 0, 0, '.') }}</td>
              <td style="white-space: nowrap">Rp.
                {{ number_format($pilihan_paket->biaya_admin + $pilihan_paket->nominal + $pilihan_paket->biaya_pemasangan, 0, 0, '.') }}
              </td>
              <td style="white-space: nowrap;">
                <button class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#modal-edit"
                  onclick="handleEdit({{ $pilihan_paket }}, '{{ route('backoffice.wifi.pilihanPaket.update', $pilihan_paket->id) }}')"><i
                    class='bx bx-edit'></i></button>
                <button class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#modal-delete"
                  onclick="handleDelete({{ $pilihan_paket }}, '{{ route('backoffice.wifi.pilihanPaket.delete', $pilihan_paket->id) }}')"><i
                    class='bx bx-trash'></i></button>
              </td>
            </tr>
          @endforeach
        </tbody>
      </table>
    </div>
  </div>
  <div class="card mb-3">
    <div class="card-header">
      <h5>Daftar Pengajuan Pelanggan Wifi</h5>
    </div>
    <div class="card-body">
      <div class="table-responsive">
        <table class="table table-bordered" id="table-token">
          <thead>
            <tr>
              <th>#</th>
              <th>ID</th>
              <th>Alamat</th>
              <th>RT</th>
              <th>RW</th>
              <th>Kode Pos</th>
              <th>Foto KTP</th>
              <th>Status</th>
              <th style="width: 19px;">Konfirmasi</th>
            </tr>
          </thead>
          <tbody>
            @foreach ($pengajuan as $index => $pengajuan)
              <tr>
                <td>{{ $index + 1 }}</td>
                <td>{{ $pengajuan->id }}</td>
                <td>{{ $pengajuan->alamat_lengkap }}</td>
                <td>{{ $pengajuan->rt }}</td>
                <td>{{ $pengajuan->rw }}</td>
                <td>{{ $pengajuan->kodepos }}</td>
                <td><img style="width: 90px" src="{{ asset('storage/' . $pengajuan->foto_ktp) }}" alt=""></td>
                <td>
                  <span class="badge rounded-pill bg-warning">Pending</span>
                </td>
                <td class="text-center" style="white-space: nowrap">
                  <button class="btn btn-success p-2" data-bs-toggle="modal" data-bs-target="#modal-konfirmasi"
                    onclick="handleKonfirmasi('{{ $pengajuan }}', '{{ route('backoffice.wifi.konfirmasi', $pengajuan->id) }}')">
                    <i class='bx bx-check-circle' style="vertical-align: text-bottom;"></i>
                    Konfirmasi
                  </button>
                </td>
              </tr>
            @endforeach
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <div class="card ">
    <div class="card-header">
      <h5>Daftar Pelanggan Wifi</h5>
    </div>
    <div class="card-body">
      <div class="table-responsive">
        <table class="table table-bordered" id="table-token">
          <thead>
            <tr>
              <th>ID</th>
              <th>Alamat</th>
              <th>RT</th>
              <th>RW</th>
              <th>Kode Pos</th>
              <th>Foto KTP</th>
              <th style="width: 19px;">Detail</th>
            </tr>
          </thead>
          <tbody>
            @foreach ($pelanggan_wifis as $index => $pelanggan_wifi)
              <tr>
                <td>{{ $pelanggan_wifi->id }}</td>
                <td>{{ $pelanggan_wifi->alamat_lengkap }}</td>
                <td>{{ $pelanggan_wifi->rt }}</td>
                <td>{{ $pelanggan_wifi->rw }}</td>
                <td>{{ $pelanggan_wifi->kodepos }}</td>
                <td><img style="width: 90px" src="{{ asset('storage/' . $pelanggan_wifi->foto_ktp) }}" alt="">
                </td>

                <td class="text-center" style="white-space: nowrap">
                  <a class="btn btn-primary p-2" href="{{ route('backoffice.wifi.detail', $pelanggan_wifi->id) }}">
                    Detail
                  </a>
                </td>
              </tr>
            @endforeach
          </tbody>
        </table>
      </div>
    </div>
  </div>
  {{-- modal create pilihan --}}
  <div class="modal fade" id="modal-create" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="exampleModalLabel">Tambah Pilihan Harga</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form id="form-create" action="{{ route('backoffice.wifi.pilihanPaket') }}" method="post">
            @csrf
            <div class="mb-3">
              <label for="nama" class="form-label">Nama Paket</label>
              <input required type="text" class="form-control" id="nama" name="nama">
            </div>
            <div class="mb-3">
              <label for="nominal" class="form-label">Nominal</label>
              <input required type="text" class="form-control" id="nominal" name="nominal">
            </div>
            <div class="mb-3">
              <label for="biaya_admin" class="form-label">Biaya Admin</label>
              <input required type="text" class="form-control" id="biaya_admin" name="biaya_admin">
            </div>
            <div class="mb-3">
              <label for="biaya_pemasangan" class="form-label">Biaya Pemasangan</label>
              <input required type="text" class="form-control" id="biaya_pemasangan" name="biaya_pemasangan">
            </div>
            <div class="mb-3">
              <label for="deskripsi" class="form-label">Deskripsi</label>
              <textarea required type="text" class="form-control" id="deskripsi" name="deskripsi"></textarea>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="submit" form="form-create" class="btn btn-primary">Simpan</button>
        </div>
      </div>
    </div>
  </div>
  {{-- modal edit pilihan --}}
  <div class="modal fade" id="modal-edit" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="exampleModalLabel">Edit Pilihan Harga</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form id="form-edit" method="post">
            @csrf
            @method('put')
            <div class="mb-3">
              <label for="nama" class="form-label">Nama</label>
              <input required type="text" class="form-control" id="nama-edit" name="nama">
            </div>
            <div class="mb-3">
              <label for="nominal" class="form-label">Nominal</label>
              <input required type="text" class="form-control" id="nominal-edit" name="nominal">
            </div>
            <div class="mb-3">
              <label for="biaya_admin" class="form-label">Biaya Admin</label>
              <input required type="text" class="form-control" id="biaya_admin-edit" name="biaya_admin">
            </div>
            <div class="mb-3">
              <label for="biaya_pemasangan" class="form-label">Biaya Pemasangan</label>
              <input required type="text" class="form-control" id="biaya_pemasangan-edit" name="biaya_pemasangan">
            </div>
            <div class="mb-3">
              <label for="deskripsi-edit" class="form-label">Deskripsi</label>
              <textarea required type="text" class="form-control" id="deskripsi-edit" name="deskripsi"></textarea>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="submit" form="form-edit" class="btn btn-primary">Simpan</button>
        </div>
      </div>
    </div>
  </div>
  {{-- modal delete pilihan --}}
  <div class="modal fade" id="modal-delete" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="exampleModalLabel">Hapus Pilihan Harga</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form id="form-delete" method="post">
            @csrf
            @method('delete')
            Apa Anda Yakin Untuk Menghapus Data Ini ?
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="submit" form="form-delete" class="btn btn-danger">Hapus</button>
        </div>
      </div>
    </div>
  </div>
  {{-- modal konfirmasi --}}
  <div class="modal fade" id="modal-konfirmasi" tabindex="-1" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="exampleModalLabel">Konfirmasi Token Listrik</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form id="form-konfirmasi" method="post">
            @csrf
            Apa Anda yakin Untuk Mengkonfirmasi ?
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="submit" form="form-konfirmasi" class="btn btn-success">Konfirmasi</button>
        </div>
      </div>
    </div>
  </div>
@endsection