@extends('frontend.layouts.client.index')
@section('content')
    <div class="container margin-top-100">
        <div class="header-add-section ads-section category-top-header-section row">
            <div class="text-right">
                <img src="{{ URL::to('/') }}/uploads/videoTopBanner.png" alt="">
            </div>
        </div>


        <div class="buy-package-container margin-top-40">
            <div class="row">
                @if (!$package->isEmpty())
                    <div class="owl-carousel package-carousel owl-theme">
                        @foreach ($package as $index => $data)
                                                        <div class="card item text-center">
                                <div class="single-package-container {{ $class }} margin-top-150">
                                    <div class="single-package-heading text-center">
                                        <div class="single-package-price">
                                            {{ $data->price }}$
                                        </div>
                                        <div class="single-package-title">
                                            <br>
                                            {{ $data->name }} <br> <br>
                                            {{ $data->validity }} Days
                                        </div>

                                        <div class="single-package-triangle"></div>
                                    </div>
                                    <div class="single-package-body">
                                        {{ $data->description }}

                                        <div class="single-package-button">
                                            <button class="package-buy-now-btn margin-top-40" data-id="{{ $data->id }}"
                                                data-name="{{ $data->name }}" data-validity="{{ $data->validity }}"
                                                data-price="{{ $data->price }}" data-userId="{{ auth()->id() }}">
                                                BUY NOW
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>
        </div>

        {{-- <div class="package-information"></div> --}}
    </div>

    {{-- Start:: Payment Pay Modal --}}
    <div class="modal fade" tabindex="-1" role="dialog" aria-hidden="true" id="payPaymentModal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-body">
                    <h4 class="margin-top-10 payable-details">Your Selected Package : <span
                            class="payable-package payable-details-value"></span></h4>
                    <h4 class="margin-top-10 payable-details">Package Validity : <span
                            class="payable-validity payable-details-value"></span></h4>
                    <h4 class="margin-top-10 payable-details">Package Price : <span
                            class="payable-price payable-details-value"></span></h4>
                    <input type="hidden" name="package_id" class="package_id">
                    <div id="paymentTypeBtn" class="margin-top-40"></div>
                </div>
            </div>
        </div>
    </div>
    {{-- End:: Payment Pay Modal --}}
@endsection

@push('custom-js')