@extends('layouts.public-base', ['title' => 'Signup', 'contentwrapper' => null])

@push('liveStyle')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">
    <link rel="stylesheet" href="{{ asset('assets/gz/css/style-signup.css') }}">

    <style>
        .descrip {
            max-width: 768px;
            text-align: center;
            margin: auto;
        }
    </style>
@endpush

@section('content')
    <div class="container">
        @include('gz-pages.inc.flashMessages')
    </div>

    @if (isset($pricing))
        <section class="sign_section price_sec my-5">
            <div class="w-100">
                <div class="container">
                    <div class="main_inner">
                        @if (getUser()->defaultPaymentMethod())
                        <form id="gz-payment-form" method="POST" action="{{ route('direct-payment') }}">
                        @else
                        <form id="gz-payment-form" method="POST" action="{{ route('signup-payment') }}">
                        @endif
                            @csrf
                            <div class="s_inner price_inner pos-rel shadow-none bg-white">
                                <div class="patern price_only"></div>
                                <div class="row justify-content-center">
                                    <div class="col-lg-11 col-md-12 col-sm-8">
                                        <h2 class="s_form_head price_head mb-2">Select Your Plan</h2>
                                        <p class="descrip mb-2">Please select your prefered plans, You will not charge for these plans before your trial period ends. You can cancel these anytime before trial finish.</p>
                                        <ul class="nav nav-pills justify-content-center mb-4 cstm-tabs">
                                            <li class="nav-item mr-4">
                                                <a class="nav-link tab-link active" data-toggle="pill"
                                                    href="#design_services">Design Services</a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link tab-link" data-toggle="pill"
                                                    href="#content_services">Content
                                                    Services</a>
                                            </li>
                                        </ul>
                                        <!-- Tab panes -->
                                        <div class="tab-content">
                                            <div class="tab-pane container active" id="design_services">
                                                <div class="row">
                                                    @foreach ($plans->where('project_type_id', 1) as $plan)
                                                        @php
                                                            $selectedPlan = false;
                                                            if ($loop->index === 1 && count($selected_plans) === 0) {
                                                                $selectedPlan = true;
                                                            } elseif (in_array($plan->id, $selected_plans)) {
                                                                $selectedPlan = true;
                                                            }
                                                        @endphp
                                                        <div class="col-md-4 mb-3">
                                                            <div class="cstm">
                                                                <input class="plan-input-js" id="cbx{{ $plan->id }}"
                                                                    type="checkbox" name="design_plan"
                                                                    value="{{ $plan->id }}" @if ($selectedPlan) checked @endif />
                                                                <label for="cbx{{ $plan->id }}" class="d-block">
                                                                    <div
                                                                        class="price_card {{ $loop->index === 1 ? 'recommeded' : '' }}">
                                                                        <h2
                                                                            class="service_name d-flex justify-content-center align-items-center">
                                                                            <div class="cbx mr-3">
                                                                                <div class="radio_btn"></div>
                                                                                <svg width="15" height="14"
                                                                                    viewbox="0 0 15 14" fill="none">
                                                                                    <path d="M2 8.36364L6.23077 12L13 2">
                                                                                    </path>
                                                                                </svg>
                                                                            </div>
                                                                            {{ $plan->name ?? '' }}
                                                                        </h2>
                                                                        <h4 class="service_price text-lowercase">
                                                                            $<span
                                                                                class="amount-js">{{ $plan->min_price }}</span>/{{ $plan->planCycles ? substr($plan->planCycles->name, 0, 2) : 'One time' }}
                                                                        </h4>
                                                                        <p class="service_provd">
                                                                            {{ $plan->min_qty }} Design Stream</p>
                                                                        <p
                                                                            class="text-center mb-2 line-h-1 d-flex justify-content-center">
                                                                            <a href="#" class="more_info"
                                                                                data-toggle="modal"
                                                                                data-target="#design_info_{{ $plan->id }}">
                                                                                <span>More info</span><br>
                                                                                <img src="{{ asset('assets/gz/images/short_line.png') }}"
                                                                                    width="100%">
                                                                            </a>
                                                                        </p>
                                                                        <img
                                                                            src="{{ asset('assets/gz/images/stripe-dark.png') }}">
                                                                    </div>
                                                                </label>
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                            <div class="tab-pane container fade" id="content_services">
                                                <div class="row">
                                                    @foreach ($plans->where('project_type_id', 2) as $plan)
                                                        @php
                                                            $selectedPlan = false;
                                                            if ($loop->index === 0 && count($selected_plans) === 0) {
                                                                $selectedPlan = true;
                                                            } elseif (in_array($plan->id, $selected_plans)) {
                                                                $selectedPlan = true;
                                                            }
                                                        @endphp
                                                        <div class="col-md-4 mb-3">
                                                            <div class="cstm">
                                                                <input class="plan-input-js" id="cbx{{ $plan->id }}"
                                                                    @if ($selectedPlan) checked @endif type="checkbox"
                                                                    name="content_plan" value="{{ $plan->id }}" />
                                                                <label for="cbx{{ $plan->id }}" class="d-block">
                                                                    <div
                                                                        class="price_card {{ $loop->index === 0 ? 'recommeded' : '' }}">
                                                                        <h2
                                                                            class="service_name d-flex justify-content-center align-items-center">

                                                                            <div class="cbx mr-3">
                                                                                <div class="radio_btn"></div>
                                                                                <svg width="15" height="14"
                                                                                    viewbox="0 0 15 14" fill="none">
                                                                                    <path d="M2 8.36364L6.23077 12L13 2">
                                                                                    </path>
                                                                                </svg>
                                                                            </div>

                                                                            {{ $plan->name ?? '' }}
                                                                        </h2>
                                                                        <h4 class="service_price text-lowercase">
                                                                            $<span
                                                                                class="amount-js">{{ $plan->min_price }}</span>/{{ $plan->planCycles ? substr($plan->planCycles->name, 0, 2) : 'One time' }}
                                                                        </h4>
                                                                        <p class="service_provd">
                                                                            {{ $plan->min_qty }} Content Stream</p>

                                                                        <p
                                                                            class="text-center mb-2 line-h-1 d-flex justify-content-center">
                                                                            <a href="#" class="more_info"
                                                                                data-toggle="modal"
                                                                                data-target="#content_info_{{ $plan->id }}">
                                                                                <span>More info</span><br>
                                                                                <img src="{{ asset('assets/gz/images/short_line.png') }}"
                                                                                    width="100%">
                                                                            </a>
                                                                        </p>
                                                                        <img
                                                                            src="{{ asset('assets/gz/images/stripe-dark.png') }}">
                                                                    </div>
                                                                </label>
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="px-3 py-4 total_div border-top">
                                <div class="row justify-content-center align-items-center">
                                    <div class="col-md-8">
                                        <div class="d-sm-flex align-items-center">
                                            <div class="plan_details pricing w-50 mr-sm-3 mb-sm-0 mb-3">
                                               
                                                <div class="d-flex justify-content-between align-items-center plan_div">
                                                    <p class="plan_head">Total Amount After Trial</p>
                                                    <p class="plan_rate">USD $<span
                                                            class="total-amount-js">314.30</span>/month</p>
                                                </div>
                                            </div>
                                            <div class="w-25 w-sm-100">
                                                <button type="submit"
                                                    class="text-uppercase site_btn red_btn sign_up_btn pos-rel">Next <img
                                                        src="{{ asset('assets/gz/images/arrow_right.png') }}"
                                                        class="btn-arrow"></button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
        </section>
    @endif

    @if (isset($pricing) && isset($plans) && $plans->isNotEmpty())
        @foreach ($plans->where('project_type_id', 1) as $plan)
            @include('gz-pages.modals.plan-info', ['plan_modal_id' => "design_info_$plan->id", 'plan' => $plan])
        @endforeach

        @foreach ($plans->where('project_type_id', 2) as $plan)
            @include('gz-pages.modals.plan-info', ['plan_modal_id' => "content_info_$plan->id", 'plan' => $plan])
        @endforeach
    @endif

    @include('inc.logo-loader')

@endsection

@push('liveScript')

    <script>
        $("#gz-payment-form").on('submit', function() {
            $('.logo-loader-js').show();
        })
    </script>
  
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js?v=31"></script>

    @if (isset($pricing))
        @if (isset($plans) && $plans->isNotEmpty())
            <script>
                $('.plan-input-js').on('change', function() {
                    if (this.checked) {
                        var input_name = $(this).attr('name');
                        $(`input[name="${input_name}"]:checked`).not(this).each((index, element) => {
                            element.checked = false;
                        })
                    }
                    calculateAmount();
                })

                calculateAmount();

                function calculateAmount() {
                    var total_amount = 0;

                    $('.plan-input-js').each((i, ele) => {
                        var element = $(ele);
                        if (ele.checked) {
                            var parent = element.closest('.cstm');
                            var amount = parent.find('.price_card .amount-js').text();
                            total_amount += Number(amount);
                        }
                    })

                    $('.total-amount-js').text(total_amount);

                }
            </script>
        @endif
    @endif
@endpush