{{-- views/themes/default/checkout.blade.php --}}

@extends('themes.default.layout')

@section('title', 'Checkout - ' . $website->name)

@section('content')
<!-- Checkout Section -->
<section class="section" style="padding-top: 120px;">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h1 class="h2 mb-4">
                    <i class="bi bi-credit-card me-2"></i>Checkout
                </h1>

                @if(session('success'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        {{ session('success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                @endif

                @if(session('error'))
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        {{ session('error') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                @endif

                @if($errors->any())
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <ul class="mb-0">
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                @endif

                <form action="{{ route('checkout.process') }}" method="POST" id="checkout-form">
                    @csrf
                    <div class="row">
                        <!-- Checkout Form -->
                        <div class="col-lg-8">
                            <!-- Customer Information -->
                            <div class="card mb-4">
                                <div class="card-header">
                                    <h5 class="mb-0"><i class="bi bi-person me-2"></i>Customer Information</h5>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="customer_name" class="form-label">Full Name *</label>
                                                <input type="text" class="form-control @error('customer_name') is-invalid @enderror" 
                                                       id="customer_name" name="customer_name" value="{{ old('customer_name') }}" required>
                                                @error('customer_name')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="customer_email" class="form-label">Email Address *</label>
                                                <input type="email" class="form-control @error('customer_email') is-invalid @enderror" 
                                                       id="customer_email" name="customer_email" value="{{ old('customer_email') }}" required>
                                                @error('customer_email')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="customer_phone" class="form-label">Phone Number</label>
                                                <input type="tel" class="form-control @error('customer_phone') is-invalid @enderror" 
                                                       id="customer_phone" name="customer_phone" value="{{ old('customer_phone') }}">
                                                @error('customer_phone')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Billing Address -->
                            <div class="card mb-4">
                                <div class="card-header">
                                    <h5 class="mb-0"><i class="bi bi-house me-2"></i>Billing Address</h5>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="mb-3">
                                                <label for="billing_address_line_1" class="form-label">Address Line 1 *</label>
                                                <input type="text" class="form-control @error('billing_address_line_1') is-invalid @enderror" 
                                                       id="billing_address_line_1" name="billing_address_line_1" value="{{ old('billing_address_line_1') }}" required>
                                                @error('billing_address_line_1')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="mb-3">
                                                <label for="billing_address_line_2" class="form-label">Address Line 2</label>
                                                <input type="text" class="form-control @error('billing_address_line_2') is-invalid @enderror" 
                                                       id="billing_address_line_2" name="billing_address_line_2" value="{{ old('billing_address_line_2') }}">
                                                @error('billing_address_line_2')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="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>
                                        <div class="col-md-4">
                                            <div class="mb-3">
                                                <label for="billing_state" class="form-label">State *</label>
                                                <input type="text" class="form-control @error('billing_state') is-invalid @enderror" 
                                                       id="billing_state" name="billing_state" value="{{ old('billing_state') }}" required>
                                                @error('billing_state')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="mb-3">
                                                <label for="billing_postal_code" class="form-label">Postal Code *</label>
                                                <input type="text" class="form-control @error('billing_postal_code') is-invalid @enderror" 
                                                       id="billing_postal_code" name="billing_postal_code" value="{{ old('billing_postal_code') }}" required>
                                                @error('billing_postal_code')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="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="Malaysia" {{ old('billing_country', 'Malaysia') == 'Malaysia' ? 'selected' : '' }}>Malaysia</option>
                                                    <option value="Singapore" {{ old('billing_country') == 'Singapore' ? 'selected' : '' }}>Singapore</option>
                                                    <option value="Thailand" {{ old('billing_country') == 'Thailand' ? 'selected' : '' }}>Thailand</option>
                                                    <option value="Indonesia" {{ old('billing_country') == 'Indonesia' ? 'selected' : '' }}>Indonesia</option>
                                                </select>
                                                @error('billing_country')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Shipping Address -->
                            <div class="card mb-4">
                                <div class="card-header">
                                    <h5 class="mb-0"><i class="bi bi-truck me-2"></i>Shipping Address</h5>
                                </div>
                                <div class="card-body">
                                    <div class="form-check mb-3">
                                        <input class="form-check-input" type="checkbox" id="same_as_billing" name="same_as_billing" value="1" 
                                               {{ old('same_as_billing', true) ? 'checked' : '' }} onchange="toggleShippingAddress()">
                                        <label class="form-check-label" for="same_as_billing">
                                            Same as billing address
                                        </label>
                                    </div>

                                    <div id="shipping-fields" style="display: none;">
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="mb-3">
                                                    <label for="shipping_address_line_1" class="form-label">Address Line 1</label>
                                                    <input type="text" class="form-control @error('shipping_address_line_1') is-invalid @enderror" 
                                                           id="shipping_address_line_1" name="shipping_address_line_1" value="{{ old('shipping_address_line_1') }}">
                                                    @error('shipping_address_line_1')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="mb-3">
                                                    <label for="shipping_address_line_2" class="form-label">Address Line 2</label>
                                                    <input type="text" class="form-control @error('shipping_address_line_2') is-invalid @enderror" 
                                                           id="shipping_address_line_2" name="shipping_address_line_2" value="{{ old('shipping_address_line_2') }}">
                                                    @error('shipping_address_line_2')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-4">
                                                <div class="mb-3">
                                                    <label for="shipping_city" class="form-label">City</label>
                                                    <input type="text" class="form-control @error('shipping_city') is-invalid @enderror" 
                                                           id="shipping_city" name="shipping_city" value="{{ old('shipping_city') }}">
                                                    @error('shipping_city')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="mb-3">
                                                    <label for="shipping_state" class="form-label">State</label>
                                                    <input type="text" class="form-control @error('shipping_state') is-invalid @enderror" 
                                                           id="shipping_state" name="shipping_state" value="{{ old('shipping_state') }}">
                                                    @error('shipping_state')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="mb-3">
                                                    <label for="shipping_postal_code" class="form-label">Postal Code</label>
                                                    <input type="text" class="form-control @error('shipping_postal_code') is-invalid @enderror" 
                                                           id="shipping_postal_code" name="shipping_postal_code" value="{{ old('shipping_postal_code') }}">
                                                    @error('shipping_postal_code')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="shipping_country" class="form-label">Country</label>
                                                    <select class="form-select @error('shipping_country') is-invalid @enderror" 
                                                            id="shipping_country" name="shipping_country">
                                                        <option value="Malaysia" {{ old('shipping_country', 'Malaysia') == 'Malaysia' ? 'selected' : '' }}>Malaysia</option>
                                                        <option value="Singapore" {{ old('shipping_country') == 'Singapore' ? 'selected' : '' }}>Singapore</option>
                                                        <option value="Thailand" {{ old('shipping_country') == 'Thailand' ? 'selected' : '' }}>Thailand</option>
                                                        <option value="Indonesia" {{ old('shipping_country') == 'Indonesia' ? 'selected' : '' }}>Indonesia</option>
                                                    </select>
                                                    @error('shipping_country')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Payment Method -->
                            <div class="card mb-4">
                                <div class="card-header">
                                    <h5 class="mb-0"><i class="bi bi-credit-card me-2"></i>Payment Method</h5>
                                </div>
                                <div class="card-body">
                                    <div class="form-check mb-3">
                                        <input class="form-check-input @error('payment_method') is-invalid @enderror" type="radio" 
                                               id="payment_chipin" name="payment_method" value="chipin" 
                                               {{ old('payment_method', 'chipin') == 'chipin' ? 'checked' : '' }}>
                                        <label class="form-check-label" for="payment_chipin">
                                            <div class="d-flex align-items-center">
                                                <i class="bi bi-credit-card-2-front me-2 text-primary"></i>
                                                <div>
                                                    <strong>ChipIn</strong>
                                                    <div class="small text-muted">Secure online payment</div>
                                                </div>
                                            </div>
                                        </label>
                                    </div>
                                    <div class="form-check mb-3">
                                        <input class="form-check-input" type="radio" 
                                               id="payment_bank" name="payment_method" value="bank_transfer"
                                               {{ old('payment_method') == 'bank_transfer' ? 'checked' : '' }}>
                                        <label class="form-check-label" for="payment_bank">
                                            <div class="d-flex align-items-center">
                                                <i class="bi bi-bank me-2 text-success"></i>
                                                <div>
                                                    <strong>Bank Transfer</strong>
                                                    <div class="small text-muted">Direct bank transfer</div>
                                                </div>
                                            </div>
                                        </label>
                                    </div>
                                    <div class="form-check mb-3">
                                        <input class="form-check-input" type="radio" 
                                               id="payment_cod" name="payment_method" value="cash_on_delivery"
                                               {{ old('payment_method') == 'cash_on_delivery' ? 'checked' : '' }}>
                                        <label class="form-check-label" for="payment_cod">
                                            <div class="d-flex align-items-center">
                                                <i class="bi bi-cash me-2 text-warning"></i>
                                                <div>
                                                    <strong>Cash on Delivery</strong>
                                                    <div class="small text-muted">Pay when you receive</div>
                                                </div>
                                            </div>
                                        </label>
                                    </div>
                                    @error('payment_method')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <!-- Order Notes -->
                            <div class="card mb-4">
                                <div class="card-header">
                                    <h5 class="mb-0"><i class="bi bi-chat-text me-2"></i>Order Notes</h5>
                                </div>
                                <div class="card-body">
                                    <div class="mb-3">
                                        <label for="notes" class="form-label">Special Instructions (Optional)</label>
                                        <textarea class="form-control @error('notes') is-invalid @enderror" 
                                                  id="notes" name="notes" rows="3" placeholder="Any special instructions for your order...">{{ old('notes') }}</textarea>
                                        @error('notes')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Order Summary -->
                        <div class="col-lg-4">
                            <div class="card sticky-top" style="top: 120px;">
                                <div class="card-header">
                                    <h5 class="mb-0">Order Summary</h5>
                                </div>
                                <div class="card-body">
                                    <!-- Cart Items -->
                                    <div class="mb-3">
                                        @foreach($cartItems as $item)
                                        <div class="d-flex align-items-center mb-2">
                                            <div class="me-2" style="width: 50px; height: 50px;">
                                                @if($item->product && $item->product->images && count($item->product->images) > 0)
                                                    <img src="{{ $item->product->images[0] }}" 
                                                         class="img-fluid rounded" 
                                                         alt="{{ $item->display_name }}"
                                                         style="width: 50px; height: 50px; object-fit: cover;">
                                                @else
                                                    <div class="bg-light rounded d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
                                                        <i class="bi bi-image text-muted"></i>
                                                    </div>
                                                @endif
                                            </div>
                                            <div class="flex-grow-1">
                                                <div class="small fw-bold">{{ $item->display_name }}</div>
                                                <div class="small text-muted">Qty: {{ $item->quantity }}</div>
                                            </div>
                                            <div class="fw-bold">RM {{ number_format($item->total_price, 2) }}</div>
                                        </div>
                                        @endforeach
                                    </div>

                                    <hr>

                                    <!-- Totals -->
                                    <div class="d-flex justify-content-between mb-2">
                                        <span>Subtotal:</span>
                                        <span>RM {{ number_format($cartTotal, 2) }}</span>
                                    </div>
                                    <div class="d-flex justify-content-between mb-2">
                                        <span>Shipping:</span>
                                        <span class="text-success">Free</span>
                                    </div>
                                    <div class="d-flex justify-content-between mb-2">
                                        <span>Tax:</span>
                                        <span>RM {{ number_format($taxAmount, 2) }}</span>
                                    </div>
                                    <hr>
                                    <div class="d-flex justify-content-between mb-3">
                                        <strong>Total:</strong>
                                        <strong>RM {{ number_format($finalTotal, 2) }}</strong>
                                    </div>

                                    <div class="d-grid">
                                        <button type="submit" class="btn btn-primary btn-lg">
                                            <i class="bi bi-lock me-2"></i>Place Order
                                        </button>
                                    </div>

                                    <!-- Security Info -->
                                    <div class="mt-3 text-center">
                                        <small class="text-muted">
                                            <i class="bi bi-shield-check me-1"></i>
                                            Your payment information is secure and encrypted
                                        </small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>

<script>
function toggleShippingAddress() {
    const checkbox = document.getElementById('same_as_billing');
    const shippingFields = document.getElementById('shipping-fields');
    
    if (checkbox.checked) {
        shippingFields.style.display = 'none';
        // Clear shipping field values
        shippingFields.querySelectorAll('input, select').forEach(field => {
            field.removeAttribute('required');
        });
    } else {
        shippingFields.style.display = 'block';
        // Add required attribute to shipping fields
        document.getElementById('shipping_address_line_1').setAttribute('required', 'required');
        document.getElementById('shipping_city').setAttribute('required', 'required');
        document.getElementById('shipping_state').setAttribute('required', 'required');
        document.getElementById('shipping_postal_code').setAttribute('required', 'required');
        document.getElementById('shipping_country').setAttribute('required', 'required');
    }
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
    toggleShippingAddress();
});
</script>
@endsection