@extends('layouts.web.index')

@section('content')
@include('layouts.web.header')

<div class="page-content bg-white">
    <!-- inner page banner -->
    <div class="dz-bnr-inr overlay-secondary-dark dz-bnr-inr-sm" style="background-image:url({{ asset('images/background/bg3.jpg') }});">
        <div class="container">
            <div class="dz-bnr-inr-entry">
                <h1>Checkout</h1>
                <nav aria-label="breadcrumb" class="breadcrumb-row">
                    <ul class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('cart.index') }}">Cart</a></li>
                        <li class="breadcrumb-item">Checkout</li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
    <!-- inner page banner End-->

    <!-- Checkout content -->
    <section class="content-inner-1 shop-account">
        <div class="container">
            <div class="row" style="margin-top: 30px;">
                <div class="col-lg-8">
                    <!-- Checkout Form -->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Customer Information</h5>
                        </div>
                        <div class="card-body">
                            <form action="#" method="POST" id="checkout-form">
                                @csrf
                                
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="customer_name" class="form-label">Full Name *</label>
                                        <input type="text" class="form-control" id="customer_name" name="customer_name" 
                                               value="{{ old('customer_name', auth()->user()->name ?? '') }}" required>
                                        @error('customer_name')
                                            <div class="text-danger small">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="customer_email" class="form-label">Email Address *</label>
                                        <input type="email" class="form-control" id="customer_email" name="customer_email" 
                                               value="{{ old('customer_email', auth()->user()->email ?? '') }}" required>
                                        @error('customer_email')
                                            <div class="text-danger small">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="customer_phone" class="form-label">Phone Number</label>
                                        <input type="tel" class="form-control" id="customer_phone" name="customer_phone" 
                                               value="{{ old('customer_phone') }}">
                                        @error('customer_phone')
                                            <div class="text-danger small">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="payment_method" class="form-label">Payment Method *</label>
                                        <select class="form-select" id="payment_method" name="payment_method" required>
                                            <option value="">Select Payment Method</option>
                                            <option value="razorpay" {{ old('payment_method') == 'razorpay' ? 'selected' : '' }}>Razorpay (Credit/Debit Card, UPI, Net Banking)</option>
                                        </select>
                                        @error('payment_method')
                                            <div class="text-danger small">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <label for="billing_address" class="form-label">Billing Address</label>
                                    <textarea class="form-control" id="billing_address" name="billing_address" rows="3">{{ old('billing_address') }}</textarea>
                                    @error('billing_address')
                                        <div class="text-danger small">{{ $message }}</div>
                                    @enderror
                                </div>

                                <!-- Order Items -->
                                <div class="mb-4">
                                    <h6 class="mb-3">Order Items</h6>
                                    <div class="table-responsive">
                                        <table class="table table-sm">
                                            <thead>
                                                <tr>
                                                    <th>Product</th>
                                                    <th>Qty</th>
                                                    <th>Price</th>
                                                    <th>Total</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach($cartItems as $item)
                                                <tr>
                                                    <td>
                                                        <div class="d-flex align-items-center">
                                                            <img src="{{ $item->book->cover_image ?: asset('images/books/small/pic1.jpg') }}" 
                                                                 alt="{{ $item->book->title }}" 
                                                                 class="me-2" 
                                                                 style="width: 40px; height: 50px; object-fit: cover; border-radius: 3px;">
                                                            <div>
                                                                <div style="font-size: 12px; font-weight: 500;">{{ $item->book->title }}</div>
                                                                <div style="font-size: 11px; color: #666;">by {{ $item->book->author }}</div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>{{ $item->quantity }}</td>
                                                    <td>₹{{ number_format($item->price, 2) }}</td>
                                                    <td>₹{{ number_format($item->price * $item->quantity, 2) }}</td>
                                                </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>

                                <div class="d-grid">
                                    <button type="button" id="pay-button" class="btn btn-primary btn-lg">
                                        <i class="fas fa-credit-card"></i> Pay ₹{{ number_format($total, 2) }}
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4">
                    <!-- Order Summary -->
                    <div class="card" style="margin-top: 30px;">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Order Summary</h5>
                        </div>
                        <div class="card-body">
                            <div class="d-flex justify-content-between mb-2">
                                <span>Subtotal:</span>
                                <span class="fw-bold">₹{{ number_format($subtotal, 2) }}</span>
                            </div>
                            <div class="d-flex justify-content-between mb-2">
                                <span>Tax (8%):</span>
                                <span class="fw-bold">₹{{ number_format($taxAmount, 2) }}</span>
                            </div>
                            <div class="d-flex justify-content-between mb-2">
                                <span>Shipping:</span>
                                <span class="fw-bold text-success">FREE</span>
                            </div>
                            <hr>
                            <div class="d-flex justify-content-between mb-3">
                                <span class="h5">Total:</span>
                                <span class="h5 fw-bold text-primary">₹{{ number_format($total, 2) }}</span>
                            </div>
                            
                            <div class="alert alert-info">
                                <i class="fas fa-info-circle"></i>
                                <small>
                                    <strong>Digital Delivery:</strong> Your PDF books will be delivered to your email address immediately after payment confirmation.
                                </small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Checkout content END -->
</div>

@include('layouts.web.footer')

<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script>
document.getElementById('pay-button').addEventListener('click', function(e) {
    e.preventDefault();
    
    const form = document.getElementById('checkout-form');
    const formData = new FormData(form);
    
    // Validate form
    if (!form.checkValidity()) {
        form.reportValidity();
        return;
    }
    
    const payButton = this;
    const originalText = payButton.innerHTML;
    payButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';
    payButton.disabled = true;
    
    // Create Razorpay order
    fetch('{{ route("checkout.create-razorpay-order") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({
            customer_name: document.getElementById('customer_name').value,
            customer_email: document.getElementById('customer_email').value,
            customer_phone: document.getElementById('customer_phone').value,
            billing_address: document.getElementById('billing_address').value
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Initialize Razorpay checkout
            const options = {
                key: data.key,
                amount: data.amount,
                currency: data.currency,
                name: 'Bookora',
                description: 'Book Purchase',
                order_id: data.razorpay_order_id,
                handler: function(response) {
                    // Verify payment
                    verifyPayment(response, data.order_id);
                },
                prefill: {
                    name: document.getElementById('customer_name').value,
                    email: document.getElementById('customer_email').value,
                    contact: document.getElementById('customer_phone').value || ''
                },
                theme: {
                    color: '#667eea'
                },
                modal: {
                    ondismiss: function() {
                        payButton.innerHTML = originalText;
                        payButton.disabled = false;
                    }
                }
            };
            
            const razorpay = new Razorpay(options);
            razorpay.open();
        } else {
            alert('Error: ' + data.message);
            payButton.innerHTML = originalText;
            payButton.disabled = false;
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('An error occurred. Please try again.');
        payButton.innerHTML = originalText;
        payButton.disabled = false;
    });
});

function verifyPayment(response, orderId) {
    const payButton = document.getElementById('pay-button');
    payButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Verifying Payment...';
    
    fetch('{{ route("checkout.verify-payment") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({
            razorpay_order_id: response.razorpay_order_id,
            razorpay_payment_id: response.razorpay_payment_id,
            razorpay_signature: response.razorpay_signature
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            window.location.href = data.redirect_url;
        } else {
            alert('Payment verification failed: ' + data.message);
            payButton.innerHTML = '<i class="fas fa-credit-card"></i> Pay ₹{{ number_format($total, 2) }}';
            payButton.disabled = false;
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('An error occurred during payment verification. Please contact support.');
        payButton.innerHTML = '<i class="fas fa-credit-card"></i> Pay ₹{{ number_format($total, 2) }}';
        payButton.disabled = false;
    });
}
</script>
@endsection