@extends('layout.template')
@section('title','Cusella Home Furnishing | Curtains, Sofas, Wallpapers & Interior Solutions')
@section('content')
<div class="checkout-main-area pb-100 pt-100">
    <div class="container">
  @if(empty($cart['items']) || count($cart['items']) == 0)

        {{-- EMPTY CART DESIGN --}}
        <div class="empty-cart-wrapper text-center py-5">

            <div class="empty-cart-box">

                <div class="empty-cart-icon">
                    <i class="pe-7s-cart"></i>
                </div>

                <h3>Your Cart is Empty</h3>
                <p>Looks like you haven’t added anything yet.</p>

                <a href="{{ url('/shop') }}" class="btn-shop">
                    Continue Shopping
                </a>

            </div>

        </div>
        @else
        <div class="checkout-wrap pt-30">
            <form id="checkoutForm">
                @csrf
                <div class="row">
                    <div class="col-lg-7">
                        <div class="billing-info-wrap">
                            <h3>Billing Details</h3>

                            <div class="row">

                                {{-- NAME --}}
                                <div class="col-lg-6">
                                    <div class="billing-info mb-20">
                                        <label>Name *</label>
                                        <input type="text" name="name"
                                            value="{{ $defaultAddress['name'] ?? '' }}">
                                    </div>
                                </div>

                                {{-- PHONE --}}
                                <div class="col-lg-6">
                                    <div class="billing-info mb-20">
                                        <label>Phone *</label>
                                        <input type="text" name="phone"
                                            value="{{ $defaultAddress['phone'] ?? '' }}">
                                        <input type="hidden" name="billing_address_id" id="billing_address_id">
                                        <input type="hidden" name="shipping_address_id" id="shipping_address_id">
                                    </div>
                                </div>

                                {{-- COUNTRY --}}
                                <div class="col-lg-12">
                                    <div class="billing-select mb-20">
                                        <label>Country *</label>
                                        <select name="country" class="form-control">
                                            <option value="India" selected>India</option>
                                        </select>
                                    </div>
                                </div>

                                {{-- ADDRESS --}}
                                <div class="col-lg-12">
                                    <div class="billing-info mb-20">
                                        <label>Address *</label>
                                        <input type="text" name="address_line1"
                                            value="{{ $defaultAddress['address_line1'] ?? '' }}"
                                            placeholder="House number and street name">
                                    </div>
                                </div>

                                {{-- CITY --}}
                                <div class="col-lg-6">
                                    <div class="billing-info mb-20">
                                        <label>City *</label>
                                        <input type="text" name="city"
                                            value="{{ $defaultAddress['city'] ?? '' }}">
                                    </div>
                                </div>

                                {{-- STATE --}}
                                <div class="col-lg-6">
                                    <div class="billing-info mb-20">
                                        <label>State *</label>
                                        <input type="text" name="state"
                                            value="{{ $defaultAddress['state'] ?? '' }}">
                                    </div>
                                </div>

                                {{-- PINCODE --}}
                                <div class="col-lg-6">
                                    <div class="billing-info mb-20">
                                        <label>Pincode *</label>
                                        <input type="text" name="pincode"
                                            value="{{ $defaultAddress['pincode'] ?? '' }}">
                                    </div>
                                </div>

                                {{-- EMAIL --}}
                                <div class="col-lg-6">
                                    <div class="billing-info mb-20">
                                        <label>Email *</label>
                                        <input type="email" name="email">
                                    </div>
                                </div>

                            </div>

                            {{-- SHIP TO DIFFERENT --}}
                            <div class="checkout-account mt-25">
                                <input id="shipToggle" type="checkbox">
                                <span>Ship to a different address?</span>
                            </div>

                            {{-- SHIPPING SECTION --}}
                            <div id="shippingSection" style="display:none;" class="mt-3">

                                {{-- SELECT ADDRESS --}}
                                <div class="billing-info mb-20">
                                    <label>Select Address</label>
                                    <select id="addressSelect" class="form-control">
                                        <option value="">-- Select Address --</option>

                                        @foreach($addresses as $addr)
                                        <option value="{{ json_encode($addr) }}">
                                            {{ $addr['name'] }} - {{ $addr['address_line1'] }}
                                        </option>
                                        @endforeach
                                    </select>
                                </div>

                                {{-- SHIPPING FIELDS --}}
                                <div class="billing-info mb-20">
                                    <label>Name</label>
                                    <input type="text" id="ship_name" name="ship_name">
                                </div>

                                <div class="billing-info mb-20">
                                    <label>Address</label>
                                    <input type="text" id="ship_address" name="ship_address">
                                </div>

                                <div class="billing-info mb-20">
                                    <label>City</label>
                                    <input type="text" id="ship_city" name="ship_city">
                                </div>

                                <div class="billing-info mb-20">
                                    <label>State</label>
                                    <input type="text" id="ship_state" name="ship_state">
                                </div>

                                <div class="billing-info mb-20">
                                    <label>Pincode</label>
                                    <input type="text" id="ship_pincode" name="ship_pincode">
                                </div>

                                <div class="billing-info mb-20">
                                    <label>Phone</label>
                                    <input type="text" id="ship_phone" name="ship_phone">
                                </div>

                            </div>


                        </div>
                    </div>
                    <div class="col-lg-5">
                        <div class="your-order-area mt-4">
                            <h3>Select Courier</h3>

                            <div class="row">

                                @foreach($couriers as $courier)
                                <div class="col-4 mb-3">
                                    <label class="courier-card">
                                        <input type="radio" name="courier_id" value="{{ $courier['id'] }}" hidden>

                                        <div class="card p-2 text-center courier-box">
                                            <img src="{{ $courier['logo'] }}" height="50" style="object-fit:contain;">
                                            <small class="mt-2">{{ $courier['name'] }}</small>
                                        </div>
                                    </label>
                                </div>
                                @endforeach

                            </div>
                        </div>
                        <div class="your-order-area">
                            <h3>Your order</h3>
                            <div class="your-order-wrap gray-bg-4">
                                <div class="your-order-info-wrap">
                                    <div class="your-order-info">
                                        <ul>
                                            <li>Product <span>Total</span></li>
                                        </ul>
                                    </div>
                                    <div class="your-order-middle">
                                        <ul>
                                            @foreach($cart['items'] ?? [] as $item)
                                            <li class="order-item">
                                                <img src="{{ $item['image'] ?? asset('assets/images/default.png') }}" class="order-img">

                                                <div class="item-left">
                                                    <span class="item-name" title="{{ $item['name'] }}">
                                                        {{ $item['name'] }}
                                                    </span>
                                                    <span class="item-qty">× {{ $item['quantity'] }}</span>
                                                </div>

                                                <span class="item-price">₹{{ $item['price'] }}</span>
                                            </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                    <div class="your-order-info order-subtotal">
                                        <ul>
                                            <li>Subtotal
                                                <span>₹{{ $cart['price_details']['sub_total'] ?? 0 }}</span>
                                            </li>
                                        </ul>
                                    </div>
                                    @if(isset($cart['coupon']))
                                    <div class="your-order-info order-subtotal">
                                        <ul>
                                            <li>Coupon Discount
                                                <span class="text-success">-₹{{ number_format($cart['coupon']['value'],2) }}</span>
                                            </li>
                                        </ul>
                                        @endif
                                    </div>
                                    <div class="your-order-info order-total">
                                        <ul>
                                            <li>Total
                                                <span>₹{{ $cart['price_details']['total'] ?? 0 }}</span>
                                            </li>
                                        </ul>
                                    </div>
                                </div>

                            </div>
                            <div class="Place-order btn-hover">

                                <button type="button" onclick="placeOrder()" class="btn btn-primary w-100">
                                    Place Order
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        @endif
    </div>
</div>
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script>
    document.getElementById('shipToggle').addEventListener('change', function() {
        document.getElementById('shippingSection').style.display =
            this.checked ? 'block' : 'none';
    });

    document.getElementById('addressSelect').addEventListener('change', function() {

        if (!this.value) return;

        let addr = JSON.parse(this.value);

        document.getElementById('ship_name').value = addr.name ?? '';
        document.getElementById('ship_address').value = addr.address_line1 ?? '';
        document.getElementById('ship_city').value = addr.city ?? '';
        document.getElementById('ship_state').value = addr.state ?? '';
        document.getElementById('ship_pincode').value = addr.pincode ?? '';
        document.getElementById('ship_phone').value = addr.phone ?? '';
    });

    // document.getElementById('addressSelect').addEventListener('change', function() {

    //     let addr = JSON.parse(this.value);

    //     document.getElementById('billing_address_id').value = addr.id;
    // });
    //✅ When user selects address (SET ID)
    $('#addressSelect').on('change', function() {

        let addr = JSON.parse(this.value);

        $('#billing_address_id').val(addr.id);
        $('#shipping_address_id').val(addr.id);
    });
</script>

@endsection