@extends('layouts.app')
@section('title', 'Select Delivery Address | Saree Store')

@section('content')
@include('layouts.breadcrumb', [
    'title' => 'Checkout - Shipping Address', 
    'crumbs' => [
        ['name' => 'Home', 'url' => route('home')], 
        ['name' => 'Cart', 'url' => route('cart')],
        ['name' => 'Shipping Address', 'url' => null]
    ]
])

<div class="ul-container py-5">
    <div class="row g-4">
        <!-- LEFT: SAVED ADDRESSES OR ADD NEW ADDRESS FORM -->
        <div class="col-lg-8">
            <div class="p-4 bg-white rounded-4 border shadow-sm mb-4">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h5 class="fw-bold mb-0" style="color: #2B1820;">Select Delivery Address</h5>
                    <button type="button" class="btn btn-sm btn-outline-danger rounded-3" onclick="toggleAddressForm()">
                        + Enter New Address
                    </button>
                </div>

                <!-- Saved Addresses Radio Cards -->
                @if($addresses->count() > 0)
                    <form method="POST" action="{{ route('checkout.address.store') }}" id="savedAddressForm" class="mb-4">
                        @csrf
                        <div class="row row-cols-1 row-cols-md-2 g-3 mb-3">
                            @foreach($addresses as $index => $addr)
                                <div class="col">
                                    <label class="p-3 border rounded-3 d-block h-100 cursor-pointer address-card shadow-sm {{ $index === 0 ? 'border-danger bg-light' : 'bg-white' }}" style="cursor: pointer;">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="selected_address_id" value="{{ $addr->id }}" {{ $index === 0 ? 'checked' : '' }} onchange="selectAddressCard(this)">
                                            <strong class="d-block text-dark mb-1">{{ $addr->name }}</strong>
                                            <span class="d-block small text-muted mb-1"><i class="flaticon-call me-1"></i>{{ $addr->phone }}</span>
                                            <p class="small text-secondary mb-0" style="line-height: 1.4;">
                                                {{ $addr->address_line }}, {{ $addr->city }}, {{ $addr->state }} - <strong>{{ $addr->pincode }}</strong>
                                            </p>
                                        </div>
                                    </label>
                                </div>
                            @endforeach
                        </div>

                        <button type="submit" class="btn btn-danger py-3 px-5 rounded-3 fw-bold shadow-sm">
                            Deliver to Selected Address →
                        </button>
                    </form>
                @endif

                <!-- New Address Form -->
                <div id="newAddressFormWrapper" class="{{ $addresses->count() > 0 ? 'd-none' : '' }} pt-3 border-top">
                    <h6 class="fw-bold mb-3 text-dark">Enter Delivery Address Details</h6>
                    <form method="POST" action="{{ route('checkout.address.store') }}">
                        @csrf
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label fw-semibold" for="name">Recipient Full Name *</label>
                                <input id="name" type="text" class="form-control rounded-3" name="name" value="{{ old('name', auth('web')->user()->name) }}" placeholder="e.g. Ananya Sharma" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold" for="phone">Phone Number *</label>
                                <input id="phone" type="text" class="form-control rounded-3" name="phone" value="{{ old('phone', auth('web')->user()->phone) }}" placeholder="+91 98765 43210" required>
                            </div>
                            <div class="col-12">
                                <label class="form-label fw-semibold" for="address_line">Flat, House No., Street, Landmark *</label>
                                <textarea id="address_line" class="form-control rounded-3" name="address_line" rows="2" placeholder="e.g. 12 MG Road, T. Nagar, near City Mall" required>{{ old('address_line') }}</textarea>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-semibold" for="city">City / Town *</label>
                                <input id="city" type="text" class="form-control rounded-3" name="city" value="{{ old('city') }}" placeholder="Chennai" required>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-semibold" for="state">State *</label>
                                <input id="state" type="text" class="form-control rounded-3" name="state" value="{{ old('state') }}" placeholder="Enter State" required>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-semibold" for="pincode">Pincode *</label>
                                <input id="pincode" type="text" class="form-control rounded-3" name="pincode" value="{{ old('pincode') }}" placeholder="600017" required>
                            </div>
                        </div>

                        <div class="mt-4">
                            <button type="submit" class="btn btn-danger py-3 px-5 rounded-3 fw-bold shadow-sm">
                                Save & Proceed to Order Review →
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- RIGHT: SUMMARY -->
        <div class="col-lg-4">
            <div class="p-4 bg-white rounded-4 border shadow-sm">
                <h5 class="fw-bold mb-3" style="color: #2B1820;">Cart Items Summary</h5>
                <div class="mb-3 border-bottom pb-3">
                    @foreach($cartItems as $item)
                        <div class="d-flex align-items-center gap-3 mb-2">
                            <img src="{{ asset($item->product->image) }}" alt="{{ $item->product->name }}" class="rounded-2" style="width: 50px; height: 50px; object-fit: cover;">
                            <div class="flex-grow-1">
                                <strong class="d-block small text-dark">{{ $item->product->name }}</strong>
                                <span class="small text-muted">Qty: {{ $item->quantity }} x ₹{{ number_format($item->product->sale_price ?: $item->product->price, 2) }}</span>
                            </div>
                        </div>
                    @endforeach
                </div>

                <div class="d-flex justify-content-between mb-2">
                    <span class="text-muted">Subtotal</span>
                    <strong class="text-dark">₹{{ number_format($cartItems->sum(fn($i) => ($i->product->sale_price ?: $i->product->price) * $i->quantity), 2) }}</strong>
                </div>
                <div class="d-flex justify-content-between">
                    <span class="text-muted">Delivery Charge</span>
                    <span class="text-success fw-bold">FREE</span>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    function toggleAddressForm() {
        const form = document.getElementById('newAddressFormWrapper');
        if (form) {
            form.classList.toggle('d-none');
        }
    }

    function selectAddressCard(radio) {
        document.querySelectorAll('.address-card').forEach(card => {
            card.classList.remove('border-danger', 'bg-light');
            card.classList.add('bg-white');
        });
        const parentCard = radio.closest('.address-card');
        if (parentCard) {
            parentCard.classList.add('border-danger', 'bg-light');
        }
    }
</script>
@endsection