@extends('layouts.app')

@section('title', 'Checkout')

@section('content')
<div class="hero-section">
    <div class="container">
        <h1 class="display-4 fw-bold">Checkout</h1>
    </div>
</div>

<div class="container mb-5">
    <div class="row">
        <div class="col-md-8">
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">Shipping Information</h5>
                </div>
                <div class="card-body">
                    <form action="{{ route('user.checkout.store') }}" method="POST" id="checkoutForm">
                        @csrf
                        <div class="mb-3">
                            <label for="shipping_address" class="form-label">Shipping Address</label>
                            <textarea class="form-control @error('shipping_address') is-invalid @enderror" id="shipping_address" name="shipping_address" rows="3" required>{{ auth()->user()->address }}</textarea>
                            @error('shipping_address')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="mb-3">
                            <label for="billing_address" class="form-label">Billing Address</label>
                            <textarea class="form-control @error('billing_address') is-invalid @enderror" id="billing_address" name="billing_address" rows="3" required>{{ auth()->user()->address }}</textarea>
                            @error('billing_address')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="card border-0 bg-light mb-3">
                            <div class="card-body">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="sameAddress" onchange="copySameAddress()">
                                    <label class="form-check-label" for="sameAddress">
                                        Billing address same as shipping
                                    </label>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">Payment Method</h5>
                </div>
                <div class="card-body">
                    @foreach($paymentMethods as $method)
                        <div class="form-check mb-2">
                            <input class="form-check-input payment-method-radio" type="radio" name="payment_method_id" id="method{{ $method->id }}" value="{{ $method->id }}" data-type="{{ $method->type }}" form="checkoutForm" required>
                            <label class="form-check-label" for="method{{ $method->id }}">
                                <strong>{{ $method->name }}</strong>
                                @if(in_array($method->type, ['paystack', 'flutterwave', 'paypal']))
                                    <span class="badge bg-info ms-1 text-uppercase">{{ $method->type }}</span>
                                @endif
                                @if($method->type === 'bank_transfer')
                                    <span class="badge bg-warning text-dark ms-1">Manual Transfer</span>
                                @endif
                                <small class="text-muted d-block">{{ $method->description }}</small>
                            </label>
                        </div>
                    @endforeach
                </div>
            </div>

            <div class="card border-0 shadow-sm">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">Order Notes (Optional)</h5>
                </div>
                <div class="card-body">
                    <textarea class="form-control" name="notes" rows="3" form="checkoutForm" placeholder="Add any special instructions for your order..."></textarea>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-success text-white">
                    <h5 class="mb-0">Order Summary</h5>
                </div>
                <div class="card-body">
                    @foreach($cartItems as $productId => $item)
                        <div class="d-flex justify-content-between mb-2">
                            <span>{{ substr($item['product']->name, 0, 20) }} x{{ $item['quantity'] }}</span>
                            <strong>{{ \App\Support\Currency::symbol() }}{{ number_format($item['total'], 2) }}</strong>
                        </div>
                    @endforeach
                    <hr>
                    <div class="d-flex justify-content-between mb-2">
                        <span>Subtotal:</span>
                        <strong>{{ \App\Support\Currency::symbol() }}{{ number_format($subtotal, 2) }}</strong>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <span>Shipping:</span>
                        <strong>{{ \App\Support\Currency::symbol() }}{{ number_format($shipping, 2) }}</strong>
                    </div>
                    <hr>
                    <div class="d-flex justify-content-between">
                        <span class="h5">Total:</span>
                        <strong class="h5">{{ \App\Support\Currency::symbol() }}{{ number_format($subtotal + $shipping, 2) }}</strong>
                    </div>
                </div>
            </div>

            <button type="submit" form="checkoutForm" class="btn btn-success w-100 btn-lg" id="checkoutSubmitButton">
                <i class="bi bi-check-lg"></i> Place Order
            </button>
        </div>
    </div>
</div>

<script>
function copySameAddress() {
    const checkbox = document.getElementById('sameAddress');
    const shippingAddress = document.getElementById('shipping_address').value;
    const billingAddress = document.getElementById('billing_address');
    
    if (checkbox.checked) {
        billingAddress.value = shippingAddress;
    }
}

document.addEventListener('DOMContentLoaded', function () {
    const submitButton = document.getElementById('checkoutSubmitButton');
    const radios = document.querySelectorAll('.payment-method-radio');

    function updateButtonText() {
        const selected = document.querySelector('.payment-method-radio:checked');
        const type = selected ? selected.dataset.type : '';

        if (type === 'paystack' || type === 'flutterwave' || type === 'paypal') {
            const gatewayNames = {
                paystack: 'Paystack',
                flutterwave: 'Flutterwave',
                paypal: 'PayPal'
            };
            const gatewayName = gatewayNames[type] || 'Gateway';
            submitButton.innerHTML = '<i class="bi bi-shield-lock"></i> Continue to ' + gatewayName;
            return;
        }

        if (type === 'bank_transfer') {
            submitButton.innerHTML = '<i class="bi bi-bank"></i> Place Order (Bank Transfer)';
            return;
        }

        submitButton.innerHTML = '<i class="bi bi-check-lg"></i> Place Order';
    }

    radios.forEach(function (radio) {
        radio.addEventListener('change', updateButtonText);
    });

    updateButtonText();
});
</script>
@endsection