@extends('frontend::layouts.master')

@section('title')
    {{-- <title>{{ siteSetting('site_title') }} - Checkout</title> --}}
    <meta name="description" content="Complete your purchase securely with our trusted payment system">
@endsection

@section('content')
<!-- Breadcrumb Area Start -->
<section class="breadcrumb-area">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="breadcrumb-content">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Checkout</li>
                        </ol>
                    </nav>
                    <h2 class="breadcrumb-title">Secure Checkout</h2>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Breadcrumb Area End -->

<!-- Checkout Area Start -->
<section class="checkout-area py-5">
    <div class="container">
        <form id="checkout-form" action="{{ route('checkout.process') }}" method="POST">
            @csrf
            <div class="row">
                <!-- Billing Details -->
                <div class="col-lg-8">
                    <div class="checkout-details">
                        <h3 class="checkout-title mb-4">Billing Details</h3>
                        
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="billing_name" class="form-label">Full Name *</label>
                                <input type="text" class="form-control @error('billing_name') is-invalid @enderror" 
                                       id="billing_name" name="billing_name" value="{{ old('billing_name') }}" required>
                                @error('billing_name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <label for="billing_email" class="form-label">Email Address *</label>
                                <input type="email" class="form-control @error('billing_email') is-invalid @enderror" 
                                       id="billing_email" name="billing_email" value="{{ old('billing_email') }}" required>
                                @error('billing_email')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="billing_phone" class="form-label">Phone Number *</label>
                                <input type="tel" class="form-control @error('billing_phone') is-invalid @enderror" 
                                       id="billing_phone" name="billing_phone" value="{{ old('billing_phone') }}" required>
                                @error('billing_phone')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <label for="billing_country" class="form-label">Country *</label>
                                <select class="form-select @error('billing_country') is-invalid @enderror" 
                                        id="billing_country" name="billing_country" required>
                                    <option value="">Select Country</option>
                                    <option value="US" {{ old('billing_country') == 'US' ? 'selected' : '' }}>United States</option>
                                    <option value="CA" {{ old('billing_country') == 'CA' ? 'selected' : '' }}>Canada</option>
                                    <option value="GB" {{ old('billing_country') == 'GB' ? 'selected' : '' }}>United Kingdom</option>
                                    <option value="AU" {{ old('billing_country') == 'AU' ? 'selected' : '' }}>Australia</option>
                                    <option value="DE" {{ old('billing_country') == 'DE' ? 'selected' : '' }}>Germany</option>
                                    <option value="FR" {{ old('billing_country') == 'FR' ? 'selected' : '' }}>France</option>
                                    <option value="IT" {{ old('billing_country') == 'IT' ? 'selected' : '' }}>Italy</option>
                                    <option value="ES" {{ old('billing_country') == 'ES' ? 'selected' : '' }}>Spain</option>
                                    <option value="NL" {{ old('billing_country') == 'NL' ? 'selected' : '' }}>Netherlands</option>
                                    <option value="JP" {{ old('billing_country') == 'JP' ? 'selected' : '' }}>Japan</option>
                                </select>
                                @error('billing_country')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="billing_address" class="form-label">Street Address *</label>
                            <input type="text" class="form-control @error('billing_address') is-invalid @enderror" 
                                   id="billing_address" name="billing_address" value="{{ old('billing_address') }}" 
                                   placeholder="House number and street name" required>
                            @error('billing_address')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="billing_city" class="form-label">City *</label>
                                <input type="text" class="form-control @error('billing_city') is-invalid @enderror" 
                                       id="billing_city" name="billing_city" value="{{ old('billing_city') }}" required>
                                @error('billing_city')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <label for="billing_zip" class="form-label">ZIP Code *</label>
                                <input type="text" class="form-control @error('billing_zip') is-invalid @enderror" 
                                       id="billing_zip" name="billing_zip" value="{{ old('billing_zip') }}" required>
                                @error('billing_zip')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Payment Methods -->
                        <div class="payment-methods mt-5">
                            <h3 class="checkout-title mb-4">Payment Methods</h3>
                            
                            @if($paymentMethods->count() > 0)
                                <div class="payment-options">
                                    @foreach($paymentMethods as $method)
                                        <div class="payment-option mb-3">
                                            <div class="form-check payment-radio">
                                                <input class="form-check-input" type="radio" name="payment_method" 
                                                       id="payment_{{ $method->driver }}" value="{{ $method->driver }}"
                                                       {{ old('payment_method') == $method->driver ? 'checked' : '' }}
                                                       {{ $loop->first && !old('payment_method') ? 'checked' : '' }}>
                                                <label class="form-check-label payment-label" for="payment_{{ $method->driver }}">
                                                    <div class="payment-info">
                                                        <div class="payment-header">
                                                            <h5 class="payment-name">{{ $method->name }}</h5>
                                                            <span class="payment-badge">
                                                                {{ ucfirst($method->driver) }}
                                                                @if($method->sandbox)
                                                                    <small class="badge bg-warning ms-2">Test Mode</small>
                                                                @endif
                                                            </span>
                                                        </div>
                                                        @if($method->description)
                                                            <p class="payment-description">{{ $method->description }}</p>
                                                        @endif
                                                    </div>
                                                </label>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                                @error('payment_method')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            @else
                                <div class="alert alert-warning">
                                    <i class="fas fa-exclamation-triangle me-2"></i>
                                    No payment methods are currently available. Please contact support.
                                </div>
                            @endif
                        </div>
                    </div>
                </div>

                <!-- Order Summary -->
                <div class="col-lg-4">
                    <div class="order-summary">
                        <div class="summary-card">
                            <h3 class="summary-title">Order Summary</h3>
                            
                            <!-- Cart Items -->
                            <div class="cart-items">
                                @foreach($cartItems as $item)
                                    <div class="cart-item">
                                        <div class="item-image">
                                        </div>
                                        <div class="item-details">
                                            <h6 class="item-name">{{ $item->name }}</h6>
                                            <p class="item-description">{{ $item->description }}</p>
                                            <div class="item-meta">
                                                <span class="quantity">Qty: {{ $item->quantity }}</span>
                                                <span class="price">${{ number_format($item->price, 2) }}</span>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>

                            <!-- Order Totals -->
                            <div class="order-totals">
                                <div class="total-line">
                                    <span>Subtotal:</span>
                                    <span>${{ number_format($subtotal, 2) }}</span>
                                </div>
                                <div class="total-line">
                                    <span>Tax (10%):</span>
                                    <span>${{ number_format($tax, 2) }}</span>
                                </div>
                                <div class="total-line">
                                    <span>Shipping:</span>
                                    <span>${{ number_format($shipping, 2) }}</span>
                                </div>
                                <hr>
                                <div class="total-line total-amount">
                                    <span><strong>Total:</strong></span>
                                    <span><strong>${{ number_format($total, 2) }}</strong></span>
                                </div>
                            </div>

                            <input type="hidden" name="total" value="{{ $total }}">

                            <!-- Place Order Button -->
                            <button type="submit" class="btn btn-primary place-order-btn w-100" id="place-order-btn">
                                <i class="fas fa-lock me-2"></i>
                                Place Order - ${{ number_format($total, 2) }}
                            </button>

                            <!-- Security Info -->
                            <div class="security-info mt-3">
                                <div class="security-badges">
                                    <span class="security-badge">
                                        <i class="fas fa-shield-alt"></i>
                                        <small>SSL Secured</small>
                                    </span>
                                    <span class="security-badge">
                                        <i class="fas fa-lock"></i>
                                        <small>256-bit Encryption</small>
                                    </span>
                                </div>
                                <p class="security-text">
                                    Your payment information is processed securely. We do not store credit card details.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</section>
<!-- Checkout Area End -->
@endsection

@push('style')
<style>
.checkout-area {
    background-color: #f8f9fa;
}

.checkout-details {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.checkout-title {
    color: #333;
    font-weight: 600;
    border-bottom: 2px solid var(--tg-primary-color);
    padding-bottom: 0.5rem;
}

.payment-option {
    border: 2px solid #e9ecef;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.payment-option:hover {
    border-color: var(--tg-primary-color);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.form-check-input:checked ~ .payment-label {
    background-color: #f8f9ff;
}

.payment-radio .form-check-input:checked {
    background-color: var(--tg-primary-color);
    border-color: var(--tg-primary-color);
}

.payment-label {
    display: block;
    padding: 1rem;
    cursor: pointer;
    width: 100%;
}

.payment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.payment-name {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 500;
}

.payment-badge {
    color: var(--tg-primary-color);
    font-weight: 500;
}

.payment-description {
    color: #6c757d;
    margin: 0;
    font-size: 0.9rem;
}

.summary-card {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: sticky;
    top: 2rem;
}

.summary-title {
    color: #333;
    font-weight: 600;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--tg-primary-color);
    padding-bottom: 0.5rem;
}

.cart-item {
    display: flex;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid #e9ecef;
}

.cart-item:last-child {
    border-bottom: none;
}

.item-image {
    flex-shrink: 0;
}

.item-image img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
}

.item-details {
    flex: 1;
}

.item-name {
    font-size: 0.95rem;
    font-weight: 500;
    margin: 0 0 0.25rem 0;
    color: #333;
}

.item-description {
    font-size: 0.8rem;
    color: #6c757d;
    margin: 0 0 0.5rem 0;
}

.item-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
}

.quantity {
    color: #6c757d;
}

.price {
    font-weight: 500;
    color: var(--tg-primary-color);
}

.order-totals {
    margin: 1.5rem 0;
}

.total-line {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
}

.total-amount {
    font-size: 1.1rem;
    color: #333;
}

.place-order-btn {
    background-color: var(--tg-primary-color);
    border: none;
    padding: 0.75rem 1.5rem;
    font-size: 1.1rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.place-order-btn:hover {
    background-color: var(--tg-secondary-color);
    transform: translateY(-1px);
}

.place-order-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.security-info {
    text-align: center;
}

.security-badges {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.security-badge {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: #28a745;
    font-size: 0.8rem;
}

.security-text {
    font-size: 0.75rem;
    color: #6c757d;
    margin: 0;
}

.breadcrumb-area {
    background: linear-gradient(135deg, var(--tg-primary-color), var(--tg-secondary-color));
    padding: 2rem 0;
}

.breadcrumb-content {
    text-align: center;
    color: white;
}

.breadcrumb {
    justify-content: center;
    background: none;
    margin-bottom: 1rem;
}

.breadcrumb-item a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
}

.breadcrumb-item.active {
    color: white;
}

.breadcrumb-title {
    color: white;
    font-size: 2rem;
    font-weight: 600;
    margin: 0;
}

@media (max-width: 768px) {
    .checkout-details, .summary-card {
        padding: 1.5rem;
    }
    
    .cart-item {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .item-image {
        align-self: center;
    }
    
    .payment-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}
</style>
@endpush

@push('script')
<script>
$(document).ready(function() {
    // Form validation and submission
    $('#checkout-form').on('submit', function(e) {
        e.preventDefault();
        
        const $form = $(this);
        const $submitBtn = $('#place-order-btn');
        const originalText = $submitBtn.html();
        
        // Check if payment method is selected
        if (!$('input[name="payment_method"]:checked').length) {
            toastr.error('Please select a payment method');
            return;
        }
        
        // Disable submit button and show loading
        $submitBtn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-2"></i>Processing...');
        
        // Submit the form
        setTimeout(() => {
            $form.off('submit').submit();
        }, 1000);
    });
    
    // Payment method selection styling
    $('input[name="payment_method"]').on('change', function() {
        $('.payment-option').removeClass('selected');
        $(this).closest('.payment-option').addClass('selected');
    });
    
    // Initialize with first payment method selected
    if ($('input[name="payment_method"]:checked').length) {
        $('input[name="payment_method"]:checked').closest('.payment-option').addClass('selected');
    }
});
</script>
@endpush