@php
    $item = Cache::get('site_status');
    $ecomm_setting = $item ? json_decode($item) : null;
    $payment_options=DB::table('pos_setting')->first()->payment_options;
@endphp

@extends('frontend.partials.master')
@push('css')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<style>
    #single1 .content {
        box-shadow: 2px 0px 34px -4px;
    }
    ul li {
        padding-left: 20px;
        line-height: 1.5;
        padding: 10px 0;
        border-bottom: 1px solid green;
        font-size: 20px;
        list-style: none;
        text-align: left;
    }
    ul{
        padding: 0px;
    }
    ul li::before {
        content: "";
        display: inline-block;
        width: 20px;
        height: 20px;
        background-image: url(https://www.fashion2.softitglobal.xyz/frontend/images/arrow.png);
        background-size: cover;
        background-repeat: no-repeat;
        margin-right: 10px;
        ine-height: 1.5;
    }
    .embed-video iframe {
        width: 100%;
    }
    
    .center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
  }

  button.otpBtn {
    background-color: blue;
    border: none;
    color: white;
    padding: 5px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
  }

  .error {
    color: red;
    font-size: 14px;
    margin-top: 5px;
    display: block;
  }
  #single1 .content .banner-img {
        width: auto;
        height: auto;
        box-shadow: 0px 5px 14px -2px #2a372c;
    }
    #single1 .content .img-gallery {
        box-shadow: 2px 0px 34px -4px;
    }

    .btn-order, .orderSubmit, #buy-more {
        position: relative;
        top: -5px;
        transition: all 0.25s ease-out;
        box-shadow: 10px 10px 11px 1px #5a5a5ac7;
    }
    .orderSubmit:hover, .btn-order:hover ,#buy-more:hover{
        position: relative;
        top: 0px;
        margin-left: 5px;
        transition: all 0.25s ease-out;
        box-shadow: 0px 0px 0px 0px #5a5a5ac7;
    }
</style>
@endpush
@section('content')
@if($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif
<div class="container">
    @if(session('error'))
    <div class="alert alert-danger alert-dismissible" role="alert">
    <strong>{{ session('error') }}!</strong>
    </div>
    @endif
</div>


<section id="single1">
    <div class="container">
        <div class="content">
            <div class="text-center">
                <div class="">
                    @if($product->name)
                    <div class="title">
                        <h3 class="elementor-heading-title elementor-size-default" style="text-align: center; line-height: 1.3;">
                            <span style="font-size: 28pt;color: #21904f;box-shadow: 0px 5px 14px -2px green;margin-bottom: 30px;display: inline-block;border-radius: 4px;padding: 8px 20px;">
                                <strong>{!! $product->name !!}</strong>
                            </span>
                            <span style="font-size: 22pt; color: #21904f;">
                                <strong>{!! $product->product_details !!}</strong>
                            </span>
                        </h3>
                    </div>
                    @endif

                        <a href="#orderForm" class="btn btn-order btn-success text-white" style="background: #198754;">{{ BanglaText('land_order') }}</a>
                    <p class="tagline">

                        @if($product->main_image)
                        <img class="banner-img" src="{{ getImage('images/product/large', $product->main_image)}}" alt="" loading="lazy" />
                        @endif
                    </p>
                    
                    @if($product->after_image_title)
                    <p class="tagline">
                        {{ $product->after_image_title }}
                    </p>
                    @endif
                    
                    <p>
                        <span style="font-size: 14pt;">
                            <strong>{!! $product->after_image_description !!}</strong>
                        </span>
                    </p>
                    
                    <a href="#orderForm" class="btn btn-order">{{ BanglaText('land_order') }}</a>

                    @if($product->feature_title1)
                    <div class="facility-title">
                        {{ $product->feature_title1 }}
                    </div>
                    @endif

                    <div class="facilities">
                        <div class="description-custom">
                            {!! $product->feature_description1 !!}
                        </div>
                    </div>
                    
                    
                    @if($product->feature_title2)
                    <div class="facility-title">
                        {{ $product->feature_title2 }}
                    </div>
                    @endif
                    
                    <div class="facilities">
                        <div class="description-custom">
                            {!! $product->feature_description2 !!}
                        </div>
                    </div>
                    
                    <div class="facilities">
                        <div class="facility-title">{{$product->gallary_title}}</div>
                        <div class="owl-carousel img-gallery mt-2 mb-3">
                            @foreach($product->images as $key=>$im)
                                <img class="" src="{{ getImage('images/product/large', $im->image)}}" alt="" loading="lazy" />
                            @endforeach
                        </div>
                    </div>
                    

                    <div class="facilities">
                        <div class="facility-title">
                            {{ $product->video_title }}
                        </div>
                        <div class="embed-video mt-2" style="overflow: hidden;">
                            {!! html_entity_decode($product->video) !!}
                        </div>
                    </div>
                    <style>
                                iframe{
                                    max-width: 100%;
                                }
                            </style>
                    <div class="price-detail">
                        <div class="contact">
                            প্রয়োজনে কল করুন-
                            <a href="callto:{{ $ecomm_setting->contact }}">
                                {{ $ecomm_setting->contact }}
                            </a>
                            ,
                            <a href="callto:{{ $ecomm_setting->contact2 }}">{{ $ecomm_setting->contact2 }} </a>
                        </div>
                    </div>
                </div>
                <form action="{{ route('storeLand') }}" method="POST" id="orderForm" class="order-form">
                    @csrf
                    <legend>
                        <span class="red">“{{ $product->name }}”</span>
                        নেয়ার জন্য, নিচের ফর্মটি সম্পূর্ণ পূরণ করুন
                    </legend>
                    <div class="form-content text-start">
                        <div class="row row-cols-1 row-cols-md-2 gx-3 gy-2">
                            <div class="left">
                                <div class="left d-md-none">
                                    <h3 class="title text-start">{{ $product->name }}</h3>
                                    
                                    @if($product->is_variant) 
                                        @foreach($options as $key=>$option) 
                                            @php 
                                                $vs = explode(",", $values[$key]); 
                                                $op = str_replace('"', '', $option); 
                                            @endphp
                                            <h4 class="pop medium" style="font-size: 17px;">{{ $op }}:</h4>
                                            @foreach($vs as $i => $v) 
                                                @php $value = str_replace('"', '', $v); @endphp
                                                <div class="d-inline-block me-2">
                                                    <input name="variant_{{ $key + 1 }}" value="{{ $value }}" id="attr{{ $value }}" type="radio" 
                                                        data-variation-id="{{ $product->variation->id??'' }}" />
                                                    <label class="m-0" for="attr{{ $value }}">{{ $value }}</label>
                                                </div>
                                            @endforeach 
                                        @endforeach 
                                        <input type="hidden" id="variation_id" name="variation_id" value="" />
                                    @endif

                                    <div class="option">
                                        <div class="qty">QTY<span class="pcs">(pcs)</span></div>
                                        <div class="input">
                                            <div class="input-group">
                                                <button class="input-group-text btn-decrease" data-product-id="{{ $product->id }}" type="button">
                                                    <span class="material-icons-outlined">remove</span>
                                                </button>
                                                <input type="text" name="quantity" class="form-control text-center quantity-input" id="quantity-{{ $product->id }}" value="1" readonly />
                                                <button class="input-group-text btn-increase" data-product-id="{{ $product->id }}" type="button">
                                                    <span class="material-icons-outlined">add</span>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="billing">Billing</div>
                                <div class="form">
                                    <div class="form-group">
                                        <label for="">নাম (Name)*</label>
                                        <input type="text" name="name" class="form-control" />
                                        @if(isset($product))
                                        <input type="hidden" value="{{ $product->id }}" name="product_id" id="product_id" class="form-control" />
                                        @endif
                                    </div>
                                    
                                    <!--@if(!empty($product->variation))-->
                                    <!--<input type="hidden" id="variation_id" name="variation_id" value="{{ $product->variation->id }}" />-->
                                    <!--@endif-->

                                    <input type="hidden" id="total_price_val" name="final_amount" value="" />
                                    @if(!empty($product)) @if($product->promotion_price != 0)
                                    <input type="hidden" id="product_price" name="amount" value="{{ $product->promotion_price }}" />
                                    @else
                                    <input type="hidden" id="product_price" name="amount" value="{{ $product->price }}" />
                                    @endif @endif
                                    <input type="hidden" id="product_quantity" name="quantity" />

                                    <div class="form-group">
                                        <label for="">মোবাইল নাম্বার (Mobile No)*</label>
                                        <input type="text" name="mobile" id="mobile" pattern="^0\d{8,11}$" title="বাংলাদেশের ফোন নম্বর লিখুন, 0xxxxxxxxxx এই ফরম্যাটে" class="form-control" />
                                    </div>
                                    
                                    <div class="form-group">
                                        <label for="">ডেলিভারি ঠিকানা (Delivery Address)*</label>
                                        <textarea name="address" rows="2" class="form-control"></textarea>
                                    </div>
                                    
                                    <div class="form-group">
                                        <strong> <label for="">শিপিং এরিয়া (Shipping Area)</label> </strong>
                                        <div id="shipping-charges-container">
                                            @php
                                                $productTotal = ($product->promotion_price != 0) ? $product->promotion_price : $product->price;
                                            @endphp
                                            
                                            @if($productHasFreeShipping)
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="delivery_charge_id" value="0" id="shipping_charge_0" checked/>
                                                    <label class="form-check-label text-dark" for="shipping_charge_0">
                                                        ফ্রি শিপিং (0)
                                                    </label>
                                                </div>
                                            @else
                                            @foreach($charges as $key => $charge)
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="delivery_charge_id" value="{{ $charge->shipping_charge }}" id="shipping_charge_{{ $charge->id }}" {{$key==0?'checked':''}}/>
                                                <label class="form-check-label text-dark" for="shipping_charge_{{ $charge->id }}">
                                                    {{ $charge->shipping_title }} ({{ $charge->shipping_charge }})
                                                </label>
                                            </div>
                                            @endforeach
                                            @endif
                                        </div>
                                    </div>
                                    
                                    
                                    @if( str_contains($payment_options,'bkash') || str_contains($payment_options,'sslcommerz') || str_contains($payment_options,'cash'))
                                        <div class="col-12">
                                            <label for="state" class="form-label">Payment Method</label>
                                            @if(str_contains($payment_options,'cash'))
                                            <div class="form-check">
                                              <input class="form-check-input" type="radio" name="paying_method" id="cash_on_delivery" value="cash_on_delivery" checked>
                                                <label class="form-check-label" for="cash_on_delivery">
                                                    Cash On Delivery
                                                </label>
                                            </div>
                                            @endif
                                            
                                            @if(str_contains($payment_options,'bkash'))
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="paying_method" id="bkash" value="bkash" >
                                                <label class="form-check-label" for="bkash">
                                                    Bkash
                                                </label>
                                            </div>
                                            @endif
                                            
                                            @if(str_contains($payment_options,'sslcommerz'))
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="paying_method" id="sslcommerz" value="sslcommerz" >
                                                <label class="form-check-label" for="sslcommerz">
                                                    SSLCommerz
                                                </label>
                                            </div>
                                            @endif
                                        </div>
                                        <hr class="my-3">
                                    @endif
                                    
                                    <div class="right">
                                        <button type="submit" class="btn submit-btn bg-success orderSubmit">
                                            <span style="font-size: 22px;">Place Order Tk</span>
                                            <span style="font-size: 22px;" id="total" class="Price-amount product-price amount">
                                                @if(!empty($product)) @if($product->promotion_price != 0) {{ $product->promotion_price }} @else {{ $product->price }} @endif @endif
                                            </span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="right">
                                <div class="left d-none d-md-block">
                                    <h3 class="title text-start">{{ $product->name }}</h3>

                                    @if($product->is_variant) 
                                        @foreach($options as $key=>$option) 
                                            @php 
                                                $vs = explode(",", $values[$key]); 
                                                $op = str_replace('"', '', $option); 
                                            @endphp
                                            <h4 class="pop medium" style="font-size: 17px;">{{ $op }}:</h4>
                                            <div class="sizes">
                                            @foreach($vs as $i => $v) 
                                                @php $value = str_replace('"', '', $v); @endphp
                                                <div class="d-inline-block me-2">
                                                    <input name="variant_{{ $key + 1 }}" value="{{ $value }}" id="attr{{ $value }}" type="radio" 
                                                        data-variation-id="{{ $product->variation->id??'' }}" {{$i==0?'checked':''}}/>
                                                    <label class="m-0" for="attr{{ $value }}">{{ $value }}</label>
                                                </div>
                                            @endforeach 
                                        @endforeach 
                                        </div>
                                        <input type="hidden" id="variation_id" name="variation_id" value="" />
                                    @endif


                                    <div class="option option row m-0 py-2">
                                        <div class="input col-9 p-0">
                                            <div class="input-group">
                                                <button class="input-group-text btn-decrease" data-product-id="{{ $product->id }}" type="button">
                                                    <span class="material-icons-outlined">remove</span>
                                                </button>
                                                <input type="text" name="quantity" class="form-control text-center quantity-input" id="quantity-{{ $product->id }}" value="1" />
                                                <button class="input-group-text btn-increase" data-product-id="{{ $product->id }}" type="button">
                                                    <span class="material-icons-outlined">add</span>
                                                </button>
                                            </div>
                                        </div>
                                        <div class="qty col-3" style="line-height: 34px; margin: 0;">QTY<span class="pcs">(pcs)</span></div>
                                    </div>
                                </div>

                                <div class="product content-section">
                                    <table class="w-100">
                                        <tr>
                                            <td width="50">
                                                <img class="w-100 banner-img" src="{{ getImage('images/product/small', $product->main_image) }}" alt="" loading="lazy" />
                                            </td>
                                            <td>
                                                <div class="ps-2">
                                                    <div class="name">{{ $product->name }}</div>
                                                </div>
                                            </td>
                                            <td class="text-center">&times;</td>
                                            <td width="20" id="quantity-label-{{ $product->id }}" class="text-center">1</td>
                                            <td width="100" id="total-price-{{ $product->id }}" class="total-price text-end">
                                                Tk
                                                <strong class="final-price-amount">
                                                    @if($product->promotion_price != 0) <span class="pro_price">{{ $product->promotion_price }}</span> @else <span class="pro_price">{{ $product->price }}</span> @endif
                                                </strong>
                                                <input type="hidden" id="price_val_{{ $product->id }}" value="{{ $product->promotion_price != 0 ? $product->promotion_price : $product->price }}" />
                                            </td>
                                        </tr>
                                    </table>
                                </div>

                                <div class="content-section vat">
                                    <div class="d-flex justify-content-between top">
                                        <span>Shipping Cost</span>
                                        <span id="delvry_charge">Tk0</span>
                                    </div>
                                    <div class="d-flex justify-content-between total">
                                        <span>Subtotal</span>
                                        <span id="subtotal" class="Price-amount product-price amount">
                                            @if(!empty($product)) @if($product->promotion_price != 0) {{ $product->promotion_price }} @else {{ $product->price }} @endif @endif
                                        </span>
                                    </div>
                                </div>

                                <div class="content-section payment">
                                    <div class="d-flex align-items-center head">
                                        <span class="material-icons-outlined">paid</span>
                                        Payment Type
                                    </div>
                                    <div>
                                        <div class="d-flex align-items-start">
                                            <input type="radio" checked="" class="form-check-input me-2" id="cashOnDelivery" />
                                            <div>
                                                <label class="label m-0" for="cashOnDelivery">Cash On Delivery</label>
                                                <div class="tagline">Pay with cash upon delivery.</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
                <div></div>
            </div>
        </div>
    </div>
    <div class="text-center my-3">
        <small>
            <a href="{{ route('home') }}" id="buy-more" class="btn btn-success btn-lg">সকল পণ্য দেখুন </a>
        </small>
    </div>
    
    <!-- Success Modal -->
    <!--<div class="modal fade" id="successModal" tabindex="-1" data-bs-backdrop="static" aria-labelledby="successModalLabel" aria-hidden="true">-->
    <!--    <div class="modal-dialog">-->
    <!--        <div class="modal-content">-->
    <!--            <div class="center">-->
    <!--              <form id="otpForm" action="" method="POST">-->
    <!--                @csrf-->
    <!--                <div class="form-group">-->
    <!--                  <label for="verify">OTP Code</label>-->
    <!--                  <input type="number" id="verify" name="verify" class="form-control" placeholder="Enter 6-digit OTP" required>-->
    <!--                  <span class="error" id="verifyError"></span>-->
    <!--                </div>-->
    <!--                <button class="otpBtn" type="submit">Verify</button>-->
    <!--              </form>-->
    <!--            </div>-->
    <!--        </div>-->
    <!--    </div>-->
    <!--</div>-->
    
</section>
@endsection

@push('js')
<script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha384-o/pMN19ByFFKNwAaZcLfN0URRJ0HaSmMiLO9ALsmYgQAeW3qWFw5THPYQw2nqMmo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script>
// $(document).ready(function() {
//     $('#orderForm').on('submit', function(e) {
//         e.preventDefault();
        
//         var formData = $(this).serialize();
//         var url = $(this).attr('action');
//         var method = $(this).attr('method');
        
//         // Disable submit button to prevent multiple submissions
//         $('.submit-btn').prop('disabled', true);
//         // Optionally add loading text
//         // $('.submit-btn').html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Processing...');
        
//         $.ajax({
//             url: url,
//             type: method,
//             data: formData,
//             success: function(response) {
//                 if(response.success) {
//                     // Show success modal if you have one
//                     if(typeof bootstrap !== 'undefined') {
//                         var modal = new bootstrap.Modal(document.getElementById('successModal'));
//                         if(response.order_id) {
//                             $('#orderId').text(response.order_id);
//                             $('#otpForm').attr('action', '/otpVerify/' + response.order_id);
//                             modal.show();
//                         }
                        
//                         // Redirect after modal is closed
//                         $('#successModal').on('hidden.bs.modal', function () {
//                             window.location.href = response.redirect_url || '/';
//                         });
//                     } else {
//                         // If no bootstrap modal, redirect directly
//                         window.location.href = response.redirect_url || '/';
//                     }
                    
//                     // Reset form if needed
//                     $('#orderForm')[0].reset();
//                 } else {
//                     // Show error message
//                     alert(response.message || 'Something went wrong');
//                 }
//                 $('.submit-btn').prop('disabled', false);
//             },
//             error: function(xhr) {
//                 $('.submit-btn').prop('disabled', false);
                
//                 if(xhr.status === 422) {
//                     // Clear previous errors
//                     $('.error').remove();
                    
//                     // Show validation errors
//                     var errors = xhr.responseJSON.errors;
//                     $.each(errors, function(key, value) {
//                         // Create error message element if it doesn't exist
//                         if (!$('[name="'+key+'"]').next('.error').length) {
//                             $('[name="'+key+'"]').after('<div class="error text-danger small mt-1"></div>');
//                         }
//                         $('[name="'+key+'"]').next('.error').html(value[0]);
//                     });
//                 } else if(xhr.status === 429) {
//                     // Rate limiting error
//                     alert(xhr.responseJSON.message);
//                 } else {
//                     alert('An error occurred. Please try again.');
//                 }
//             }
//         });
//     });
// });

//   $('#otpForm').on('submit', function (e) {
//     e.preventDefault();

//     $('#verifyError').text(''); // Clear any previous error

//     $.ajax({
//       url: $(this).attr('action'),
//       type: 'POST',
//       data: $(this).serialize(),
//       success: function (response) {
//         if (response.success) {
//           window.location.href = response.redirect;
//         }
//       },
//       error: function (xhr) {
//         if (xhr.status === 422) {
//           const errors = xhr.responseJSON.errors;
//           if (errors.verify) {
//             $('#verifyError').text(errors.verify[0]);
//           }
//         } else {
//           alert('An error occurred. Please try again.');
//         }
//       }
//     });
//   });
</script>
<script>

    $(document).ready(function () {
        function updateSubtotal() {
            var total = 0;
            $('.final-price-amount').each(function () {
                total += parseFloat($(this).text().trim()) || 0;
            });
            $('#subtotal').text('Tk ' + total.toFixed(2));
            $('#total-order').text(total.toFixed(2));
        }


        $('.btn-increase').on('click', function () {
            var product_id = $(this).data('product-id');
            var qtyInput = $('#quantity-' + product_id);
            var currentQuantity = parseInt(qtyInput.val());
            var newQuantity = currentQuantity + 1;
                qtyInput.val(newQuantity);
            $('#quantity-label-' + product_id).text(newQuantity);
            // Get variants
            let variant_1 = $('input[name="variant_1"]:checked').val();
            let variant_2 = $('input[name="variant_2"]:checked').val();
            
            // Update the price
            getPrice(variant_1, variant_2, newQuantity);
        });

        
        $('.btn-decrease').on('click', function () {
            var product_id = $(this).data('product-id');
            var qtyInput = $('#quantity-' + product_id);
            var currentQuantity = parseInt(qtyInput.val());
            if (currentQuantity > 1) {
                var newQuantity = currentQuantity - 1;
                qtyInput.val(newQuantity);
        
                $('#quantity-label-' + product_id).text(newQuantity);
                // Get variants
                let variant_1 = $('input[name="variant_1"]:checked').val();
                let variant_2 = $('input[name="variant_2"]:checked').val();
                
                // Update the price
                getPrice(variant_1, variant_2, newQuantity);
            }
        });

        
        $('input[type="radio"]').on('change', function() {
            const variationId = $(this).data('variation-id');
            $('#variation_id').val(variationId);
        });

        $(document).ready(function(){
            let variant_1=$('input[name="variant_1"]').val();
            let variant_2=$('input[name="variant_2"]').val();
            getPrice(variant_1,variant_2);
        });
        
        $(document).on('click','input[name="variant_1"]',function(){
            let variant_1=$(this).val();
            let variant_2=$('input[name="variant_2"]:checked').val();
            getPrice(variant_1,variant_2);
        });
        
        $(document).on('click','input[name="variant_2"]',function(){
            let variant_2=$(this).val();
            let variant_1=$('input[name="variant_1"]:checked').val();
            getPrice(variant_1,variant_2);
        });
        
        function getPrice(variant_1, variant_2, quantity = 1) {
            let product_id = $('#product_id').val();
            let url = "{{ route('variablePrice') }}";
            
            // Parse delivery charge as float (handle non-numeric cases)
            let delivery = parseFloat($('#delvry_charge').text().replace(/[^\d.-]/g, '')) || 0;
            
            // Validate quantity
            quantity = parseInt(quantity) || 1;
            if (quantity < 1) quantity = 1;
        
            $.ajax({
                url: url,
                method: 'GET',
                data: { 
                    variant_1: variant_1, 
                    variant_2: variant_2, 
                    product_id: product_id, 
                    quantity: quantity 
                },
                success: function(res) {
                    if (!res || !res.hasOwnProperty('variantPrice')) {
                        console.error('Invalid response format');
                        return;
                    }
        
                    let finalPrice = parseFloat(res.variantPrice);
                    let total = finalPrice + delivery;
                    
                    // Format numbers with 2 decimal places
                    let formattedPrice = finalPrice.toFixed(2);
                    let formattedTotal = total.toFixed(2);
                    
                    // Update DOM elements
                    $('span.pro_price').text(formattedPrice);
                    $('#price_val_' + product_id).val(formattedPrice);
                    $('#subtotal, #total').text('Tk ' + formattedTotal);
                    
                    // Update quantity if returned from server
                    if (res.quantity) {
                        $('input[name="quantity"][id="quantity-' + product_id + '"]').val(res.quantity);
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Price calculation error:', error);
                    alert('Error calculating price. Please try again.');
                }
            });
        }

        
        
                                                                                                                    
        $(document).ready(function() {
            $('input[name="delivery_charge_id"]').on('change', function() {
                if (this.checked) {
                    setTimeout(() => {
                        getCharge.call(this);
                    }, 200);
                }
            });
        
            var checkedInput = $('input[name="delivery_charge_id"]:checked');
            if (checkedInput.length > 0) {
                setTimeout(() => {
                    getCharge.call(checkedInput[0]);
                }, 200);
            }
        });
    
    
        function getCharge() {
            let selectedCharge = $('input[name="delivery_charge_id"]:checked').val();
             $('#delvry_charge').text(selectedCharge);
            
            if (!selectedCharge) {
                alert("Please select a shipping charge");
                return;
            }
        
            let price = parseFloat($('.final-price-amount').text());
            if (isNaN(price)) {
                alert("Invalid price");
                return;
            }
        
            let total = Number(selectedCharge) + price;
            $('#subtotal').text('Tk ' + total.toFixed(2));
            $('#total').text(total.toFixed(2));
            $('#total_price_val').val(total.toFixed(2));
        }

        
        $(".img-gallery").owlCarousel({
       		loop: true,
       		autoplay: true,
       		dots: false,
       		margin: 0,
       		nav: false,
       		responsive: {
       			0	: {
       				items: 1,
       			},
       			700: {
       				items: 3,
       			},
       			1200: {
       				items: 3,
       			},
       		},
       	});   

    });
    
    $(document).on('change', '#mobile', function (e) {
        e.preventDefault();
        let mobile = $(this).val().trim();
        let url = "{{ route('detailsIncompleteStore') }}";
        let quantity = parseInt($('.quantity-input[name="quantity"]').val()) || 1;
        let productId = $('[name="product_id"]').val();
        let variant_1 = $('[name="variant_1"]').val();
        let variant_2 = $('[name="variant_2"]').val();
        let total = $('span#total').text().trim();
        let productTotal = parseFloat($('.final-price-amount').find('.pro_price').text().trim().replace(/[^0-9.]/g, '')) || 0;
        let delivery_charge_id = parseFloat($('#delvry_charge').text().trim().replace(/[^0-9.]/g, '')) || 0;
    
        if (!/^\d{11}$/.test(mobile)) {
            alert("Invalid mobile number. Must be 11 digits.");
            return;
        }
    
        $.ajax({
            url: url,
            type: 'POST',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: {
                'mobile': mobile,
                'total': total,
                'quantity': quantity,
                'productTotal': productTotal,
                'delivery_charge_id': delivery_charge_id,
                'productId': productId,
                'variant_1': variant_1,
                'variant_2': variant_2
            },
            success: function (response) {
                console.log(response.message);
            },
            error: function (xhr) {
                let errors = xhr.responseJSON?.errors;
                if (errors) {
                    alert(Object.values(errors).flat().join("\n"));
                } else {
                    alert(xhr.responseJSON?.message || 'An unexpected error occurred.');
                }
            }
        });
    });


</script>
@endpush