@extends('pwa.template.app.main')
@push('scripts')
  <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
  @if (session('success'))
    <script>
      Swal.fire({
        icon: 'success',
        title: 'Sukses Melakukan Pembayaran',
        text: "{{ session('success') }}",
      })
    </script>
  @elseif(session('failed'))
    <script>
      Swal.fire({
        icon: 'error',
        title: 'Gagal Melakukan Pembayaran',
        text: "{{ session('failed') }}",
      })
    </script>
  @endif
@endpush
@section('app-content')
  @if ($total_tagihan == 0)
    <div class="container pt-3 pb-5">
      <div class="mb-3">
        <a class="text-black" href="{{ route('pdam') }}">
          <i class="fa-solid fa-arrow-left me-1"></i> <span>Kembali</span>
        </a>
      </div>
      <div class="card">
        <div class="card-body text-center">
          <h4 class="mb-3">Terimakasih Anda Telah Melakukan Pembayaran Di Bulan ini.</h4>
          <lottie-player src="https://assets9.lottiefiles.com/packages/lf20_atippmse.json" class="m-auto"
            background="transparent" speed="1" style="width: 200px; height: 200px;" autoplay></lottie-player>
        </div>
      </div>
    </div>
  @else
    <div class="container pt-3 pb-5">
      <div class="mb-3">
        <a class="text-black" href="{{ route('pdam') }}">
          <i class="fa-solid fa-arrow-left me-1"></i> <span>Total Tagihan</span>
        </a>
      </div>

      {{-- DETAIL PELANGGAN --}}
      <div class="alert alert-primary ">
        <h4 class="alert-heading mb-0">Info Pelanggan</h4>

        <table class="table mt-3">
          <tbody>
            <tr style="border-bottom: 1px solid #08429838">
              <td class=" fw-bold  py-1" style="font-size: 13.5px">Nama</td>
              <td class=" fw-bold  py-1 text-end" style="font-size: 13.5px">{{ $pelanggan->nama }}</td>
            </tr>
            <tr style="border-bottom: 1px solid #08429838">
              <td class=" fw-bold  py-1" style="font-size: 13.5px">Alamat</td>
              <td class=" fw-bold  py-1 text-end" style="font-size: 13.5px">{{ $pelanggan->alamat }}</td>
            </tr>
            <tr style="border-bottom: 1px solid #08429838">
              <td class=" fw-bold  py-1" style="font-size: 13.5px">ID Pelanggan</td>
              <td class=" fw-bold  py-1 text-end" style="font-size: 13.5px">{{ $pelanggan->id }}</td>
            </tr>

          </tbody>
        </table>

      </div>
      @foreach ($tagihans as $tagihan)
        {{-- TAGIHAN CARD --}}
        <div class="card mb-3">
          <div class="card-header bg-white d-flex justify-content-between">
            <h5 class="mb-0">Total Tagihan</h5>
            <h5 class="mb-0">{{ date_format($tagihan->created_at, 'd M Y') }}</h5>
          </div>
          <div class="card-body text-center" data-bs-toggle="collapse"
            data-bs-target="#detail-tagihan-{{ $tagihan->id }}">
            <h2 class="mb-0">Rp. {{ number_format($tagihan->nominal, 0, 0, '.') }}</h2>

          </div>
          <div class="card-footer border-top-0">
            <button class="btn btn-primary w-100" type="button" data-bs-toggle="modal" data-bs-target="#modal-bayar"
              onclick="handleBayar('{{ route('pdam.tagihan.bayar', $tagihan->id) }}')">Bayar</button>
          </div>
          {{-- DETAIL TAGIHAN --}}
          <div class="collapse" id="detail-tagihan-{{ $tagihan->id }}">
            <hr>
            <div class="card bg-white ">
              <div class="card-header bg-white pb-0 pt-3 border-0">
                <h5 class="mb-0">Detail Tagihan</h5>
              </div>
              <div class="card-body">
                <table class="table table-bordered mb-0">
                  <thead>
                    <tr>
                      <th class="text-center" style="font-size: 12px">Meter Awal</th>
                      <th class="text-center" style="font-size: 12px">Meter Akhir</th>
                      <th class="text-center" style="font-size: 12px">Total Meter</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td class="text-center">{{ $tagihan->meter_awal }}</td>
                      <td class="text-center">{{ $tagihan->meter_akhir }}</td>
                      <td class="text-center">{{ $tagihan->meter_akhir - $tagihan->meter_awal }}</td>
                    </tr>
                  </tbody>
                </table>
                <div>
                  <small>*Total Meter <= 15, Dikenakan Tarif 1</small>
                </div>
                <div>
                  <small>*Total Meter > 15, Dikenakan Tarif 2</small>
                </div>
                <table class="table table-bordered mt-3">
                  <thead>
                    <tr>
                      <th class="text-center" style="font-size: 12px">Tarif 1</th>
                      <th class="text-center" style="font-size: 12px">Tarif 2</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td class="text-center">Rp. {{ number_format($tarif->tarif_1, 0, 0, '.') }}</td>
                      <td class="text-center">Rp. {{ number_format($tarif->tarif_2, 0, 0, '.') }}</td>
                    </tr>
                  </tbody>
                </table>
                <table class="table mt-3">
                  <tbody>
                    <tr>
                      <td class="py-1" style="font-size: 13px">Tagihan </td>
                      <td class="py-1 text-end" style="font-size: 13px">{{ $tagihan->total_meter() }} x Rp.
                        {{ number_format($tagihan->current_tarif(), 0, 0, '.') }}
                      </td>
                    </tr>
                    <tr>
                      <td class="py-1" style="font-size: 13px">Beban</td>
                      <td class="py-1 text-end" style="font-size: 13px">Rp. {{ number_format($beban, 0, 0, '.') }}</td>
                    </tr>
                    <tr>
                      <th class="py-1" style="font-size: 13px">Total Tagihan</th>
                      <th class="py-1 text-end" style="font-size: 13px">Rp.
                        {{ number_format($tagihan->nominal, 0, 0, '.') }}
                      </th>
                    </tr>
                  </tbody>
                </table>
              </div>

            </div>
          </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 id="form-bayar" 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>
      @endforeach
    </div>
  @endif
@endsection
@section('script')
  <script>
    function handleBayar(url) {
      $('#form-bayar').attr('action', url);
    }
  </script>
@endsection