@extends('layouts.front_app')
@section('content')
    <style>
        .custom-text-right {
            position: absolute; /* Position the text absolutely */
            right: 0; /* Align the text to the right */
            top: 0; /* Align the text to the top */
        }

        .comedianText p {
            color: #fff;
        }

        .productContent {
            background: var(--white);
            text-align: center;
            padding: 1.5625rem 0 2.1875rem 0;
        }

        .productContent h3 {
            text-transform: uppercase;
            /*font-family: "Marcellus";*/
            font-size: 1.25rem;
            color: var(--black);
            letter-spacing: 5px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
        }

        .productContent p {
            font-size: 0.875rem;
            font-weight: 300;
            color: rgb(0 0 0 / 62%);
            width: 74%;
            margin: auto;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            line-height: 1.5;
            overflow: hidden;
        }

        .productContent ul {
            display: flex;
            justify-content: center;
            margin: 10px 0;
            gap: 5px;
        }

        .productContent ul li i {
            font-size: 0.625rem;
            color: #ffaa8f;
        }

        .productContent a {
            color: var(--black);
            font-weight: 500;
        }

        .productContent a del {
            margin-right: 8px;
            opacity: 50%;
        }
        .productWrap {
            margin-top: 2rem;
        }
    </style>
    <!-- Main Hero Section -->
    <section class="inner-page">
        <div class="container">
            <h2>{{ $data->title }}</h2>
        </div>
    </section>
    <!-- ! Main Hero Section -->

    <!-- Comedian Network -->

    <section class="comedian">
        <div class="container">
            <div class="row justify-content-center text-center">
                <div class="col-lg-9">
                    <div class="comedianText text-white">
                        <p>{!! $data->detail !!}</p>
                    </div>
                </div>
            </div>
            @if(\Illuminate\Support\Facades\Auth::check())
                <div class="comedianTable">
                    <div>
                        <div>
                            <h3>Packages</h3>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <thead>
                                <tr>
                                    <th>Package</th>
                                    @php
                                        $features = $feature->toArray(); // Convert the collection to an array for easier manipulation
                                        if (isset($features[3]) && isset($features[5])) {
                                            $temp = $features[3];
                                            $features[3] = $features[5];
                                            $features[5] = $temp;
                                        }


                                    @endphp


                                    @foreach($features as $f)
                                        @if($f['addon'] == 0)
                                            <th>{{ $f['name'] }}</th>
                                        @endif
                                    @endforeach
                                    <th></th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($package as $item)
                                    @if($item->packageType == 'standard')
                                        <tr>
                                            <td>{{ $item->name }}</td>
                                            @foreach($features as $featureVal)
                                                @if($featureVal['addon'] == 0)
                                                    @if(in_array($featureVal['id'], $item->package_features))
                                                        <td>
                                                            <img src="{{ asset('images/check.png') }}" alt="image"
                                                                 class="img-fluid">
                                                        </td>
                                                    @else
                                                        @if(isset($item->package_features[0]) && $featureVal['name'] == 'Events' && $item->package_features[0] == 'fill')
                                                            @switch($item->name)
                                                                @case('Pay per post')
                                                                <td>1</td>
                                                                @break

                                                                @case('Opener')
                                                                <td>3</td>
                                                                @break

                                                                @case('Feature')
                                                                <td>5</td>
                                                                @break

                                                                @case('Headliner')
                                                                <td>Unlimited</td>
                                                                @break

                                                                @default
                                                                <td></td>
                                                            @endswitch
                                                        @else
                                                            <td></td>
                                                        @endif
                                                    @endif
                                                @endif
                                            @endforeach
                                            <td>
                                                <input type="checkbox" class="plan-checkbox"
                                                       data-detail="{{ $item->detail }}"
                                                       data-price="{{ $item->price }}" data-name="{{ $item->name }}"
                                                       value="{{ $item->id }}" id="check{{ $item->id }}">
                                                <label for="check{{ $item->id }}">${{ $item->price }}*</label>
                                            </td>
                                        </tr>
                                    @endif
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                        <div>
                            <h3>Add-on Packages</h3>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <thead>
                                <tr>
                                    <th>Package</th>
                                    @foreach($features as $f)
                                        @if($f['addon'] == 1)
                                            <th>{{ $f['name'] }}</th>
                                        @endif
                                    @endforeach
                                    <th></th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($package as $item)
                                    @if($item->packageType == 'addon')
                                        <tr>
                                            <td>{{ $item->name }}</td>
                                            @foreach($features as $featureVal)
                                                @if($featureVal['addon'] == 1)
                                                    @if(in_array($featureVal['id'], $item->package_features))
                                                        <td>
                                                            <img src="{{ asset('images/check.png') }}" alt="image"
                                                                 class="img-fluid">
                                                        </td>
                                                    @endif
                                                @endif
                                            @endforeach
                                            <td>
                                                <input type="checkbox" class="addon-checkbox"
                                                       data-detail="{{ $item->detail }}"
                                                       data-price="{{ $item->price }}" data-name="{{ $item->name }}"
                                                       value="{{ $item->id }}" id="check{{ $item->id }}" disabled>
                                                <label for="check{{ $item->id }}">${{ $item->price }}*</label>
                                            </td>
                                        </tr>
                                    @endif
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="position-relative">
                        <div class="custom-text-right">
                            <h1 style="color: red">Excluding Taxes</h1>
                        </div>
                    </div>

                    <div>
                        <a href="javascript:void(0);" class="themeBtn" onclick="purchasePackage()">purchase here</a>
                    </div>
                </div>

            @else
                <div class="comedianTable">
                    <div class="comedianTable-wrap">
                        {{--                @if(session('success') || session('error'))--}}
                        {{--                    <div class="alert {{ session('success') ? 'alert-success' : 'alert-danger' }}">--}}
                        {{--                        {{ session('success') ?? session('error') }}--}}
                        {{--                    </div>--}}
                        {{--                @endif--}}
                        <div>
                            <h3>Packages</h3>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <thead>
                                <tr>
                                    <th>Package</th>
                                    @foreach($feature as $f)
                                        @if($f->addon == 0)
                                            <th>{{ $f->name }}</th>
                                        @endif
                                    @endforeach
                                    <th></th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($package as $item)
                                    @if($item->packageType == 'standard')
                                        <tr>
                                            <td>{{ $item->name }}</td>
                                            @foreach($feature as $featureVal)
                                                @if($featureVal->addon == 0)
                                                    @if(in_array($featureVal->id, $item->package_features))
                                                        <td>
                                                            <img src="{{ asset('images/check.png') }}" alt="image"
                                                                 class="img-fluid">
                                                        </td>
                                                    @else
                                                        <td></td>
                                                    @endif
                                                @endif
                                            @endforeach
                                            <td>
                                                <input type="checkbox" class="plan-checkbox"
                                                       data-detail="{{ $item->detail }}"
                                                       data-price="{{ $item->price }}" data-name="{{ $item->name }}"
                                                       value="{{ $item->id }}" id="check{{ $item->id }}">
                                                <label for="check{{ $item->id }}">${{ $item->price }}*</label>
                                            </td>
                                        </tr>
                                    @endif
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                        <div>
                            <h3>Addons Packages</h3>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <thead>
                                <tr>
                                    <th>Package</th>
                                    @foreach($feature as $f)
                                        @if($f->addon == 1)
                                            <th>{{ $f->name }}</th>
                                        @endif
                                    @endforeach
                                    <th></th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($package as $item)
                                    @if($item->packageType == 'addon')
                                        <tr>
                                            <td>{{ $item->name }}</td>
                                            @foreach($feature as $featureVal)
                                                @if($featureVal->addon == 1)
                                                    @if(in_array($featureVal->id, $item->package_features))
                                                        <td>
                                                            <img src="{{ asset('images/check.png') }}" alt="image"
                                                                 class="img-fluid">
                                                        </td>

                                                    @endif
                                                @endif
                                            @endforeach
                                            <td>
                                                <input type="checkbox" class="addon-checkbox"
                                                       data-detail="{{ $item->detail }}"
                                                       data-price="{{ $item->price }}" data-name="{{ $item->name }}"
                                                       value="{{ $item->id }}" id="check{{ $item->id }}" disabled>
                                                <label for="check{{ $item->id }}">${{ $item->price }}*</label>

                                            </td>
                                        </tr>
                                    @endif
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div>
                        <a href="javascript:void(0);" data-toggle="modal" data-target="#signupPopup" class="themeBtn">purchase
                            here</a>
                    </div>


                </div>
            @endif


        </div>

{{--        <div class="container">--}}
{{--            <div class="row align-items-center">--}}
{{--                @forelse($get_products as $product)--}}
{{--                    <div class="col-md-3">--}}
{{--                        <div class="productWrap">--}}
{{--                            <figure>--}}
{{--                                <img src="{{$product->productImage('product') ? : 'http://homestead.v8/kaleiim/public/storage/46/image.jpg'}}" class="img-fluid" alt="">--}}
{{--                            </figure>--}}
{{--                            <div class="productContent">--}}
{{--                                <h3>--}}
{{--                                    {{$product->title ? : ''}}--}}
{{--                                </h3>--}}
{{--                                <p> {!! \Illuminate\Support\Str::limit(strip_tags($product->detail), 80, '...') !!}</p>--}}
{{--                                <ul>--}}
{{--                                    <li><i class="fas fa-star"></i></li>--}}
{{--                                    <li><i class="fas fa-star"></i></li>--}}
{{--                                    <li><i class="fas fa-star"></i></li>--}}
{{--                                    <li><i class="fas fa-star"></i></li>--}}
{{--                                    <li><i class="fas fa-star"></i></li>--}}
{{--                                </ul>--}}
{{--                                <a href="#">--}}
{{--                                    Price : {{number_format($product->price ? : '')}}--}}
{{--                                </a>--}}

{{--                                <a href="https://jajr00-xs.myshopify.com/products/{{$product->shopify_handle}}" target="_blank" class="themeBtn">Purchase Shopify</a>--}}

{{--                            </div>--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                @empty--}}
{{--                    <h3>Products Not Available</h3>--}}
{{--                @endforelse--}}
{{--            </div>--}}
{{--        </div>--}}
    </section>

    <!-- Popup -->
    <div class="popup modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <div class="modal-body">
                    <h2 class="heading"></h2>
                    <h2 class="heading"></h2>
                    <h4 class="price"></h4>
                    <p></p>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('comedian_network_script')
    <script>
        $(document).ready(function () {

            $('.addon-checkbox').prop('disabled', false);

            $('.plan-checkbox:first').prop('checked', true);

            $('.plan-checkbox').on('change', function () {

                $('.addon-checkbox:first').prop('checked', false);

                if ($(this).is(':checked')) {
                    var name = $(this).data('name');
                    var price = $(this).data('price');
                    var detail = $(this).data('detail');

                    console.log(detail)

                    $('#exampleModal .modal-body h2.heading').text(name);
                    $('#exampleModal .modal-body h4.price').text('$' + price);
                    $('#exampleModal .modal-body p').text(detail);

                    // $('#exampleModal').modal('show');

                    $('.addon-checkbox').prop('disabled', false);
                    if (name === 'HEADLINER') {
                        $('.addon-checkbox').prop('disabled', !$(this).is(':checked'));
                        $('.addon-checkbox').prop('disabled', true);
                    }

                    $('.plan-checkbox').not(this).prop('checked', false);
                }
            });

            $('.addon-checkbox').on('change', function () {
                if ($(this).is(':checked')) {
                    var name = $(this).data('name');
                    var price = $(this).data('price');
                    var detail = $(this).data('detail');

                    $('#exampleModal .modal-body h2.heading').text(name);
                    $('#exampleModal .modal-body h4.price').text('$' + price);
                    $('#exampleModal .modal-body p').text(detail);

                    // $('#exampleModal').modal('show');

                }
            });

        });

        function purchasePackage() {
            var selectedCheckbox = $('.plan-checkbox:checked');
            var selectedAddonCheckbox = $('.addon-checkbox:checked');

            if (selectedCheckbox.length > 0 || selectedAddonCheckbox.length > 0) {
                var packageName = selectedCheckbox.data('name');
                var addonName = selectedAddonCheckbox.data('name');

                $('input[name=package]').val(packageName);
                $('input[name=addon_package]').val(addonName);

                // Set the content of the modal with package and add-on details
                var packageDetails = '';
                var addonDetails = '';

                switch (packageName) {
                    case 'Pay per post':
                        packageDetails = `
                    <ul>
                        <li>1 listed event</li>
                        <li>Hosted link to your ticketing platform</li>
                        <li>Hosted on Google Maps</li>
                    </ul>`;
                        break;
                    case 'Opener':
                        packageDetails = `
                    <ul>
                        <li>3 listed events</li>
                        <li>Hosted link to your ticketing platform</li>
                        <li>Hosted on Google Maps</li>
                        <li>Eligible For Funny Fund</li>
                    </ul>`;
                        break;
                    case 'Feature':
                        packageDetails = `
                    <ul>
                        <li>5 listed events</li>
                        <li>Hosted link to your ticketing platform</li>
                        <li>Hosted on Google Maps</li>
                        <li>Eligible For Funny Fund</li>
                    </ul>`;
                        break;
                    case 'Headliner':
                        packageDetails = `
                    <ul>
                        <li>Unlimited listed events</li>
                        <li>Hosted link to your ticketing platform</li>
                        <li>Hosted on Google Maps</li>
                        <li>Eligible For Funny Fund</li>
                        <li>Archive your show on the website</li>
                        <li>Featured in weekly newsletter</li>
                        <li>Spotlight Comic included</li>
                    </ul>`;
                        break;
                }

                if (addonName === 'spotlight comic') {
                    addonDetails = `
                <ul>
                    <li>Hosted for 30 days</li>
                    <li>List your social media</li>
                    <li>Include up to 4 images</li>
                    <li>Featured on Instagram</li>
                    <li>Featured in weekly newsletter</li>
                </ul>`;
                }

                var modalContent = `
            <p>${packageName ? `<p><strong>Package:</strong> ${packageName}</p>` : ''}
            ${packageDetails}
            ${addonName ? `<p><strong>Add-on:</strong> ${addonName}</p>` : ''}
            ${addonDetails}
        `;

                $('#register-message').html(modalContent);
                $('#signupPopup').modal('show');
            } else {
                alert("Please select a package before proceeding.");
            }
        }


    </script>
@endpush