@extends('pwa.template.app.main')
@section('app-content')
  <div class="container pt-3 pb-5">
    <div class="mb-3 mt-2">
      <h5><b>Pilihan Metode Pembayaran</b></h5>
    </div>
    @if (session('failed'))
      <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <h4 class="alert-heading">Gagal Melakukan Pembelian</h4>
        <p>{{ session('failed') }}</p>
        <hr>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>
    @endif
    {{-- section saldo --}}
    <div class="saldo mb-3"
      style="display: flex; justify-content: space-between; background-color: white; box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 8%); padding: 10px 15px; border-radius: 10px">
      <div class="left">
        <p style="margin-bottom: 0">Saldo Bumdes Anda</p>
        <h3 style="margin-bottom: 0">Rp. {{ number_format(Auth::user()->saldo) }}</h3>

      </div>
      <div class="right" style="display: flex; align-items: center">
        <a href="{{ route('topup') }}">
          <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-plus-square-fill" viewBox="0 0 16 16"
            style="width: 30px; ">
            <path
              d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z" />
          </svg>
        </a>
      </div>
    </div>
    <div class="mt-4">
        <p>Pilih Metode Bayar</p>
    </div>
    <form action="{{ route('checkout.pembayaran.action', $cart->id) }}" method="post" id="form-konfirmasi">
      <div class="row">
        @csrf
        <div class="col-6">
          <div class="single-payment-method" style="position: relative;">
            <input type="radio" required name="metode_pembayaran" value="saldo" id="radio-saldo"
              style="position: absolute; width: 100%; height: 100%;z-index: 9; opacity: 0">
            <a class="" id="saldo-card">
              <i class="fa-solid fa-wallet"></i>
              <h6>Saldo Bumdes</h6>
            </a>
          </div>
        </div>
        <div class="col-6">
          <div class="single-payment-method" style="position: relative;">
            <input type="radio" required name="metode_pembayaran" value="cash" id="radio-cash"
              style="position: absolute; width: 100%; height: 100%;z-index: 9; opacity: 0">
            <a class="credit-card" id="cash-card">
              <i class="fa-solid fa-money-bill-wave"></i>
              <h6>Tunai</h6>
            </a>
          </div>
        </div>
      </div>
      <div class="card mt-4">
        <div class="card-body d-flex justify-content-between align-items-center">
          <div>
            <p class="p-0 m-0">Total Tagihan</p>
            <h1 class="p-0 m-0 fw-bold text-black fs-5">Rp. {{ number_format($cart->harga + $total_ongkir, 0, 0, '.') }}
            </h1>
          </div>
          <div>
            <button type="button" data-bs-toggle="modal" data-bs-target="#modal-konfirmasi"
              class="btn btn-primary">Selesaikan Pembayaran</button>
          </div>
        </div>
      </div>
      {{-- <button class="btn btn-primary w-100 mt-4" type="submit">Konfirmasi</button> --}}
    </form>
  </div>
  <!-- Modal -->
  <div class="modal fade" id="modal-konfirmasi" 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">Konfirmasi Pembelian</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          Yakin Melakukan Pembelian Ini ?
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
          <button type="submit" class="btn btn-primary" form="form-konfirmasi">Konfirmasi</button>
        </div>
      </div>
    </div>
  </div>
@endsection
@push('scripts')
  <script>
    $('#radio-cash').click(function(e) {
      $('#saldo-card').removeClass('active');
      $('#cash-card').addClass('active');
    });
    $('#radio-saldo').click(function(e) {
      $('#cash-card').removeClass('active');
      $('#saldo-card').addClass('active');
    });
  </script>
@endpush