@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 class="text-primary">Pelanggan PDAM</a></li>
      </ol>
    </nav>
    <div>
      <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#modal-excel">Import Excel</button>
      <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal-create">Tambah Pelanggan KP-SPAMS
        Banyu
        Langgeng</button>
      <button class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#modal-tarif">Atur Tarif</button>
    </div>
  </div>
  <div class="card px-3 py-4">
    <table class="table table-bordered" id="table-transaksi">
      <thead>
        <tr>
          <th>#</th>
          <th>NIK</th>
          <th>Nama</th>
          <th>Alamat</th>
          <th>ID Pelanggan</th>
          <th>Status</th>
          <th style="width: 19px;">Tagihan</th>
        </tr>
      </thead>
      <tbody>
        @foreach ($pelanggans as $index => $pelanggan)
          <tr>
            <td>{{ $index + 1 }}</td>
            <td>{{ $pelanggan->nik }}</td>
            <td>{{ $pelanggan->nama }}</td>
            <td>{{ $pelanggan->alamat }}</td>
            <td>{{ $pelanggan->id }}</td>
            <td>
              @switch($pelanggan->status_pelanggan())
                @case('dihentikan')
                  <span class="badge rounded-pill bg-warning w-100">Dihentikan</span>
                @break

                @case('diputus')
                  <span class="badge rounded-pill bg-danger w-100">Diputus</span>
                @break

                @default
                  <span class="badge rounded-pill bg-success w-100">Berlangganan</span>
              @endswitch
            </td>
            <td>
              <a href="{{ route('backoffice.pdam.tagihan', $pelanggan->id) }}"
                class="btn btn-primary d-flex align-items-center" style="gap: 5px">

                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                  class="bi bi-eye" viewBox="0 0 16 16">
                  <path
                    d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z" />
                  <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z" />
                </svg>
                <span>Lihat</span>

              </a>
            </td>
          </tr>
        @endforeach
      </tbody>
    </table>
  </div>
  {{-- modal excel --}}
  <div class="modal fade" id="modal-excel" 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 Pelanggan</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form id="form-excel" action="{{ route('backoffice.pdam.excel') }}" method="post"
            enctype="multipart/form-data">
            @csrf
            <label for="file-excel" class="form-label">Input File Excel</label>
            <input name="excel" id="file-excel" type="file" class="dropify" data-height="200"
              data-allowed-file-extensions="xlsx xls" />
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="submit" form="form-excel" class="btn btn-primary" id="submit-excel">Simpan</button>
        </div>
        @push('scripts')
          <script>
            $('#form-excel').submit(function(e) {
              $('#submit-excel').attr('disabled', true);
            });
          </script>
        @endpush
      </div>
    </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">Tambah Pelanggan</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.store') }}" method="post">
            @csrf
            <div class="mb-3">
              <label for="nama" class="form-label">Nama</label>
              <input required type="text" class="form-control" id="nama" name="nama">
            </div>
            <div class="mb-3">
              <label for="nik" class="form-label">NIK</label>
              <input required type="text" class="form-control" id="nik" name="nik">
            </div>
            <div class="mb-3">
              <label for="alamat" class="form-label">Alamat</label>
              <input required type="text" class="form-control" id="alamat" name="alamat">
            </div>
            <div class="mb-3">
              <label for="id" class="form-label">ID Pelanggan</label>
              <input required type="text" class="form-control" id="id" name="id">
            </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 set tarif --}}
  <div class="modal fade" id="modal-tarif" 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">Atur Tarif</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form id="form-tarif" action="{{ route('backoffice.pdam.tarif') }}" method="post">
            @csrf
            <div class="mb-3">
              <label for="tarif_1" class="form-label">Tarif 1</label>
              <div class="input-group">
                <span class="input-group-text">Rp.</span>
                <input required type="number" class="form-control" id="tarif_1" name="tarif_1"
                  value="{{ $tarif->tarif_1 }}">
              </div>
            </div>
            <div class="mb-3">
              <label for="tarif_2" class="form-label">Tarif 2</label>
              <div class="input-group">
                <span class="input-group-text">Rp.</span>
                <input required type="number" class="form-control" id="tarif_2" name="tarif_2"
                  value="{{ $tarif->tarif_2 }}">
              </div>
            </div>
            <div class="mb-3">
              <label for="tarif_2" class="form-label">Beban</label>
              <div class="input-group">
                <span class="input-group-text">Rp.</span>
                <input required type="number" class="form-control" id="beban" name="beban"
                  value="{{ $tarif->beban }}">
              </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-tarif" class="btn btn-primary">Simpan</button>
        </div>
      </div>
    </div>
  </div>
@endsection
@section('script')
  <script>
    $(document).ready(function() {
      $('#table-transaksi').DataTable();
    });
    $('.dropify').dropify({
      tpl: {
        message: '<div class="dropify-message"><span class="file-icon" /></div>',
      }
    });
  </script>
@endsection