@extends('layouts.app')

@section('content') 

<style>
.checkout-section {
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    padding: 60px 0;
    min-height: 100vh;
}

.checkout-card,
.summary-card,
.address-card {
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 12px 35px rgba(15, 23, 42, 0.08);
    border: 1px solid #eef2f7;
}

.checkout-title {
    font-size: 32px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 25px;
}

.checkout-card {
    padding: 25px;
    margin-bottom: 20px;
}

.checkout-card h4,
.summary-card h4 {
    font-size: 22px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 18px;
}

.address-card {
    padding: 18px;
    margin-bottom: 14px;
    cursor: pointer;
}

.address-card input {
    margin-right: 10px;
}

.address-card strong {
    color: #111827;
}

.summary-card {
    padding: 24px;
    position: sticky;
    top: 90px;
}

.summary-line {
    display: flex;
    justify-content: space-between;
    margin-bottom: 14px;
    color: #4b5563;
    font-weight: 600;
}

.summary-line.total {
    border-top: 1px solid #eef2f7;
    padding-top: 16px;
    font-size: 20px;
    color: #111827;
    font-weight: 900;
}

.btn-place-order {
    background: #111827;
    color: #fff;
    border: none;
    border-radius: 14px;
    padding: 14px 20px;
    width: 100%;
    font-weight: 800;
    margin-top: 20px;
}

.btn-add-address {
    background: #f3f4f6;
    color: #111827;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 12px 18px;
    font-weight: 800;
    display: inline-block;
    text-decoration: none;
}
</style>

<section class="checkout-section">
    <div class="container">
        <h1 class="checkout-title">Checkout</h1>

        <form method="POST" action="#">
            @csrf

            <div class="row">
                <div class="col-lg-8">
                    <div class="checkout-card">
                        <h4>Delivery Address</h4>

                        @if($addresses->count() > 0)
                            @foreach($addresses as $address)
                                <label class="address-card d-block">
                                    <input type="radio"
                                           name="address_id"
                                           value="{{ $address->id }}"
                                           {{ $address->is_default ? 'checked' : '' }}
                                           required>

                                    <strong>{{ $address->name }}</strong>
                                    <span class="badge badge-dark ml-2">{{ $address->type }}</span>

                                    @if($address->is_default)
                                        <span class="badge badge-success ml-1">Default</span>
                                    @endif

                                    <p class="mb-1 mt-2 text-muted">
                                        {{ $address->address }},
                                        {{ $address->city }},
                                        {{ $address->state }} - {{ $address->pincode }}
                                    </p>

                                    <small class="text-muted">
                                        Phone: {{ $address->phone }}
                                    </small>
                                </label>
                            @endforeach
                        @else
                            <p class="text-muted">No address found. Please add a delivery address.</p>
                            <a href="{{ route('address.create') }}" class="btn-add-address">
                                <i class="fas fa-plus mr-1"></i> Add Address
                            </a>
                        @endif
                    </div>

                    <div class="checkout-card">
                        <h4>Payment Method</h4>

                        <label class="address-card d-block">
                            <input type="radio" name="payment_method" value="COD" checked>
                            <strong>Cash On Delivery</strong>
                            <p class="mb-0 text-muted mt-1">Pay when your order is delivered.</p>
                        </label>
                        <label class="address-card d-block">
                            <input type="radio" name="payment_method" value="RAZORPAY" >
                            <strong>Online</strong>
                            <p class="mb-0 text-muted mt-1">Razorpay</p>
                        </label>
                    </div>
                </div>

                <div class="col-lg-4">
                    <div class="summary-card">
                        <h4>Order Summary</h4>

                        @foreach($cartItems as $item)
    @if($item->product)

        @php
            if ($item->variant_id && $item->variant) {
                $sellPrice = $item->variant->final_price;
                $oldPrice = $item->variant->size_mrp;
                $sizeName = $item->variant->size_name;
            } else {
                $sellPrice = $item->product->final_price;
                $oldPrice = $item->product->productMrp;
                $sizeName = null;
            }

            $addons = $item->addons_json ? json_decode($item->addons_json, true) : [];
            $addonTotal = $item->addon_total ?? 0;

            $itemTotal = ($sellPrice * $item->quantity) + $addonTotal;
        @endphp

        <div class="summary-line" style="align-items:flex-start; gap:10px;">
            <div>
                <div style="font-weight:700;">
                    {{ $item->product->productName }}
                </div>

                @if($sizeName)
                    <div style="font-size:13px;color:#6b7280;">
                        Size: {{ $sizeName }}
                    </div>
                @endif

                @if($item->color_name)
                    <div style="font-size:13px;color:#6b7280;">
                        Color: {{ $item->color_name }}
                    </div>
                @endif

                <div style="font-size:13px;color:#6b7280;">
                    Qty: {{ $item->quantity }}
                </div>

                @if(!empty($addons))
                    <div style="font-size:13px;color:#6b7280;margin-top:4px;">
                        <strong>Addons:</strong>
                        @foreach($addons as $addon)
                            <div>
                                {{ $addon['label'] }}
                                (+₹{{ number_format($addon['line_total'], 2) }})
                            </div>
                        @endforeach
                    </div>
                @endif

                <div style="margin-top:4px;">
                    <span style="font-weight:700;color:#111827;">
                        ₹{{ number_format($sellPrice, 2) }}
                    </span>

                    @if($oldPrice > 0 && $oldPrice > $sellPrice)
                        <span style="text-decoration:line-through;color:#9ca3af;font-size:13px;">
                            ₹{{ number_format($oldPrice, 2) }}
                        </span>
                    @endif
                </div>
            </div>

            <strong>
                ₹{{ number_format($itemTotal, 2) }}
            </strong>
        </div>

    @endif
@endforeach

                        <div class="summary-line">
                            <span>Subtotal</span>
                            <strong>₹{{ number_format($subtotal, 2) }}</strong>
                        </div>
                        <div class="summary-line d-none">
                            <span>Package Weight</span>
                            <strong id="packageWeightText">Calculating...</strong>
                        </div>
                        <div class="summary-line">
                            <span>Shipping</span>
                            <strong id="shippingChargeText">Select address</strong>
                        </div>
                        
                        <div class="d-none summary-line" id="courierNameBox" style="display:none;">
                            <span>Courier</span>
                            <strong id="courierNameText"></strong>
                        </div>

                        <div class="summary-line total">
                            <span>Total</span>
                            <strong id="grandTotalText">₹{{ number_format($subtotal, 2) }}</strong>
                        </div>
                        <input type="hidden" id="subtotalValue" value="{{ $subtotal }}">
                        <input type="hidden" id="shippingChargeValue" value="0">
                        <button type="button" id='placeOrderBtn' style="cursor: pointer;" class="btn-place-order" {{ $addresses->count() == 0 ? 'disabled' : '' }}>
                            Place Order
                        </button>
                    </div>
                </div>
            </div>

        </form>
    </div>
</section>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {

    const addressInputs = document.querySelectorAll('input[name="address_id"]');
    const paymentInputs = document.querySelectorAll('input[name="payment_method"]');

    function calculateShipping() {
        let addressInput = document.querySelector('input[name="address_id"]:checked');
        let paymentInput = document.querySelector('input[name="payment_method"]:checked');

        if (!addressInput || !paymentInput) {
            return;
        }

        document.getElementById('shippingChargeText').innerText = 'Calculating...';

        fetch("{{ route('checkout.calculate.shipping') }}", {
            method: "POST",
            headers: {
                "X-CSRF-TOKEN": "{{ csrf_token() }}",
                "Accept": "application/json",
                "Content-Type": "application/json"
            },
            body: JSON.stringify({
                address_id: addressInput.value,
                payment_method: paymentInput.value
            })
        })
        .then(res => res.json())
        .then(data => {
            if (!data.status) {
                document.getElementById('shippingChargeText').innerText = 'Not available';
                document.getElementById('shippingChargeValue').value = 0;
                document.getElementById('courierNameBox').style.display = 'none';
                return;
            }

            let subtotal = parseFloat(document.getElementById('subtotalValue').value);
            let shipping = parseFloat(data.shipping_charge);
            let grandTotal = subtotal + shipping;
            document.getElementById('packageWeightText').innerText = data.total_weight + ' kg';
            document.getElementById('shippingChargeValue').value = shipping;
            document.getElementById('shippingChargeText').innerText = '₹' + shipping.toFixed(2);
            document.getElementById('grandTotalText').innerText = '₹' + grandTotal.toFixed(2);

            if (data.courier_name) {
                document.getElementById('courierNameText').innerText = data.courier_name;
                document.getElementById('courierNameBox').style.display = 'flex';
            }
        })
        .catch(() => {
            document.getElementById('shippingChargeText').innerText = 'Error';
        });
    }

    addressInputs.forEach(input => {
        input.addEventListener('change', calculateShipping);
    });

    paymentInputs.forEach(input => {
        input.addEventListener('change', calculateShipping);
    });

    calculateShipping();
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {

    const placeBtn = document.getElementById('placeOrderBtn');

    if (!placeBtn) {
        return;
    }

    placeBtn.addEventListener('click', function () {

        let paymentInput = document.querySelector('input[name="payment_method"]:checked');
        let addressInput = document.querySelector('input[name="address_id"]:checked');

        if (!addressInput) {
            alert('Please select delivery address.');
            return;
        }

        if (!paymentInput) {
            alert('Please select payment method.');
            return;
        }

        placeBtn.disabled = true;
        placeBtn.innerText = 'Placing Order...';

        fetch("{{ route('checkout.place') }}", {
            method: "POST",
            headers: {
                "X-CSRF-TOKEN": "{{ csrf_token() }}",
                "Accept": "application/json",
                "Content-Type": "application/json"
            },
            body: JSON.stringify({
                address_id: addressInput.value,
                payment_method: paymentInput.value
            })
        })
        .then(async function(response) {
            let data = await response.json();

            if (!response.ok) {
                throw new Error(data.message || 'Something went wrong.');
            }

            return data;
        })
        .then(function(data) {

            if (!data.status) {
                alert(data.message || 'Order failed.');
                placeBtn.disabled = false;
                placeBtn.innerText = 'Place Order';
                return;
            }

            if (data.payment_method === 'COD') {
                window.location.href = data.redirect_url;
                return;
            }

            let options = {
                key: data.key,
                amount: data.amount,
                currency: "INR",
                name: "{{ config('app.name') }}",
                description: "Order Payment",
                order_id: data.razorpay_order_id,

                prefill: {
                    name: data.name,
                    email: data.email,
                    contact: data.phone
                },

                handler: function (response) {

                    fetch("{{ route('razorpay.success') }}", {
                        method: "POST",
                        headers: {
                            "X-CSRF-TOKEN": "{{ csrf_token() }}",
                            "Accept": "application/json",
                            "Content-Type": "application/json"
                        },
                        body: JSON.stringify({
                            order_id: data.order_id,
                            razorpay_order_id: response.razorpay_order_id,
                            razorpay_payment_id: response.razorpay_payment_id,
                            razorpay_signature: response.razorpay_signature
                        })
                    })
                    .then(res => res.json())
                    .then(result => {
                        window.location.href = result.redirect_url;
                    })
                    .catch(error => {
                        alert(error.message);
                        placeBtn.disabled = false;
                        placeBtn.innerText = 'Place Order';
                    });
                },

                modal: {
                    ondismiss: function () {
                        placeBtn.disabled = false;
                        placeBtn.innerText = 'Place Order';
                    }
                }
            };

            let rzp = new Razorpay(options);

            rzp.on('payment.failed', function (response) {

                fetch("{{ route('razorpay.failed') }}", {
                    method: "POST",
                    headers: {
                        "X-CSRF-TOKEN": "{{ csrf_token() }}",
                        "Accept": "application/json",
                        "Content-Type": "application/json"
                    },
                    body: JSON.stringify({
                        order_id: data.order_id,
                        razorpay_order_id: data.razorpay_order_id,
                        razorpay_payment_id: response.error.metadata.payment_id || null,
                        payment_error: response.error
                    })
                })
                .then(res => res.json())
                .then(result => {
                    window.location.href = result.redirect_url;
                })
                .catch(error => {
                    alert(error.message);
                    placeBtn.disabled = false;
                    placeBtn.innerText = 'Place Order';
                });
            });

            rzp.open();

        })
        .catch(function(error) {
            alert(error.message);
            placeBtn.disabled = false;
            placeBtn.innerText = 'Place Order';
        });
    });
});
</script>
@endsection