@extends('layout.maincontant')

@section('page-to-tittle')
<h6 class="float-start m-0 them-fs-2">Billing</h6>
@endsection

@section('main-content-top-nav-btn')
@endsection
@section('main-content')
    <div class="row ">



        <style>
            .pricing-table {
                margin-top: 20px;
            }

            .pricing-table .card {
                border: 1px solid #dee2e6;
                border-radius: 0px;
                transition: transform 0.3s;
                background: #fff6f6;

            }

            .pricing-table .card:hover {
                transform: scale(1.05);
            }

            .pricing-table .card-header {
                background-color: #f8f9fa;
                border-bottom: none;
                text-align: center;
            }

            .pricing-table .card-body {
                text-align: center;
                padding: 10px 0px 0px 0px !important;
            }

            .pricing-table .card-footer {
                text-align: center;
                background-color: #f8f9fa;
                border-top: none;
            }

            .pricing-table .btn {
                width: 50%;
            }

            .addon-list {
                text-align: left;
            }
        </style>
        @php
            use Carbon\Carbon;

            // Ensure $startDate and $endDate are Carbon instances
            $startDate = Carbon::parse($startDate);
            $endDate = Carbon::parse($endDate);

            // Calculate the difference in days
            $daysDifference = $endDate->diffInDays($startDate);

            $bill = auth()->user()->billing;
        @endphp

        <div class="container bg-white">
            <!-- <h1 class="text-center py-5">Pricing Plans</h1> -->
            <div class="row pricing-table them-center">

                <!-- Free Trial -->
                <div class="col-md-6 mb-4">
                    <div class="card h-100">

                        <div class="card-body fs-15">
                            <p>You have <span style="color:#52050a;font-weight:bolder">{{ $daysDifference }} days</span> of
                                free trial left.</p>
                            <p>If you feel you need more time,please speak to our customer support.</p>
                        </div>
                    </div>
                </div>
            </div>
            <h5 style="font-weight:bolder fs-18 fw-6">Select a plan to subscribe to Tiqktes</h5>
            <div class="row pricing-table ">
                @foreach ($price as $pri)
                    <!-- Basic Plan -->
                    <div class="col-md-3 mb-4 rounded">

                        <div class="card rounded h-100 text-white" style="background:{{ $bill == $pri->id ? '#187832' : '#52050a' }}">
                            <div class="card-header" style="background:{{ $bill == $pri->id ? '#187832' : '#52050a' }}">

                                <!-- Plan header details if needed -->
                            </div>
                            <div class="card-body">
                                <ul class="list-unstyled">
                                    <li class="mt-1 fw-6 fs-22"style="">{{ $pri->name }}</li>
                                    @if ($pri->price == '')
                                        <li class="mt-1 fs-15">Custom Pricing</li>
                                    @else
                                        <li class="mt-1 fs-15 ">${{ $pri->price }} / year</li>
                                    @endif

                                    <li class="mt-1 mb-2 py-3"><button class="btn btn-light btn-sm"
                                            onclick="payment({{ $pri->id }})">Select</button></li>

                                    @foreach ($PriceandPlan as $plan)
                                        @if ($plan->plan_id == $pri->id)
                                            @foreach ($plansname as $plansnam)
                                                @if ($plan->Specification_id == $plansnam->id)
                                                    <li
                                                        class="m-2 mx-3 fs-15 px-3 "style="padding:7px ;background:{{ $bill == $pri->id ? '#56a36a' : '#621c20' }} ;text-align:left;">
                                                        <i class="fa-regular fa-circle-check px-1"></i>
                                                        {{ $plansnam->name }}</li>
                                                @endif
                                            @endforeach
                                        @endif
                                    @endforeach
                                </ul>
                            </div>
                            <div class="card-footer" style="background:{{ $bill == $pri->id ? '#187832' : '#52050a' }}">
                                <!-- Plan footer details if needed -->
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            <div class="row pricing-table">
                <!-- Add-Ons -->
                <div class="col-md-6 mx-3 mb-4">



                    <ul class="list-unstyled fw-600 fs-13">
                        <li>Other ways to pay</li>
                        <li>Invoice based payment is also available. To pay with an invoice, please contact us</li>
                        <li> <br></li>
                        <li>Cancellations</li>
                        <li>No contract. Cancel any time.</li>
                    </ul>


                </div>
            </div>

        </div>
    </div>
    <script>
        function payment(id) {
            var idd = id; // Store the passed id in a local variable
            // alert(idd);    // Alert to verify the correct id is being passed

            var uid = "{{ auth()->user()->id }}"; // Retrieve the authenticated user's ID

            // Show the SweetAlert2 confirmation dialog
            Swal.fire({
                title: 'Are you sure?',
                text: "Do you want to proceed with the payment?",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, proceed!'
            }).then((result) => {
                if (result.isConfirmed) {
                    // If the user clicks "Yes", proceed with the payment
                    $.ajax({
                        type: 'POST',
                        url: "{{ env('APP_URL') }}/api/payment",
                        data: {
                            plan_id: idd,
                            uid: uid
                        },
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(response) {
                            window.location.reload();

                        },
                        error: function(xhr, status, error) {
                            // Handle error response
                            console.error('An error occurred while submitting the form');
                            console.error(xhr.responseText);
                            // Optionally, show an error message
                        }
                    });
                    // Show a success message
                    Swal.fire(
                        'Success!',
                        'Payment has been processed.',
                        'success'
                    );

                    // Call the success function or perform any other action here

                }
            });
        }
    </script>
@endsection