@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 Berlangganan Wifi',
        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="container pt-3 pb-5">
    <div class="alert alert-primary" role="alert">
      <h4 class="alert-heading">Anda Belum Berlangganan Wifi !</h4>
      <p>Yuk Berlangganan Wifi dengan Mengisi Form Dibawah Ini. Lalu Memillih Paket Wifi Yang Diinginkan</p>
      <hr>
    </div>
    <form action="{{ route('wifi.store') }}" method="post" enctype="multipart/form-data">
      @csrf
      <div class="card mb-4">
        <div class="card-body">
          <div class="mb-3">
            <label for="alamat_lengkap" class="form-label">Foto KTP</label>
            <input type="file" class="dropify" name="foto_ktp" required />
          </div>
          <div class="mb-3">
            <label for="alamat_lengkap" class="form-label">Alamat Lengkap</label>
            <input type="text" class="form-control" id="alamat_lengkap" aria-describedby="alamat_lengkap" required
              name="alamat_lengkap">
          </div>
          <div class="mb-3">
            <label for="alamat_lengkap" class="form-label">RT/RW</label>
            <div class="input-group">
              <input type="number" aria-label="First name" class="form-control" placeholder="Nomer RT" name="rt">
              <input type="number" aria-label="Last name" class="form-control" placeholder="Nomer RW" name="rw">
            </div>
          </div>
          <div class="mb-3">
            <label for="kodepos" class="form-label">Kode Pos</label>
            <input type="text" class="form-control" id="kodepos" aria-describedby="kodepos" required name="kodepos">
          </div>
          <button class="btn btn-primary w-100 mt-3 " type="submit">Submit</button>
        </div>
      </div>
      <h6>Pilihan Paket</h6>
      <div class="row">
        @foreach ($pilihan_pakets as $index => $pil_paket)
          <div class="col-12 mb-2">
            <label class="card" for="{{ $index }}">
              <div class="card-header bg-white">
                <h5 class="mb-0">{{ $pil_paket->nama }}</h5>
                <small>{{ $pil_paket->deskripsi }}</small>
              </div>
              <div class="card-body d-flex justify-content-between">
                <div>
                  <h6 class="m-0">
                    <input type="radio" name="pilihan_paket" id="{{ $index }}"
                      style="vertical-align: middle; margin-right: 5px" required value="{{ $pil_paket }}">Rp.
                    {{ number_format($pil_paket->nominal, 0, 0, '.') }}
                  </h6>
                  <small>Dikenakan Biaya Pemasangan Rp.
                    {{ number_format($pil_paket->biaya_pemasangan, 0, 0, '.') }} dan Biaya Admin Rp.
                    {{ number_format($pil_paket->biaya_admin, 0, 0, '.') }}</small>
                </div>
                <span class="badge text-bg-primary" style="height: fit-content">Rp.
                  {{ number_format($pil_paket->nominal + $pil_paket->biaya_admin + $pil_paket->biaya_pemasangan, 0, 0, '.') }}</span>
              </div>
            </label>
          </div>
        @endforeach
      </div>
    </form>
  </div>
@endsection