@extends('backoffice.template.app')
@push('scripts')
  @if (session('success'))
    <script>
      Swal.fire({
        icon: 'success',
        title: 'Sukses',
        text: "{{ session('success') }}",
      })
    </script>
  @endif
@endpush
@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>Layanan Digital</a></li>
        <li class="breadcrumb-item"><a href="{{ route('backoffice.pdam') }}">Pelanggan PDAM</a></li>
        <li class="breadcrumb-item"><a class="text-primary">Tagihan PDAM</a></li>
      </ol>
    </nav>
    {{-- <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal-create">Tambah</button> --}}
  </div>
  <div class="card  py-4  ">
    <div class="card-header">
      <div class="d-flex justify-content-between">
        <h4>Biodata Pelanggan</h4>
        <div>
          <h4 class="mb-0"><span class="text-muted">ID Pelanggan :</span> {{ $pelangganpdam->id }}</h4>

        </div>
      </div>
      <div class="d-flex justify-content-between">
        <div class="ms-3">
          <p class="mb-0 fw-bold">Nama</p>
          <p class="mb-3">{{ $pelangganpdam->nama }}</p>
          <p class="mb-0 fw-bold">NIK</p>
          <p class="mb-3">{{ $pelangganpdam->nik }}</p>
          <p class="mb-0 fw-bold">Alamat</p>
          <p class="mb-3">{{ $pelangganpdam->alamat }}</p>
        </div>
        {{-- <div class="alert alert-primary" style="height: fit-content">
          <h5>Tarif 1 : 10000</h5>
          <h5>Tarif 1 : 10000</h5>
        </div> --}}
      </div>
    </div>
    <hr>
    <div class="card-body pt-0">
      <div class="d-flex justify-content-between mb-4">
        <h4 class="mb-0">Riwayat Tagihan</h4>
        <div>
          <button class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#modal-putus">Putus Pelanggan</button>
          <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal-create">Tambah Tagihan</button>
        </div>
      </div>

      <table class="table table-bordered" id="table-transaksi">
        <thead>
          <tr>
            <th style="width: 19px;">#</th>
            <th style="width: 19px;">Meter Awal</th>
            <th style="width: 19px;">Meter Akhir</th>
            <th>Tarif 1</th>
            <th>Tarif 2</th>
            <th>beban</th>
            <th>Nominal</th>
            <th style="width: 19px;">Tanggal Tagihan</th>
            <th class="text-center" style="width: 19px;">Status</th>
            <th style="width: 10px">Action</th>
          </tr>
        </thead>
        <tbody>
          @foreach ($tagihans as $index => $tagihan)
            <tr>
              <td style="white-space: nowrap;">{{ $index + 1 }}</td>
              <td class="text-center" style="white-space: nowrap">{{ $tagihan->meter_awal }}</td>
              <td class="text-center" style="white-space: nowrap">{{ $tagihan->meter_akhir }}</td>
              <td class="{{ $tagihan->meter_akhir - $tagihan->meter_awal <= 15 ? 'bg-label-primary' : '' }}">Rp.
                {{ number_format($tagihan->tarif_1, 0, 0, '.') }}</td>
              <td class="{{ $tagihan->meter_akhir - $tagihan->meter_awal > 15 ? 'bg-label-primary' : '' }}">Rp.
                {{ number_format($tagihan->tarif_2, 0, 0, '.') }}</td>
              <td>Rp. {{ number_format($tagihan->beban, 0, 0, '.') }}</td>
              <td>Rp. {{ number_format($tagihan->nominal, 0, 0, '.') }}</td>
              <td style="white-space: nowrap;">{{ date('d-m-Y', strtotime($tagihan->created_at)) }}</td>
              <td>
                @switch($tagihan->is_lunas)
                  @case(true)
                    <span class="badge rounded-pill bg-success">Lunas</span>
                  @break

                  @case(false)
                    <span class="badge rounded-pill bg-warning">Pending</span>
                  @break
                @endswitch
              </td>
              <td class="text-center">
                <button class="m-auto btn btn-secondary d-flex align-items-center p-2"
                  style="gap: 5px; width: fit-content">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                    class="bi bi-three-dots-vertical" viewBox="0 0 16 16">
                    <path
                      d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" />
                  </svg>
                </button>
              </td>
            </tr>
          @endforeach
        </tbody>
      </table>
    </div>
  </div>
  {{-- modal create --}}
  <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">Tagihan PDAM</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.pdam.tagihan.store', $pelangganpdam->id) }}"
            method="post">
            @csrf
            <div class="mb-3">
              <label for="meter_awal" class="form-label">Meter Awal</label>
              <input required type="number" class="form-control" id="meter_awal" name="meter_awal">
            </div>
            <div class="mb-3">
              <label for="meter_akhir" class="form-label">Meter Akhir</label>
              <input required type="number" class="form-control" id="meter_akhir" name="meter_akhir">
            </div>

            {{-- <div class="mb-3">
              <label for="nominal" class="form-label">Nominal Tagihan</label>
              <div class="input-group">
                <span class="input-group-text" id="basic-addon1">Rp.</span>
                <input type="number" class="form-control bg-white" aria-label="Nominal" aria-describedby="basic-addon1"
                  disabled name="nominal">
              </div>
              <div class="form-text">Nominal Tagihan Terisi Otomatis Berdasarkan Meter Awal, Meter Akhir, Dan Tarif</div>
            </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 putus --}}
  <div class="modal fade" id="modal-putus" 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">Putus Pelanggan</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          Apa Anda Yakin Untuk Memutus Pelanggan Ini ?
        </div>
        <div class="modal-footer">
          <form action="{{ route('backoffice.pdam.pelanggan.putus', $pelangganpdam->id) }}" method="post">
            @csrf
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-danger">Putuskan</button>
          </form>
        </div>
      </div>
    </div>
  </div>
@endsection
@section('script')
  <script>
    function handleNominal(value) {
      console.log(value);
    }
  </script>
@endsection
@push('scripts')
  <script>
    $(document).ready(function() {
      $('#table-transaksi').DataTable();
    });
  </script>
@endpush