@extends('layouts.app')
@section('content')
<style>
/* Container for the payment cards */
.card-radio {
    padding: 0;
}

.form-check {
    position: relative;
    display: block;
    min-height: 1.21875rem;
    padding-left: 0;
    margin-bottom: .125rem;
}

/* Base card design */
.card-radio .form-check-label {
    background-color: #fff;
    border: 1px solid #e9ebec;
    border-radius: 5px;
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: all 0.2s ease;
    height: 70px;
    cursor: pointer;
}

/* Logo inside card */
.card-radio .form-check-label img {
    max-height: 50px;
    max-width: 55%;
    object-fit: contain;      /* keeps logo proportion */
}

/* Hide default radio */
.card-radio .form-check-input {
    display: none;
}

/* Hover effect */
.card-radio .form-check-label:hover {
    border-color: #db1215; /* Bootstrap primary blue */
}

/* Active state */
.card-radio .form-check-input:checked + .form-check-label {
    border-color: #db1215;
    /* box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25); */
}

.card-radio .form-check-input:checked + .form-check-label::after {
    content: "✔";
    font-size: 12px;
    font-weight: bold;
    color: #fff;              /* white check */
    position: absolute;
    top: 8px;
    right: 8px;
    background: #db1215;      /* solid red background */
    border-radius: 50%;
    border: 2px solid #db1215;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Reduce row gutter if needed */
.row.no-gutter {
    --bs-gutter-x: 0;  /* remove horizontal gap */
    --bs-gutter-y: 0;  /* remove vertical gap */
}
</style>
<!-- page-title -->
<div class="tf-page-title">
    <div class="container-full">
        <div class="heading text-center">Check Out</div>
    </div>
</div>
<!-- /page-title -->

<!-- page-cart -->
<section class="flat-spacing-11">
    <div class="container">
        <form action="{{route('shop.checkout.store')}}" method="POST" id="checkoutForm">
            @csrf
            @honeypot
            <div class="tf-page-cart-wrap layout-2">
                <div class="tf-page-cart-item">
                    <h5 class="fw-5 mb_20">Choose Nearest Branch</h5>
                    <div class="form-checkout mb_20">


                        <fieldset class="box fieldset">
                            <label>Branch</label>
                            <div class="select-custom">
                                <select class="tf-select w-100" id="branches" name="branch" data-default="">
                                </select>
                            </div>
                        </fieldset>

                    </div>
                    <h5 class="fw-5 mb_20">Billing details</h5>
                    <div class="form-checkout">
                        <div class="box grid-2">
                            <fieldset class="fieldset">
                                <label for="first-name">First Name</label>
                                <input type="text" name="first_name" id="first-name" placeholder="Juan" value="{{old('first_name') ?? ($addresses_query[0]->firstname ?? '')}}">
                            </fieldset>
                            <fieldset class="fieldset">
                                <label for="last-name">Last Name</label>
                                <input type="text" name="last_name" id="last-name"  placeholder="Dela Cruz" value="{{old('first_name') ?? ($addresses_query[0]->surname ?? '')}}">
                            </fieldset>
                        </div>
                        <fieldset class="box fieldset">
                            <label for="country">Country</label>
                            <div class="select-custom">
                                <select class="tf-select w-100" id="country" name="address[country]" data-default="">
                                    <option selected>Philippines</option>
                                </select>
                            </div>
                        </fieldset>

                        <fieldset class="box fieldset">
                            <label>Province</label>
                            <div class="select-custom">
                                <select class="tf-select w-100" id="province" name="address[province]" data-default="">
                                </select>
                            </div>
                        </fieldset>
                        <fieldset class="box fieldset">
                            <label>City</label>
                            <div class="select-custom">
                                <select class="tf-select w-100" id="city" name="address[city]" data-default="">
                                </select>
                            </div>
                        </fieldset>
                        <fieldset class="box fieldset">
                            <label>Barangay</label>
                            <div class="select-custom">
                                <select class="tf-select w-100" id="barangay" name="address[barangay]" data-default="">
                                </select>
                            </div>
                        </fieldset>
                        <fieldset class="box fieldset">
                            <label>Zip Code</label>
                            <input type="text" name="address[zipcode]" id="zipcode" placeholder="Zipcode" value="{{ old('address.zipcode') ?? ($addresses_query[0]->zipcode ?? '') }}">
                        </fieldset>
                        <fieldset class="box fieldset">
                            <label for="address">Address Line 1</label>
                            <input type="text" name="address[address_1]" placeholder="Street No., Street" value="{{ old('address.address_1') ?? ($addresses_query[0]->address_1 ?? '') }}">
                        </fieldset>
                        <fieldset class="box fieldset">
                            <span class="fw-bold" >Address Line 2</span>
                            <input type="text" name="address[address_2]" placeholder="Subdivision / Village" value="{{ old('address.address_2') ?? ($addresses_query[0]->address_2 ?? '') }}">
                        </fieldset>
                        <fieldset class="box fieldset">
                            <label for="phone">Phone Number</label>
                            <input type="number" name="phone_number" id="phone" placeholder="09171234567" value="{{old('phone_number') ?? ($addresses_query[0]->contact_number ?? '')}}">
                        </fieldset>
                        <fieldset class="box fieldset">
                            <label for="email">Email</label>
                            <input type="email" name="customer_email" id="email" placeholder="juandelacruz@gmail.com" value="{{old('customer_email') ?? ($addresses_query[0]->email ?? '')}}">
                        </fieldset>
                        <div id="shipping_address">

                            <h5 class="fw-5 mb_20">Shipping address</h5>
                            <div class="box-checkbox fieldset-radio mb_20">
                                <input type="checkbox" id="same-shipping-and-billing" name="shipping_address" class="tf-check" checked>
                                <label>Same as billing address</label>
                            </div>
                            <div class="shipping-address" style="display:none">
                                <div class="box grid-2">
                                    <fieldset class="fieldset">
                                        <label for="first-name">First Name</label>
                                        <input type="text" name="first_name2" id="first-name2" placeholder="Juan" value="{{old('first_name2')}}">
                                    </fieldset>
                                    <fieldset class="fieldset">
                                        <label for="last-name">Last Name</label>
                                        <input type="text" name="last_name2" id="last-name2"  placeholder="Dela Cruz" value="{{old('last_name2')}}">
                                    </fieldset>
                                </div>
                                <fieldset class="box fieldset">
                                    <label for="country">Country</label>
                                    <div class="select-custom">
                                        <select class="tf-select w-100" id="country2" name="address[country2]" data-default="">
                                            <option>Philippines</option>
                                        </select>
                                    </div>
                                </fieldset>

                                <fieldset class="box fieldset">
                                    <label>Province</label>
                                    <div class="select-custom">
                                        <select class="tf-select w-100" id="province2" name="address[province2]" data-default="">
                                        </select>
                                    </div>
                                </fieldset>
                                <fieldset class="box fieldset">
                                    <label>City</label>
                                    <div class="select-custom">
                                        <select class="tf-select w-100" id="city2" name="address[city2]" data-default="">
                                        </select>
                                    </div>
                                </fieldset>
                                <fieldset class="box fieldset">
                                    <label>Barangay</label>
                                    <div class="select-custom">
                                        <select class="tf-select w-100" id="barangay2" name="address[barangay2]" data-default="">
                                        </select>
                                    </div>
                                </fieldset>
                                <fieldset class="box fieldset">
                                    <label>Zip Code</label>
                                    <input type="text" name="address[zipcode2]" id="zipcode2" placeholder="Zipcode" value="{{ old('address.zipcode') }}">
                                </fieldset>
                                <fieldset class="box fieldset">
                                    <label for="address">Address Line 1</label>
                                    <input type="text" name="address[address_12]" placeholder="Street No., Street" value="{{ old('address.address_1') }}">
                                </fieldset>
                                <fieldset class="box fieldset">
                                    <span class="fw-bold" for="address">Address Line 2</span>
                                    <input type="text" name="address[address_22]" placeholder="Subdivision / Village" value="{{ old('address.address_2') }}">
                                </fieldset>
                                <fieldset class="box fieldset">
                                    <label for="phone">Phone Number</label>
                                    <input type="number" name="phone_number2" id="phone" placeholder="09171234567" value="{{old('phone_number2')}}">
                                </fieldset>
                            </div>
                        </div>
                        <fieldset class="mb-24">
                            <div class="body-title mb-10 fw-6">Order notes (optional)</div>
                            <textarea name="note" id="note"></textarea>
                        </fieldset>

                    </div>

                </div>
                <div class="tf-page-cart-footer">
                    <div class="tf-cart-footer-inner">
                        <h5 class="fw-5 mb_20">Your order</h5>
                        <div class="tf-page-cart-checkout widget-wrap-checkout">
                            <div id="checkout-items-container">
                                <ul class="wrap-checkout-product">
                                    {{-- @foreach($cart_query as $cart_item)
                                    <li class="checkout-product-item">
                                        <figure class="img-product">
                                            <img src="{{url('storage/admin/shop-bo/'.$cart_item->image)}}" alt="{{$cart_item->name}}">
                                            <span class="quantity">{{$cart_item->cart_quantity}}</span>
                                        </figure>
                                        <div class="content">
                                            <div class="info">
                                                <p class="name">{{$cart_item->name}}</p>
                                                <span class="text-muted">{{$cart_item->attribute_value}}</span>
                                            </div>
                                            <span class="price">₱{{number_format($cart_item->prices->first()->price * $cart_item->cart_quantity,2)}}</span>
                                        </div>
                                    </li>
                                    @endforeach --}}
                                </ul>
                            </div>

                            <h8 class="fw-5">Payment Method</h8>
                            <div class="wd-check-payment">
                                <div class="row">
                                    @php
                                        $isSatelliteOrCenter = auth()->check() && auth()->user()->role && in_array(auth()->user()->role->title, ["SATELLITE", "CENTER"]);

                                    @endphp
                                    @foreach($payment_methods_query as $payment_method_key => $payment_method)

                                        @if(!auth()->check()||(auth()->check()&&auth()->user()->role->title!="SATELLITE"))
                                            @if($payment_method->name == 'Wallet')
                                                @continue
                                            @endif
                                        @endif

                                        @if($isSatelliteOrCenter)
                                            @if($payment_method->name != 'Wallet')
                                                @continue
                                            @endif
                                        @endif


                                       <div class="col-lg-6 col-sm mb-3" style="margin-right: -10px;" id="{{ strtolower(str_replace(' ', '-', $payment_method->name)) }}">
                                            <div class="form-check card-radio">
                                                <input
                                                    name="payment" id="payment-method-{{ $payment_method_key }}" data-slug="{{ strtolower(str_replace(' ', '-', $payment_method->name)) }}"
                                                    type="radio"
                                                    value="{{ Crypt::encrypt($payment_method->id) }}"
                                                    class="form-check-input payment-method"
                                                    @if(!$isSatelliteOrCenter)
                                                        {{$payment_method_key == 0 ? 'checked' : ''}}
                                                    @else
                                                        checked
                                                    @endif
                                                >
                                                <label class="form-check-label d-flex justify-content-center" for="payment-method-{{ $payment_method_key }}">
                                                    <img src="{{ url('storage/admin/shop-bo/'.$payment_method->image) }}" height="50" class="" alt="{{ $payment_method->name }}">
                                                </label>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                                {{-- @foreach($payment_methods_query as $payment_method_key => $payment_method)
                                    @if($payment_method->name == 'S-Wallet')
                                        @continue
                                    @endif
                                    <label class="fieldset-radio mb_20" id="payment-method-{{strtolower(str_replace(' ','-',$payment_method->name))}}">
                                        <input type="radio" name="payment"  value="{{Crypt::encrypt($payment_method->id)}}"id="bank" class="tf-check" {{$payment_method_key == 0 ? 'checked' : ''}}>
                                        <img src="{{url('storage/admin/shop-bo/'.$payment_method->image)}}" width="60"  class="payment-image" alt="{{$payment_method->name}}">
                                    </label>
                                @endforeach --}}

                            </div>
                            <!-- <div class="coupon-box">
                                <input type="text" placeholder="Discount code">
                                <a href="#" class="tf-btn btn-sm radius-3 btn-fill btn-icon animate-hover-btn">Apply</a>
                            </div> -->
                            <h8 class="fw-5">Shipping Method</h8>
                            <div class="wd-check-payment">
                                <div class="fieldset-radio mb_20" id="shipping_delivery_container">
                                    <input type="radio" name="shipping_method" value="DELIVERY" id="shipping_method_delivery" class="tf-check shipping_method" checked>
                                    <label for="shipping_method_delivery">Delivery</label>
                                </div>
                                {{--<div class="fieldset-radio mb_20" id="shipping_pickup_container">
                                    <input type="radio" name="shipping_method" value="PICKUP" id="shipping_method_pick_up" class="tf-check shipping_method">
                                    <label for="shipping_method_pick_up">Pick-up</label>
                                </div>--}}
                            </div>
                            {{--<div id="delivery_options">

                                <h8 class="fw-5">Delivery Options</h8>
                                <div class="wd-check-payment">
                                    @foreach($delivery_option_query as $delivery_option)
                                    <div class="fieldset-radio mb_20">
                                        <input type="radio" name="delivery_option" value="{{Crypt::encrypt($delivery_option->id)}}" id="delivery_option" class="tf-check" {{$delivery_option->name=="J&T Express"?'checked':''}}>
                                        <label for="delivery_option">{{$delivery_option->name}}</label>
                                    </div>
                                    @endforeach
                                </div>
                            </div>--}}
                            <div class="d-flex justify-content-between line ">
                                <h6 class="fw-5">Sub Total</h6>
                                <h6 class="total fw-5" id="sub-total">₱{{number_format($cart_total,2)}}</h6>
                            </div>

                            <div class="d-flex justify-content-between line ">
                                <h6 class="fw-5">Service Fee</h6>
                                <h6 class="total fw-5" id="service-fee">₱{{number_format(0,2)}}</h6>
                            </div>

                            <div class="d-flex justify-content-between line ">
                                <h6 class="fw-5">Total</h6>
                                <h6 class="total fw-5" id="checkout-total">₱{{number_format($cart_total,2)}}</h6>
                            </div>

                            <p class="text_black-2">Your personal data will be used to process your order, support your experience throughout this website, and for other purposes described in our <a href="" class="text-decoration-underline">privacy policy</a>.</p>
                            <div class="box-checkbox fieldset-radio">
                                <input type="checkbox" name="t_and_c_acknowledge" id="check-agree" class="tf-check">
                                <label for="check-agree" class="text_black-2" style="font-weight:normal">I have read and agree to the website <a href="" class="text-decoration-underline">terms and conditions</a>.</label>
                            </div>

                            <button class="tf-btn radius-3 btn-fill btn-icon animate-hover-btn justify-content-center confirm-form" id="place-order-button" data-confirm-message="You want to checkout using this selected payment method?">Order Placed</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</section>
<!-- page-cart -->
@endsection

@section('page_script')
@parent
<script>


    {{--var region_select               = $('#region');--}}
     {{--
    $.ajax({
        'url'       : '{{route("shop.get-regions")}}',
        'success'   : function(response){
            response.forEach(function(region,key){
                let option = new Option(region.text, region.id);
                region_select.append(option);
            })
        }
    })
    --}}



    var branches_select             = $('#branches');
    var province_select             = $('#province');
    var city_select                 = $('#city');
    var barangay_select             = $('#barangay');

    $('.shipping_method').change(function(){
        if($(this).val() == "DELIVERY"){

            $("#cash-on-pickup").prop('disabled',true);
            $("#cash-on-delivery").prop('disabled',false);

            $("#payment-method-cash-on-delivery").prop('disabled',false);
            $("#payment-method-cash-on-pickup").prop('disabled',true);

            // $("#cash-on-pickup").hide();
            // $("#cash-on-delivery").show();

            // $("#payment-method-cash-on-delivery").show();
            // $("#payment-method-cash-on-pickup").hide();


            if($("#payment-method-cash-on-pickup").prop('checked')){
                $("#payment-method-cash-on-pickup").prop('checked',false);
                $("#payment-method-cash-on-delivery").prop('checked',true);
            }

            $("#delivery_options").show();
            $("#shipping_address").show();
        }
        else{
            $("#delivery_options").hide();
            $("#shipping_address").hide();

            $("#cash-on-delivery").prop('disabled',true);
            $("#cash-on-pickup").prop('disabled',false);

            // $("#cash-on-delivery").hide();
            // $("#cash-on-pickup").show();

            if($("#payment-method-cash-on-delivery").prop('checked')){
                $("#payment-method-cash-on-delivery").prop('checked',false);
                $("#payment-method-cash-on-pickup").prop('checked',true);
            }

            $("#payment-method-cash-on-delivery").prop('disabled',true);
            $("#payment-method-cash-on-pickup").prop('disabled',false);

            // $("#payment-method-cash-on-delivery").hide();
            // $("#payment-method-cash-on-pickup").show();

        }
    })
    $('.shipping_method:checked').trigger('change');
    $.ajax({
        'url'       : '{{route("shop.get-branches")}}/',
        'success'   : function(response){
            response.forEach(function(branches,key){
                let option = new Option(branches.text, branches.id);
                branches_select.append(option);
            })
        }
    })
    $.ajax({
        'url'       : '{{route("shop.get-provinces")}}/',
        'success'   : function(response){
            response.forEach(function(province,key){
                let option = new Option(province.text, province.id);
                province_select.append(option);
            })
            @if(!empty($addresses_query[0]))
            let province_option         = province_select.find('option:contains("{{$addresses_query[0]->province}}")')
            if(province_option == undefined){
                province_option         = province_select.find('option:first')
            }
            @else
            let province_option         = province_select.find('option:first')
            @endif
            province_option.prop('selected', true).trigger('change')
        }
    })

    province_select.change(function(){
        let province_id       = $(this).val();
        city_select.empty();
        barangay_select.empty();
        $.ajax({
            'url'       : '{{route("shop.get-municipalities")}}/'+province_id,
            'success'   : function(response){
                response.forEach(function(municipality,key){
                    let option = new Option(municipality.text, municipality.id);
                    city_select.append(option);
                })

                @if(!empty($addresses_query[0]))
                let city_option         = city_select.find('option:contains("{{$addresses_query[0]->city}}")')
                if(city_option == undefined){
                    city_option         = city_select.find('option:first')
                }
                @else
                let city_option         = city_select.find('option:first')
                @endif
                city_option.prop('selected', true)
                city_select.trigger('change')
            }
        })
    })
    city_select.change(function(){
        let municipality_id       = $(this).val();
        barangay_select.empty();
        $.ajax({
            'url'       : '{{route("shop.get-barangays")}}/'+municipality_id,
            'success'   : function(response){
                response.forEach(function(barangay,key){
                    let option = new Option(barangay.text, barangay.id);
                    barangay_select.append(option);
                })
                @if(!empty($addresses_query[0]))
                let barangay_option         = barangay_select.find('option:contains("{{$addresses_query[0]->barangay}}")')
                if(barangay_option == undefined){
                    barangay_option         = barangay_select.find('option:first')
                }
                @else
                let barangay_option         = barangay_select.find('option:first')
                @endif
                barangay_option.prop('selected', true)
                barangay_select.trigger('change')
            }
        })
    })



    var province_select2      = $('#province2');
    var city_select2          = $('#city2');
    var barangay_select2      = $('#barangay2');
    $.ajax({
        'url'       : '{{route("shop.get-provinces")}}/',
        'success'   : function(response){
            response.forEach(function(province,key){
                let option = new Option(province.text, province.id);
                province_select2.append(option);
            })
            province_select2.find('option:first').prop('selected', true).trigger('change');
        }
    })
    province_select2.change(function(){
        let province_id2       = $(this).val();
        city_select2.empty();
        barangay_select2.empty();
        $.ajax({
            'url'       : '{{route("shop.get-municipalities")}}/'+province_id2,
            'success'   : function(response){
                response.forEach(function(municipality,key){
                    let option = new Option(municipality.text, municipality.id);
                    city_select2.append(option);
                })
                city_select2.find('option:first').prop('selected', true).trigger('change');
            }
        })
    })
    city_select2.change(function(){
        let municipality_id2       = $(this).val();
        barangay_select2.empty();
        $.ajax({
            'url'       : '{{route("shop.get-barangays")}}/'+municipality_id2,
            'success'   : function(response){
                response.forEach(function(barangay,key){
                    let option = new Option(barangay.text, barangay.id);
                    barangay_select2.append(option);
                })
                barangay_select2.find('option:first').prop('selected', true).trigger('change');
            }
        })
    })
</script>
<script>
    $(document).ready(function() {
        function toggleShippingAddress() {
            if ($('#same-shipping-and-billing').is(':checked')) {
                $('.shipping-address').hide();
            } else {
                $('.shipping-address').show();
            }
        }


        function t_and_c_check() {
            if ($('#check-agree').is(':checked')) {
                $("#place-order-button").removeAttr('disabled')
            } else {
                $("#place-order-button").attr('disabled','true')
            }
        }
        toggleShippingAddress();

        $('#same-shipping-and-billing').on('change', toggleShippingAddress);

        t_and_c_check();

        $('#check-agree').on('change', t_and_c_check);
    });

    // $("#place-order-button").click(function(e){
    //     e.preventDefault();

    // });
</script>
<script>
$(document).ready(function() {
    function toggleShippingOptions() {
        let selectedPayment = $('.payment-method:checked').data('slug');

        if (selectedPayment === 'cash-on-pickup') {

            // Hide Delivery option
            $("#delivery_options").hide();
            // $('#shipping_delivery_container').hide();
            $('#shipping_delivery_container input').prop('disabled', true);

            // Auto-select Pickup
            $('#shipping_method_pick_up').prop('checked', true);

        }else if(selectedPayment === 'cash-on-delivery'){
            $("#delivery_options").show();
            $('#shipping_method_delivery').prop('checked', true);
            // $('#shipping_pickup_container').hide();
            $('#shipping_pickup_container input').prop('disabled', true);

        } else {

            // // Show Delivery option again
             $("#delivery_options").show();
            // $('#shipping_pickup_container').show();
            // $('#shipping_delivery_container').show();
            $('#shipping_method_delivery').prop('checked', true);
            $('#shipping_pickup_container input').prop('disabled', false);
            $('#shipping_delivery_container input').prop('disabled', false);
        }
    }

    // Run on page load
    toggleShippingOptions();

    // Run when payment method changes
    $(document).on('change', '.payment-method', function() {
        toggleShippingOptions();
    });
});
</script>

<script>
// ... existing scripts ...

$(document).ready(function() {
    // ... existing toggleShippingAddress and t_and_c_check functions ...

    function calculateOrderTotal() {
        const subTotalElement = $('#sub-total');
        const serviceFeeElement = $('#service-fee');
        const checkoutTotalElement = $('#checkout-total');
        const selectedPaymentSlug = $('.payment-method:checked').data('slug');

        // Extract subtotal value (remove '₱' and commas, then parse to float)
        let subTotalText = subTotalElement.text().replace('₱', '').replace(/,/g, '');
        let subTotal = parseFloat(subTotalText);

        let serviceFee = 0;
        const gcashSlug = 'gcash'; // Assuming GCash slug is 'gcash'

        if (selectedPaymentSlug === gcashSlug) {
            // Calculate 2% service fee for GCash
            serviceFee = subTotal * 0.02;
        }

        let newTotal = subTotal + serviceFee;

        // Function to format currency (Philippine Peso)
        const formatCurrency = (amount) => {
            return '₱' + amount.toLocaleString('en-PH', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
        };

        // Update the displayed service fee and total
        serviceFeeElement.text(formatCurrency(serviceFee));
        checkoutTotalElement.text(formatCurrency(newTotal));
    }

    // Initial calculation on page load
    calculateOrderTotal();

    // Re-calculate when payment method changes
    $(document).on('change', '.payment-method', function() {
        // Run the existing shipping toggle logic
        toggleShippingOptions();
        // Run the new total calculation
        calculateOrderTotal();
    });

    // Re-calculate when shipping method changes (in case it affects total, though not explicitly in your current logic)
    $(document).on('change', '.shipping_method', function() {
        // Run the new total calculation
        calculateOrderTotal();
    });

    // ... existing script for toggleShippingOptions ...
    function toggleShippingOptions() {
        let selectedPayment = $('.payment-method:checked').data('slug');
        // ... rest of the existing toggleShippingOptions function ...
        if (selectedPayment === 'cash-on-pickup') {
            // ...
        } else if(selectedPayment === 'cash-on-delivery'){
            // ...
        } else {
            // ...
        }
        // IMPORTANT: Call calculateOrderTotal() here to update the total
        calculateOrderTotal();
    }
    // ... end of existing script for toggleShippingOptions ...
});
</script>

<script>
// $(document).ready(function() {

//     //  Function to refresh the checkout order list
//     function loadOrders() {
//         $.ajax({
//             url: "{{ route('shop.checkout.get-orders') }}",
//             type: "GET",
//             dataType: "json",
//             success: function(response) {
//                 let itemsHtml = '';

//                 $.each(response.cart_query, function(index, item) {
//                     if (!item || !item.prices || item.prices.length === 0) return;

//                     let price = item.prices[0].price * item.cart_quantity;
//                     let formattedPrice = price.toLocaleString('en-PH', { minimumFractionDigits: 2 });

//                     itemsHtml += `
//                         <li class="checkout-product-item">
//                             <figure class="img-product">
//                                 <img src="/storage/admin/shop-bo/${item.image}" alt="${item.name}">
//                                 <span class="quantity">${item.cart_quantity}</span>
//                             </figure>
//                             <div class="content">
//                                 <div class="info">
//                                     <p class="name">${item.name}</p>
//                                     <span class="text-muted">${item.attribute_value ?? ''}</span>
//                                 </div>
//                                 <span class="price">₱${formattedPrice}</span>
//                             </div>
//                         </li>`;
//                 });

//                 //  Replace items in checkout container
//                 $('#checkout-items-container .wrap-checkout-product').html(itemsHtml);

//                 //  Update total display
//                 $('#checkout-total').text('₱' + response.cart_total.toLocaleString('en-PH', { minimumFractionDigits: 2 }));

//                 $('#cart_subtotal').text(response.cart_total.toLocaleString('en-PH', { minimumFractionDigits: 2 }));
//             },
//             error: function(xhr) {
//                 console.error("Error fetching cart:", xhr.responseText);
//             }
//         });
//     }

//     //  Call it once on page load
//     loadOrders();

//     //  Trigger reload when cart is updated
//     $(document).on('cartUpdated', function() {
//         loadOrders();
//     });

//     //  Quantity add/minus logic
//     $("#cart,#page-cart").on("click", ".quantity-plus-btn, .quantity-minus-btn", function () {
//         let quantityInput = $(this).siblings('.product-quantity');
//         let productID = quantityInput.data('cart-item-id');
//         let currentQuantity = parseInt(quantityInput.val());

//         if ($(this).hasClass("quantity-plus-btn")) {
//             quantityInput.val(currentQuantity + 1);
//         }
//         if ($(this).hasClass("quantity-minus-btn")) {
//             quantityInput.val(Math.max(currentQuantity - 1, 1));
//         }

//         $.ajax({
//             url: "{{ route('shop.update-cart-item') }}",
//             method: "POST",
//             headers: {
//                 "X-CSRF-TOKEN": "{{ csrf_token() }}"
//             },
//             data: {
//                 product_id: productID,
//                 quantity: quantityInput.val(),
//             },
//             success: function(response) {
//                 console.log('Cart updated:', response);

//                 $(document).trigger('cartUpdated');
//             },
//             error: function(xhr, status, error) {
//                 console.error('AJAX Error:', error);
//             }
//         });
//     });

//     //  Remove item
//     $(document).on('click', '.tf-mini-cart-remove a', function(e) {
//         e.preventDefault();
//         let cartItemID = $(this).data('cart-item-id');

//         $.ajax({
//             url: "{{ route('shop.remove-from-cart') }}",
//             method: "POST",
//             headers: {
//                 "X-CSRF-TOKEN": "{{ csrf_token() }}"
//             },
//             data: {
//                 cart_item_id: cartItemID
//             },
//             success: function(response) {
//                 console.log('Item removed:', response);
//                 $(document).trigger('cartUpdated');
//             },
//             error: function(xhr, status, error) {
//                 console.error('Remove error:', error);
//             }
//         });
//     });

// });
</script>


@endsection