@extends('layouts.front_master')
@section('content')
<style>
    .picture::after {
        content: "";
        background-image: url('{{asset("/images/tpha_logo.png")}}');
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        opacity: 0.07;
    }
</style>

<section id="online_service" class="pricing">
    <div class="container" data-aos="fade-up">
        <div class="section-title">
            <h2>CONFERENCE REGISTRATION AND ABSTRACT FORM</h2>
        </div>

        <div class="row">
            <div class="col-lg-12 col-md-12" data-aos="fade-up" data-aos-delay="100">
                <div class="box text-left">
                    <ul>
                        <div class="row">
                            <div class="col-md-6">
                                <h6 class="text-info">Participant information:</h6>
                            </div>
                            <div class="col-md-6">
                                <h6 class="text-info">Abstract:</h6>
                            </div>
                        </div>
                        <hr>

                        <form id="abstract_form">
                            @csrf
                            <div class="row">
                                <div class="col-md-6 text-left">

                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <label for="">Title *:</label>
                                                <select name="title" id="title" class="form-control" required>
                                                    <option value="">Select title</option>
                                                    <option value="Mr">Mr.</option>
                                                    <option value="Mrs">Mrs.</option>
                                                    <option value="Ms">Ms.</option>
                                                    <option value="Prof">Prof.</option>
                                                </select>
                                            </div>
                                            <div class="col-md-6">
                                                <label for="">First Middle names *:</label>
                                                <input type="text" class="form-control" id="first_middle_name" name="first_middle_name" placeholder="Enter name" required>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <label for="">Family name *:</label>
                                                <input type="text" class="form-control" id="family_name" name="family_name" placeholder="Enter family name" required>
                                            </div>
                                            <div class="col-md-6">
                                                <label for="">Institution/Organization:</label>
                                                <input type="text" class="form-control" id="institution" name="institution" placeholder="Institution">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <label for="">Mailing/Postal address:</label>
                                                <input type="text" class="form-control" name="postal_address" id="postal_address" placeholder="Postal address">
                                            </div>
                                            <div class="col-md-6">
                                                <label for="">City/Town *:</label>
                                                <input type="text" class="form-control" id="city" name="city" placeholder="city/town" required>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <label for="">Country *:</label>
                                                <input type="text" class="form-control" name="country" id="country" placeholder="country" required>
                                            </div>
                                            <div class="col-md-6">
                                                <label>Mobile *:</label>
                                                <input type="text" class="form-control" id="mobile" name="mobile" placeholder="Mobile phone" required>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <label>Fax:</label>
                                                <input type="text" class="form-control" id="fax" name="fax" placeholder="Fax">
                                            </div>
                                            <div class="col-md-6">
                                                <label>Email *:</label>
                                                <input type="email" class="form-control" id="email" name="email" placeholder="Email address" required>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="">Are you willing to serve as session Chair if requested? *</label>
                                        <select name="session_chair" id="session_chair" class="form-control" required>
                                            <option value="">Select choice</option>
                                            <option value="Yes">Yes I am willing</option>
                                            <option value="No">No</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-6 text-left">
                                    <div class="form-group">
                                        <label for="">Abstract title *:</label>
                                        <input type="text" class="form-control" placeholder="Abstract title" name="abstract_title" required>
                                    </div>
                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <label for="">Sub theme *:</label>
                                                <input type="text" class="form-control" name="sub_theme" placeholder="Sub theme" required>
                                            </div>
                                            <div class="col-md-6">
                                                <label for="">Authors *:</label>
                                                <input type="text" class="form-control" name="authors" placeholder="authors separate by comma," required>
                                            </div>
                                        </div>
                                        
                                    </div>

                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <label for="">Presenter:</label>
                                                <input type="text" class="form-control" id="presenter" name="presenter" placeholder="presenter from authors">
                                            </div>
                                            <div class="col-md-6">
                                                <label for="">Type of presentation *:</label>
                                                <select name="type_of_presentation" id="type_of_presentation" class="form-control" required>
                                                    <option value="">Select mode</option>
                                                    <option value="Oral">Oral presentation</option>
                                                    <option value="Postal">Postal presentation</option>
                                                </select>
                                            </div>
                                        </div>
                                        
                                    </div>

                                    <div class="form-group">
                                        <label for="">Abstract (300 words) *:</label>
                                        <textarea name="abstract" id="abstract" class="form-control" placeholder="Type your abstract" rows="7" required></textarea>
                                    </div>

                                </div>
                            </div>

                            <div class="form-group text-right">
                                <button class="btn btn-primary">Submit abstract &nbsp;&nbsp;&nbsp;<i class="fas fa-fw fa-envelope text-white"></i></button>
                            </div>
                        </form>
                        
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
    $("doument").ready(function(){
        $('#abstract_form')[0].reset();

        //------------------------- abstract_form --------------------------//
        $('#abstract_form').on('submit', function (event) {
            event.preventDefault();

            //declaring url
            var data_url = "{{route('conference_abstract.store')}}";
            
            $.ajax({
                url: data_url,
                method: "POST",
                dataType: "JSON",
                data: $(this).serialize(),
                
                //--------------------------------------//
                beforeSend: function () {
                    // Show image container
                    $(".loader").show();
                },
                success: function (data) {

                    if (data.success) {
                        $('.loader').hide();
                        
                        var message = data.success;

                        $('#abstract_form')[0].reset();

                        Swal.fire({
                            title: "<h4 class='text-primary'><b>Notification!</b></h4>",
                            text: message,
                            icon: "success",
                            timer: 4500,
                            showConfirmButton: false,
                            showCancelButton: false,
                        })

                        setTimeout(() => {
                            window.location.href = "{{url('/')}}";
                        }, 4500);

                    }

                    if (data.errors) {
                        var message = data.errors;
                        Swal.fire({
                            title: "<h4 class='text-primary'><b>Notification!</b></h4>",
                            text: message,
                            icon: "warning",
                            timer: 6500,
                            showConfirmButton: false,
                            showCancelButton: false,
                        })
                    }

                    if (data.info) {
                        var message = data.info;
                        Swal.fire({
                            title: "<h4 class='text-primary'><b>Notification!</b></h4>",
                            text: message,
                            icon: "info",
                            timer: 8500,
                            showConfirmButton: false,
                            showCancelButton: false,
                        })
                    }
                }
            })
        })
    })
</script>
@endsection