@extends('user.layouts.app')

@section('title', 'Payment Confirmation')

@section('content')
<div class="container py-4">
    <div class="row justify-content-center">
        <div class="col-lg-9">
            <div class="card shadow-sm border-0">
                <div class="card-header bg-primary text-white">
                    <h4 class="mb-0">
                        <i class="fas fa-credit-card me-2"></i> Payment Confirmation
                    </h4>
                </div>

                <div class="card-body p-4">

                    <!-- Selected Carrier -->
                    <div class="alert alert-info border-0 mb-4">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <h6 class="mb-1 fw-bold">{{ $selectedCarrier['carrier'] }}</h6>
                                <p class="mb-1 small"><strong>SCAC:</strong> {{ $selectedCarrier['scac'] }}</p>
                                <p class="mb-1 small"><strong>Service:</strong> {{ $selectedCarrier['serviceLevelDescription'] ?? $selectedCarrier['serviceLevel'] ?? 'Standard' }}</p>
                                <p class="mb-1 small"><strong>Transit:</strong> {{ $selectedCarrier['transitDays'] ?? 'N/A' }} days</p>
                                <div>
                                    @if($selectedCarrier['isPreferred'] ?? false)
                                        <span class="badge bg-warning text-dark">Preferred</span>
                                    @endif
                                    @if($selectedCarrier['isCarrierOfTheYear'] ?? false)
                                        <span class="badge bg-info ms-1">Carrier of the Year</span>
                                    @endif
                                </div>
                            </div>
                            <div class="text-end">
                                <div class="h3 text-success mb-0">
                                    ${{ number_format($selectedCarrier['customerRate'], 2) }}
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- User Info -->
                    <div class="card mb-4 border">
                        <div class="card-header bg-light">
                            <h5 class="mb-0">
                                <i class="fas fa-user me-2"></i> Your Information
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <p class="mb-1"><strong>Name:</strong> {{ auth()->user()->name }}</p>
                                    <p class="mb-1"><strong>Email:</strong> {{ auth()->user()->email }}</p>
                                </div>
                                <div class="col-md-6">
                                    @if(auth()->user()->phone)
                                        <p class="mb-1"><strong>Phone:</strong> {{ auth()->user()->phone }}</p>
                                    @endif
                                    @if(auth()->user()->address)
                                        <p class="mb-1"><strong>Address:</strong> {{ auth()->user()->address }}</p>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Quote Details -->
                    <div class="card mb-4 border">
                        <div class="card-header bg-light">
                            <h5 class="mb-0">
                                <i class="fas fa-shipping-fast me-2"></i> Shipment Details
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <h6 class="text-success">Pickup</h6>
                                    @if($quote->pickupDetail)
                                        <p class="mb-1">{{ $quote->pickupDetail->address_1 }}</p>
                                        <p class="mb-1">{{ $quote->pickupDetail->city }}, {{ $quote->pickupDetail->state }} {{ $quote->pickupDetail->postal_code }}</p>
                                    @else
                                        <p class="text-muted fst-italic">Not available</p>
                                    @endif
                                </div>
                                <div class="col-md-6">
                                    <h6 class="text-danger">Delivery</h6>
                                    @if($quote->deliveryDetail)
                                        <p class="mb-1">{{ $quote->deliveryDetail->address_1 }}</p>
                                        <p class="mb-1">{{ $quote->deliveryDetail->city }}, {{ $quote->deliveryDetail->state }} {{ $quote->deliveryDetail->postal_code }}</p>
                                    @else
                                        <p class="text-muted fst-italic">Not available</p>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Payment Summary -->
                    <div class="card mb-4 border">
                        <div class="card-header bg-light d-flex justify-content-between align-items-center">
                            <h5 class="mb-0">
                                <i class="fas fa-receipt me-2"></i> Payment Summary
                            </h5>
                            <!-- Stripe Badge -->
                            <div class="d-flex align-items-center bg-white rounded px-3 py-1 shadow-sm">
                                <img src="https://js.stripe.com/v3/fingerprinted/img/stripe-logo-blue-3e7e9d4a.png" 
                                     alt="Stripe" height="20" class="me-2">
                                <span class="small fw-bold">Pay with Stripe</span>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="d-flex justify-content-between mb-2">
                                <span>Carrier Rate:</span>
                                <span>${{ number_format($baseRate, 2) }}</span>
                            </div>

                            @if($markupPercent > 0)
                                <div class="d-flex justify-content-between mb-2 text-primary">
                                    <span>Platform Fee ({{ $markupPercent }}%):</span>
                                    <span>${{ number_format($markupAmount, 2) }}</span>
                                </div>
                            @endif

                            <div class="d-flex justify-content-between mb-2">
                                <span>Tax:</span>
                                <span>$0.00</span>
                            </div>

                            <hr class="my-3">

                            <div class="d-flex justify-content-between align-items-center">
                                <h4 class="mb-0">Total:</h4>
                                <h3 class="text-success mb-0">
                                    ${{ number_format($finalTotal, 2) }}
                                </h3>
                            </div>

                            @if($markupPercent > 0)
                                <small class="text-muted d-block mt-2">
                                    Includes {{ $markupPercent }}% platform service fee
                                </small>
                            @endif
                        </div>
                    </div>

                    <!-- Payment Form -->
                    <form id="paymentForm" 
                          action="{{ route('quotes.payment.process', encrypt($quote->id)) }}" 
                          method="POST" 
                          class="mt-4">
                        @csrf
                        <input type="hidden" name="selected_carrier_index" value="{{ $selectedCarrierIndex }}">

                        <!-- Terms -->
                        <div class="form-check mb-4">
                            <input class="form-check-input" type="checkbox" id="agree_terms" name="agree_terms" required>
                            <label class="form-check-label small" for="agree_terms">
                                I agree to the 
                                <a href="#" target="_blank" class="text-decoration-underline">Terms of Service</a>, 
                                <a href="#" target="_blank" class="text-decoration-underline">Privacy Policy</a>, and 
                                <a href="#" target="_blank" class="text-decoration-underline">Shipping Agreement</a>
                            </label>
                            @error('agree_terms')
                                <div class="text-danger small mt-1">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Action Buttons -->
                        <div class="d-flex justify-content-between align-items-center">
                            <a href="{{ route('quotes.index') }}" class="btn btn-outline-secondary">
                                <i class="fas fa-arrow-left me-2"></i> Back
                            </a>

                            <button type="submit" class="btn btn-success btn-lg px-5">
                                <i class="fas fa-lock me-2"></i>
                                Pay ${{ number_format($finalTotal, 2) }} with Stripe
                            </button>
                        </div>
                    </form>

                    <!-- Security Notice -->
                    <div class="text-center mt-5">
                        <p class="text-muted small">
                            <i class="fas fa-shield-alt text-success me-1"></i>
                            Your payment is secured by <strong>Stripe</strong> — the world's most trusted payment processor.
                            <br>We never store your card details.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    document.getElementById('paymentForm').addEventListener('submit', function(e) {
        const terms = document.getElementById('agree_terms');
        if (!terms.checked) {
            e.preventDefault();
            alert('Please agree to the terms and conditions to proceed.');
            terms.focus();
        }
    });
</script>
@endpush