@extends('layout.user')

@section('title','ভাউচার ব্যালেন্স রিচার্জ')

@section('content')
@php
  $gs = \App\Models\GeneralSetting::first();
  $bg   = $gs->background_color ?: '#f4f6f9';
  $text = $gs->text_color       ?: '#0f172a';
@endphp

<style>
  :root{
    --page-bg: {{ $bg }};
    --ink: {{ $text }};
    --muted:#64748b;
    --ring:#2563eb;
    --card:#ffffff;
    --blue1:#2563eb;
    --blue2:#1d4ed8;
  }

  body{ background:var(--page-bg); }

  .vx-shell{max-width:520px;margin:0 auto;padding:18px 16px 24px;}

  .vx-hero{ text-align:center;margin:14px 0 18px; }

  /* 🔵 Hero pill fully blue */
  .vx-pill{
    display:inline-flex;align-items:center;gap:.55rem;
    padding:10px 16px;border-radius:999px;
    background:linear-gradient(90deg,var(--blue1),var(--blue2));
    color:#fff;font-weight:800;
    box-shadow:0 10px 18px rgba(37,99,235,.25);
    font-size:14px;
    border:1.5px solid var(--blue1);
  }

  .vx-sub{margin-top:10px;color:var(--muted);font-size:13px;font-weight:600}

  /* 🔵 Card */
  .vx-card{
    background:var(--card);
    border-radius:18px;
    box-shadow:0 18px 35px rgba(15,23,42,.10);
    padding:22px 18px 18px;
    border:1.5px solid var(--blue1);
  }

  .vx-icon-wrap{display:flex;justify-content:center;margin-top:2px;margin-bottom:14px;}

  .vx-icon{
    width:64px;height:64px;border-radius:999px;
    background:#dbeafe;
    color:#2563eb;
    display:grid;place-items:center;
    font-size:30px;
    box-shadow:0 10px 18px rgba(37,99,235,.18);
    border:1.5px solid var(--blue1);
  }

  .vx-label{
    display:block;text-align:left;
    color:#1e293b;font-weight:800;
    font-size:14px;margin:0 0 8px
  }

  /* 🔵 Input blue border */
  .vx-input{
    width:100%;
    border:1.5px solid var(--blue1);
    border-radius:12px;
    padding:14px 14px;
    font-size:18px;
    font-weight:800;
    color:var(--ink);
    outline:none;
    transition:.15s;
    background:#fff;
  }

  .vx-input:focus{
    border-color:var(--blue2);
    box-shadow:0 0 0 4px rgba(37,99,235,.18)
  }

  .vx-chip-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    margin:14px 0 18px
  }

  /* 🔵 Chips */
  .vx-chip{
    border:1.5px solid var(--blue1);
    border-radius:12px;
    padding:10px 0;
    text-align:center;
    font-weight:900;
    font-size:13px;
    color:#2563eb;
    background:#fff;
    cursor:pointer;
    transition:.15s;
    user-select:none;
  }

  .vx-chip:hover{
    background:#dbeafe;
  }

  .vx-chip.active{
    background:linear-gradient(90deg,var(--blue1),var(--blue2));
    color:#fff;
    border-color:var(--blue1);
    box-shadow:0 10px 16px rgba(37,99,235,.22)
  }

  /* 🔵 Button */
  .vx-btn{
    width:100%;
    border:1.5px solid var(--blue1);
    border-radius:12px;
    padding:14px 14px;
    font-weight:900;
    color:#fff;
    background:linear-gradient(90deg,var(--blue1),var(--blue2));
    box-shadow:0 14px 24px rgba(37,99,235,.25);
    display:flex;align-items:center;justify-content:center;gap:.6rem;
    transition:.18s;
  }

  .vx-btn:hover{filter:brightness(1.05);transform:translateY(-1px)}
  .vx-btn:active{transform:translateY(0)}
  .vx-btn[disabled]{opacity:.75;pointer-events:none}

  /* 🔵 Alerts */
  .vx-alert{
    padding:10px 12px;
    border-radius:12px;
    font-weight:800;
    font-size:13px;
    margin:0 0 12px;
    text-align:left;
    border:1.5px solid var(--blue1);
  }

  .vx-danger{background:#fee2e2;color:#dc2626}
  .vx-success{background:#dbeafe;color:#1d4ed8}

  @media (max-width:480px){
    .vx-chip-grid{grid-template-columns:repeat(2,1fr)}
  }
</style>

<div class="vx-shell">
  <div class="vx-hero">
    <div class="vx-pill">
      <i class="fas fa-wallet"></i>
      <span>ভাউচার ব্যালেন্স রিচার্জ</span>
    </div>
    <div class="vx-sub">সর্বনিম্ন ৳২০ থেকে শুরু করে যেকোনো পরিমাণ টাকা যুক্ত করতে পারেন</div>
  </div>

  <div class="vx-card">
    <div class="vx-icon-wrap">
      <div class="vx-icon"><i class="fas fa-plus-circle"></i></div>
    </div>

    @if ($errors->any())
      <div class="vx-alert vx-danger"><i class="fas fa-circle-exclamation"></i> {{ $errors->first() }}</div>
    @endif
    @if (session('error'))
      <div class="vx-alert vx-danger"><i class="fas fa-circle-xmark"></i> {{ session('error') }}</div>
    @endif
    @if (session('success'))
      <div class="vx-alert vx-success"><i class="fas fa-circle-check"></i> {{ session('success') }}</div>
    @endif

    <form method="POST" action="{{ route('addmoney.create') }}" id="vx-form">
      @csrf

      <label for="amount" class="vx-label">টাকার পরিমাণ (৳)</label>
      <input
        type="number"
        name="amount"
        id="amount"
        min="20"
        step="1"
        required
        class="vx-input"
        placeholder="সর্বনিম্নঃ ২০৳"
        value="{{ old('amount', 100) }}"
      >

      <div class="vx-chip-grid" id="vx-chips">
        @foreach([200,500,1000,2000] as $a)
          <div class="vx-chip" data-amt="{{ $a }}">{{ $a }}৳</div>
        @endforeach
      </div>

      <button type="submit" class="vx-btn">
        <i class="fas fa-check-circle"></i>
        <span>পেমেন্ট করুন</span>
      </button>
    </form>
  </div>
</div>

<script>
  const chips = document.querySelectorAll('#vx-chips .vx-chip');
  const input = document.getElementById('amount');

  chips.forEach(ch => {
    ch.addEventListener('click', () => {
      chips.forEach(c => c.classList.remove('active'));
      ch.classList.add('active');
      input.value = ch.dataset.amt;
      input.focus();
    });
  });

  input.addEventListener('input', () => {
    chips.forEach(c =>
      (c.dataset.amt === input.value
        ? c.classList.add('active')
        : c.classList.remove('active'))
    );
  });

  document.getElementById('vx-form').addEventListener('submit', function(){
    const btn = this.querySelector('.vx-btn');
    btn.disabled = true;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i><span>প্রসেসিং হচ্ছে...</span>';
  });
</script>
@endsection
