@extends('layouts.app')

@section('title', 'Checkout')

@section('content')

<div class="nx-wrap-sm" style="padding-top:24px; padding-bottom:48px;">

    {{-- Page header --}}
    <div style="display:flex; justify-content:space-between; align-items:center;
                flex-wrap:wrap; gap:12px; margin-bottom:24px;">
        <div>
            <h2 style="margin:0 0 6px;">Checkout</h2>
            <p class="nx-muted" style="margin:0;">
                Review your order and complete payment to confirm bookings.
            </p>
        </div>
        <div style="display:flex; gap:10px; flex-wrap:wrap;">
            <a class="nx-btn" href="{{ route('explore') }}">← Add more</a>
            <a class="nx-btn" href="{{ route('advertiser.dashboard') }}">My bookings</a>
        </div>
    </div>

    @if(!$cart || $cart->isEmpty())

    {{-- Empty cart --}}
    <div class="nx-card" style="text-align:center; padding:60px 24px;">
        <div style="font-size:40px; margin-bottom:16px;">🛒</div>
        <h3 style="margin:0 0 10px;">Your cart is empty</h3>
        <p class="nx-muted" style="margin:0 0 24px;">
            Browse inventory and add placements to get started.
        </p>
        <a class="nx-btn nx-btn-primary nx-btn-lg" href="{{ route('explore') }}">
            Explore inventory
        </a>
    </div>

    @else

    <div class="nx-grid-2" style="align-items:start;">

        {{-- ============================================================
             LEFT: Order summary
        ============================================================ --}}
        <div>
            <div class="nx-card" style="margin-bottom:14px;">
                <h3 style="margin:0 0 16px;">Order summary</h3>

                @foreach($cart->items as $item)
                <div class="nx-item" style="margin-bottom:10px;">
                    <div style="display:flex; justify-content:space-between;
                                align-items:flex-start; flex-wrap:wrap; gap:8px;">
                        <div style="flex:1; min-width:160px;">
                            <div style="font-weight:700; font-size:14px; margin-bottom:4px;">
                                {{ $item->placement->name }}
                            </div>
                            <div class="nx-muted" style="font-size:12px; line-height:1.6;">
                                {{ ucfirst($item->booking_type) }} booking ·
                                {{ $item->start_date->format('d M') }} –
                                {{ $item->end_date->format('d M Y') }}
                                ({{ $item->getDurationDays() }} days)
                            </div>
                            @if($item->package_name)
                            <div class="nx-muted" style="font-size:12px;">
                                Package: {{ $item->package_name }}
                            </div>
                            @endif
                            <div style="margin-top:6px;">
                                <span class="nx-badge {{ $item->isInstant()
                                    ? 'nx-badge-good' : 'nx-badge-warn' }}"
                                    style="font-size:11px;">
                                    {{ $item->isInstant() ? '⚡ Instant Book' : '⚖ Offer' }}
                                </span>
                            </div>
                        </div>
                        <div style="text-align:right;">
                            <div style="font-weight:800; font-size:15px;">
                                {{ $item->currency }} {{ number_format($item->subtotal, 0) }}
                            </div>
                            <div class="nx-muted" style="font-size:11px; margin-top:2px;">
                                + {{ $item->currency }}
                                {{ number_format($item->platform_fee, 0) }} fee
                            </div>
                        </div>
                    </div>

                    {{-- Remove item --}}
                    <div style="margin-top:10px;">
                        <form method="POST"
                              action="{{ route('cart.remove', $item) }}"
                              style="display:inline;">
                            @csrf
                            @method('DELETE')
                            <button type="submit"
                                    class="nx-btn nx-btn-sm nx-btn-danger"
                                    data-nx-confirm="Remove this item from cart?">
                                Remove
                            </button>
                        </form>
                    </div>
                </div>
                @endforeach

                {{-- Totals --}}
                <div class="nx-divider"></div>

                <div style="display:flex; flex-direction:column; gap:8px;">
                    <div style="display:flex; justify-content:space-between;
                                font-size:14px;">
                        <span class="nx-muted">Subtotal</span>
                        <span>{{ $cart->currency }}
                            {{ number_format($cart->subtotal, 0) }}</span>
                    </div>
                    <div style="display:flex; justify-content:space-between;
                                font-size:14px;">
                        <span class="nx-muted">Platform fee (10%)</span>
                        <span>{{ $cart->currency }}
                            {{ number_format($cart->platform_fee, 0) }}</span>
                    </div>
                    <div class="nx-divider" style="margin:6px 0;"></div>
                    <div style="display:flex; justify-content:space-between;
                                font-size:18px; font-weight:800;">
                        <span>Total</span>
                        <span>{{ $cart->currency }}
                            {{ number_format($cart->total, 0) }}</span>
                    </div>
                </div>

                <div class="nx-divider"></div>

                <div class="nx-muted" style="font-size:12px; line-height:1.6;">
                    <strong style="color:var(--nx-text);">Payment policy:</strong>
                    Funds are held until proof passes validation.
                    Payout releases to owner after proof is accepted.
                    Disputed payments remain held until resolved.
                </div>
            </div>
        </div>

        {{-- ============================================================
             RIGHT: Payment form
        ============================================================ --}}
        <div>
            <div class="nx-card">
                <h3 style="margin:0 0 16px;">Payment</h3>
                <p class="nx-muted" style="margin:0 0 16px; font-size:13px;">
                    Complete payment to confirm your bookings. Creative upload
                    follows after payment confirmation.
                </p>

                <form method="POST" action="{{ route('checkout.pay') }}">
                    @csrf
                    <input type="hidden" name="cart_id" value="{{ $cart->id }}"/>

                    <label class="nx-label">Payment method</label>
                    <select class="nx-select" name="payment_method" id="payment-method"
                            onchange="togglePaymentFields()">
                        <option value="mpesa_stk">M-Pesa (STK Push)</option>
                        <option value="card">Card (Stripe)</option>
                        <option value="bank_transfer">Bank transfer (invoice)</option>
                    </select>

                    {{-- M-Pesa fields --}}
                    <div id="mpesa-fields">
                        <label class="nx-label">M-Pesa phone number</label>
                        <input class="nx-input" type="tel" name="mpesa_phone"
                               placeholder="+254 7XX XXX XXX"
                               value="{{ auth()->user()->phone }}"/>
                        <div class="nx-muted" style="font-size:12px; margin-top:6px;">
                            You will receive an STK push prompt on your phone.
                        </div>
                    </div>

                    {{-- Card fields --}}
                    <div id="card-fields" style="display:none;">
                        <div class="nx-grid-2">
                            <div>
                                <label class="nx-label">Full name</label>
                                <input class="nx-input" type="text" name="billing_name"
                                       placeholder="Name on card"
                                       value="{{ auth()->user()->name }}"/>
                            </div>
                            <div>
                                <label class="nx-label">Email</label>
                                <input class="nx-input" type="email" name="billing_email"
                                       placeholder="billing@company.com"
                                       value="{{ auth()->user()->email }}"/>
                            </div>
                        </div>
                        <div class="nx-muted" style="font-size:12px; margin-top:8px;
                             padding:10px; border-radius:10px;
                             border:1px solid rgba(124,92,255,.25);
                             background:rgba(124,92,255,.06);">
                            💳 Card payment powered by Stripe.
                            You will be redirected to complete payment securely.
                        </div>
                    </div>

                    {{-- Bank transfer fields --}}
                    <div id="bank-fields" style="display:none;">
                        <div style="margin-top:10px; padding:12px; border-radius:12px;
                             border:1px solid rgba(255,255,255,.10);
                             background:rgba(0,0,0,.15);">
                            <div class="nx-muted" style="font-size:13px; line-height:1.7;">
                                <strong style="color:var(--nx-text);">Bank details:</strong><br/>
                                Bank: Equity Bank Kenya<br/>
                                Account name: Nexus Intelligence Ltd<br/>
                                Account number: XXXX XXXX XXXX<br/>
                                Reference: <strong style="color:var(--nx-text);">
                                    {{ auth()->user()->id }}-CART-{{ $cart->id }}
                                </strong>
                            </div>
                        </div>
                        <label class="nx-label">Your name / company</label>
                        <input class="nx-input" type="text" name="billing_name"
                               value="{{ auth()->user()->company ?? auth()->user()->name }}"/>
                    </div>

                    {{-- Campaign name --}}
                    <div class="nx-divider"></div>
                    <label class="nx-label">Campaign name (optional)</label>
                    <input class="nx-input" type="text" name="campaign_name"
                           placeholder="e.g. Q1 Brand Awareness"/>

                    <label class="nx-label">Campaign brief (optional)</label>
                    <textarea class="nx-textarea" name="campaign_brief" rows="3"
                              placeholder="Brief context for the media owners..."></textarea>

                    <div class="nx-divider"></div>

                    {{-- Total reminder --}}
                    <div style="display:flex; justify-content:space-between;
                                align-items:center; margin-bottom:16px;">
                        <span class="nx-muted">Total to pay</span>
                        <span style="font-size:20px; font-weight:800;">
                            {{ $cart->currency }} {{ number_format($cart->total, 0) }}
                        </span>
                    </div>

                    <button type="submit" class="nx-btn nx-btn-primary nx-btn-lg"
                            style="width:100%; margin-bottom:10px;">
                        Pay & confirm booking
                    </button>

                    <p class="nx-muted" style="font-size:12px; margin:0; text-align:center;">
                        After payment: upload creative → owner deploys →
                        proof upload → report generated.
                    </p>

                </form>
            </div>
        </div>

    </div>
    @endif
</div>

@endsection

@push('scripts')
<script>
    function togglePaymentFields() {
        const method = document.getElementById('payment-method').value;
        document.getElementById('mpesa-fields').style.display =
            method === 'mpesa_stk' ? 'block' : 'none';
        document.getElementById('card-fields').style.display =
            method === 'card' ? 'block' : 'none';
        document.getElementById('bank-fields').style.display =
            method === 'bank_transfer' ? 'block' : 'none';
    }
</script>
@endpush