@extends('layouts.master')

@section('title', $paymentTitle ?? ('Payment - ' . $booking->booking_number))

@php
    $amountDue = $amountDueOverride ?? ($booking->balance_due > 0 ? $booking->balance_due : $booking->total_amount);
    $bookingItem = $booking->items->first();
    $policyHtml = $businessSetup?->company_policy;
    $paymentFormAction = $paymentFormAction ?? route('car-rental.transactions.store', $booking->booking_number);
    $stripeIntentUrl = $stripeIntentUrl ?? route('car-rental.transactions.stripe-intent', $booking->booking_number);
    $showAmountPaidFromTransactions = $showAmountPaidFromTransactions ?? true;
@endphp

@section('custom-styles')
    <script src="https://js.stripe.com/v3/"></script>
    <style>
        .payment-shell {
            max-width: 1380px;
            margin: 0 auto;
            padding: 28px 20px 48px;
        }
        .payment-grid {
            display: grid;
            grid-template-columns: 430px minmax(0, 1fr);
            gap: 28px;
            align-items: start;
        }
        .pay-panel,
        .invoice-panel {
            background: #fff;
            border: 1px solid #d8dde6;
            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
        }
        .pay-panel {
            border-radius: 8px;
            overflow: hidden;
        }
        .pay-panel-header {
            background: #F5B754;
            color: #fff;
            padding: 18px 18px;
            font-size: 1rem;
            font-weight: 700;
        }
        .pay-panel-body {
            padding: 22px 18px 20px;
            background: #ececec;
        }
        .field-label {
            display: block;
            font-size: .95rem;
            font-weight: 700;
            color: #3c4858;
            margin-bottom: 10px;
        }
        .pay-input {
            width: 100%;
            height: 52px;
            border: 1px solid #cfd6de;
            border-radius: 6px;
            background: #fff;
            padding: 0 14px;
            font-size: 1rem;
            color: #1f2937;
        }
        .stripe-card-field {
            min-height: 52px;
            border: 1px solid #cfd6de;
            border-radius: 6px;
            background: #fff;
            padding: 14px;
        }
        .card-icons {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin: 12px 0 18px;
        }
        .card-icon {
            min-width: 48px;
            height: 30px;
            border: 1px solid #d4dae2;
            border-radius: 4px;
            background: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: .68rem;
            font-weight: 800;
            color: #47617b;
            padding: 0 8px;
        }
        .pay-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
        }
        .pay-submit {
            width: 100%;
            height: 52px;
            border: 0;
            border-radius: 6px;
            background: #62bc58;
            color: #fff;
            font-size: 1rem;
            font-weight: 800;
            margin-top: 14px;
        }
        .pay-submit:disabled {
            opacity: .7;
        }
        .pay-footer {
            padding: 18px 14px 4px;
            color: #2f3e50;
            font-size: .98rem;
        }
        .pay-footer a {
            color: #1d70b8;
            text-decoration: none;
        }
        .invoice-panel {
            position: relative;
            border-radius: 0;
            padding: 28px 28px 24px;
        }
        .invoice-panel::after {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            width: 42px;
            height: 42px;
            background: linear-gradient(135deg, transparent 49%, #d8dde6 50%, #fff 52%);
        }
        .invoice-top {
            display: flex;
            justify-content: space-between;
            gap: 18px;
            margin-bottom: 26px;
        }
        .invoice-title {
            font-size: 2.1rem;
            font-weight: 800;
            color: #1f2937;
            margin: 0;
        }
        .invoice-company {
            text-align: right;
            font-size: 1.5rem;
            color: #1f2937;
            white-space: nowrap;
        }
        .invoice-meta {
            display: flex;
            justify-content: space-between;
            gap: 18px;
            margin-bottom: 22px;
        }
        .invoice-customer {
            color: #1f2937;
            font-size: 1rem;
            line-height: 1.25;
        }
        .invoice-customer strong {
            display: block;
            margin-bottom: 2px;
        }
        .invoice-totals-box {
            border: 1px solid #bfc7d2;
            border-collapse: collapse;
            min-width: 250px;
        }
        .invoice-totals-box-row {
            display: grid;
            grid-template-columns: 1fr auto;
        }
        .invoice-totals-box-row + .invoice-totals-box-row {
            border-top: 1px solid #bfc7d2;
        }
        .invoice-totals-box-row strong,
        .invoice-totals-box-row span {
            padding: 10px 12px;
            font-size: 1rem;
        }
        .invoice-totals-box-row strong {
            background: #efefef;
        }
        .invoice-table {
            width: 100%;
            border-collapse: collapse;
            border: 1px solid #aeb7c2;
            font-size: 1rem;
        }
        .invoice-table thead th {
            background: #dedede;
            border-bottom: 1px solid #aeb7c2;
            padding: 8px 10px;
            text-align: left;
            color: #1f2937;
        }
        .invoice-table thead th:last-child,
        .invoice-table tbody td:last-child,
        .invoice-table tfoot td:last-child,
        .invoice-table tfoot th:last-child {
            text-align: right;
            white-space: nowrap;
        }
        .invoice-table td,
        .invoice-table th {
            padding: 10px 10px;
            vertical-align: top;
            border-top: 1px solid #aeb7c2;
        }
        .invoice-description {
            font-size: .98rem;
            line-height: 1.3;
        }
        .invoice-side-cell {
            width: 52%;
        }
        .invoice-side-cell p {
            margin: 0 0 8px;
        }
        .balance-row {
            background: #fff3b2;
        }
        .policy-box {
            margin-top: 24px;
            border-top: 1px solid #e5e7eb;
            padding-top: 18px;
            color: #555;
            font-size: .9rem;
            max-height: 260px;
            overflow-y: auto;
        }
        .policy-box p,
        .policy-box ul,
        .policy-box ol {
            margin-bottom: .8rem;
        }
        .payment-alert-inline {
            margin-top: 14px;
        }
        @media (max-width: 1199px) {
            .payment-grid {
                grid-template-columns: 1fr;
            }
            .invoice-top,
            .invoice-meta {
                flex-direction: column;
            }
            .invoice-company {
                text-align: left;
            }
        }
        @media (max-width: 767px) {
            .payment-shell {
                padding: 16px 10px 28px;
            }
            .invoice-panel,
            .pay-panel-body {
                padding: 18px 14px;
            }
            .invoice-title {
                font-size: 1.7rem;
            }
            .pay-row {
                grid-template-columns: 1fr;
            }
        }
    </style>
@endsection

@section('content')

    <div class="page-header parallaxie">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="page-header-box">
                        <h1 class="text-anime-style-3">Payment</h1>
                        <nav class="wow fadeInUp">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                                <li class="breadcrumb-item"><a href="#">/</a></li>
                                <li class="breadcrumb-item active">Payment</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="payment-shell">
        <div class="payment-grid">
            <div>
                <div class="pay-panel">
                    <div class="pay-panel-header">Payment Required</div>
                    <div class="pay-panel-body">
                        <form method="POST" action="{{ $paymentFormAction }}" id="stripePaymentForm">
                            @csrf
                            <input type="hidden" name="payment_method" value="credit_card">
                            <input type="hidden" name="amount" value="{{ number_format($amountDue, 2, '.', '') }}">
                            @if(!empty($booking->booking_number) && $booking->booking_number !== 'Pending Review')
                                <input type="hidden" name="redirect_to" value="{{ route('car-rental.confirmation', $booking->booking_number) }}">
                            @endif
                            <input type="hidden" name="send_notification" value="1">
                            <input type="hidden" name="stripe_payment_intent_id" id="stripePaymentIntentId">
                            <input type="hidden" name="stripe_payment_method_id" id="stripePaymentMethodId">
                            <input type="hidden" name="stripe_last4" id="stripeLast4">
                            <input type="hidden" name="stripe_brand" id="stripeBrand">

                            <div class="mb-4">
                                <label class="field-label" for="cardholderName">Name on Card</label>
                                <input type="text" class="pay-input" name="cardholder_name" id="cardholderName" value="{{ old('cardholder_name', $booking->customer_name) }}" required>
                            </div>

                            <div class="mb-2">
                                <label class="field-label" for="payment-element">Card Number</label>
                                <div id="payment-element" class="stripe-card-field"></div>
                            </div>

                            <div class="card-icons">
                                <span class="card-icon">VISA</span>
                                <span class="card-icon">MC</span>
                                <span class="card-icon">AMEX</span>
                                <span class="card-icon">DISC</span>
                                <span class="card-icon">JCB</span>
                            </div>

                            @if ($errors->any())
                                <div class="alert alert-danger payment-alert-inline">
                                    {{ $errors->first() }}
                                </div>
                            @endif

                            <div id="paymentError" class="alert alert-danger d-none payment-alert-inline"></div>

                            <button type="submit" class="pay-submit" id="payNowBtn">
                                Pay ${{ number_format($amountDue, 2) }} USD
                            </button>
                        </form>
                    </div>
                </div>

                <div class="pay-footer">
                    <div>{{ $businessSetup?->company_name ?: config('app.name') }}</div>
                    @if(filled($businessSetup?->website))
                        <a href="{{ str_starts_with($businessSetup->website, 'http') ? $businessSetup->website : 'https://' . $businessSetup->website }}" target="_blank" rel="noopener noreferrer">
                            {{ preg_replace('#^https?://#', '', $businessSetup->website) }}
                        </a>
                    @endif
                </div>
            </div>

            <div class="invoice-panel">
                <div class="invoice-top">
                    <h1 class="invoice-title">Booking Invoice</h1>
                    <div class="invoice-company">{{ $businessSetup?->company_name ?: config('app.name') }}</div>
                </div>

                <div class="invoice-meta">
                    <div class="invoice-customer">
                        <strong>{{ $booking->customer_name }}</strong>
                        @if($booking->customer_email)
                            <div>{{ $booking->customer_email }}</div>
                        @endif
                        @if($booking->customer_phone)
                            <div>{{ $booking->customer_phone }}</div>
                        @endif
                        @if($booking->customer_address)
                            <div>{{ $booking->customer_address }}</div>
                        @endif
                        <div>
                            {{ collect([$booking->customer_city, $booking->customer_state, $booking->customer_postal_code])->filter()->implode(', ') }}
                        </div>
                        @if($booking->customer_country)
                            <div>{{ $booking->customer_country }}</div>
                        @endif
                    </div>

                    <div class="invoice-totals-box">
                        <div class="invoice-totals-box-row">
                            <strong>Booking Date:</strong>
                            <span>{{ $booking->start_datetime->format('F j, Y') }}</span>
                        </div>
                        <div class="invoice-totals-box-row">
                            <strong>Total (USD):</strong>
                            <span>${{ number_format($booking->total_amount, 2) }}</span>
                        </div>
                    </div>
                </div>

                <table class="invoice-table">
                    <thead>
                    <tr>
                        <th>Product</th>
                        <th colspan="2">Rate</th>
                        <th>Amount</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td class="invoice-description">
                            <strong>{{ $bookingItem?->product_name ?: ($booking->items->first()?->product_name ?? 'Vehicle Booking') }}</strong><br>
                            {{ $booking->start_datetime->format('D M j, Y') }}<br>
                            {{ $booking->start_datetime->format('h:i A') }} - {{ $booking->end_datetime->format('h:i A') }}
                        </td>
                        <td colspan="2">
                            <strong>Qty:</strong> 1 @ ${{ number_format($bookingItem?->unit_price ?: $booking->subtotal, 2) }}
                        </td>
                        <td>${{ number_format($bookingItem?->subtotal ?: $booking->subtotal, 2) }}</td>
                    </tr>
                    <tr>
                        <td rowspan="{{ max(4, count($booking->tax_lines ?? []) + 4) }}" class="invoice-side-cell">
                            <p><strong>Rental Location:</strong> {{ $booking->rental_location }}</p>
                            <p><strong>Is this rental for a Wedding?:</strong> {{ $booking->is_wedding ? 'Yes' : 'No' }}</p>
                            @if($booking->purpose)
                                <p><strong>Purpose:</strong> {{ $booking->purpose }}</p>
                            @endif
                        </td>
                        <th colspan="2">Sub-Total:</th>
                        <td>${{ number_format($booking->subtotal, 2) }}</td>
                    </tr>
                    @foreach(($booking->tax_lines ?? []) as $line)
                        <tr>
                            <td colspan="2">{{ $line['name'] ?? 'Tax/Fee' }}@if(isset($line['percent'])) ({{ rtrim(rtrim(number_format((float) $line['percent'], 2), '0'), '.') }}%) @endif:</td>
                            <td>${{ number_format((float) ($line['amount'] ?? 0), 2) }}</td>
                        </tr>
                    @endforeach
                    <tr>
                        <th colspan="2">Total:</th>
                        <td>${{ number_format($booking->total_amount, 2) }}</td>
                    </tr>
                    <tr>
                        <th colspan="2">Amount Paid:</th>
                        <td>${{ number_format($showAmountPaidFromTransactions ? $booking->transactions->where('type', 'payment')->sum('amount') : 0, 2) }}</td>
                    </tr>
                    <tr class="balance-row">
                        <th colspan="2">Balance Due:</th>
                        <td><strong>${{ number_format($amountDue, 2) }}</strong></td>
                    </tr>
                    </tbody>
                </table>

                @if(filled($policyHtml))
                    <div class="policy-box">
                        {!! $policyHtml !!}
                    </div>
                @endif
            </div>
        </div>
    </div>
@endsection

@section('custom-scripts')
    <script>
        document.addEventListener('DOMContentLoaded', async function () {
            const form = document.getElementById('stripePaymentForm');
            const errorBox = document.getElementById('paymentError');
            const submitBtn = document.getElementById('payNowBtn');
            const amount = parseFloat(form.querySelector('input[name="amount"]').value || '0');

            function showError(message) {
                errorBox.textContent = message;
                errorBox.classList.remove('d-none');
            }

            if (!window.Stripe) {
                showError('Stripe could not be loaded.');
                submitBtn.disabled = true;
                return;
            }

            const intentResponse = await fetch('{{ $stripeIntentUrl }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify({ amount: amount })
            });

            const intentData = await intentResponse.json();
            if (!intentResponse.ok) {
                showError(intentData.message || 'Unable to initialize the payment.');
                submitBtn.disabled = true;
                return;
            }

            const stripe = Stripe(intentData.publishable_key);
            const elements = stripe.elements({ clientSecret: intentData.client_secret });
            const paymentElement = elements.create('payment', {
                paymentMethodOrder: ['card'],
                defaultValues: {
                    billingDetails: {
                        address: {
                            country: 'US'
                        }
                    }
                }
            });
            paymentElement.mount('#payment-element');

            document.getElementById('stripePaymentIntentId').value = intentData.payment_intent_id;

            form.addEventListener('submit', async function (event) {
                event.preventDefault();
                errorBox.classList.add('d-none');
                submitBtn.disabled = true;
                submitBtn.textContent = 'Processing...';

                const cardholderName = document.getElementById('cardholderName').value.trim();

                const result = await stripe.confirmPayment({
                    elements: elements,
                    redirect: 'if_required',
                    confirmParams: {
                        payment_method_data: {
                            billing_details: {
                                name: cardholderName || '{{ addslashes($booking->customer_name) }}',
                                email: '{{ addslashes($booking->customer_email) }}'
                            }
                        }
                    }
                });

                if (result.error) {
                    showError(result.error.message || 'Payment could not be completed.');
                    submitBtn.disabled = false;
                    submitBtn.textContent = 'Pay ${{ number_format($amountDue, 2) }} USD';
                    return;
                }

                const paymentIntent = result.paymentIntent || {};
                const paymentMethod = paymentIntent.payment_method || '';

                document.getElementById('stripePaymentIntentId').value = paymentIntent.id || intentData.payment_intent_id;
                document.getElementById('stripePaymentMethodId').value = paymentMethod;

                form.submit();
            });
        });
    </script>
@endsection