@extends('layouts.tokkio-master')
@section('content')
<!--Breadcrumb-->
<section id="breadcrumb">
    <div class="container">
        <div class="row">
            <div class="col-lg-6 col-sm-6">
                <div class="breadcrumb-list">
                    <ul>
                        <li><a href="{!! route('tokkio.index') !!}">Home</a></li>
                        <li><span>Checkout</span></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    </div>
</section>


<!--Inner Pricing-->
<section id="pricing_box">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="section-title">
                    <h2>{!! $plan->plan_name !!}</h2>
                </div>
            </div>
        </div>

        {{ Form::open(array('route' => 'tokkio.purchase', 'method' => 'POST', 'id' => 'ajaxSave'))}}
        {!! Form::hidden('plan_id',$id) !!}
        {!! Form::hidden('',$plan->regular_price ?? 0,['id' => 'plan_base_price']) !!}
        <div class="row">
                <div class="col-lg-8 col-sm-12">
                    <div class="plan-boxx">
                        <h3>{!! __('tokkio.customize_access') !!}</h3>
                        <p class="select-title">{!! __('tokkio.select_features') !!}</p>
                        <div class="plan-info">
                            <ul>
                                @foreach($modules as $module)
                                <li>
                                    <div class="box-plan-select">
                                        <div class="form-check">
                                            <input class="form-check-input" name="add_on[]" type="checkbox" value="{!! $module->id !!}" id="flexCheckDefault_{!! $module->id !!}" data-module_price="{!! $module->price !!}">
                                            <label class="form-check-label" for="flexCheckDefault_{!! $module->id !!}">
                                                <h5>{!! $module->title !!}</h5>
                                                <p>{!! $module->description !!}</p>
                                            </label>
                                        </div>
                                        <div class="view-link">
                                            <a href="#" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@mdo">More Info <img src="{!! asset('tk-assets/img/info.png') !!}" class="img-fluid"/></a></a>
                                        </div>
                                    </div>
                                </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-6 col-sm-6">
                            <div class="form-list">
                                <p class="info-form"><a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Hooray!"><img src="{!! asset('tk-assets/img/info.png') !!}" class="img-fluid"/></a></p>
                                <label>How many vouchers does the company have per year?</label>
                                <select class="form-select" aria-label="Default select example">
                                    <option selected>0-500 Vouchers</option>
                                    <option value="1">One</option>
                                    <option value="2">Two</option>
                                    <option value="3">Three</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-6 col-sm-6">
                            <div class="form-list">
                                <p class="info-form"><a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Hooray!"><img src="{!! asset('tk-assets/img/info.png') !!}" class="img-fluid"/></a></p>
                                <label>How many employees does the company have?</label>
                                <select class="form-select" aria-label="Default select example">
                                    <option selected>--Select--</option>
                                    <option value="1">One</option>
                                    <option value="2">Two</option>
                                    <option value="3">Three</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="company-info">
                                <h5>{!! __('tokkio.company_information') !!}</h5>
                                <input type="text" class="form-control" name="company_name" id="cname" aria-describedby="company-name" placeholder="Company name/Organization Number" value="{!! $company->name ?? '' !!}">
                                <div class="contact-form">
                                    <h5>{!! __('tokkio.contact_person') !!}</h5>
                                    <div class="row">
                                        <div class="col">
                                            <input type="text" name="first_name" class="form-control" placeholder="First name" aria-label="First name" value="{!! $company->full_name ?? '' !!}">
                                        </div>
                                        <div class="col">
                                            <input type="text" name="last_name" class="form-control" placeholder="Last name" aria-label="Last name">
                                        </div>
                                    </div>
                                    <input name="phone" type="text" class="form-control" id="cname" aria-describedby="company-name" placeholder="Phone Number" value="{!!  $company->phone ?? '' !!}">
                                </div>
                                <div class="accept-boxxx">
                                    <div class="form-check">
                                        <input class="form-check-input" name="receive_newsletter" type="checkbox" value="" id="flexCheckDefault">
                                        <label class="form-check-label" for="flexCheckDefault">
                                            <p>Yes, I would like to receive emails from Tokkio with relevant news, tips and invitations to courses and events. Consent can be withdrawn at any time.</p>
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" name="accept_terms" type="checkbox" value="1" id="flexCheckDefault">
                                        <label class="form-check-label" for="flexCheckDefault">
                                            <p>I hereby confirm that I have read and accepted the <a href="#">Terms and Conditions</a> , and I confirm that the information I have provided is correct.</p>
                                        </label>
                                    </div>
                                </div>
                                <div class="clearfix"></div>
                                <div class="purchase-btn">
                                    <button >{!! __('tokkio.complete_purchase') !!}</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-sm-12">
                    <div class="plan-boxx-order">
                        <h3>{!! __('tokkio.your_order') !!}</h3>
                        <div class="premium-plan-info">
                            <h5>{!! $plan->plan_name !!}</h5>
                            <p>{!! $plan->plan_description !!}</p>
                        </div>
                        <div class="premium-plan-info">
                            <h5 class="price-monthly">{!! __('tokkio.monthly_price') !!}</h5>
                            <div class="tab-box">
                                <table class="table">
                                    <tbody>
                                    <tr>
                                        <td>{!! __('tokkio.base_price') !!}</td>
                                        <td>{!! numberFormat($plan->regular_price) !!}</td>
                                    </tr>
                                    <tr>
                                        <td>0-500 Vouchers</td>
                                        <td>Kr 10.00</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
        </div>
        {!! Form::close() !!}

    </div>
</section>
@endsection

@section('script')
    <script>
        $(document).ajaxSuccess(function(event, xhr, settings) {
            try {
                const data = JSON.parse(xhr.responseText);
                console.log(data)
                if (data.from_subscriptions && data.status == 400) {
                    alert(data.message);
                }
                if (data.from_subscriptions && data.status == 200) {
                    alert(data.message);
                }
            }catch(error){}
        });
    </script>
@endsection