@extends('layouts.master')

@section('title', __('Shop'))

@push('styles')
<style>
    .separator-breadcrumb, .breadcrumb{
        display: none;
    }
</style>
<link href="{{ asset('frontend/styles/css/product-index.css') }}" rel="stylesheet">
@endpush
@section('content')
<h5 class="m-1 p-0">{{ __('OCA Balance : ') }} <b>€ {{ __(formatDisplayNumber($walletBalance)) }}</b></h5>
<h5 class="m-1 p-0">{{ __('Bonus Wallet Balance : ') }} <b>€ {{ __(formatDisplayNumber($bonusWalletBalance)) }}</b></h5>

    <section id="purchaseProduct" class="m-auto w-full p-5 px-0" style="max-width:980px;width: 100%;">
        <div class="container">
            <div class="row">
                <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12 mx-auto">
                    <form action="{{ route('member.shop.addToCart') }}" class="h-100" id="productForm" method="POST" onkeydown="return event.key != 'Enter';">
                        <div class="P-5 pricecard">
                            @if(isset($product) && !empty($product->count()))
                                <h2 class="producttitles">{{ __("Plastic Neutrality Package") }}</h2>
                                <div class="relative z-0 w-full mb-1 mt-1 group">
                                    <label for="countries" class="select-lbl">{{ __('Select Package')}}</label>
                                    <select id="product_id" name="product_id" class="dropdown js-example-basic-single form-control bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" aria-describedby="inputGroupPrependEmail">
                                        @foreach($product as $productStaticOption)
                                            <option value="{{ basicEncrypt($productStaticOption->id) }}" data-price="{{ $productStaticOption->price }}" data-kg="{{ $productStaticOption->getTotalKgs($csrSellingPrice) }}" @if($productStaticOption->title === 'PNP-10') selected @endif>
                                                @if(empty($productStaticOption->title))
                                                    {{ __('Plastic Neutrality Package') }} - € {{ $productStaticOption->price }}
                                                @else
                                                    {{ $productStaticOption->title }}
                                                @endif
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="relative">
                                    <span class="data-loader"></span>
                                    <h4 class="pricingtxt">€<span id="productPrice">0</span></h4>
                                    <ul class="min-h-20">
                                        <li class="d-flex justify-start p-0">
                                            <img src="{{ asset('frontend/images/checkbox.svg') }}" class="h-7"/>
                                            <p class="checklisttext"><span id="productKg">0</span> {{ __("kg of Plastic Waste Removal Service") }}</p>
                                        </li>
                                    </ul>
                                </div>
                                <button type="submit" class="cart-btns" id="pnpAddToCart">{!! renderIconHtml('cart') !!}{{ __('Add To Cart') }}</button>
                            @else
                                <h2 class="producttitles text-center mt-5">{{ __("No Product Found") }}</h2>
                            @endif
                        </div>
                    </form>
                </div>
                @if(isset(Auth::user()->setting->access_visibility) && in_array('purchase_business_licence', Auth::user()->setting->access_visibility))
                    @if(isset($licence) && !empty($licence))
                    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12 mx-auto">
                        <form action="{{ route('member.shop.addToCart') }}" class="h-100" id="LicenceForm" method="POST" onkeydown="return event.key != 'Enter';">
                            <div class="P-5 pricecard bgpurple">
                                <input type="hidden" name="product_id" value="{{ basicEncrypt($licence->id) }}">
                                <div class="relative">
                                    <h2 class="producttitles">{{ (!empty($licence->title)) ? $licence->title : 'Amplivo Business Licence' }}</h2>
                                    <span class="data-loader"></span>
                                    <h4 class="pricingtxt" style="margin-top:85px !important;">€{{ formatDisplayNumber($licence->price) ?? 0.00 }}</h4>
                                    <ul class="min-h-20 text-white">
                                        <li class="d-flex items-center justify-start p-0"><img src="{{ asset('frontend/images/checkbox.svg') }}" class="h-7"/><p class="checklisttext">{{ __('Amplivo Business Licence ( 1 Year )')}}</p></li>
                                    </ul>
                                </div>

                                <button type="submit" class="cart-btns darkbtns" id="ablAddToCart">{!! renderIconHtml('cart') !!}{{ __("Add To Cart") }}</button>
                            </div>
                        </form>
                    </div>
                    @endif
                @endif
            </div>
            <div class="row" id='checkoutDiv' style='display: none;'>
                <div class="col-12">
                    <div class="checkout-total">
                        <div class="row">
                            <div class="col-sm-9 col-12">
                                <div class="row">
                                    <div class="col-lg-12 d-flex items-center justify-start gap-4 pricincard amount-details">
                                        <div>
                                            <p class="notevalue">{{ __("Subtotal") }}</p>
                                            <p class="value">
                                                €<span id="cartSubTotal">0</span>
                                            </p>
                                        </div>
                                        <div class="">
                                            <p class="notevalue equatation">+</p>
                                        </div>
                                        <div class="">
                                            <p class="notevalue">{{ __("Total Tax") }}</p>
                                            <p class="value">
                                                €<span id="cartTax">0</span>
                                            </p>
                                        </div>
                                        <div class=""><p class="notevalue equatation" style="color:#FFFFFF;">=</p></div>
                                        <div class="">
                                            <p class="finalvalue text-white">
                                                €<span id="cartTotal">0</span>
                                            </p>
                                        </div>

                                    </div>
                                </div>
                            </div>

                            <div class="col-sm-3 col-12 d-flex items-center justify-center">
                                @if(isMyProfileCompleted())
                                    <button type="button" id="checkoutBtn" class="btn text-white cart-btns" onclick="goToCartPage($(this))">{!! renderIconHtml('checkout') !!}{{__('Checkout') }}</button>
                                    @else
                                    <button type="button" id="checkoutBtn" class="cart-btns opacity-75" disabled>
                                        {!! renderIconHtml('checkout') !!}{{__('Checkout') }} <i class="bi bi-info-circle font-size-14" data-html="true" data-toggle="tooltip" data-placement="top" title="Complete your profile to proceed with checkout."></i>
                                    </button>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('scripts')
    <script src="{{ asset('frontend/js/page-js/product-index-blade.js') }}"></script>
@endpush