@extends('pwa.template.app.main')

@push('scripts')
  @if (session('success'))
    <script>
      Swal.fire({
        icon: 'success',
        title: 'Sukses',
        text: "{{ session('success') }}",
      })
    </script>
  @elseif(session('failed'))
    <script>
      Swal.fire({
        icon: 'error',
        title: 'Gagal Melakukan Pembayaran',
        text: "{{ session('failed') }}",
      })
    </script>
  @endif
  <script>
    $('.dropify').dropify({
      tpl: {
        message: '<div class="dropify-message"><span class="file-icon" /></div>',
      }
    });
  </script>
@endpush

@section('app-content')
  <div class="col-lg-5 mx-auto pt-3 pb-4">
    @if ($pelanggan_wifi->status == 'berlangganan')
      @if ($waktunya_bayar)
        {{-- TAGIHAN CARD --}}
        <div class="card mb-3">
          <div class="card-header bg-white">
            <h5 class="mb-0">Tagihan Bulan Ini</h5>
          </div>
          <div class="card-body text-center">
            <h2 class="mb-4">Rp. {{ number_format($pelanggan_wifi->pilihan_paket->total_tagihan(), 0, 0, '.') }}</h2>

            <button class="btn btn-primary w-100" type="button" data-bs-toggle="modal"
              data-bs-target="#modal-bayar">Bayar</button>
          </div>

        </div>


        {{-- modal bayar --}}
        <div class="modal fade" id="modal-bayar" tabindex="-1" aria-labelledby="modal-bayarLabel" 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="modal-bayarLabel">Konfirmasi Pembayaran</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                Yakin Melakukan Pembayaran ?
              </div>
              <div class="modal-footer">
                <form action="{{ route('wifi.bayar', $pelanggan_wifi->id) }}" method="post">
                  @csrf
                  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                  <button type="submit" class="btn btn-primary">Bayar</button>
                </form>
              </div>
            </div>
          </div>
        </div>
      @else
        <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
        <div class="card mb-3">
          {{-- <div class="card-header bg-info">
            <h5 class="text-center mb-0">Tagihan Bulan Ini Lunas</h5>
          </div> --}}
          <div class="card-body">
            <h5 class="text-center">Tagihan Bulan Ini Lunas</h5>
            <lottie-player src="https://assets10.lottiefiles.com/packages/lf20_uu0x8lqv.json" background="transparent"
              speed="1" style="width: 100%; height: 300px;" autoplay></lottie-player>
          </div>
        </div>
      @endif
    @endif
    <div class="card">
      <div class="card-header bg-white">
        <div class="d-flex justify-content-between">
          <h4 class="mb-0">Detail Pelanggan Wifi</h4>
          <div>
            @switch($pelanggan_wifi->status)
              @case('pending')
                <span class="badge rounded-pill text-bg-warning">Pending</span>
              @break

              @case('berlangganan')
                <span class="badge rounded-pill text-bg-success">Berlangganan</span>
              @break

              @case('expired')
                <span class="badge rounded-pill text-bg-warning">Expired</span>
              @break

              @default
            @endswitch
          </div>
        </div>
      </div>
      <div class="card-body">
        <table class="table  table-striped border">
          <tbody>
            <tr>
              <td style="width: 19px; white-space: nowrap;">Paket Yang Dipilih</td>
              <td>:</td>
              <td>{{ $pelanggan_wifi->pilihan_paket->nama }}</td>
            </tr>
            <tr>
              <td style="width: 19px; white-space: nowrap;">Harga</td>
              <td>:</td>
              <td>Rp. {{ number_format($pelanggan_wifi->pilihan_paket->nominal, 0, 0, '.') }}</td>
            </tr>
            <tr>
              <td style="width: 19px; white-space: nowrap;">Biaya Admin</td>
              <td>:</td>
              <td>Rp. {{ number_format($pelanggan_wifi->pilihan_paket->biaya_admin, 0, 0, '.') }}</td>
            </tr>
            <tr>
              <td style="width: 19px; white-space: nowrap;">Jatuh Tempo Tagihan</td>
              <td>:</td>
              <td>Tanggal {{ $pelanggan_wifi->jatuh_tempo_tagihan }} setiap bulan</td>
            </tr>
          </tbody>
        </table>
      </div>

      @if ($pelanggan_wifi->status == 'pending')
        <div class="card-footer">
          <p class="mb-0 text-primary">Pengajuan Wifi Anda Masih Kami Proses, Harap Menunggu</p>
        </div>
      @endif
    </div>

  </div>
@endsection