@extends('layouts/front')
@section('title', $product->name)
@section('scripts')
<script src="{{ Vite::asset('resources/themes/default/js/basket.js') }}" type="module"></script>
@endsection
@section('content')

<div class="{{ theme_metadata('layout_classes', 'max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto') }}">
    @php $activeCoupon = $row->basket->coupon_id ? $row->basket->coupon : null; @endphp
    <form id="basket-coupon-form" method="POST" action="{{ $activeCoupon ? route('front.store.basket.coupon.remove') : route('front.store.basket.coupon') }}"></form>
    <form id="basket-config-form" data-pricing-endpoint="{{ route('front.store.basket.config.preview', ['product' => $product]) }}" method="POST" action="{{ route('front.store.basket.config', ['product' => $product]) }}{{(request()->getQueryString() != null ? '?' . request()->getQueryString() : '')}}">
        <input type="hidden" name="currency" value="{{ $row->currency }}" id="currency">
        @csrf
        @include("shared.alerts")
        <h1 class="text-2xl font-semibold mb-4 dark:text-white">{{ __('store.config.title') }}</h1>
        <div class="grid grid-cols-3 gap-4">
            <div class="col-span-3 md:col-span-2">
                <div class="grid sm:grid-cols-3 gap-2 card" id="basket-billing-section">
                    <div class="col-span-3">
                        <h2 class="text-lg font-semibold mb-4 dark:text-white/50">{{ __('store.config.billing') }}</h2>
                    </div>
                    @foreach ($pricings as $pricing)
                    <label for="billing-{{ $pricing->recurring }}-{{ $pricing->currency }}" class="col-span-3 md:col-span-1 p-3 block w-full bg-white border border-gray-200 rounded-lg text-sm focus:border-indigo-500 focus:ring-indigo-500 dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400">
                        <span class="dark:text-gray-400 font-semibold">@if ($pricing->isFree()){{ __('global.free') }} @else {{ $pricing->getPriceByDisplayMode() }} {{ $pricing->getSymbol() }} @endif {{ $pricing->recurring()['translate'] }}
                            <p class="text-gray-500">{{ $pricing->pricingMessage() }} @if ($pricing->hasDiscountOnRecurring($product->getFirstPrice()))<span class="inline-flex items-center gap-x-1.5 py-1.5 px-3 rounded-full text-xs font-medium bg-teal-100 text-teal-800 dark:bg-teal-800/30 dark:text-teal-500">-{{ $pricing->getDiscountOnRecurring($product->getFirstPrice()) }}%</span>@endif</p>
                        </span>
                        <input type="radio" name="billing" value="{{ $pricing->recurring }}" {{ ($billing == $pricing->recurring) || $loop->first ? 'checked' : '' }} data-pricing="{{ $pricing->toJson()  }}" class="shrink-0 ms-auto mt-0.5 border-gray-200 rounded-full text-indigo-600 focus:ring-indigo-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-indigo-600 dark:checked:border-indigo-600 dark:focus:ring-offset-gray-800" id="billing-{{ $pricing->recurring }}-{{ $pricing->currency }}">
                    </label>
                    @endforeach
                </div>
                @if (!empty($options_html))
                <div class="card border-b border-gray-900/10 pb-6">
                    <h2 class="text-lg font-semibold">{{ __('store.config.options') }}</h2>
                    {!! $options_html !!}
                </div>
                @endif
                @if (!empty($data_html))
                <div class="card border-b border-gray-900/10 pb-6">

                    {!! $data_html !!}
                </div>
                @endif
                @if (app('extension')->extensionIsEnabled('free_trial'))
                @include('free_trial::config_card', ['product' => $product])
                @endif
                @if (app('extension')->extensionIsEnabled('faq'))
                @include('faq::widget', [
                'product' => $product ?? null,
                'title' => __('faq::messages.client.product_title', ['name' => $product->name]),
                'description' => __('faq::messages.client.product_description', ['name' => $product->name]),
                ])
                @endif
                <div class="card dark:text-gray-400">
                    <h2 class="text-lg font-semibold dark:text-gray-300 mb-4">{{ __('coupon.add_coupon_title') }}</h2>
                    <input form="basket-coupon-form" type="hidden" name="_token" value="{{ csrf_token() }}">
                    @if ($activeCoupon)
                    <input form="basket-coupon-form" type="hidden" name="_method" value="DELETE">
                    @endif
                    <input form="basket-coupon-form" type="hidden" name="redirect_to" value="{{ request()->fullUrl() }}">
                    <div class="grid grid-cols-6 gap-2">
                        <div class="col-span-5">
                            @include('shared/input', [
                            'name' => 'coupon',
                            'attributes' => ['placeholder' => __('coupon.coupon_placeholder'), 'form' => 'basket-coupon-form'],
                            'value' => old('coupon', $activeCoupon?->code),
                            ])
                        </div>
                        <div>
                            @if ($activeCoupon)
                            <button form="basket-coupon-form" type="submit" class="mt-2 btn-danger py-3 px-4 w-full"><i class="bi bi-x-circle mr-3"></i> <span class="md:inline-block hidden">{{ __('coupon.remove_coupon') }}</span></button>
                            @else
                            <button form="basket-coupon-form" type="submit" class="mt-2 btn-primary py-3 px-4 w-full"><i class="bi bi-ticket-perforated mr-3"></i>
                                <span class="md:inline-block hidden">{{ __('coupon.add_coupon') }}</span></button>
                            @endif
                        </div>

                    </div>
                </div>
            </div>
            <div class="col-span-3 md:col-span-1">
                <div class="card dark:text-gray-400">
                    <h2 class="text-lg font-semibold  dark:text-gray-300 mb-4">{{ __('store.config.summary') }}</h2>
                    <div id="basket-config-error" class="text-sm text-red-600 mb-3 hidden"></div>
                    <div class="flex justify-between mb-2">
                        <span>{{ __('global.product') }}</span>
                        <span>{{ $row->product->name }}</span>
                    </div>
                    @if ($options->isNotEmpty())
                    <hr class="my-2">
                    @foreach ($options as $option)
                    <div class="flex justify-between mb-2">
                        <span id="options_name[{{ $option->key }}]" data-name="{{ $option->name }}">{{ $option->name }}</span>
                        <span id="options_price[{{ $option->key }}]">0</span>
                    </div>
                    @endforeach
                    <hr class="my-2">
                    @endif
                    <div class="flex justify-between mb-2">
                        <span>{{ __('store.config.recurring_payment') }}</span>
                        <span id="recurring">0</span>
                    </div>

                    <div class="flex justify-between mb-2">
                        <span>{{ __('store.config.onetime_payment') }}</span>
                        <span id="onetime">0</span>
                    </div>

                    <div class="flex justify-between mb-2">
                        <span>{{ __('store.fees') }}</span>
                        <span id="fees">0</span>
                    </div>

                    @if ($activeCoupon)
                    <div class="flex justify-between mb-2">
                        <span>{{ __('coupon.coupon') }}</span>
                        <span id="coupon-code" class="text-primary">{{ $activeCoupon->code }}</span>
                    </div>
                    @endif
                    <div id="coupon-line" class="flex justify-between mb-2 {{ $activeCoupon ? '' : 'hidden' }}">
                        <span>{{ __('coupon.discount_price') }}</span>
                        <span id="coupon-discount" class="text-primary">0</span>
                    </div>

                    <div class="flex justify-between mb-2">
                        <span>{{ $activeCoupon ? __('coupon.subtotal_with_coupon') : __('store.subtotal') }}</span>
                        <span id="subtotal">0</span>
                    </div>

                    <div class="flex justify-between mb-2">
                        <span>{{ __('store.vat') }}</span>
                        <span id="taxes">0</span>
                    </div>
                    <hr class="my-2">
                    <div class="flex justify-between mb-2">
                        <span class="font-semibold">{{ __('store.total') }}</span>
                        <span class="font-semibold" id="total">0</span>
                    </div>

                    <button class="bg-indigo-600 text-white py-2 px-4 rounded-lg mt-4 w-full">{{ __('store.basket.addtocart') }}</button>
                </div>
            </div>
        </div>
    </form>
</div>


@endsection