@extends('main.layouts.app')
@section('content')
    <style>

        
div.errormsg {
    font-size: 12px;
    color: red;
}

        .checkout-table-row-right {
            width:30%;
        }

        .checkout-table-row-left {
            font-size: 12px;
            color: #0e194d;
            font-weight: 700;
        }

        .sub {
            padding-top: 5px;
            display: flex;
            justify-content: space-between;
            color: #0e194d;
            font-weight: 900;
        }

        .checkout-totals {
            background: rgba(14, 25, 76,  0.15);
            padding: 10px;
        }


        .wallet-header h2 {
            font-size: 16px;
            line-height: 20px;
            color: #1f365c;
            padding-right: 0px;
            margin-bottom: 0;
        }

        .checkout-table-row {
            padding: 10px;
            border-bottom: 1px dashed #0e194d;
        }

        .img-product-cover {
            width: 80px;
            height: 80px;
            padding: 10px;
            background-color: #0e194d;
        }

        img.cart-table-img {
            max-width: 100%;
        }





        .card .card-header {
            width: 100%;
            min-height: 0px;
        }


        .card .card-header h4 {
            font-size: 16px;
            line-height: 28px;
            color: #1f365c;
            padding-right: 0px;
            margin-bottom: 0;
        }

        .bg_blue_color {
            border-radius: 20px !important;
            background-color: #0E194D !important;
        }

        .depo {
            font-size: 14px;
        }

        .dash-text {
            text-align: center;
        }

        @media (max-width:767.98px) {



            .img-product-cover {
                width: 15%;
                height: auto;
                padding: 3px;
            }






            .title h3 {
                font-size: 10px;
                line-height: 15px;
                color: #1f365c;
                padding-right: 0px;
                margin-bottom: 0;
            }

            .proprice h3 {
                font-size: 18px;
                line-height: 22px;
                color: #1f365c;
                padding-right: 0px;
                margin-bottom: 0;
                font-weight: bold;
            }

        }
    </style>
<input type="hidden" name="authtoken" value={{$token}}>
    <div class="main-content">
        <section class="section">
            <div class="section-header d-block bg_blue_color">
                <div class="row">
                    <div class="col-12">
                        <div class="d-flex align-items-center justify-content-between">
                            <div>

                                <div class="dash-text">
                                    <h5 class="text-white depo mb-0">
                                        <a href="/"><img src="img/homepage.png" alt="image"> </a>
                                        Product Checkout
                                    </h5>
                                </div>
                            </div>
                            <div>
                            </div>

                        </div>

                    </div>

                </div>

            </div>


            <div class="section-body wallet-header">

                @if (session()->has('success_message'))
                <div class="spacer"></div>
                <div class="alert alert-success">
                    {{ session()->get('success_message') }}
                </div>
            @endif
    
            @if (count($errors) > 0)
                <div class="spacer"></div>
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{!! $error !!}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

                <div class="card bg-light ">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-lg-6 col-md-6 col-12 col-sm-12">

                                <div class="card mb-10 br-20 align-items-center">
                                    <div class="card-body d-flex justify-content-center align-items-center w-100">

                                        <form name="storeCheckout" action="{{ route('checkout.store') }}" method="POST"
                                            id="payment-form" class="w-100">
                                            {{ csrf_field() }}
                                            <h2>Billing Details</h2>
                                            <div class="form-group">
                                                <label for="email">Email Address</label>
                                                @if (auth()->user())
                                                    <input type="email" class="form-control" id="email" name="email"
                                                        value="{{ auth()->user()->email }}" readonly>
                                                @else
                                                    <input type="email" class="form-control" id="email" name="email"
                                                        value="{{ old('email') }}" required>
                                                @endif
                                            </div>
                                            <div class="form-group">
                                                <label for="name">Name<span class="red">*</span></label>
                                                <input type="text" class="form-control" id="name" name="name"
                                                    value="{{ Auth::user()->name }}" required>
                                                <div class="errormsg" id="error_name"></div>
                                            </div>
                                            <div class="form-group">
                                                <label for="address">Address<span class="red">*</span></label>
                                                <input type="text" class="form-control" id="address" name="address"
                                                    value="{{ Auth::user()->user_personal_detail->address ?? '' }}" required>
                                                <div class="errormsg" id="error_address"></div>
                                            </div>

                                            <div class="half-form">
                                                <div class="form-group">
                                                    <label for="city">City<span class="red">*</span></label>
                                                    <input type="text" class="form-control" id="city" name="city"
                                                        value="{{ Auth::user()->user_personal_detail->city ?? '' }}" required>
                                                    <div class="errormsg" id="error_city"></div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="province">State<span class="red">*</span></label>
                                                    <input type="text" class="form-control" id="province"
                                                        name="province"
                                                        value="{{ Auth::user()->user_personal_detail->state ?? '' }}"
                                                        required>
                                                    <div class="errormsg" id="error_state"></div>
                                                </div>
                                            </div> <!-- end half-form -->

                                            <div class="half-form">
                                                <div class="form-group">
                                                    <label for="postalcode">Pincode<span class="red">*</span></label>
                                                    <input type="text" class="form-control" id="postalcode"
                                                        name="postalcode"
                                                        value="{{ Auth::user()->user_personal_detail->pincode ?? '' }}"
                                                        required>
                                                    <div class="errormsg" id="error_code"></div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="phone">Phone<span class="red">*</span></label>
                                                    <input type="text" class="form-control" id="phone" name="phone"
                                                        value="{{ Auth::user()->user_personal_detail->phone ?? '' }}"
                                                        required>
                                                    <div class="errormsg" id="error_phone"></div>
                                                </div>
                                            </div> <!-- end half-form -->

                                            <div class="spacer"></div>

                                            <div class="form-group">
                                                <div id="card-element">
                                                    <!-- a Stripe Element will be inserted here. -->
                                                </div>
                                                <!-- Used to display form errors -->
                                                <div id="card-errors" role="alert"></div>
                                            </div>
                                            <div class="spacer"></div>

                                            <input type="hidden" id="totalAmt" value="{{ $newTotal }}" name="billing_subtotal" />

                                            <button id="complete-orders"
                                                class="button-primary btn btn-primary full-width border-0">Complete
                                                Order</button>
                                            <input type="hidden" id="product" value="product" name="flag" />
                                            {{-- <input type="hidden" id="rzp_paymentid" value="" name="rzp_paymentid" /> --}}
                                        </form>

                                    </div>
                                </div>

                            </div>

                            <div class="col-lg-6 col-md-6 col-12 col-sm-12">

                               
                                <div class="card mb-10 br-20 align-items-center">
                                    <div class="card-body d-flex justify-content-center align-items-center w-100">
                                        <div class="checkout-table-container c-2 w-100">
                                            <h2 class="border-bottom pb-2">Your Order</h2>

                                            <div class="checkout-table">

                                                @if ($cart_products->count() > 0)
                                                @foreach ($cart_products as $item)
                                                <div class="checkout-table-row">
                                                    <div class="checkout-table-row-left d-flex justify-content-between align-items-center">
                                <div class="img-product-cover">
                                    @php
                                        $imagesArray = json_decode($item->images, true);
                                        $firstImage = '';

                                        if (is_array($imagesArray) && isset($imagesArray[0]) && !empty($imagesArray[0])) {
                                            $firstImage = trim($imagesArray[0], '"');
                                        } elseif (!is_array($imagesArray) && !empty($item->images)) {
                                            $firstImage = $item->images;
                                        } else {
                                            $firstImage = asset('images/no-image.png'); // fallback image
                                        }
                                    @endphp

                                    <img src="{{ $firstImage }}" alt="item" class="checkout-table-img img-fluid check-image">
                                </div>


                                                        <div class="checkout-table-row-right">
                                                            <span title="{{ $item->product_title }}">{{ substr($item->product_title, 0,  40) }}.. </span>
                                                        </div>

                                            

                                                        <div class="checkout-item-details">
                                                            <div class="checkout-table-price"><i class="fa fa-inr" aria-hidden="true"></i> {{ $item->price }}
                                                            </div>
                                                            <div class="checkout-table-quantity text-right">{{ $item->product_quantity }}</div>
                                                        </div>
                                                   <!-- end checkout-table -->

                            
                                                </div>
                                                </div> <!-- end checkout-table-row -->
                                                @endforeach
                                                @endif



                                            </div> <!-- end checkout-table -->

                                            <div class="checkout-totals">
                                                <div class="checkout-totals-left">

                                                    @if ($cart_products->count() > 0)
                                                        <div class="sub">
                                                            <span>Subtotal</span> <span> <i class="fa fa-inr" aria-hidden="true"></i> {{ $cart_subtotal }} </span>
                                                        </div>
                                                    @endif

                                                @if (session()->has('coupon'))
                                                <div class="sub">
                                                    <span> Discount ({{ session()->get('coupon')['name'] }}) </span>
                                                    <span> - <i class="fa fa-inr" aria-hidden="true"></i> {{ $discount }} </span>
                                                </div>
                                                <div class="sub">
                                                    <span> New Subtotal </span>
                                                    @if (isset($newSubtotal))
                                                    <span> <i class="fa fa-inr" aria-hidden="true"></i> {{ $newSubtotal }} 
                                                    </span>
                                                    @endif
                                                </div>
                                                
                                                @endif


                                                    <div class="sub">
                                                        <span>Tax ({{ config('cart.tax') }}%)</span><span>
                                                            <i class="fa fa-inr" aria-hidden="true"></i> {{ $newTax }}
                                                        </span>
                                                    </div>

                                                    
                                                    @if (isset($newTotal))

                                                    <div class="sub">
                                                        <span>Total</span>
                                                        <span>
                                                            <i class="fa fa-inr" aria-hidden="true"></i> {{ $newTotal }} 
                                                        </span>
                                                    </div>
                                                    @endif
                                                </div>
                                                <input type="hidden" id="totalAmt" value="">
                                            </div> <!-- end checkout-totals -->
                                        </div>

                                    </div>
                                </div>
                           


                            </div>



                        </div>
                    </div>


                </div>


            </div>

        </section>
    </div>


    {{-- Modal checkout --}}

    <div class="modal fade" id="myModalselect" role="dialog" aria-labelledby="...">
        {{-- <div class="modal-dialog modal-lg modal-dialog-centered" role="document"> --}}
        <div class="modal-dialog  modal-dialog-centered" role="document">
    
            <div class="modal-content">
                <div class="modal-header">
                    {{-- <h5 class="modal-title" id="exampleModalLabel">New message</h5> --}}
                    <button type="button" class="close" data-dismiss="modal"><span
                            aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body text-center">
                    <div>
                        <h5 class="contact-hg">Select Your Payment Method </h5>
                    </div>
                    <div class="mt-3">
                        <select name="selectmethod" id="selectmethod" class="form-control">
                            <option value="">Select Payment Method</option>
                            <option value="withdrawalwallet">Withdrawal Wallet</option>
                            <option value="payrequest">Pay Request</option>
                            <option value="upi">UPI</option>
                          </select>
                          <span class="error_message" id="selectmethoderror"></span>
                    </div>
                </div>
                <div class="modal-footer justify-content-center">
                    <button type="button" id="pay_submit" class="btn btn-primary">Submit</button>
                  </div>
            </div>
        </div>
    </div>
    

    <div class="modal fade" id="myModalcheckout" role="dialog" aria-labelledby="...">
        <div class="modal-dialog  modal-dialog-centered" role="document">
    
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span
                            aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body text-center">
                    <div>
                        <h5 class="contact-hg">Contact your Crown member </h5>
                    </div>
                    <div>
                        Request Pay to this Number Before clicking the Pay Request <span class="color-text">+91 73040 85171</span>
                    </div>
    
                    <div class="mt-2">
                        <a href="tel:+919594763911" class="btn-contact"><i class="fa fa-phone"></i>Contact</a>
                        <a href="https://wa.me/9594763911?text=Hello%20Sir" class="btn-contact">
                            <i class="fab fa-whatsapp" aria-hidden="true"></i>whatsaap</a>
                    </div>
    
                </div>
                <div class="modal-footer justify-content-center">
                    <button type="button" id="pay_now" class="btn btn-primary">Pay Request</button>
                  </div>
            </div>
        </div>
    </div>

    <script>
 $(document).ready(function() {
$('#complete-orders').click(function(e) {
    var Name=$('#name').val();

    var billing_subtotal = $('#totalAmt').val();
    var flag =$('#product').val();

    if (Name == '') {
        $("#error_name").html('(Please mention your  Name)');
           } else {
        $("#error_name").html('');
           }
    var Address=$('#address').val();
    if (Address == '') {
        $("#error_address").html('(Please mention your Address)');
    } else {
        $("#error_address").html('');
    }
    var City=$('#city').val();
    if (City == '') {
        $("#error_city").html('(Please mention your City)');
    } else{
        $("#error_city").html('');
    }
    var Province=$('#province').val();
    if (Province == '') {
        $("#error_state").html('(Please mention your Province)');
    } else{
        $("#error_state").html('');
    }
    var Postalcode=$('#postalcode').val();
    if (Postalcode == '') {
        $("#error_code").html('(Please mention your Province)');
    } else{
        $("#error_code").html('');
    }
    var Phone=$('#phone').val();
    if (Phone == '') {
        $("#error_phone").html('(Please mention your Phone)');
    } else{
        $("#error_phone").html('');
    }
if (Name =="" || Address == " " || Province == "" || Postalcode == "" || Phone == "" ) {
    return false;
} else {
e.preventDefault();
$('#myModalselect').modal('show');
$('#pay_submit').click(function(e) {
            var selectmethod = $('#selectmethod').val();
            if(selectmethod == ''){
                $('#selectmethoderror').html('(Please Chose the Method)');
                return false;
            }else if(selectmethod === 'withdrawalwallet'){
                let csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

                let withdrawdata = {
                    name:Name,
                    address:Address,
                    city:City,
                    province:Province,
                    postalcode:Postalcode,
                    phone:Phone,
                    billing_subtotal:billing_subtotal,
                    flag:flag,
                    selectmethod:selectmethod
                }

            $.ajax({
            type: 'POST',
            url: 'checkout',
            data: JSON.stringify(withdrawdata),
            contentType: "application/json",
            headers: {
                'X-CSRF-TOKEN': csrfToken
            },
            success: function (response) {
                // response.success = true;
                        if(!response.success){
                            $('#selectmethoderror').html('(To proceed with the withdrawal, the Wallet must have at least 500 Rupees more than the cost of the product)')
                        }else{
                            window.location.href = '/thankyou?flag=product';
                        }
            },
            error: function (xhr, status, error) {
                // console.error('Error occurred:', error);
                console.log('Status:', status);
                console.log('Response:', xhr.responseText);
            }
            });




            }else if(selectmethod === 'upi') {

                let csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
                let authToken = $('input[name="authtoken"]').val(); 
                let withdrawdata = {
                    name:Name,
                    address:Address,
                    city:City,
                    province:Province,
                    postalcode:Postalcode,
                    phone:Phone,
                    billing_subtotal:billing_subtotal,
                    flag:flag,
                    selectmethod:selectmethod
                }

            $.ajax({
            type: 'POST',
            // url: 'checkout',
            url: 'api/product-checkout',
            data: JSON.stringify(withdrawdata),
            contentType: "application/json",
            headers: {
                "Authorization": "Bearer " + authToken , 
                'X-CSRF-TOKEN': csrfToken
            },
            success: function(response) {
                            console.warn(response, 'response');
                            if (response.success && response.data && response.data.payment_link) {
                                window.location.href = response.data.payment_link;
                            } else {
                                $('#selectmethoderror').html('(Error processing UPI payment)');
                            }

                        },
                        error: function(xhr, status, error) {
                            console.log('Status:', status);
                            console.log('Response:', xhr.responseText);
                            $('#selectmethoderror').html('(Server error)');
                        }

            }
            );
            }
            else{
                $('#myModalselect').modal('hide');
                $('#myModalcheckout').modal('show');
            }
            


// var total = $('#totalAmt').val();
//     var options = {
//         "key": "{{ env('RAZOR_KEY') }}", // Enter the Key ID generated from the Dashboard
//         "amount": total *
//             100, // Amount is in currency subunits. Default currency is INR. Hence, 50000 refers to 50000 paise
//         "currency": "INR",
//         "name": "{{ auth()->user() != null ? auth()->user()->name : '' }}",
//         "description": "test",
//         "image": "https://example.com/your_logo", // You can give your logo url

//         "handler": function(response) {

//             document.getElementById('rzp_paymentid').value = response
//                 .razorpay_payment_id;
//             // $('#payment-form').submit();
//             document.storeCheckout.submit();

//             Swal.fire({
//                 icon: 'success',
//                 text: 'plese wait...!',
//             })

//         },
//         "prefill": {
//             "name": "{{ auth()->user() != null ? auth()->user()->name : '' }}",
//             "email": "{{ auth()->user() != null ? auth()->user()->email : '' }}",

//         },
//         "notes": {
//             "address": "India",
//         },
//         "theme": {
//             "color": "#F37254"
//         }
//     };
//     var rzp1 = new Razorpay(options);

//     rzp1.open();
//     e.preventDefault();

});
}
});
});
    </script>

<script>
    $(document).ready(function() {
            $('#pay_now').click(function(e) {
                $('#payment-form').submit();
        })
    })
</script>

<script>
$(document).ready(function() {
    // Update the click handler to use form submit prevention and validation
    $('#complete-orders').on('click', function(e) {
        e.preventDefault(); // Add this to prevent form submission

        // Validation checks
        var Name = $('#name').val();
        var Address = $('#address').val();
        var City = $('#city').val();
        var Province = $('#province').val();
        var Postalcode = $('#postalcode').val();
        var Phone = $('#phone').val();

        // Clear previous error messages
        $('.errormsg').html('');

        // Validation logic
        var hasErrors = false;
        
        if (!Name) {
            $("#error_name").html('(Please mention your Name)');
            hasErrors = true;
        }
        if (!Address) {
            $("#error_address").html('(Please mention your Address)');
            hasErrors = true;
        }
        if (!City) {
            $("#error_city").html('(Please mention your City)');
            hasErrors = true;
        }
        if (!Province) {
            $("#error_state").html('(Please mention your Province)');
            hasErrors = true;
        }
        if (!Postalcode) {
            $("#error_code").html('(Please mention your Postal Code)');
            hasErrors = true;
        }
        if (!Phone) {
            $("#error_phone").html('(Please mention your Phone)');
            hasErrors = true;
        }

        // If validation passes, show modal
        if (!hasErrors) {
            $('#myModalselect').modal('show');
        }
    });

    // Rest of your existing modal and payment handling code...
});
</script>

@endsection