@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.04;
    }
</style>

<body onload="myFunction();">
    <section id="online_service" class="pricing">
        <div class="container" data-aos="fade-up">

            <div class="section-title">
                <h2>TPHA 39<sup>th</sup> Conference Online Registration</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>
                            
                            <h6 class="text-info">Note:</h6><hr>
                            <div class="row">
                                <div class="col-md-6 text-left">
                                    
                                    <p style="font-size:16px;text-align:justify;">
                                        The registration fee will include access to all conference sessions, conference
                                        materials, luncheon and refreshments. The fee should be paid to;
                                    </p>
                                    <hr>
                                    
                                    <h6 class="text-info">Payment Details:</h6>
                                    <hr>
                                    
                                    <p class="picture" style="font-size:16px;text-align:justify; line-height:24px;">
                                        Account Name: Tanzania Public Health Association.<br>
                                        Account No: <b>018101001926</b> (Tanzanian Shillings);<br>
                                        Name of Bank: National Bank of Commerce<br>
                                        Bank Branch: Mnazi Mmoja<br>
                                        SWIFT Code: <b>NLCBTZTX</b><br>
                                        Tigo Pesa: <b>+255 655 448070</b>
                                    </p>

                                </div>

                                <div class="col-md-6 text-left">
                                    <table class="table table-striped">
                                        <thead class="bg-light text-info">
                                            <th>Member Type</th>
                                            <th>Early Bird</th>
                                            <th>On Site</th>
                                        </thead>
                                        <tbody class="text-secondary">
                                            <tr>
                                                <td>TPHA Members</td>
                                                <td>Tsh.<b>60,000</b></td>
                                                <td>Tsh.<b>80,000</b></td>
                                            </tr>
                                            <tr>
                                                <td>Non-TPHA (Tanzania)</td>
                                                <td>Tsh.<b>80,000</b></td>
                                                <td>Tsh.<b>100,000</b></td>
                                            </tr>
                                            <tr>
                                                <td>Non-TPHA (Others)</td>
                                                <td>US <b>$50</b></td>
                                                <td>US <b>$60</b></td>
                                            </tr>
                                            <tr>
                                                <td>Students (Tanzania)</td>
                                                <td>Tsh.<b>20,000</b></td>
                                                <td>Tsh.<b>20,000</b></td>
                                            </tr>
                                            <tr>
                                                <td>Students (Others)</td>
                                                <td>US <b>$10</b></td>
                                                <td>US <b>$10</b></td>
                                            </tr>
                                        </tbody>
                                    </table>

                                </div>
                            </div>

                        </ul>

                        
                        <button type="button" id="onlineBtn" class="btn btn-primary shadow">Register
                            Now &nbsp;&nbsp;<i class="fas fa-fw fa-thumbs-up text-white"></i></button>


                    </div>
                </div>

            </div>

        </div>


    </section>


    <!-- Modal -->
    <div class="modal fade" id="onlineModal" tabindex="-1" role="dialog" aria-labelledby="modelTitleId"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true"><i class="fas fa-fw fa-times-circle text-white"></i></span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="online_form" class="ui equal width form">
                        @csrf

                        <div id="personalDiv">
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-6">
                                        <label for="">Title: *</label>
                                        <select name="title" id="title" class="form-control-sm" name="title">
                                            <option value="">Select Title:</option>
                                            <option value="Prof.">Prof.</option>
                                            <option value="Dr.">Dr.</option>
                                            <option value="Mr.">Mr.</option>
                                            <option value="Mrs.">Mrs.</option>
                                            <option value="Ms.">Ms.</option>
                                        </select>
                                    </div>
    
                                    <div class="col-md-6">
                                        <label for="">Full Name: *</label>
                                        <input type="text" class="form-control" id="full_name" placeholder="Enter full name"
                                            name="full_name">
                                    </div>
    
                                </div>
                            </div>
    
                            <div class="form-group">
                                <div class="row">
    
                                    <div class="col-md-6">
                                        <label for="">Occupation/Designation: *</label>
                                        <input type="text" class="form-control"
                                            placeholder="Enter occupation or designation" id="occupation" name="occupation">
                                    </div>
    
                                    <div class="col-md-6">
                                        <label for="">Institution/Organization:</label>
                                        <input type="text" class="form-control"
                                            placeholder="Name of institution or organization" name="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"
                                            placeholder="Enter mailing or postal address" id="postal" name="mailing">
                                    </div>
                                    <div class="col-md-6">
                                        <label for="">City/Town: *</label>
                                        <input type="text" class="form-control" id="city" placeholder="Enter City or Town" name="town"
                                            >
                                    </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" id="country" placeholder="Enter Country" name="country"
                                            >
                                    </div>
                                    <div class="col-md-6">
                                        <label for="">Fax:</label>
                                        <input type="text" class="form-control" placeholder="Enter fax number" name="fax">
                                    </div>
                                    
                                </div>
                            </div>
    
                        </div>

                        <div id="otherDiv">
                            <div class="form-group">
                                <div class="row">
    
                                    <div class="col-md-6">
                                        <label for="">Telephone/Mobile: *</label>
                                        <input type="text" class="form-control"
                                            placeholder="Enter telephone or mobile phone" id="phone" name="telephone">
                                    </div>
    
                                    <div class="col-md-6">
                                        <label for="">Email: *</label>
                                        <input type="email" class="form-control" placeholder="Enter email address"
                                            name="email" id="email">
                                    </div>
                                </div>
                            </div>
    
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-6">
                                        <label for="">Are you a member of TPHA? *</label>
                                        <select name="member_confirm" id="member_confirm" class="form-control-sm">
                                            <option value="">Select Option</option>
                                            <option value="Yes">Yes</option>
                                            <option value="No">No</option>
                                        </select>
                                    </div>
    
                                    <div class="col-md-6">
                                        <label for="">Presenting a paper(s) at the Conference?: *</label>
                                        <select name="paper_confirm" id="paper_confirm" class="form-control-sm">
                                            <option value="">Select Option</option>
                                            <option value="Yes">Yes</option>
                                            <option value="No">No</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
    
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-6" id="regDiv">
                                        <label for="">TPHA Reg.No:</label>
                                        <input type="text" class="form-control" placeholder="For registered members"
                                            name="membership_number">
                                    </div>
                                    <div class="col-md-6" id="titleDiv">
                                        <label for="">Title of Paper(s):</label>
                                        <input type="text" class="form-control"
                                            placeholder="Enter title(s) of Paper(s) separate by ," name="paper_title">
                                    </div>
                                </div>
    
                            </div>
                        </div>

                        <small class="text-danger"> All fields marked * must be filled</small>

                        <div class="loader text-center mb-2" style='display: none;'>
                            <img src="{{asset('images/loader.gif')}}" width="100px" height="15px">
                        </div>

                        <div class="modal-footer">
                            <button id="nextBtn" type="button" class="btn btn-warning">Next &nbsp;<i class="fas fa-fw fa-arrow-alt-circle-right"></i></button>
                            <button id="prevBtn" type="button" class="btn btn-warning">&nbsp;<i class="fas fa-fw fa-arrow-alt-circle-left"></i>Previous</button>
                            <button id="saveBtn" type="submit" class="btn btn-primary">Submit &nbsp;&nbsp;<i
                                class="fas fa-fw fa-save text-white"></i></button>
                        </div>

                    </form>
                </div>
                
            </div>
        </div>
    </div>


    <script>
        $("document").ready(function () {

            $('#onlineBtn').on('click', function (event) {
                event.preventDefault();
                $('#otherDiv').hide();
                $('.modal-title').text('Personal Details');
                $('#online_form')[0].reset();
                $('#onlineModal').modal('show');
                $('#nextBtn').show();
                $('#personalDiv').show();
                $('#prevBtn').hide();
                $('#saveBtn').hide();
            })

            $('#nextBtn').on('click',function(event){
                event.preventDefault();
                $('#nextBtn').hide();
                $('#personalDiv').hide();
                $('#prevBtn').show();
                $('#otherDiv').show();
                $('#saveBtn').show();
                $('.modal-title').text('Other Details');

            })

            $('#prevBtn').on('click', function(event){
                event.preventDefault();
                $('#personalDiv').show();
                $('#otherDiv').hide();
                $('#nextBtn').show();
                $('#prevBtn').hide();
                $('#saveBtn').hide();
                $('.modal-title').text('Personal Details');
            })

            //changing values
            $('#member_confirm').on('change', function () {
                if ($('#member_confirm').val() == "Yes") {
                    $('#regDiv').show();
                } else {
                    $('#regDiv').hide();
                }
            })

            $('#paper_confirm').on('change', function () {
                if ($('#paper_confirm').val() == "Yes") {
                    $('#titleDiv').show();
                } else {
                    $('#titleDiv').hide();
                }
            })

            //submit values
            $('#online_form').on('submit', function (event) {
                event.preventDefault();
                
                if($('#title').val() == ""){
                    Swal.fire({
                        title: "<h4 class='text-primary'><b>Information!</b></h4>",
                        text: "Title is missing",
                        timer: 3500,
                        showConfirmButton: false,
                        showcancelButton: false,
                        icon: "info",
                    })
                    return false;
                }
                
                if($('#occupation').val() == ""){
                    Swal.fire({
                        title: "<h4 class='text-primary'><b>Information!</b></h4>",
                        text: "Occupation is missing",
                        timer: 3500,
                        showConfirmButton: false,
                        showcancelButton: false,
                        icon: "info",
                    })
                    return false;
                }
                
                if($('#full_name').val() == ""){
                    Swal.fire({
                        title: "<h4 class='text-primary'><b>Information!</b></h4>",
                        text: "Full name is missing",
                        timer: 3500,
                        showConfirmButton: false,
                        showcancelButton: false,
                        icon: "info",
                    })
                    return false;
                }
                
                if($('#postal').val() == ""){
                    Swal.fire({
                        title: "<h4 class='text-primary'><b>Information!</b></h4>",
                        text: "Postal address is missing",
                        timer: 3500,
                        showConfirmButton: false,
                        showcancelButton: false,
                        icon: "info",
                    })
                    return false;
                }
                
                if($('#city').val() == ""){
                    Swal.fire({
                        title: "<h4 class='text-primary'><b>Information!</b></h4>",
                        text: "City is missing",
                        timer: 3500,
                        showConfirmButton: false,
                        showcancelButton: false,
                        icon: "info",
                    })
                    return false;
                }
                
                if($('#country').val() == ""){
                    Swal.fire({
                        title: "<h4 class='text-primary'><b>Information!</b></h4>",
                        text: "Country is missing",
                        timer: 3500,
                        showConfirmButton: false,
                        showcancelButton: false,
                        icon: "info",
                    })
                    return false;
                }
                
                
                if($('#phone').val() == ""){
                    Swal.fire({
                        title: "<h4 class='text-primary'><b>Information!</b></h4>",
                        text: "Phone is missing",
                        timer: 3500,
                        showConfirmButton: false,
                        showcancelButton: false,
                        icon: "info",
                    })
                    return false;
                }
                
                 if($('#email').val() == ""){
                    Swal.fire({
                        title: "<h4 class='text-primary'><b>Information!</b></h4>",
                        text: "Email address is missing",
                        timer: 3500,
                        showConfirmButton: false,
                        showcancelButton: false,
                        icon: "info",
                    })
                    return false;
                }
                
                if($('#member_confirm').val() == ""){
                    Swal.fire({
                        title: "<h4 class='text-primary'><b>Information!</b></h4>",
                        text: "Please confirm if you are a member..",
                        timer: 3500,
                        showConfirmButton: false,
                        showcancelButton: false,
                        icon: "info",
                    })
                    return false;
                }
                
                if($('#paper_confirm').val() == ""){
                    Swal.fire({
                        title: "<h4 class='text-primary'><b>Information!</b></h4>",
                        text: "Please confirm if you will present paper(s)",
                        timer: 3500,
                        showConfirmButton: false,
                        showcancelButton: false,
                        icon: "info",
                    })
                    return false;
                }

                //declaring url
                var data_url = "{{route('online_services.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();
                            $('#onlineModal').modal('hide');
                            var message = data.success;

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

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

                        }

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

                        if (data.info) {
                            var message = data.info;
                            Swal.fire({
                                title: "<h4>Alert!</h4>",
                                text: message,
                                icon: "info",
                                timer: 5500,
                                showConfirmButton: false,
                                showCancelButton: false,
                            })
                        }
                    }
                })
            })
        })
    </script>

    <script>
        function myFunction() {
            $('.loader').hide();
            $('#online_form')[0].reset();
            $('#regDiv').hide();
            $('#titleDiv').hide();
        }
    </script>
</body>

@endsection