@extends('layouts.seller')

@section('title', 'Checkout - Promotion')

@section('content')
<div class="page-header">
    <div>
        <h4 class="page-title">Checkout</h4>
        <p class="text-muted mb-0">Securely complete your promotion package purchase.</p>
    </div>
</div>

<div class="row">
    <div class="col-lg-8">
        <div class="card border-0 shadow-sm rounded-4 mb-4">
            <div class="card-header bg-white border-bottom p-4">
                <h5 class="mb-0 fw-bold">Select Payment Method</h5>
            </div>
            <div class="card-body p-4">
                <form action="{{ route('seller.promotions.payment.initiate') }}" method="POST" id="payment-form">
                    @csrf
                    <input type="hidden" name="transaction_id" id="transaction_id" value="{{ $transaction->id }}">

                    @php
                        $gateways = [
                            'razorpay' => \App\Models\PromotionSetting::get('razorpay_enabled', false),
                            'paypal' => \App\Models\PromotionSetting::get('paypal_enabled', false),
                            'manual' => \App\Models\PromotionSetting::get('manual_payment_enabled', false),
                        ];
                    @endphp

                    {{-- Razorpay for INR only --}}
                    @if($gateways['razorpay'] && $transaction->currency == 'INR')
                    <div class="card mb-3 payment-method-card border rounded-4" onclick="selectPaymentMethod('razorpay')">
                        <div class="card-body p-3">
                            <div class="form-check custom-radio">
                                <input class="form-check-input" type="radio" name="payment_gateway" id="razorpay" value="razorpay" checked>
                                <label class="form-check-label w-100 ps-2" for="razorpay">
                                    <div class="d-flex align-items-center justify-content-between">
                                        <div>
                                            <strong class="text-dark">Razorpay</strong>
                                            <p class="text-muted small mb-0 mt-1">UPI, Credit/Debit Cards, Net Banking (INR Only)</p>
                                        </div>
                                        <div class="rounded-3 p-2" style="background: #f0f7ff;">
                                            <i class="bi bi-credit-card-2-front fs-3 text-primary"></i>
                                        </div>
                                    </div>
                                </label>
                            </div>
                        </div>
                    </div>
                    @endif

                    {{-- PayPal for USD only --}}
                    @if($gateways['paypal'] && $transaction->currency == 'USD')
                    <div class="card mb-3 payment-method-card border rounded-4" onclick="selectPaymentMethod('paypal')">
                        <div class="card-body p-3">
                            <div class="form-check custom-radio">
                                <input class="form-check-input" type="radio" name="payment_gateway" id="paypal" value="paypal" checked>
                                <label class="form-check-label w-100 ps-2" for="paypal">
                                    <div class="d-flex align-items-center justify-content-between">
                                        <div>
                                            <strong class="text-dark">PayPal</strong>
                                            <p class="text-muted small mb-0 mt-1">International Credit/Debit Cards & PayPal (USD Only)</p>
                                        </div>
                                        <div class="rounded-3 p-2" style="background: #f0f9ff;">
                                            <i class="bi bi-paypal fs-3 text-info"></i>
                                        </div>
                                    </div>
                                </label>
                            </div>
                        </div>
                    </div>
                    @endif

                    {{-- Manual Payment --}}
                    @if($gateways['manual'])
                    <div class="card mb-3 payment-method-card border rounded-4" onclick="selectPaymentMethod('manual')">
                        <div class="card-body p-3">
                            <div class="form-check custom-radio">
                                <input class="form-check-input" type="radio" name="payment_gateway" id="manual" value="manual" {{ (!$gateways['razorpay'] && !$gateways['paypal']) ? 'checked' : '' }}>
                                <label class="form-check-label w-100 ps-2" for="manual">
                                    <div class="d-flex align-items-center justify-content-between">
                                        <div>
                                            <strong class="text-dark">Manual Payment / Bank Transfer</strong>
                                            <p class="text-muted small mb-0 mt-1">Pay directly to our bank account and upload proof</p>
                                        </div>
                                        <div class="rounded-3 p-2" style="background: #f8f9fa;">
                                            <i class="bi bi-bank fs-3 text-secondary"></i>
                                        </div>
                                    </div>
                                </label>
                            </div>
                            <div id="manual-instructions" class="mt-3 d-none">
                                <div class="bg-light p-3 rounded-3 border">
                                    <h6 class="fw-bold mb-2" style="font-size: 0.9rem;">Bank Details / भुगतान निर्देश:</h6>
                                    <p class="mb-3 small text-muted" style="white-space: pre-line; line-height: 1.6;">{{ \App\Models\PromotionSetting::get('manual_payment_instructions') }}</p>
                                    <div class="mt-2">
                                        <label class="form-label small fw-bold text-dark">Transaction ID / Reference No.</label>
                                        <input type="text" name="payment_id" class="form-control rounded-3" placeholder="Enter reference number">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endif

                    <div class="form-check mb-4 mt-4">
                        <input class="form-check-input" type="checkbox" id="terms" required>
                        <label class="form-check-label small text-muted" for="terms">
                            I agree to the <a href="#" class="text-orange fw-bold">Terms and Conditions</a> and refund policy.
                        </label>
                    </div>

                    <div class="d-flex gap-3">
                        <button type="submit" class="btn btn-primary-gradient px-5 py-2 fw-bold shadow-sm rounded-3" id="pay-button">
                            <i class="bi bi-lock-fill me-2"></i>Pay {{ $transaction->currency == 'INR' ? '₹' : '$' }}{{ number_format($totalAmount, 2) }}
                        </button>
                        <a href="{{ route('seller.promotions.select-product', $package) }}?currency={{ $transaction->currency }}" class="btn btn-light border px-4 py-2 rounded-3">
                            <i class="bi bi-arrow-left me-2"></i>Back
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="card border-0 shadow-sm rounded-4 sticky-top" style="top: 100px; z-index: 10;">
            <div class="card-header bg-white border-bottom p-4">
                <h5 class="mb-0 fw-bold">Order Summary</h5>
            </div>
            <div class="card-body p-4">
                <div class="mb-4">
                    <h6 class="fw-bold text-dark mb-1">{{ $package->name }}</h6>
                    <p class="text-muted small mb-3">{{ $package->description }}</p>
                    
                    <div class="bg-light p-3 rounded-3">
                        <h6 class="small fw-bold text-dark mb-2">Promoting Products:</h6>
                        <ul class="list-unstyled mb-0">
                            @foreach($products as $product)
                                <li class="mb-1 d-flex align-items-center small text-muted">
                                    <i class="bi bi-check2 text-success me-2"></i>
                                    {{ Str::limit($product->name, 30) }}
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </div>

                <div class="list-group list-group-flush mb-0">
                    <div class="list-group-item px-0 d-flex justify-content-between border-0 pb-1">
                        <span class="text-muted small">Package Price:</span>
                        <span class="text-dark fw-bold small">{{ $transaction->currency == 'INR' ? '₹' : '$' }}{{ number_format($baseAmount, 2) }}</span>
                    </div>
                    @if($platformCommission > 0)
                        <div class="list-group-item px-0 d-flex justify-content-between border-0 py-1">
                            <span class="text-muted small">Platform Fee ({{ $commissionPercentage }}%):</span>
                            <span class="text-dark fw-bold small">{{ $transaction->currency == 'INR' ? '₹' : '$' }}{{ number_format($platformCommission, 2) }}</span>
                        </div>
                    @endif
                    @if($gstAmount > 0)
                        <div class="list-group-item px-0 d-flex justify-content-between border-0 py-1">
                            <span class="text-muted small">GST ({{ $gstPercentage }}%):</span>
                            <span class="text-dark fw-bold small">{{ $transaction->currency == 'INR' ? '₹' : '$' }}{{ number_format($gstAmount, 2) }}</span>
                        </div>
                    @endif
                    <div class="list-group-item px-0 d-flex justify-content-between border-0 pt-3 mt-2 border-top">
                        <h5 class="fw-bold text-dark mb-0">Total:</h5>
                        <h5 class="fw-bold text-orange mb-0">{{ $transaction->currency == 'INR' ? '₹' : '$' }}{{ number_format($totalAmount, 2) }}</h5>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@include('seller.promotions.partials.razorpay-script', ['transaction' => $transaction, 'totalAmount' => $totalAmount])

<style>
.payment-method-card {
    cursor: pointer;
    transition: all 0.2s ease;
}
.payment-method-card:hover {
    border-color: #f97316 !important;
    background-color: #fffaf0;
}
.payment-method-card.selected {
    border-color: #f97316 !important;
    background-color: #fffaf0;
}
.custom-radio .form-check-input:checked {
    background-color: #f97316;
    border-color: #f97316;
}
.text-orange { color: #f97316 !important; }
</style>

<script>
function selectPaymentMethod(method) {
    const radio = document.getElementById(method);
    if (radio) {
        radio.checked = true;
        document.querySelectorAll('.payment-method-card').forEach(card => {
            card.classList.remove('selected');
        });
        radio.closest('.payment-method-card').classList.add('selected');

        // Toggle manual instructions
        const manualInstructions = document.getElementById('manual-instructions');
        if (manualInstructions) {
            if (method === 'manual') {
                manualInstructions.classList.remove('d-none');
                document.querySelector('input[name="payment_id"]').required = true;
            } else {
                manualInstructions.classList.add('d-none');
                document.querySelector('input[name="payment_id"]').required = false;
            }
        }
    }
}

// Initial selection
document.addEventListener('DOMContentLoaded', function() {
    const checkedRadio = document.querySelector('input[name="payment_gateway"]:checked');
    if (checkedRadio) {
        selectPaymentMethod(checkedRadio.id);
    }
});
</script>
@endsection