@extends('themes.cp.'.setting('active_cp_theme').'.layouts.default')

@section('title', 'Dashboard')

@section('content')
    @push('custom-css')
        <style>
            /* -------------------------------
   Pricing
------------------------------- */

            .pricing-table {
                list-style-type: none;
                margin: 0 -10px;
                padding: 0;
                text-align: center;
            }
            .pricing-table:before,
            .pricing-table:after {
                content: '';
                display: table;
                clear: both;
            }
            .pricing-table > li {
                float: left;
                padding: 10px;
            }
            .pricing-table.pricing-col-4 > li {
                width: 25%;
            }
            .pricing-table.pricing-col-3 > li {
                width: 33.33333%;
            }
            .pricing-table .pricing-container {
                overflow: hidden;
                border-radius: 6px;
                background: #f0f3f4;
                box-shadow: 0 3px #b6c2c9;
            }
            .pricing-table h3 {
                background: purple;
                margin: 0;
                color: #fff;
                font-size: 14px;
                padding: 15px 30px;
                font-weight: bold;
            }
            .pricing-table .features {
                list-style-type: none;
                margin: 0;
                padding: 0 30px;
            }
            .pricing-table .features > li {
                padding: 10px 0;
            }
            .pricing-table .features > li + li {
                border-top: 1px solid #e2e7eb;
            }
            .pricing-table .price {
                width: 100%;
                display: table;
                background: #2d353c;
            }
            .pricing-table .price .price-figure {
                vertical-align: middle;
                display: table-cell;
                text-align: center;
                height: 80px;
            }
            .pricing-table .price .price-number {
                font-size: 28px;
                color: #000;
                display: block;
            }
            .pricing-table .price .price-tenure {
                font-size: 12px;
                color: #fff;
                color: rgba(255, 255, 255, 0.7);
                display: block;
                text-align: center;
            }
            .pricing-table .footer {
                padding: 15px 20px;
            }
            .pricing-table .highlight {
                padding: 0px;
                margin-top: -30px;
            }
            .pricing-table .highlight .features > li {
                padding: 15px 0;
            }
            .pricing-table .highlight h3 {
                padding: 20px 30px;
            }
            .pricing-table .highlight .price .price-figure {
                height: 90px;
            }
            .pricing-table .highlight .price .price-number {
                color: #fff;
            }
            .price-figure{
                background:mediumpurple;
            }
        </style>
    @endpush
    <!-- begin panel -->
    <div class="tab-pane">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12">
                <div class=" row mx-auto p-sm-1 p-md-3 p-lg-5" style="justify-content: center;">
                    <!-- Start Alerts -->
                @include('themes.cp.'.setting('active_cp_theme').'.components.alert-widget')
                <!-- End Alerts -->
                    <!-- begin pricing-table -->
                    @if (!auth()->user()->is_admin && !auth()->user()->is_super_admin)
                        @if (!auth()->user()->isCouple())
                            @php $currency = \App\Models\Currency::find(setting('default_currency_id', 'memberships')); @endphp
                            @foreach ($memberships as $membership)
                                <div class="col-lg-12 col-md-12 col-sm-12 tp-plans" style="padding:20px">
                                    <form method="post" action="{{ route('payments.checkout') }}" name="membership-form" enctype="application/x-www-form-urlencoded">
                                        <ul class="pricing-table pricing-col-12">
                                            <li data-animation="true" data-animation-type="fadeInUp">
                                                <div class="pricing-container">
                                                    <h3>{{$membership->name}} Plan</h3>
                                                    <div class="d-flex flex-sm-column flex-md-row">
                                                        <div class="col-md-4 col-sm-12">
                                                            <img src="{{ asset('assets/modules/takenplace/assets/images/tp.png') }}" class="center-block" alt="{{ $membership->name }}" style="width:180px" /><br/>
                                                            <p>{!! \Illuminate\Support\Str::limit($membership->description, 200, '…') !!}</p>

                                                            @if ($membership->vouchers->count())
                                                                <div class="col-md-12 bw-memberships-2-discounts-box">
                                                                    <p class="bw-memberships-2-discount-title"><b>Discounts</b></p><hr class="bw-memberships-2-hr-1">
                                                                        <div class="row">
                                                                            <div class="col-md-9">
                                                                                <input
                                                                                        type="text"
                                                                                        class="form-control animated voucher-code bw-memberships-price-addonprice"
                                                                                        placeholder="Enter Code"
                                                                                        autocomplete="off"
                                                                                        style="margin-left:20%;margin-top:10px"
                                                                                        onkeyup="validateVoucher()"
                                                                                        data-validate-voucher-url="{{ route('memberships::memberships.checkVoucher', $membership) }}"
                                                                                    />
                                                                            </div>
                                                                        </div>

                                                                        <div id="discounts-list"></div>
                                                                    </p>
                                                                </div>
                                                            @endif
                                                        </div>
                                                        <div class="price">
                                                            <div class="price-figure">
                                                                <span class="price-number">{{money($membership->price + ($membership->price * $membership->vat / 100), $currency)}} {{--<small>+ {{$membership->vat}}% VAT</small>--}}</span>
                                                                {{--<span class="price-tenure">per {{$membership->subscription_period}}</span>--}}
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="footer tp-form">
                                                        <input type="hidden" name="module" value="Memberships" />
                                                        <input type="hidden" name="id" value="{{$membership->id}}" />
                                                        <button type="submit" class="btn btn-purple btn-block btn-tp-main">Pay Now</button>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </form>
                                </div>
                            @endforeach
                        @else
                            <div class="col-md-12 row tp-dashboard">
                                <div class="col-lg-3 col-md-6 col-sm-12">
                                    <div class="card">
                                        <a href="{{ route('takenplace::cp.event.show') }}">
                                            <div class="card-block cp-card-dashboard-img bw-dashboard-cards-i">
                                                <i class="fas fa-ring"></i>
                                            </div>
                                        </a>
                                        <div class="card-block tp-card-body">
                                            <h4 class="card-title">My Event Portal</h4>
                                            <p class="card-text">Customise your event portal for your guests</p>
                                            <a href="{{ route('takenplace::cp.event.show') }}" class=" btn btn-sm-actions btn-cpblock btn-cpdefault">Customise Now</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-3 col-md-6 col-sm-12">
                                    <div class="card">
                                        <a href="{{ route('takenplace::cp.event.assets') }}">
                                            <div class="card-block cp-card-dashboard-img bw-dashboard-cards-i bw-dashboard-cards-inverse">
                                                <i class="fas fa-qrcode"></i>
                                            </div>
                                        </a>
                                        <div class="card-block tp-card-body">
                                            <h4 class="card-title">Guest Portal Access & Slideshow </h4>
                                            <p class="card-text">Share your guest portal using the options here.</p>
                                            <a href="{{ route('takenplace::cp.event.assets') }}" class=" btn btn-sm-actions btn-cpblock btn-cpdefault">View Now</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-3 col-md-6 col-sm-12">
                                    <div class="card">
                                        <a href="{{ route('takenplace::cp.event.events') }}">
                                            <div class="card-block cp-card-dashboard-img bw-dashboard-cards-i">
                                                <i class="fas fa-images"></i>
                                            </div>
                                        </a>
                                        <div class="card-block tp-card-body">
                                            <h4 class="card-title">Your Album</h4>
                                            <p class="card-text">View & download your guests photos</p>
                                            <a href="{{ route('takenplace::cp.event.events') }}" class=" btn btn-sm-actions btn-cpblock btn-cpdefault">Add Images</a>
                                        </div>
                                    </div>
                                </div>
                                @if ($wedding)
                                <div class="col-lg-3 col-md-6 col-sm-12">
                                    <div class="card">
                                        <a href="{{ route('takenplace::slideshow', [ $wedding->slideshow_id, 'autoplay' => 1]) }}" target="_blank">
                                            <div class="card-block cp-card-dashboard-img bw-dashboard-cards-i bw-dashboard-cards-inverse">
                                                <i class="fas fa-tv"></i>
                                            </div>
                                        </a>
                                        <div class="card-block tp-card-body">
                                            <h4 class="card-title ">Slideshow</h4>
                                            <p class="card-text">Play Your Slideshow.</p>
                                            <a href="{{ route('takenplace::slideshow', [ $wedding->slideshow_id, 'autoplay' => 1]) }}" target="_blank" class=" btn btn-sm-actions btn-cpblock btn-cpdefault">Play Slideshow</a>
                                        </div>
                                    </div>
                                </div>
                                    @can('customizeBranding')
                                <div class="col-lg-3 col-md-6 col-sm-12">
                                    <div class="card">
                                        <a href="{{ route('takenplace::cp.event.customizeBranding.show', $wedding) }}">
                                            <div class="card-block cp-card-dashboard-img bw-dashboard-cards-i">
                                                <i class="fas fa-pen"></i>
                                            </div>
                                        </a>
                                        <div class="card-block tp-card-body">
                                            <h4 class="card-title ">Customise</h4>
                                            <p class="card-text">Apply custom branding to your event.</p>
                                            <a href="{{ route('takenplace::cp.event.customizeBranding.show', $wedding) }}" class=" btn btn-sm-actions btn-cpblock btn-cpdefault">Customise branding</a>
                                        </div>
                                    </div>
                                </div>
                                    @endcan
                                @endif
                            </div>
                        @endif
                    @endif
                </div>
            </div>
        </div>
    </div>
    <!-- end panel -->
    @push('custom-js')
        <script>
            let appliedVouchers = [];

            function updateVouchersDisplay() {
                let discountsList = document.getElementById("discounts-list");

                discountsList.innerHTML = '';

                for (let voucherIndex in appliedVouchers) {
                    voucher = appliedVouchers[voucherIndex];

                    discountsList.innerHTML += `<div class="row">
                            <div class="col-md-9">
                                <strong>${voucher.name}</strong> ${voucher.price_formatted}
                                <input type="hidden" name="voucher_codes[${voucher.code}]" value="${voucher.code}"/>
                            </div>
                        </div>`;
                }
            }

            function validateVoucher() {
                console.log(event);

                var el = event.target;

                el.classList.remove("flash");
                el.style.border = "2px solid grey";

                var checkVoucherUrl = el.getAttribute("data-validate-voucher-url");

                $.post(checkVoucherUrl,
                    {
                        code: el.value,
                    }, "json")
                .done(function(data) {
                    if (data.success) {
                        appliedVouchers[data.voucher.code] = data.voucher;

                        el.style.border = "2px solid green";
                        el.readOnly = true;

                        setTimeout(function() {
                            el.style.border = "2px solid grey";
                            el.readOnly = false;
                            el.value = "";

                        }, 1567);

                        updateVouchersDisplay();
                    } else {
                        el.classList.add("flash");
                        el.style.border = "2px solid red";
                    }
                });
            }
        </script>
    @endpush
@endsection