@include('frontend.includes.header')

 <!--Hero Section-->
    <div class="hero-section hero-background">
        <h1 class="page-title">Checkout</h1>
    </div>

    <!--Navigation section-->
    <div class="container">
        <nav class="biolife-nav">
            <ul>
                <li class="nav-item"><a href="{{ url('/')}}" class="permal-link">Home</a></li>
                <li class="nav-item"><span class="current-page">Checkout</span></li>
            </ul>
        </nav>
    </div>

    <div class="page-contain login-page">

        <!-- Main content -->
        <div id="main-content" class="main-content">
            <div class="container">

                <div class="row">

                    <!--Form Sign In-->
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                        <div class="signin-container">
                            <form id="checkoutForm" method="POST">
                                @csrf 
                                <p class="form-row">
                                    <label for="fid-name">Name:<span class="requite">*</span></label>
                                    <input type="text" name="payment_id"  hidden id="razorpay_payment_id">
                                    <input type="text" id="fid-name" name="name" required value="{{Auth::user()->name ?? ''}}" class="txt-input">
                                </p>
                                <p class="form-row">
                                    <label for="fid-name">Number:<span class="requite">*</span></label>
                                    <input required type="text" pattern="[0-9]{10}" id="fid-name" name="number" value="{{Auth::user()->number ?? DB::table('orders')->latest()->first()->number ?? ''}}" class="txt-input">
                                </p>
                                <p class="form-row">
                                    <label for="fid-name">Email Address:<span class="requite">*</span></label>
                                    <input required type="email" id="fid-name" name="email" value="{{Auth::user()->email ?? DB::table('orders')->latest()->first()->email ?? ''}}" class="txt-input">
                                </p>
                                <p class="form-row">
                                    <label for="fid-city">City:<span class="requite">*</span></label>
                                    <input required type="text" id="fid-city" name="city" value="{{Auth::user()->city ?? ''}}" class="txt-input">
                                </p>
                                <p class="form-row">
                                    <label for="fid-city">Pincode:<span class="requite">*</span></label>
                                    <input required type="text" pattern="[0-9]{6}" id="fid-pincode" name="pincode" value="{{Auth::user()->pincode ?? ''}}" class="txt-input">
                                </p>
                                <p class="form-row">
                                    <label for="fid-pass">Address:<span class="requite">*</span></label>
                                    <textarea required name="address" class="w-100" id="" rows="5">{{Auth::user()->address ?? ''}}</textarea>
                                </p>
                                <p class="form-row">
                                    <label for="fid-name">Have any discount coupon ?<span class="requite"></span></label>
                                    <input type="text" id="fid-name" name="code" value="" class="txt-input">
                                    <label for="fid-name" id="code_verify"><span class="requite"></span></label>
                                </p>
                                <p class="form-row wrap-btn">
                                    <button id="rzp-button" class="btn btn-submit btn-bold" >Pay</button>
                                    {{-- <a href="javascript:void(0);" class="btn btn-outline-custom cashOnDelivery" >Cash on Delivery</a> --}}
                                </p>
                            </form>
                        </div>
                    </div>

                    <!--Go to Register form-->
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                        <div class="register-in-container">
                            <div class="intro d-flex flex-column rounded-1 unselectable">
                                <h1 class="col-9">Your Cart</h1>
                                <div class="  rounded-1 overflow-y-scroll max-h-525px">
                                    <div class="col-12 d-flex">
                                            @php
                                            if (auth()->check()) {
                                                $cartData = isset($cartData) ? $cartData : \App\Models\Cart::with('product')->where('user_id', auth()->id())->get();
                                            } else {
                                                $cartData = collect();
                                            }
                                            $price=0;
                                            foreach ($cartData as $key => $value) {
                                                $price+= $value->variant->price * $value->quantity;
                                            }
                                            @endphp
                                    </div>
                                    @forelse($cartData as $item)
                                    <div data-id="{{$item->id}}" class="col-12 productDiv d-flex">
                                        <div class="col-1">
                                            <div class="d-flex flex-column align-center justify-content-between h-100 ">
                                                <svg data-id="{{$item->id}}" xmlns="http://www.w3.org/2000/svg" width="16" class="my-1 unselectable caret-up" height="16" fill="currentColor" class="bi bi-caret-up-fill" viewBox="0 0 16 16">
                                                <path d="m7.247 4.86-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z"/>
                                                </svg>
                                                <span class="counter" data-id="{{$item->id}}">{{$item->quantity}}</span>
                                                <svg data-id="{{$item->id}}" xmlns="http://www.w3.org/2000/svg" width="16" class="my-1 unselectable caret-down" height="16" fill="currentColor" class="bi bi-caret-down-fill" viewBox="0 0 16 16">
                                                <path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/>
                                                </svg>
                                            </div>
                                        </div>
                                        <div class="col-2 m-1  ">
                                            @php
                                            $images = explode(',', $item->product->images);
                                            $first_img = $images[0];
                                            @endphp
                                            <img class="rounded-1" src="{{url('frontend/custom/uploads/products/'.$first_img)}}" alt="" height="90" width="90">
                                        </div>
                                        <div class="col-5">
                                            <a href="{{url('product/'.$item->product->slug ?? '')}}">
                                                <h4>{{$item->product->name ?? ''}}</h4>
                                                {{-- <p class="text-muted">{{$item->product->description ?? ''}}</p> --}}
                                                <h5 class="text-muted">
                                                    Dimension:
                                                    @php
                                                    $d_arr = explode(',',$item->custom_dimension ?? $item->variant->dimensions->dimension);
                                                    @endphp
                                                    {{$d_arr[0] ?? ''}} x {{$d_arr[1] ?? ''}} x {{$item->variant->height->height ?? ''}} </h5>
                                            </a>            
                                        </div>
                                        <div class="col-3">
                                            <h3 class="text-primary">
                                                &#8377; {{formatIndianNumber($item->variant->price) ?? ''}} </h3>
                                        </div>
                                        <div class="col-1 ">
                                            <p onclick="window.location.href='{{url('deleteFromCart?id='.$item->id)}}'" data-id="{{$item->id}}" class="text-danger deleteProduct mt-20px"><i class="fa fa-trash"></i></p>
                                        </div>
                                    </div>
                                    @empty
                                    <h2 class="text-center">Your Cart is Empty</h2>
                                    @endforelse
                                    {{-- <h4 class="box-title">New Customer?</h4>
                                    <p class="sub-title">Create an account with us and you’ll be able to:</p>
                                    <ul class="lis">
                                        <li>Check out faster</li>
                                        <li>Save multiple shipping anddesses</li>
                                        <li>Access your order history</li>
                                        <li>Track new orders</li>
                                        <li>Save items to your Wishlist</li>
                                    </ul>
                                    <a href="#" class="btn btn-bold">Create an account</a> --}}
                                    
                                </div>
                                <hr class="hr">
                                <div class="col-sm-12">
                                    <div class="d-flex">
                                        <div class="col-8">
                                            <h3 class="text-muted">Total Price</h3>
                                        </div>
                                        <div class="col-4">
                                            <h2 class="fw-700 text-primary total">&#8377; {{formatIndianNumber($price-$bundle_amount) ?? ''}} </h2>
                                        </div>
                                    </div>
                                    <div class="row {{$bundle_amount == 0 ? 'd-none' : ''}}">
                                        <div class="col-sm-12 text-primary">
                                            Bundle Discount 
                                            @if($unique_category_count == 2)
                                            5
                                            @elseif($unique_category_count == 3)
                                            8
                                            @elseif($unique_category_count > 3)
                                            10
                                            @endif
                                            % off ( &#8377;{{$bundle_amount ?? ''}} )
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

            </div>

        </div>

    </div>

@include('frontend.includes.footer')


<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
@php
    $amount = 0;
    foreach ($cartData as $item) {
        $amount += ($item->variant->price ?? $item->product->price) * $item->quantity;
    }
@endphp
<script>
document.getElementById('rzp-button').onclick = function(e) {
        e.preventDefault();
        var form = $('#checkoutForm')[0];
        if (!form.checkValidity()) {
            form.reportValidity(); 
            return;
        }
        let amount= 0;
        let code = $('input[name="code"').val();
        $.ajax({
            url: '{{ url('getCartTotal') }}',
            type: 'get',
            data: {code: code},
            success: function(response) {
                amount = parseInt(response);
                console.log(amount);

                let options = {
                    "key": "{{ config('services.razorpay.key') }}",
                    "amount": amount,
                    "currency": "INR",
                    "name": "FeatherFresh",
                    "description": "Mattress Order",
                    "handler": function (response) {
                        Swal.fire({
                            title: 'Please do not leave this page.You will be redirected automatically',
                            icon: 'warning',
                            showCancelButton: false,
                        })
                        $('#razorpay_payment_id').val(response.razorpay_payment_id);
                        $('#checkoutForm').submit();
                        // window.location.href = `{{url('razorpay')}}?payment_id=${response.razorpay_payment_id}&order_id=${response.razorpay_order_id}&signature=${response.razorpay_signature}`;
                    },
                    "theme": {
                        "color": "#3399cc"
                    }
                };
                const rzp = new Razorpay(options);
                rzp.open();
            }
        })
      
    };

    // $('.cashOnDelivery').on('click',function(){
    //     var form = $('#checkoutForm')[0];
    //     if(!form.checkValidity()){
    //         form.reportValidity();
    //         return;
    //     }
    //     $('#checkoutForm').attr('action','{{url('cashOnDelivery')}}').submit();
    // })
</script>

<script>
    let debounceTimers = {};
    $('.caret-up, .caret-down').on('click',function(){
        var id = $(this).attr('data-id');
        var qty = $('.counter[data-id="'+id+'"]').text().trim();
        qty = parseInt(qty);
        console.log(qty);
        if($(this).hasClass('caret-up')){
            qty += 1;
        }else{
            qty -= 1;
        }
        if(qty < 1){
            qty = 1;
            $('.counter[data-id="'+id+'"]').text(qty);
            return;
        }
        $('.counter[data-id="'+id+'"]').text(qty);

        // if (debounceTimers[id]) {
        //     clearTimeout(debounceTimers[id]);
        // }
     
        // debounceTimers[id] = setTimeout(function () {
        $.ajax({
            url: "{{url('updateQuantity')}}",
            method: 'GET',
            data: {
                id: id,
                quantity: qty
            },
            success: function (response) {
                console.log('Quantity updated for ID:', id);
                console.log(response);
                $('.total').html('&#8377; ' + response);
                if($('input[name="code"]').length > 0){
                    $('input[name="code"]').trigger('input');
                    // applyCoupon.call($('input[name="code"]')[0]);
                }
            },
            error: function (err) {
                console.error('Error updating quantity:', err);
            }
        });
    // }, 500);
    });
</script>
<script>
$('input[name="code"]').on('input', function () {
    $('#rzp-button').attr('disabled',true);
    $(this).val(this.value.toUpperCase().trim());
    applyCoupon.call(this);
});

 function applyCoupon(){
    var code = this.value.toUpperCase().trim();

    setTimeout(() => {$.ajax({
        url: "{{url('applyCoupon')}}",
        method: 'GET',
        data: {
            code: code
        },
        success: function (response) {
            console.log(response);
            if(response.failure){
                if(code == ''){
                    $('#code_verify').html('');
                    $('#rzp-button').attr('disabled',false);
                    console.log(code);
                }else{
                    $('#code_verify').html(response.failure);
                    $('#rzp-button').attr('disabled',true);
                    $('#code_verify').css('color','red');
                }
            }
            if(response.success){
                $('#rzp-button').attr('disabled',false);
                $('#code_verify').html(response.success);
                $('#code_verify').css('color','green');
            }
            if ('total' in response) {
                $('.total').html('&#8377; ' + response.total);
            }
        },
        error: function (err) {
            console.error('Error applying:', err);
        }
    })},500);
 }
</script>