@extends('layouts.app')

@section('title', "Checkout - MJ's Bikes")

@section('content')

<!-- BREADCRUMBS -->
<div class="bg-light py-3 border-bottom mb-4">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href="{{ route('home') }}" class="text-danger text-decoration-none">Home</a></li>
                <li class="breadcrumb-item"><a href="{{ route('cart.index') }}" class="text-danger text-decoration-none">Cart</a></li>
                <li class="breadcrumb-item active" aria-current="page">Checkout</li>
            </ol>
        </nav>
    </div>
</div>

<div class="container mb-5">
    <h2 class="brand-font text-uppercase text-secondary mb-4"><i class="bi bi-wallet2 text-danger me-2"></i>Checkout</h2>
    
    <form action="{{ route('checkout.process') }}" method="POST">
        @csrf
        <div class="row g-4">
            
            <!-- CUSTOMER DETAILS & SHIPPING FORM -->
            <div class="col-lg-7">
                <div class="card border-0 shadow-sm rounded-4 p-4 bg-white mb-4">
                    <h5 class="fw-bold text-secondary mb-4 border-bottom pb-2">Shipping Information</h5>
                    
                    <div class="row g-3">
                        <div class="col-12">
                            <label for="name" class="form-label small fw-semibold text-muted">Full Name</label>
                            <input type="text" class="form-control rounded-pill px-3" id="name" name="name" value="{{ old('name', $user->name ?? '') }}" required>
                        </div>
                        
                        <div class="col-md-6">
                            <label for="phone" class="form-label small fw-semibold text-muted">Phone Number (For M-Pesa push / contact)</label>
                            <input type="text" class="form-control rounded-pill px-3" id="phone" name="phone" placeholder="e.g. 0712345678" value="{{ old('phone', $user->phone ?? '') }}" required>
                            <small class="text-muted" style="font-size: 10px;">Please ensure this is a Safaricom number if choosing M-Pesa.</small>
                        </div>

                        <div class="col-md-6">
                            <label for="email" class="form-label small fw-semibold text-muted">Email Address (Optional)</label>
                            <input type="email" class="form-control rounded-pill px-3" id="email" name="email" value="{{ old('email', $user->email ?? '') }}">
                        </div>

                        <div class="col-12">
                            <label for="shipping_address" class="form-label small fw-semibold text-muted">Delivery Address (Nairobi & environs)</label>
                            <textarea class="form-control rounded-4" id="shipping_address" name="shipping_address" rows="3" placeholder="Apartment name, house number, estate, street, or landmarks." required>{{ old('shipping_address', $user->address ?? '') }}</textarea>
                        </div>

                        <div class="col-12">
                            <label for="notes" class="form-label small fw-semibold text-muted">Order Notes (Optional)</label>
                            <textarea class="form-control rounded-4" id="notes" name="notes" rows="2" placeholder="Any special instructions for the courier."></textarea>
                        </div>
                    </div>
                </div>

                <!-- PAYMENT OPTION METHOD -->
                <div class="card border-0 shadow-sm rounded-4 p-4 bg-white">
                    <h5 class="fw-bold text-secondary mb-4 border-bottom pb-2">Payment Method</h5>
                    
                    <div class="form-check p-3 rounded-4 border border-light shadow-sm mb-3 d-flex align-items-center gap-3">
                        <input class="form-check-input ms-0" type="radio" name="payment_method" id="pay_mpesa" value="mpesa" checked>
                        <div class="flex-grow-1">
                            <label class="form-check-label fw-bold text-secondary d-flex align-items-center gap-2" for="pay_mpesa">
                                <i class="bi bi-phone-vibrate text-success fs-4"></i> Safaricom M-Pesa STK Push
                            </label>
                            <small class="text-muted d-block">Receive an instant payment prompt on your phone. Enter your M-Pesa PIN to complete order.</small>
                        </div>
                    </div>

                    <div class="form-check p-3 rounded-4 border border-light shadow-sm d-flex align-items-center gap-3">
                        <input class="form-check-input ms-0" type="radio" name="payment_method" id="pay_cod" value="cod">
                        <div class="flex-grow-1">
                            <label class="form-check-label fw-bold text-secondary d-flex align-items-center gap-2" for="pay_cod">
                                <i class="bi bi-cash-stack text-warning fs-4"></i> Cash on Delivery (COD)
                            </label>
                            <small class="text-muted d-block">Pay cash or mobile money directly to the dispatch courier on arrival of your package.</small>
                        </div>
                    </div>
                </div>
            </div>

            <!-- ORDER SUMMARY SIDEBAR -->
            <div class="col-lg-5">
                <div class="card border-0 shadow-sm rounded-4 p-4 bg-white sticky-lg-top" style="top: 100px; z-index: 10;">
                    <h5 class="fw-bold text-secondary mb-4 border-bottom pb-2">Your Items</h5>
                    
                    <div class="checkout-items mb-3" style="max-height: 250px; overflow-y: auto;">
                        @php $subtotal = 0; @endphp
                        @foreach($cart as $id => $item)
                            @php 
                                $subtotal += $item['price'] * $item['quantity'];
                                $itemImg = mjs_image($item['image'] ?? null, $id);
                            @endphp
                            <div class="d-flex align-items-center gap-3 mb-3 pb-3 border-bottom">
                                <img src="{{ $itemImg }}" class="rounded border" style="width: 50px; height: 50px; object-fit: cover;" alt="{{ $item['name'] }}">
                                <div class="flex-grow-1 min-w-0">
                                    <h6 class="fw-bold text-secondary text-truncate mb-0" style="font-size: 13px;">{{ $item['name'] }}</h6>
                                    <small class="text-muted">KSh {{ number_format($item['price']) }} x {{ $item['quantity'] }}</small>
                                </div>
                                <div class="fw-bold text-secondary" style="font-size: 13px;">
                                    KSh {{ number_format($item['price'] * $item['quantity']) }}
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <div class="d-flex justify-content-between mb-2">
                        <span class="text-muted">Subtotal</span>
                        <span class="fw-semibold text-secondary">KSh {{ number_format($subtotal) }}</span>
                    </div>
                    <div class="d-flex justify-content-between mb-3">
                        <span class="text-muted">Delivery Charges</span>
                        <span class="fw-semibold text-success">KSh 350.00</span>
                    </div>
                    
                    <hr>
                    
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <span class="fw-bold text-secondary fs-6">Order Total</span>
                        <span class="fw-extrabold text-danger fs-4">KSh {{ number_format($subtotal + 350) }}</span>
                    </div>

                    <button type="submit" class="btn btn-primary-mj btn-lg w-100 rounded-pill py-3 text-uppercase fs-6">
                        Place Order & Pay <i class="bi bi-chevron-right ms-1"></i>
                    </button>
                    
                    <div class="text-center mt-3">
                        <small class="text-muted"><i class="bi bi-shield-check me-1"></i>Secure SSL Checkout</small>
                    </div>
                </div>
            </div>

        </div>
    </form>
</div>

@endsection
