@extends('inc.app')
@section('content')
@include('inc.nav')
@include('inc.nav-mobile')

<section class="gb">
    <div class="container">
        <div class="boxed boxedp4">
            <div class="row">
                <div class="col-md-12 section-title text-center">
                    <h1 class="py-3">Online Registration</h1>
                </div><!-- end title -->
            </div>
            <form class="my-4" id="registrationForm" action="/submit-registration" method="post">
                <input type="hidden" name="_token" value="{{csrf_token()}}">
                <div class="form-row">
                    <div class="col-lg-12 alert alert-primary" role="alert">
                        <div class="bg-primary p-2 text-light">
                            Personal Information
                        </div>
                    </div>
                    <div class="form-group col-md-2">
                        <label for="inputState">Title</label>
                        <select id="inputState" class="form-control" name="salutation">
                            <option value="Mr" selected>Mr.</option>
                            <option value="Ms">Ms.</option>
                        </select>
                    </div>
                    <div class="form-group col-md-4">
                        <label for="inputFirstname">Firstname</label>
                        <input type="text" class="form-control" id="inputFirstname" name="firstname"
                            placeholder="Firstname">
                    </div>
                    <div class="form-group col-md-4">
                        <label for="inputLastname">Lastname</label>
                        <input type="text" class="form-control" id="inputLastname" name="lastname"
                            placeholder="Lastname">
                    </div>
                    <div class="form-group col-md-2">
                        <label for="inputShirt">T-shirt size</label>
                        <select id="inputShirt" class="form-control" name="shirt_size">
                            <option selected>Choose...</option>
                            <option value="XS">XS</option>
                            <option value="S">S</option>
                            <option value="M">M</option>
                            <option value="L">L</option>
                            <option value="XL">XL</option>
                            <option value="XXL">2XL</option>
                            <option value="XXXL">3XL</option>
                            <option value="XXXL">4XL</option>
                        </select>
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group col-lg-4">
                        <label>Designation</label>
                        <input type="text" class="form-control step1Required" placeholder="Ex. CEO" name="designation">
                    </div>
                    <div class="form-group col-lg-4">
                        <label>Email</label>
                        <input type="text" class="form-control step1Required" id="iptEmail" placeholder="Enter Email"
                            name="email">
                    </div>
                    <div class="form-group col-lg-4">
                        <label>Mobile</label>
                        <input type="text" class="form-control step1Required" placeholder="Enter Mobile" name="mobile">
                    </div>
                </div>

                <div class="form-row">
                    <div class="col-lg-12 py-3">
                        <span class="font-weight-bold">Dietary Restrictions</span>
                    </div>
                    <div class="col-12 pt-2">
                        <div class="custom-control custom-checkbox custom-control-inline mr-4">
                            <input class="custom-control-input" type="checkbox" id="vegetarian" value="vegetarian"
                                name="dietary[]">
                            <label class="custom-control-label" for="vegetarian">Vegetarian</label>
                        </div>
                        <div class="custom-control custom-checkbox custom-control-inline mr-4">
                            <input class="custom-control-input" type="checkbox" id="vegan" value="vegan"
                                name="dietary[]">
                            <label class="custom-control-label" for="vegan">Vegan</label>
                        </div>
                        <div class="custom-control custom-checkbox custom-control-inline mr-4">
                            <input class="custom-control-input" type="checkbox" id="halal" value="halal"
                                name="dietary[]">
                            <label class="custom-control-label" for="halal">Halal</label>
                        </div>
                        <div class="custom-control custom-checkbox custom-control-inline mr-4">
                            <input class="custom-control-input" type="checkbox" id="kosher" value="kosher"
                                name="dietary[]">
                            <label class="custom-control-label" for="kosher">Kosher</label>
                        </div>
                        <div class="custom-control custom-checkbox custom-control-inline mr-4">
                            <input class="custom-control-input" type="checkbox" id="gluten" value="gluten"
                                name="dietary[]">
                            <label class="custom-control-label" for="gluten">Gluten-free</label>
                        </div>
                        <div class="custom-control custom-checkbox custom-control-inline mr-4">
                            <input class="custom-control-input" type="checkbox" id="lactose" value="lactose"
                                name="dietary[]">
                            <label class="custom-control-label" for="lactose">Lactose Intolerant</label>
                        </div>
                    </div>
                    <div class="col-12 py-4">
                        <div class="row">
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label>Others</label>
                                    <input type="text" class="form-control" placeholder="Others" name="otherdietary">
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label>Food Allergy</label>
                                    <input type="text" class="form-control" placeholder="Food Allergy" name="allergy">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-row">
                    <div class="col-lg-12 alert alert-primary" role="alert">
                        <div class="bg-primary p-2 text-light">
                            Company Information
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="form-group">
                            <label>Company</label>
                            <input type="text" class="form-control step1Required" placeholder="Enter Company Name"
                                name="company">
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="form-group">
                            <label>Telephone</label>
                            <input type="text" class="form-control step1Required" placeholder="Enter Telephone"
                                name="telephone">
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="form-group">
                            <label>Website</label>
                            <input type="text" class="form-control step1Required" placeholder="Enter website"
                                name="website">
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="form-group">
                            <label>IATA Number</label>
                            <input type="text" class="form-control" placeholder="Enter IATA Number" name="iata">
                        </div>
                    </div>
                    <div class="col-lg-8">
                        <div class="form-group">
                            <label>Address</label>
                            <input type="text" class="form-control step1Required" placeholder="Enter Address"
                                name="address">
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="form-group">
                            <label>City</label>
                            <input type="text" class="form-control step1Required" placeholder="Enter City" name="city">
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="form-group">
                            <label>Country</label>
                            <input class="form-control empty" id="country" name="country" placeholder="Country"
                                required />
                        </div>
                    </div>
                </div>


                <div class="form-row">
                    <div class="border-bottom">
                        <p>How did you learn about us?</p>
                        <div class="mb-3">
                            <select name="learn" class="form-control">
                                <option value="Email Invitation" selected="">Email Invitation</option>
                                <option value="Direct Mail">Direct Mail</option>
                                <option value="Fax Message">Fax Message</option>
                                <option value="Online Banner Ads">Online Banner Ads</option>
                                <option value="Referred by Agent">Referred by Agent</option>
                                <option value="Others">Others</option>
                            </select>
                        </div>
                        <label>Message</label>
                        <textarea rows="4" cols="50" name="message" class="message form-control"></textarea>
                    </div>
                </div>

                <div class="row">
                    <div class="col-12" align="center">
                        <div class="total_div border-top mt-4">
                            <h4 class="border-bottom py-4">Conference Fee: USD <span
                                    id="regularFee">{{number_format($event->regular_fee,2)}}</span>
                            </h4>
                            <h1>Total: USD <span id="total">{{number_format($event->regular_fee,2)}}</span>
                            </h1>
                            <input type="hidden" name="getfee" id="getfee" class="total" value="">
                        </div>
                    </div>
                    {!! $event->waiver !!}
                    <div class="col-12" align="center">
                        {{-- <input type="submit" id="submit" value="Submit" class="btn btn-success theme-color3 submit"
                            name="submit"> --}}
                        <input type="hidden" class="total_price" value="{{$event->regular_fee}}" name="total_price" />
                        <input type="hidden" value="{{ $event->earlybird_status }}" name="earlybird_status" />
                        <button type="submit" href="#" id="btnSubmit" class="rounded-0 btn btn-success btn-sm"><i
                                class="fas fa-share-square"></i>
                            Submit</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</section>
{{-- pop up after submission --}}
<div class="modal fade" id="mdlPayment" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg show" role="document">
        <div class="modal-content">
            <div class="modal-header border-0 bg-white">
                <h2 class="modal-title text-success" id="exampleModalLongTitle">You have successfully submitted your
                    registration!
                </h2>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body text-center modal-message">
                <div class="row align-items-center pb-5 px-4">
                    <div class="col-12 payment-header">
                        <p class="p-4">Thank you for registering to our exhibition at {{$event->event_name}}
                            in
                            {{$event->venue}}. Please
                            choose which payment
                            method do you prefer:</p>
                    </div>


                    <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top" id="paypalForm">
                        <input type="hidden" name="cmd" value="_cart">
                        <input type="hidden" name="upload" value="1">
                        <input type="hidden" name="business" value="6X2E4H5XKXVW6">
                        <input type="hidden" name="lc" value="HK">
                        <input type="hidden" name="item_name_1" value="{{$event->event_name}}">
                        <input type="hidden" name="amount_1" value="{{$total_price}}">
                        <input type="hidden" name="item_number" value="{{$event->network_slug}}-{{$event->event_year}}">
                        <input type="hidden" name="button_subtype" value="services">
                        <input type="hidden" name="no_note" value="0">
                        <input type="hidden" name="cn" value="Add special instructions to the seller:">
                        <input type="hidden" name="no_shipping" value="2">
                        <input type="hidden" name="currency_code" value="USD">
                        <input type="hidden" name="tax_rate" value="0.045">
                        <input type="hidden" name="bn" value="PP-BuyNowBF:btn_buynowCC_LG_wCUP.gif:NonHosted">
                    </form>


                    <div class="col-4 col-md text-center py-2">
                        <a href="#" class="wire">
                            <img src="https://bridgetoturkiye.org/wp-content/uploads/2018/02/logo-wire-transfer.png"
                                alt="" class="img-fluid">
                        </a>
                    </div>
                    <div class="col-4 col-md text-center py-2">
                        <img src="https://www.paypalobjects.com/webstatic/mktg/logo-center/PP_Acceptance_Marks_for_LogoCenter_266x142.png"
                            alt="" class="img-fluid btnPaypal">
                    </div>
                    <div class="col-4 col-md text-center py-2">
                        <img src="https://upload.wikimedia.org/wikipedia/commons/1/16/Former_Visa_%28company%29_logo.svg"
                            alt="" class="img-fluid btnPaypal">
                    </div>
                    <div class="col-4 offset-2 offset-md-0 col-md text-center py-2">
                        <img src="https://thumbor.forbes.com/thumbor/1280x868/https%3A%2F%2Fblogs-images.forbes.com%2Fsteveolenski%2Ffiles%2F2016%2F07%2FMastercard_new_logo-1200x865.jpg"
                            alt="" class="img-fluid btnPaypal">
                    </div>
                    <div class="col-4 col-md text-center py-2">
                        <img src="https://www.underconsideration.com/brandnew/archives/american_express_logo_wordmark_detail.png"
                            alt="" class="img-fluid btnPaypal">
                    </div>
                    <div class="col-12 text-center okay d-none">
                        <p>Please see the Bank Details we sent to your Email</p><button
                            class="btn btn-light border">Okay</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    try {
    window.addEventListener('DOMContentLoaded', function() {
        $('#mdlPayment').modal({
            backdrop: 'static',
            keyboard: false
        }, 'show');
        $('.wire').on('click', function() {
            $('.col-4, .payment-header').remove();
            $('.okay').addClass('d-block').removeClass('d-none');
        });
        $('.btn').on('click', function() {
            window.location.replace('registration');
        });

        $('.btnPaypal').on('click', function() {
            $('#paypalForm').submit();
        });
    });
} catch (error) {
    window.location.href = "/";
}
</script>
@endsection