<?php use App\Helpers\Helper;
$isConfirmed = in_array($booking['status'], ['approved','checked_in','checked_out']);
$isPaid = in_array($booking['payment_status'], ['paid','partial']);
$isAwaitingPayment = !$isConfirmed && !$isPaid;
$phone   = $settings['company_phone']  ?? '';
$phone2  = $settings['company_phone2'] ?? '';
$whatsapp = $settings['whatsapp_number'] ?? $phone;
$waLink  = 'https://wa.me/' . preg_replace('/[^0-9]/', '', $whatsapp) . '?text=' . urlencode('Hello, I have made a booking. Ref: '.$booking['booking_ref'].'. Please confirm my payment.');
?>
<section class="page-header">
  <div class="container">
    <h1 class="fw-700 mb-1">Complete Your Booking</h1>
    <nav aria-label="breadcrumb"><ol class="breadcrumb mb-0">
      <li class="breadcrumb-item"><a href="<?= APP_URL ?>/">Home</a></li>
      <li class="breadcrumb-item active">Booking Confirmation</li>
    </ol></nav>
  </div>
</section>

<section class="py-5" style="background:#f8fafc">
  <div class="container">
    <div class="row g-4 justify-content-center">

      <!-- LEFT: Payment Instructions -->
      <div class="col-lg-7">

        <!-- Step indicator -->
        <div class="d-flex align-items-center gap-3 mb-4">
          <div class="d-flex align-items-center gap-2">
            <div class="rounded-circle d-flex align-items-center justify-content-center fw-700 text-white" style="width:32px;height:32px;background:#16a34a;font-size:.85rem">✓</div>
            <span class="small fw-600" style="color:#16a34a">Booking Submitted</span>
          </div>
          <div style="flex:1;height:2px;background:#e2e8f0"></div>
          <div class="d-flex align-items-center gap-2">
            <div class="rounded-circle d-flex align-items-center justify-content-center fw-700 text-white" style="width:32px;height:32px;background:<?= $isPaid?'#16a34a':'#f59e0b' ?>;font-size:.85rem"><?= $isPaid ? '✓' : '2' ?></div>
            <span class="small fw-600" style="color:<?= $isPaid?'#16a34a':'#92400e' ?>">Pay Booking Fee</span>
          </div>
          <div style="flex:1;height:2px;background:#e2e8f0"></div>
          <div class="d-flex align-items-center gap-2">
            <div class="rounded-circle d-flex align-items-center justify-content-center fw-700 text-white" style="width:32px;height:32px;background:<?= $isConfirmed || $isPaid ? '#16a34a' : '#e2e8f0' ?>;color:<?= $isConfirmed || $isPaid ? '#fff' : '#94a3b8' ?>;font-size:.85rem"><?= $isConfirmed || $isPaid ? '✓' : '3' ?></div>
            <span class="small fw-600" style="color:<?= $isConfirmed || $isPaid ? '#16a34a' : '#94a3b8' ?>">Booking Confirmed</span>
          </div>
        </div>

        <?php if ($isAwaitingPayment && !$isPaid): ?>
        <!-- Payment Instructions -->
        <div class="card border-0 shadow-sm mb-4">
          <div class="card-body p-4">
            <div class="d-flex align-items-center gap-3 mb-4">
              <div class="d-flex align-items-center justify-content-center rounded-circle" style="width:56px;height:56px;background:#fef3c7">
                <i class="bi bi-credit-card-2-front-fill" style="font-size:1.6rem;color:#d97706"></i>
              </div>
              <div>
                <h4 class="fw-800 mb-0" style="color:#92400e">Payment Required</h4>
                <p class="mb-0 text-muted small">Your booking is reserved but <strong>not confirmed</strong> until payment is received.</p>
              </div>
            </div>

            <div class="alert alert-warning border-0 rounded-3 mb-4" style="background:#fffbeb">
              <i class="bi bi-info-circle-fill me-2 text-warning"></i>
              Please complete payment using any method below, then send your payment proof to us via WhatsApp or phone so we can confirm your booking.
            </div>

            <!-- Mobile Money — dynamic from admin settings -->
            <?php
            $mobileVendors = [
              'vodacom_mpesa' => ['label'=>'M-Pesa (Vodacom)', 'icon'=>'bi-phone',       'color'=>'#e30613', 'numKey'=>'vodacom_mpesa_number'],
              'airtel'        => ['label'=>'Airtel Money',     'icon'=>'bi-reception-4',  'color'=>'#ff0000', 'numKey'=>'airtel_number'],
              'mixx'          => ['label'=>'Tigo Pesa / Mixx', 'icon'=>'bi-phone-vibrate','color'=>'#0066cc', 'numKey'=>'mixx_number'],
              'halopesa'      => ['label'=>'HaloPesa',         'icon'=>'bi-phone-fill',   'color'=>'#1a7a4a', 'numKey'=>'halopesa_number'],
              'tpesa'         => ['label'=>'T-Pesa (TTCL)',    'icon'=>'bi-phone',        'color'=>'#6366f1', 'numKey'=>'tpesa_number'],
              'azampesa'      => ['label'=>'Azam Pesa',        'icon'=>'bi-wallet2',      'color'=>'#ff6600', 'numKey'=>'azampesa_number'],
            ];
            $activeVendors = [];
            foreach ($mobileVendors as $vid => $vinfo) {
              if (($settings[$vid.'_enabled'] ?? '0') === '1') {
                $number = trim($settings[$vinfo['numKey']] ?? '');
                if (!$number) $number = trim($settings['company_phone'] ?? '');
                if ($number) $activeVendors[] = $vinfo + ['number' => $number];
              }
            }
            ?>
            <?php if ($activeVendors): ?>
            <h6 class="fw-700 mb-3" style="color:#1a3c5e"><i class="bi bi-phone-fill me-2"></i>Mobile Money</h6>
            <div class="row g-3 mb-4">
              <?php foreach ($activeVendors as $m): ?>
              <div class="col-md-6">
                <div class="d-flex align-items-center gap-3 p-3 rounded-3 border" style="background:#fafafa">
                  <div class="rounded-circle d-flex align-items-center justify-content-center flex-shrink-0" style="width:42px;height:42px;background:<?= $m['color'] ?>20">
                    <i class="bi <?= $m['icon'] ?>" style="color:<?= $m['color'] ?>;font-size:1.2rem"></i>
                  </div>
                  <div class="flex-grow-1 overflow-hidden">
                    <div class="fw-700 small"><?= Helper::e($m['label']) ?></div>
                    <div class="fw-800 text-truncate" style="color:<?= $m['color'] ?>;letter-spacing:.03em;font-size:.95rem"><?= Helper::e($m['number']) ?></div>
                  </div>
                  <a href="tel:<?= preg_replace('/[^0-9+]/', '', $m['number']) ?>" class="btn btn-sm flex-shrink-0" style="background:<?= $m['color'] ?>20;color:<?= $m['color'] ?>;border:none;font-size:.75rem">Call</a>
                </div>
              </div>
              <?php endforeach; ?>
            </div>
            <?php endif; ?>

            <!-- Bank Transfer -->
            <h6 class="fw-700 mb-3" style="color:#1a3c5e"><i class="bi bi-bank me-2"></i>Bank Transfer</h6>
            <div class="p-3 rounded-3 border mb-4" style="background:#fafafa">
              <?php if (!empty($settings['payment_bank_name']) || !empty($settings['payment_account_number'])): ?>
              <div class="row g-2">
                <?php if (!empty($settings['payment_bank_name'])): ?>
                <div class="col-6"><div class="small text-muted">Bank</div><div class="fw-700"><?= Helper::e($settings['payment_bank_name']) ?></div></div>
                <?php endif; ?>
                <?php if (!empty($settings['payment_account_name'])): ?>
                <div class="col-6"><div class="small text-muted">Account Name</div><div class="fw-700"><?= Helper::e($settings['payment_account_name']) ?></div></div>
                <?php endif; ?>
                <?php if (!empty($settings['payment_account_number'])): ?>
                <div class="col-12"><div class="small text-muted">Account Number</div><div class="fw-800 fs-5" style="letter-spacing:.08em"><?= Helper::e($settings['payment_account_number']) ?></div></div>
                <?php endif; ?>
              </div>
              <?php else: ?>
              <p class="mb-0 text-muted small"><i class="bi bi-info-circle me-1"></i>Contact us for bank account details.</p>
              <?php endif; ?>
            </div>

            <!-- Cash -->
            <h6 class="fw-700 mb-3" style="color:#1a3c5e"><i class="bi bi-cash-stack me-2"></i>Cash Payment</h6>
            <div class="p-3 rounded-3 border mb-4" style="background:#fafafa">
              <p class="mb-1 small text-muted">Visit our office to pay in cash. Bring your booking reference:</p>
              <div class="fw-800" style="font-size:1.1rem;letter-spacing:.05em;color:#1a3c5e"><?= Helper::e($booking['booking_ref']) ?></div>
              <?php if (!empty($settings['company_address'])): ?>
              <div class="small text-muted mt-1"><i class="bi bi-geo-alt me-1"></i><?= Helper::e($settings['company_address']) ?></div>
              <?php endif; ?>
            </div>

            <!-- After payment -->
            <div class="rounded-3 p-4" style="background:linear-gradient(135deg,#1a3c5e,#2563eb)">
              <h6 class="fw-700 text-white mb-2"><i class="bi bi-whatsapp me-2"></i>After Payment — Send Proof</h6>
              <p class="small mb-3" style="color:rgba(255,255,255,.8)">Once you have paid, send your payment screenshot or receipt to us on WhatsApp with your booking reference <strong style="color:#fbbf24"><?= Helper::e($booking['booking_ref']) ?></strong>.</p>
              <div class="d-flex gap-2 flex-wrap">
                <a href="<?= $waLink ?>" target="_blank" class="btn btn-success fw-700 px-4">
                  <i class="bi bi-whatsapp me-2"></i>Send via WhatsApp
                </a>
                <?php if ($phone): ?>
                <a href="tel:<?= preg_replace('/[^0-9+]/','',$phone) ?>" class="btn btn-outline-light fw-600">
                  <i class="bi bi-telephone me-2"></i>Call Us
                </a>
                <?php endif; ?>
              </div>
            </div>
          </div>
        </div>
        <?php else: ?>
        <!-- Already paid / confirmed -->
        <div class="card border-0 shadow-sm mb-4">
          <div class="card-body p-4 text-center">
            <div class="d-inline-flex align-items-center justify-content-center rounded-circle mb-3" style="width:80px;height:80px;background:#dcfce7">
              <i class="bi bi-check-circle-fill text-success" style="font-size:2.5rem"></i>
            </div>
            <h4 class="fw-800 text-success mb-2">Payment Received!</h4>
            <p class="text-muted">Your booking has been confirmed. Our team will contact you shortly with move-in details.</p>
          </div>
        </div>
        <?php endif; ?>

        <div class="d-flex gap-3 flex-wrap">
          <a href="<?= APP_URL ?>/residences" class="btn btn-outline-primary px-4"><i class="bi bi-buildings me-2"></i>Browse Properties</a>
          <a href="<?= APP_URL ?>/" class="btn btn-outline-secondary px-4"><i class="bi bi-house me-2"></i>Go Home</a>
        </div>
      </div>

      <!-- RIGHT: Booking Summary -->
      <div class="col-lg-4">
        <div class="card border-0 shadow-sm sticky-top" style="top:80px">
          <div class="card-header border-0 fw-700 py-3 px-4" style="background:#1a3c5e;color:#fff;border-radius:12px 12px 0 0">
            <i class="bi bi-receipt me-2"></i>Booking Summary
          </div>
          <div class="card-body p-4">
            <div class="mb-3 pb-3 border-bottom">
              <div class="small text-muted mb-1">Booking Reference</div>
              <div class="fw-800 fs-5" style="color:#1a3c5e;letter-spacing:.04em"><?= Helper::e($booking['booking_ref']) ?></div>
            </div>
            <div class="row g-3 mb-3">
              <div class="col-12">
                <div class="small text-muted">Property</div>
                <div class="fw-700"><?= Helper::e($booking['property_name']) ?></div>
              </div>
              <div class="col-6">
                <div class="small text-muted">Unit</div>
                <div class="fw-700"><?= Helper::e($booking['unit_number']) ?></div>
              </div>
              <div class="col-6">
                <div class="small text-muted">Status</div>
                <?= Helper::statusBadge($booking['status']) ?>
              </div>
              <div class="col-6">
                <div class="small text-muted">Name</div>
                <div class="fw-600 small"><?= Helper::e($booking['visitor_name']) ?></div>
              </div>
              <div class="col-6">
                <div class="small text-muted">Phone</div>
                <div class="fw-600 small"><?= Helper::e($booking['visitor_phone'] ?? '—') ?></div>
              </div>
              <?php if ($booking['desired_move_in']): ?>
              <div class="col-6">
                <div class="small text-muted">Move-in</div>
                <div class="fw-600 small"><?= Helper::date($booking['desired_move_in']) ?></div>
              </div>
              <?php endif; ?>
              <?php if ($booking['desired_lease_period']): ?>
              <div class="col-6">
                <div class="small text-muted">Duration</div>
                <div class="fw-600 small"><?= $booking['desired_lease_period'] ?> <?= $booking['lease_period_unit'] ?? 'month' ?>(s)</div>
              </div>
              <?php endif; ?>
            </div>
            <div class="rounded-3 p-3 text-center" style="background:<?= $isAwaitingPayment && !$isPaid ? '#fffbeb' : '#f0fdf4' ?>;border:1px solid <?= $isAwaitingPayment && !$isPaid ? '#fde68a' : '#bbf7d0' ?>">
              <div class="small fw-600 mb-1" style="color:<?= $isAwaitingPayment && !$isPaid ? '#92400e' : '#15803d' ?>">
                <i class="bi bi-<?= $isAwaitingPayment && !$isPaid ? 'clock' : 'check-circle-fill' ?> me-1"></i>
                <?= $isAwaitingPayment && !$isPaid ? 'Awaiting Payment' : 'Payment Confirmed' ?>
              </div>
              <div class="text-muted small">
                <?= $isAwaitingPayment && !$isPaid
                  ? 'Pay using any method to confirm your reservation.'
                  : 'Your booking is confirmed.' ?>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>
