@php
    $packageAddons = packageWithAddons();
    $package = $packageAddons['package'] ?? [];
    $backendGeneral = getThemeOption('backend_general') ?? [];
@endphp

<div class="pricing-plan-area mb-120">
    <div class="container">
        <div class="row g-xl-4 gy-5">
            <div class="col-xl-4 col-md-6 pt-50">
                <div class="pricing-plan-area-wrap">
                    <div class="pricing-plan-card1">
                        <div class="price-area">
                            <h2>{{ defaultCurrency() }}{{ $package->price }} / <span>{{ $package->type }}
                                    +{{ translate('Tax') }}</span> </h2>
                        </div>
                        <ul class="pricing-list">
                            @foreach ($package->packageItems as $item)
                                <li>
                                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M6 8.5L7.5 10L10 6.5M14 8C14 8.84533 13.58 9.59333 12.938 10.0453C13.0072 10.4405 12.9801 10.8465 12.8591 11.229C12.738 11.6115 12.5266 11.9592 12.2427 12.2427C11.9592 12.5266 11.6115 12.738 11.229 12.8591C10.8465 12.9801 10.4405 13.0072 10.0453 12.938C9.81481 13.2663 9.50857 13.5343 9.15253 13.7191C8.7965 13.904 8.40117 14.0003 8 14C7.15467 14 6.40667 13.58 5.95467 12.938C5.55949 13.0071 5.15348 12.98 4.77099 12.859C4.38851 12.7379 4.04081 12.5265 3.75733 12.2427C3.47342 11.9592 3.26199 11.6115 3.14095 11.229C3.01991 10.8465 2.99283 10.4405 3.062 10.0453C2.73368 9.81481 2.46575 9.50857 2.28088 9.15253C2.09602 8.7965 1.99967 8.40117 2 8C2 7.15467 2.42 6.40667 3.062 5.95467C2.99283 5.55949 3.01991 5.15346 3.14095 4.77097C3.26199 4.38847 3.47342 4.04078 3.75733 3.75733C4.04081 3.47346 4.38851 3.26206 4.77099 3.14103C5.15348 3.01999 5.55949 2.99289 5.95467 3.062C6.18523 2.73372 6.49148 2.46582 6.8475 2.28096C7.20353 2.0961 7.59885 1.99973 8 2C8.84533 2 9.59333 2.42 10.0453 3.062C10.4405 2.99289 10.8465 3.01999 11.229 3.14103C11.6115 3.26206 11.9592 3.47346 12.2427 3.75733C12.5265 4.04081 12.7379 4.38851 12.859 4.77099C12.98 5.15347 13.0071 5.55949 12.938 5.95467C13.2663 6.18519 13.5343 6.49143 13.7191 6.84747C13.904 7.2035 14.0003 7.59884 14 8Z"
                                            stroke="#059669" stroke-width="1.5" stroke-linecap="round"
                                            stroke-linejoin="round" />
                                    </svg>
                                    {{ $item->name }}
                                </li>
                            @endforeach
                        </ul>
                    </div>
                    <div class="batch">
                        <span>{{ $package->name }}</span>
                    </div>
                </div>
            </div>
            @if(count($packageAddons['packageAddons'] ) > 0)
            <div class="col-xl-4 col-md-6">
                <div class="pricing-plan-area-wrap two">
                    <div class="pricing-plan-card1">
                        <ul class="add-on-list">
                            <li>
                                <div class="single-item">
                                    <div class="content">
                                        <h6>{{ translate('Starting') }}</h6>
                                        <span>( {{ translate('Start') }}
                                            {{ $backendGeneral['default_currency'] ?? "$" }}{{ $package->price }} +
                                            {{ translate('Tax') }})</span>
                                    </div>
                                    <div class="form-check form-switch">
                                        <input class="form-check-input default-checkbox-checked" checked
                                            type="checkbox">
                                    </div>
                                </div>
                            </li>
                            @foreach ($packageAddons['packageAddons'] as $addon)
                                <li>
                                    <div class="single-item">
                                        <div class="content">
                                            <h6>{{ $addon->name }}</h6>
                                            <span>( {{ $addon->type }}
                                                {{ $backendGeneral['default_currency'] ?? "$" }}{{ $addon->price }} +
                                                {{ translate('Tax') }})</span>
                                        </div>
                                        <div class="form-check form-switch">
                                            <input class="form-check-input addon-switch-option"
                                                data-addon-name="{{ $addon->name }}"
                                                data-addon-item="{{ $addon->item_qty ? $addon->item_qty : 1 }}"
                                                data-addon-price="{{ $addon->price }}" type="checkbox"
                                                data-addon-id="{{ $addon->id }}"
                                                data-addon-type="{{ $addon->type }}"
                                                id="flexSwitchCheckDefault1{{ $addon->id }}">
                                        </div>
                                    </div>
                                    <ul class="pricing-list">
                                        @foreach ($addon->addonItems as $addonItem)
                                            <li>
                                                <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
                                                    xmlns="http://www.w3.org/2000/svg">
                                                    <path
                                                        d="M6 8.5L7.5 10L10 6.5M14 8C14 8.84533 13.58 9.59333 12.938 10.0453C13.0072 10.4405 12.9801 10.8465 12.8591 11.229C12.738 11.6115 12.5266 11.9592 12.2427 12.2427C11.9592 12.5266 11.6115 12.738 11.229 12.8591C10.8465 12.9801 10.4405 13.0072 10.0453 12.938C9.81481 13.2663 9.50857 13.5343 9.15253 13.7191C8.7965 13.904 8.40117 14.0003 8 14C7.15467 14 6.40667 13.58 5.95467 12.938C5.55949 13.0071 5.15348 12.98 4.77099 12.859C4.38851 12.7379 4.04081 12.5265 3.75733 12.2427C3.47342 11.9592 3.26199 11.6115 3.14095 11.229C3.01991 10.8465 2.99283 10.4405 3.062 10.0453C2.73368 9.81481 2.46575 9.50857 2.28088 9.15253C2.09602 8.7965 1.99967 8.40117 2 8C2 7.15467 2.42 6.40667 3.062 5.95467C2.99283 5.55949 3.01991 5.15346 3.14095 4.77097C3.26199 4.38847 3.47342 4.04078 3.75733 3.75733C4.04081 3.47346 4.38851 3.26206 4.77099 3.14103C5.15348 3.01999 5.55949 2.99289 5.95467 3.062C6.18523 2.73372 6.49148 2.46582 6.8475 2.28096C7.20353 2.0961 7.59885 1.99973 8 2C8.84533 2 9.59333 2.42 10.0453 3.062C10.4405 2.99289 10.8465 3.01999 11.229 3.14103C11.6115 3.26206 11.9592 3.47346 12.2427 3.75733C12.5265 4.04081 12.7379 4.38851 12.859 4.77099C12.98 5.15347 13.0071 5.55949 12.938 5.95467C13.2663 6.18519 13.5343 6.49143 13.7191 6.84747C13.904 7.2035 14.0003 7.59884 14 8Z"
                                                        stroke="#059669" stroke-width="1.5" stroke-linecap="round"
                                                        stroke-linejoin="round" />
                                                </svg>
                                                {{ $addonItem->name }}
                                            </li>
                                        @endforeach
                                    </ul>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                    <div class="batch">
                        <span>{{ $singleWidgetData['title'] ?? 'Select An Add-On' }}</span>
                    </div>
                </div>
            </div>
            @endif
            <div class="col-xl-4 col-md-6 pt-50">
                <div class="pricing-plan-area-wrap three">
                    <div class="pricing-plan-card1">
                        <div class="order-summary-wrap">
                            <form action="{{ route('checkout') }}" method="get">
                                <div class="title-and-quantity">
                                    <h5>{{ translate('Job Quantity') }}</h5>
                                    <div class="quantity-area">
                                        <div class="item quantity-nav quantity">
                                            <button type="button" id="sub" class="minus"><i
                                                    class="bi bi-dash"></i></button>
                                            <input type="hidden" value="1" name="packageQty" id="packageQty">
                                            <input type="hidden" value="{{ $package->id }}" name="packageId"
                                                id="packageId">
                                            <input type="number" value="1" min="1" class='quantity'
                                                readonly data-type="package" data-price="{{ $package->price }}"
                                                max="10" />
                                            <button type="button" id="add" class="add"><i
                                                    class="bi bi-plus"></i></button>
                                        </div>
                                    </div>
                                </div>
                                <div id="added-option-area"></div>
                                <table id="invoice-card">
                                    <tbody>
                                        <tr>
                                            <td> {{ translate('Post jobs') }} ( <span class="package-item">1</span> x
                                                {{ $backendGeneral['default_currency'] ?? "$" }}<span
                                                    class="unit-price">{{ $package->price }}</span>)</td>
                                            <td>
                                                {{$backendGeneral['default_currency'] ?? "$" }}<span class="package-item-price price">{{ $package->price }}</span>
                                            </td>
                                        </tr>
                                        <tr class="subtotalboder">
                                            <td>{{ translate('Sub Total') }}</td>
                                            <td>{{ $backendGeneral['default_currency'] ?? "$" }}<span
                                                    id="sub-total">{{ $package->price }}</span> </td>
                                        </tr>
                                        <tr>

                                            <input type="hidden" id="vat_value"
                                                value="{{ $backendGeneral['tax_rate'] ?? 0 }}">

                                            @php
                                                $vatPrice = $backendGeneral['tax_rate'] ?? 0;
                                                $vat = ($package->price * $vatPrice) / 100;
                                                number_format($vat, 2);

                                            @endphp

                                            <td>{{ translate('Tax') }}({{ $vatPrice }} %)</td>
                                            <td>

                                                {{ $backendGeneral['default_currency'] ?? "$" }}<span
                                                    id="vat-price">{{ number_format($vat, 2) }}</span>

                                            </td>
                                        </tr>
                                        <tr>
                                            <td>{{ translate('Total') }}</td>
                                            <td> {{ $backendGeneral['default_currency'] ?? "$" }}<span
                                                    class="pay-price">{{ number_format($vat + $package->price, 2) }}</span>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <div class="amount-and-btn-area">
                                    <h2 class="total-price"> {{ $backendGeneral['default_currency'] ?? "$" }}<span
                                            class="pay-price">{{ number_format($vat + $package->price, 2) }}</span>
                                    </h2>
                                    <button class="primary-btn-2"
                                        type="submit">{{ $singleWidgetData['button_name'] ?? translate('Buy Now') }}
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="batch">
                        <span>{{ $singleWidgetData['order_summary_title'] ?? 'Order Summary' }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('post_scripts')
    @include('js.front.pricing-js')
@endpush