@extends('layout.user')

@section('content')
@php
  $primaryBlue   = '#2563eb';
  $secondaryBlue = '#1d4ed8';
  $ink           = '#0f172a';
  $ring          = '#2563eb';   // ✅ সব বর্ডার এখন নীল

  $now = now()->format('d M Y, h:i A');
  $noticeEnabled = (bool) ($noticeEnabled ?? false);
  $noticeTitle = trim((string) ($noticeTitle ?? ''));
  $noticeBody = trim((string) ($noticeBody ?? ''));
  $canWithdraw = (bool) ($canWithdraw ?? true);
  $withdrawBlockMessage = trim((string) ($withdrawBlockMessage ?? ''));
  $withdrawPopup = session('withdraw_success');
  if ($noticeTitle === '') {
    $noticeTitle = 'উইথড্র আপডেট নোটিশ';
  }
  if ($noticeBody === '') {
    $noticeBody = 'উইথড্র সাময়িকভাবে বন্ধ আছে। পরে আবার চেষ্টা করুন।';
  }
@endphp

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/>

<style>
  :root{
    --blue1: {{ $primaryBlue }};
    --blue2: {{ $secondaryBlue }};
    --ink:   {{ $ink }};
  }

  /* ✅ GLOBAL BLUE BORDER SYSTEM */
  .blue-border{
    border:1.5px solid var(--blue1) !important;
  }

  .ring-focus{
    border:1.5px solid var(--blue1) !important;
  }
  .ring-focus:focus{
    outline:0;
    border-color:var(--blue2) !important;
    box-shadow:0 0 0 4px rgba(37,99,235,.18);
  }

  /* Card */
  .bd-card{
    background:#fff;
    border:1.5px solid var(--blue1);
    border-radius:18px;
    box-shadow:0 12px 28px rgba(37,99,235,.08);
  }

  /* Soft alert */
  .bd-soft{
    border:1.5px solid var(--blue1);
    background:#eff6ff;
    border-radius:14px;
  }

  /* Wallet Card */
  .wallet-card{
    background:linear-gradient(135deg,var(--blue1),var(--blue2));
    border-radius:24px;
    padding:30px 20px;
    color:#fff;
    box-shadow:0 10px 25px rgba(37,99,235,.30);
    border:1.5px solid var(--blue1);
    text-align:center;
  }

  /* Withdraw Form Title */
  .form-title-blue{
    background:linear-gradient(90deg,var(--blue1),var(--blue2));
    color:#fff;
    border-radius:14px;
    padding:14px;
  }

  /* Info Box */
  .info-box{
    background:#eff6ff;
    border:1.5px solid var(--blue1);
    border-radius:12px;
    color:#1e40af;
  }

  /* Button */
  .btn-blue{
    background:linear-gradient(90deg,var(--blue1),var(--blue2));
    border:1.5px solid var(--blue1);
    color:#fff;
    font-weight:800;
  }

  /* Popup box border */
  .wd-box{
    border:1.5px solid var(--blue1);
    border-radius:14px;
  }

  .wd-card{
    border:1.5px solid var(--blue1);
  }

  .withdraw-popup-backdrop{
    position:fixed;
    inset:0;
    z-index:1200;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:18px;
    background:rgba(15,23,42,.56);
  }

  .withdraw-popup-card{
    width:min(420px,100%);
    background:#fff;
    border:1.5px solid var(--blue1);
    border-radius:22px;
    overflow:hidden;
    position:relative;
    box-shadow:0 24px 54px rgba(15,23,42,.24);
  }

  .withdraw-popup-head{
    padding:22px 18px 16px;
    text-align:center;
    background:linear-gradient(180deg,#eff6ff 0%,#ffffff 100%);
  }

  .withdraw-popup-badge{
    width:74px;
    height:74px;
    margin:0 auto 12px;
    border-radius:999px;
    display:grid;
    place-items:center;
    color:#fff;
    background:linear-gradient(135deg,var(--blue1),var(--blue2));
    box-shadow:0 14px 28px rgba(37,99,235,.26);
    font-size:28px;
  }

  .withdraw-popup-close{
    position:absolute;
    top:12px;
    right:12px;
    width:36px;
    height:36px;
    border:0;
    border-radius:999px;
    background:#fff;
    color:#475569;
    box-shadow:0 8px 18px rgba(15,23,42,.12);
  }

  .withdraw-popup-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    padding:0 18px 18px;
  }

  .withdraw-popup-box{
    border:1.5px solid #bfdbfe;
    border-radius:14px;
    background:#f8fbff;
    padding:12px;
  }

  .withdraw-popup-label{
    font-size:11px;
    font-weight:700;
    color:#64748b;
    margin-bottom:4px;
  }

  .withdraw-popup-value{
    font-size:14px;
    font-weight:800;
    color:#1e3a8a;
    line-height:1.45;
    word-break:break-word;
  }

  .withdraw-popup-actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    padding:0 18px 20px;
  }

  .withdraw-popup-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:46px;
    border-radius:14px;
    border:1.5px solid var(--blue1);
    font-weight:800;
  }

  .withdraw-popup-btn-ghost{
    background:#fff;
    color:var(--blue1);
  }

  .withdraw-popup-btn-primary{
    background:linear-gradient(90deg,var(--blue1),var(--blue2));
    color:#fff;
  }

  @media (max-width: 480px){
    .withdraw-popup-grid,
    .withdraw-popup-actions{
      grid-template-columns:1fr;
    }
  }

</style>

<div class="max-w-xl mx-auto mt-2 mb-5 px-3">

  @if (session('success'))
    <div class="bd-soft px-4 py-3 mb-4 text-sm text-blue-700">
      <i class="fas fa-check-circle mr-1"></i> {{ session('success') }}
    </div>
  @endif

  @if (session('error'))
    <div class="bd-soft px-4 py-3 mb-4 text-sm text-red-600" style="background:#fef2f2;border-color:#fecaca;color:#b91c1c;">
      <i class="fas fa-exclamation-triangle mr-1"></i> {{ session('error') }}
    </div>
  @endif

  @if ($errors->any())
    <div class="bd-soft px-4 py-3 mb-4 text-sm text-red-600" style="background:#fef2f2;border-color:#fecaca;color:#b91c1c;">
      <div class="font-extrabold mb-1">উইথড্র সাবমিট হয়নি</div>
      @foreach ($errors->all() as $error)
        <div><i class="fas fa-circle-exclamation mr-1"></i> {{ $error }}</div>
      @endforeach
    </div>
  @endif

  <h2 class="text-xl font-extrabold text-blue-600 flex items-center gap-2 mb-3">
    <i class="fas fa-money-check-alt"></i> ওয়ালেট উইথড্র
  </h2>

  <a href="{{ route('withdraw.history') }}"
     class="bd-soft px-4 py-2 mb-4 inline-flex items-center gap-2 text-sm font-semibold text-blue-700">
    <i class="fas fa-clock"></i> উইথড্র হিস্ট্রি দেখুন
  </a>

  @if($noticeEnabled)
    <div class="bd-card p-4 mb-4" style="border-color:#f59e0b;background:#fff7ed;color:#9a3412;">
      <div class="text-base font-extrabold mb-1">{{ $noticeTitle }}</div>
      <div class="text-sm leading-relaxed">{{ $noticeBody }}</div>
    </div>
  @endif

  @if(!$canWithdraw && $withdrawBlockMessage !== '')
    <div class="bd-card p-4 mb-4" style="border-color:#fecaca;background:#fef2f2;color:#b91c1c;">
      <div class="text-base font-extrabold mb-1">উইথড্র সীমাবদ্ধ</div>
      <div class="text-sm leading-relaxed">{{ $withdrawBlockMessage }}</div>
    </div>
  @endif

  <div class="wallet-card mb-3">
    <div>টোটাল ব্যালেন্স</div>
    <div class="text-3xl font-bold mt-2">
      ৳ {{ number_format($balance, 2) }}
    </div>
    <div class="mt-2 text-sm">
      <i class="far fa-clock"></i> {{ $now }}
    </div>
  </div>

  @if(!$noticeEnabled && $canWithdraw)
  <div class="bd-card p-5 space-y-4">

    <h2 class="text-lg font-bold text-center form-title-blue">
      উইথড্র ফর্ম পূরণ করুন
    </h2>

    <form action="{{ route('withdraw.submit') }}" method="POST" id="withdrawForm">
      @csrf

      <div class="space-y-3">

        <div>
          <label class="text-sm font-medium">উইথড্র মেথড</label>
          <select name="method" class="w-full mt-1 rounded-lg px-3 py-2 ring-focus">
            <option value="">-- নির্বাচন করুন --</option>
            @foreach($methods as $method)
              <option value="{{ $method->id }}" @selected((string) old('method') === (string) $method->id)>{{ $method->name }}</option>
            @endforeach
          </select>
          @error('method')
            <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
          @enderror
        </div>

        <div>
          <label class="text-sm font-medium">একাউন্ট টাইপ</label>
          <select name="type" class="w-full mt-1 rounded-lg px-3 py-2 ring-focus">
            <option value="">-- নির্বাচন করুন --</option>
            @foreach($types as $type)
              <option value="{{ $type->id }}" @selected((string) old('type') === (string) $type->id)>{{ $type->name }}</option>
            @endforeach
          </select>
          @error('type')
            <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
          @enderror
        </div>

        <div>
          <label class="text-sm font-medium">নাম্বার</label>
          <input type="text" name="number" value="{{ old('number') }}" placeholder="01XXXXXXXXX" class="w-full mt-1 rounded-lg px-3 py-2 ring-focus">
          @error('number')
            <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
          @enderror
        </div>

        <div>
          <label class="text-sm font-medium">
            উইথড্র এমাউন্ট ({{ number_format($min) }} - {{ number_format($max) }} টাকা)
          </label>
          <input type="number" name="amount" id="amountInput"
                 value="{{ old('amount') }}"
                 placeholder="উইথড্র এমাউন্ট লিখুন"
                  class="w-full mt-1 rounded-lg px-3 py-2 ring-focus">
          @error('amount')
            <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
          @enderror
        </div>

        <div>
          <label class="text-sm font-medium">Account Password</label>
          <input type="password"
                 name="password"
                 autocomplete="current-password"
                 required
                 placeholder="একাউন্ট পাসওয়ার্ড দিন"
                 class="w-full mt-1 rounded-lg px-3 py-2 ring-focus">
          @error('password')
            <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
          @enderror
        </div>

        <div class="info-box p-3 text-sm">
          চার্জ: <strong><span id="chargeAmount">0</span></strong> টাকা <br>
          মোট কাটবে: <strong><span id="totalDeduct">0</span></strong> টাকা
        </div>

        <button type="submit" class="w-full py-3 rounded-lg btn-blue">
          <i class="fas fa-paper-plane mr-1"></i> উইথড্র সাবমিট করুন
        </button>

      </div>
    </form>

  </div>
  @else
    <div class="bd-card p-4 text-center text-sm" style="border-color:#e2e8f0;background:#f8fafc;color:#64748b;">
      @if($noticeEnabled)
        উইথড্র বর্তমানে বন্ধ আছে। পরে আবার চেষ্টা করুন।
      @elseif(!$canWithdraw && $withdrawBlockMessage !== '')
        {{ $withdrawBlockMessage }}
      @else
        উইথড্র বর্তমানে বন্ধ আছে। পরে আবার চেষ্টা করুন।
      @endif
    </div>
  @endif
</div>

@if($withdrawPopup)
  <div id="withdrawSuccessModal" class="withdraw-popup-backdrop" role="dialog" aria-modal="true" aria-labelledby="withdrawSuccessTitle">
    <div class="withdraw-popup-card">
      <button type="button" class="withdraw-popup-close" onclick="closeWithdrawPopup()" aria-label="Close">
        <i class="fas fa-times"></i>
      </button>

      <div class="withdraw-popup-head">
        <div class="withdraw-popup-badge">
          <i class="fas fa-check"></i>
        </div>
        <h3 id="withdrawSuccessTitle" class="text-lg font-extrabold text-slate-900">
          উইথড্র রিকোয়েস্ট নেওয়া হয়েছে
        </h3>
        <p class="mt-2 text-sm text-slate-600 leading-relaxed">
          আপনার রিকোয়েস্ট সফলভাবে জমা হয়েছে। এখন এটি pending অবস্থায় আছে।
        </p>
      </div>

      <div class="withdraw-popup-grid">
        <div class="withdraw-popup-box">
          <div class="withdraw-popup-label">উইথড্র এমাউন্ট</div>
          <div class="withdraw-popup-value">৳ {{ number_format((float) ($withdrawPopup['amount'] ?? 0), 2) }}</div>
        </div>

        <div class="withdraw-popup-box">
          <div class="withdraw-popup-label">মেথড</div>
          <div class="withdraw-popup-value">{{ $withdrawPopup['method'] ?? 'N/A' }}</div>
        </div>

        <div class="withdraw-popup-box">
          <div class="withdraw-popup-label">ট্রানজেকশন আইডি</div>
          <div class="withdraw-popup-value">{{ $withdrawPopup['transaction_id'] ?? 'N/A' }}</div>
        </div>

        <div class="withdraw-popup-box">
          <div class="withdraw-popup-label">সময়</div>
          <div class="withdraw-popup-value">{{ $withdrawPopup['datetime'] ?? $now }}</div>
        </div>
      </div>

      <div class="withdraw-popup-actions">
        <button type="button" class="withdraw-popup-btn withdraw-popup-btn-ghost" onclick="closeWithdrawPopup()">
          ঠিক আছে
        </button>
        <a href="{{ route('withdraw.history') }}" class="withdraw-popup-btn withdraw-popup-btn-primary">
          হিস্ট্রি দেখুন
        </a>
      </div>
    </div>
  </div>
@endif

<script>
  function updateWithdrawSummary(amountValue) {
      const amount = parseFloat(amountValue) || 0;
      const chargePercent = {{ $charge }};
      const charge = (amount * chargePercent / 100).toFixed(2);
      const total = (amount + parseFloat(charge)).toFixed(2);
      document.getElementById('chargeAmount').textContent = charge;
      document.getElementById('totalDeduct').textContent = total;
  }

  const amountInput = document.getElementById('amountInput');
  amountInput?.addEventListener('input', function () {
      updateWithdrawSummary(this.value);
  });

  if (amountInput) {
      updateWithdrawSummary(amountInput.value);
  }

  function closeWithdrawPopup() {
      const modal = document.getElementById('withdrawSuccessModal');
      if (modal) {
          modal.remove();
      }
      document.body.style.overflow = '';
  }

  const withdrawSuccessModal = document.getElementById('withdrawSuccessModal');
  if (withdrawSuccessModal) {
      document.body.style.overflow = 'hidden';

      withdrawSuccessModal.addEventListener('click', function (event) {
          if (event.target === withdrawSuccessModal) {
              closeWithdrawPopup();
          }
      });

      document.addEventListener('keydown', function (event) {
          if (event.key === 'Escape') {
              closeWithdrawPopup();
          }
      }, { once: true });
  }
</script>
@endsection
