@extends('frontend.layouts.app')

@section('title', 'Checkout')

@section('content')
<div class="container py-5">
    <div class="row">
        <div class="col-lg-8">
            <!-- Checkout Steps -->
            <div class="card mb-4">
                <div class="card-body">
                    <div class="steps">
                        <div class="step active">
                            <div class="step-number">1</div>
                            <div class="step-label">Product</div>
                        </div>
                        <div class="step active">
                            <div class="step-number">2</div>
                            <div class="step-label">Checkout</div>
                        </div>
                        <div class="step">
                            <div class="step-number">3</div>
                            <div class="step-label">Payment</div>
                        </div>
                        <div class="step">
                            <div class="step-number">4</div>
                            <div class="step-label">Complete</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Order Summary -->
            <div class="card mb-4">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">Order Summary</h5>
                </div>
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-md-3">
                            <img src="{{ asset($product->image) }}" 
                                 alt="{{ $product->name }}" 
                                 class="img-fluid rounded">
                        </div>
                        <div class="col-md-9">
                            <h5>{{ $product->name }}</h5>
                            <p class="text-muted mb-2">{{ $product->short_description }}</p>
                            <div class="row">
                                <div class="col-md-6">
                                    <p class="mb-1"><strong>Account Type:</strong> {{ $variation->name }}</p>
                                    <p class="mb-1"><strong>Duration:</strong> {{ ucfirst(str_replace('_', ' ', $price->duration)) }}</p>
                                    <p class="mb-0"><strong>Delivery:</strong> Instant</p>
                                </div>
                                <div class="col-md-6 text-end">
                                    <h4 class="text-primary">{{ setting('currency_symbol', '৳') }} {{ number_format($price->price, 2) }}</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Customer Information -->
            <div class="card mb-4">
                <div class="card-header bg-light">
                    <h5 class="mb-0">Customer Information</h5>
                </div>
                <div class="card-body">
                    <form id="checkoutForm" action="{{ route('checkout.process') }}" method="POST">
                        @csrf
                        
                        <input type="hidden" name="product_id" value="{{ $product->id }}">
                        <input type="hidden" name="variation_id" value="{{ $variation->id }}">
                        <input type="hidden" name="price_id" value="{{ $price->id }}">
                        <input type="hidden" name="duration" value="{{ $price->duration }}">
                        
                        <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="{{ auth()->user()->name ?? '' }}"
                                       required>
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <label for="customer_mobile" class="form-label">Mobile Number *</label>
                                <input type="text" 
                                       class="form-control" 
                                       id="customer_mobile" 
                                       name="customer_mobile"
                                       value="{{ auth()->user()->mobile ?? '' }}"
                                       required>
                            </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="{{ auth()->user()->email ?? '' }}">
                                <small class="text-muted">Order details will be sent to this email</small>
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Payment Method *</label>
                                <div class="payment-methods">
                                    @foreach($paymentMethods as $method)
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" 
                                               type="radio" 
                                               name="payment_method" 
                                               id="payment{{ $method->id }}"
                                               value="{{ $method->code }}"
                                               {{ $loop->first ? 'checked' : '' }}>
                                        <label class="form-check-label" for="payment{{ $method->id }}">
                                            <i class="fas fa-credit-card me-2"></i> {{ $method->name }}
                                        </label>
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                        
                        <!-- Coupon Code -->
                        <div class="row">
                            <div class="col-md-6">
                                <label for="coupon_code" class="form-label">Coupon Code (Optional)</label>
                                <div class="input-group mb-3">
                                    <input type="text" 
                                           class="form-control" 
                                           id="coupon_code" 
                                           placeholder="Enter coupon code">
                                    <button class="btn btn-outline-primary" 
                                            type="button" 
                                            id="applyCouponBtn">
                                        Apply
                                    </button>
                                </div>
                                <div id="couponMessage"></div>
                            </div>
                        </div>
                        
                        <!-- Terms Agreement -->
                        <div class="form-check mb-4">
                            <input class="form-check-input" 
                                   type="checkbox" 
                                   id="agree_terms" 
                                   required>
                            <label class="form-check-label" for="agree_terms">
                                I agree to the <a href="#" target="_blank">Terms & Conditions</a> and 
                                <a href="#" target="_blank">Refund Policy</a>
                            </label>
                        </div>
                        
                        <!-- Submit Button -->
                        <div class="d-grid">
                            <button type="submit" 
                                    class="btn btn-primary btn-lg" 
                                    id="placeOrderBtn">
                                <i class="fas fa-lock me-2"></i> Proceed to Payment
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        
        <!-- Order Total -->
        <div class="col-lg-4">
            <div class="card sticky-top" style="top: 20px;">
                <div class="card-header bg-light">
                    <h5 class="mb-0">Order Total</h5>
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-between mb-2">
                        <span>Subtotal:</span>
                        <span id="subtotalAmount">{{ setting('currency_symbol', '৳') }} {{ number_format($price->price, 2) }}</span>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <span>Discount:</span>
                        <span id="discountAmount">{{ setting('currency_symbol', '৳') }} 0.00</span>
                    </div>
                    <hr>
                    <div class="d-flex justify-content-between mb-3">
                        <h5>Total:</h5>
                        <h4 class="text-primary" id="totalAmount">
                            {{ setting('currency_symbol', '৳') }} {{ number_format($price->price, 2) }}
                        </h4>
                    </div>
                    
                    <!-- Order Details -->
                    <div class="alert alert-info">
                        <h6><i class="fas fa-info-circle me-2"></i> What happens next?</h6>
                        <ul class="mb-0 ps-3">
                            <li>Complete payment securely</li>
                            <li>Get instant delivery via email</li>
                            <li>Access your product immediately</li>
                            <li>24/7 customer support</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    let subtotal = {{ $price->price }};
    let discount = 0;
    let total = subtotal;
    let couponCode = null;
    
    // Apply coupon
    $('#applyCouponBtn').click(function() {
        const code = $('#coupon_code').val().trim();
        
        if (!code) {
            showCouponMessage('Please enter a coupon code.', 'danger');
            return;
        }
        
        $.ajax({
            url: '{{ route("checkout.apply-coupon") }}',
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                coupon_code: code,
                subtotal: subtotal
            },
            beforeSend: function() {
                $('#applyCouponBtn').prop('disabled', true).html(`
                    <span class="spinner-border spinner-border-sm" role="status"></span>
                    Applying...
                `);
            },
            success: function(response) {
                if (response.success) {
                    discount = response.discount;
                    total = response.total;
                    couponCode = code;
                    
                    updateAmounts();
                    showCouponMessage('Coupon applied successfully!', 'success');
                } else {
                    showCouponMessage(response.message, 'danger');
                }
            },
            error: function() {
                showCouponMessage('An error occurred. Please try again.', 'danger');
            },
            complete: function() {
                $('#applyCouponBtn').prop('disabled', false).text('Apply');
            }
        });
    });
    
    // Update displayed amounts
    function updateAmounts() {
        $('#subtotalAmount').text(`{{ setting('currency_symbol', '৳') }} ${subtotal.toFixed(2)}`);
        $('#discountAmount').text(`{{ setting('currency_symbol', '৳') }}-${discount.toFixed(2)}`);
        $('#totalAmount').text(`{{ setting('currency_symbol', '৳') }} ${total.toFixed(2)}`);
    }
    
    // Show coupon message
    function showCouponMessage(message, type) {
        $('#couponMessage').html(`
            <div class="alert alert-${type} alert-dismissible fade show">
                ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        `);
    }
    
    // Form submission
    $('#checkoutForm').submit(function(e) {
        if (!couponCode) {
            $('#coupon_code').val('');
        }
        
        if (!$(this)[0].checkValidity()) {
            e.preventDefault();
            $(this).addClass('was-validated');
        }
    });
});
</script>
@endpush