@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>

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

            <div class="section-title">
                <h2>TPHA Membership Record Confirmation.</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">Announcement:</h6>
                                </div>
                                <div class="col-md-6">
                                    <h6 class="text-info">Membership Status Check:</h6>
                                </div>
                            </div>
                            <hr>

                            <div class="row">

                                {{---------------------- information ------------------------}}
                                <div class="col-md-6 text-left">
                                    
                                    <p class="picture" style="font-size:16px;text-align:justify; line-height:24px;">
                                    Tanzania Public Health Association planned to update it's online database, therefore we kindly recommend registered members to 
                                    provide their details by filling out the online form available by clicking the button below. 
                                        </p>
                                    <hr>
                                    <h6 class='text-danger'><b>Note:</b></h6>
                                    <p> &#8226; For life members please write the current year (2021) under the annual subscription payment item.</p>
                                    <p> &#8226; If you do not remember your Membership registration number please write <b>0000</b>.</p>

                                </div>

                                {{-- -------------------------checkup form -------------------------------}}

                                <div class="col-md-6 text-left">

                                    <p class="picture" style="font-size:16px;text-align:justify; line-height:24px;">
                                        
                                    Please kindly use the tool below to check the membership status from the online TPHA database;

                                        <form action="" id="checkup_form">
                                            @csrf
                                            <div class="form-group">
                                                <div class="row">

                                                    <div class="col-md-3">
                                                        <label for="">TPHA No#:</label>
                                                        <input type="text" placeholder="e.g 0001" class="form-control" name="member_number">
                                                    </div>

                                                    <div class="col-md-5">
                                                        <label for="">Email address:</label>
                                                        <input type="email" class="form-control" placeholder="Enter email address" name="email_address">
                                                    </div>

                                                    <div class="col-md-4">
                                                        <label for="" class="text-left">Action</label>
                                                        <button type="submit" id="checkBtn" class="btn btn-warning shadow"><b>Check</b> <i class="fas fa-fw fa-angle-double-right text-white"></i></button>
                                                    </div>

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


                                {{------------------------------------------------------------------------}}
                            </div>

                        </ul>

                        
                        <button type="button" id="memberBtn" class="btn btn-primary shadow">Register
                            Now &nbsp;&nbsp;<i class="fas fa-fw fa-user 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="member_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="">First Name: *</label>
                                        <input type="text" class="form-control" id="fname" placeholder="Enter first name"
                                            name="first_name">
                                    </div>
    
                                </div>
                            </div>
    
                            <div class="form-group">
                                <div class="row">
    
                                    <div class="col-md-6">
                                        <label for="">Middle Name: </label>
                                        <input type="text" class="form-control"
                                            placeholder="Enter middle name" name="middle_name">
                                    </div>
    
                                    <div class="col-md-6">
                                        <label for="">Last Name: *</label>
                                        <input type="text" class="form-control" id="lname" placeholder="Enter last name" name="last_name">
                                    </div>
    
                                </div>
                            </div>
    
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-6">
                                        <label for="">Address: *</label>
                                        <input type="text" class="form-control"
                                            placeholder="Enter Postal address" id="address" name="address">
                                    </div>
                                    <div class="col-md-6">
                                        <label for="">Email: *</label>
                                        <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
                                    </div>
                                </div>
                            </div>
    
                            <div class="form-group">
                                <div class="row">
    
                                    <div class="col-md-6">
                                        <label for="">Gender: *</label>
                                        <select name="gender" id="gender" class="form-control-sm">
                                            <option value="">Select Gender</option>
                                            <option value="Male">Male</option>
                                            <option value="Female">Female</option>
                                        </select>
                                    </div>

                                    <div class="col-md-6">
                                        <label for="">Mobile/Telephone: *</label>
                                        <input type="text" class="form-control" id="phone" placeholder="Enter phone or telephone" name="phone">
                                    </div>
                                    
                                </div>
                            </div>
    
                        </div>

                        <div id="otherDiv">
                            <div class="form-group">
                                <div class="row">

                                    <div class="col-md-6">
                                        <label for="">Membership #: *</label>
                                        <input type="text" class="form-control"
                                            placeholder="Enter TPHA membership #" id="membership_number" name="membership_number">
                                    </div>
    
                                    <div class="col-md-6">
                                        <label for="">Membership type: *</label>
                                        <select name="membership_type" id="membership_type" class="form-control-sm">
                                            <option value="">Select Membership</option>
                                            @foreach ($membership_types as $item)
                                             <option value="{{$item->membership_title}}">{{$item->membership_title}}</option>   
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
    
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-6">
                                        <label for="">Annual Subscription Fee (Last paid/year): *</label>
                                        <input type="text" class="form-control" id="annual_fee" name="annual_fee_year" placeholder="Enter last paid year">
                                    </div>
    
                                    <div class="col-md-6">
                                        <label for="">Academic Qualification: *</label>
                                        <input type="text" name="qualification" placeholder="Enter Academic Qualification" id="qualification" class="form-control">
                                    </div>
                                </div>
                            </div>
    
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-6">
                                        <label for="">Occupation:</label>
                                        <input type="text" class="form-control" placeholder="Enter Current occupation"
                                            name="occupation">
                                    </div>
                                    <div class="col-md-6">
                                        <label for="">Area of Expertise Consultancy:</label>
                                        <input type="text" class="form-control"
                                            placeholder="Enter your area of expertise" name="experience">
                                    </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 () {

            $('#memberBtn').on('click', function (event) {
                event.preventDefault();
                $('#otherDiv').hide();
                $('.modal-title').text('Personal Details');
                $('#member_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');
            })

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

                //declaring url
                var data_url = "{{route('membership_record_update.store')}}";
                
                if($('#title').val() == ""){
                    Swal.fire({
                        title: "<h6><b>Information!</b></h6>",
                        text: "Title is missing",
                        timer: 3500,
                        showConfirmButton: false,
                        showcancelButton: false,
                        icon: "info",
                    })
                    return false;
                }
                
                 if($('#fname').val() == ""){
                    Swal.fire({
                        title: "<h6><b>Information!</b></h6>",
                        text: "first name is missing",
                        timer: 3500,
                        showConfirmButton: false,
                        showcancelButton: false,
                        icon: "info",
                    })
                    return false;
                }
                
                 if($('#lname').val() == ""){
                    Swal.fire({
                        title: "<h6><b>Information!</b></h6>",
                        text: "last name is missing",
                        timer: 3500,
                        showConfirmButton: false,
                        showcancelButton: false,
                        icon: "info",
                    })
                    return false;
                }
                
                
                 if($('#address').val() == ""){
                    Swal.fire({
                        title: "<h6><b>Information!</b></h6>",
                        text: "address is missing",
                        timer: 3500,
                        showConfirmButton: false,
                        showcancelButton: false,
                        icon: "info",
                    })
                    return false;
                }
                
                
                 if($('#email').val() == ""){
                    Swal.fire({
                        title: "<h6><b>Information!</b></h6>",
                        text: "email is missing",
                        timer: 3500,
                        showConfirmButton: false,
                        showcancelButton: false,
                        icon: "info",
                    })
                    return false;
                }
                
                
                 if($('#gender').val() == ""){
                    Swal.fire({
                        title: "<h6><b>Information!</b></h6>",
                        text: "gender is missing",
                        timer: 3500,
                        showConfirmButton: false,
                        showcancelButton: false,
                        icon: "info",
                    })
                    return false;
                }
                
                 if($('#phone').val() == ""){
                    Swal.fire({
                        title: "<h6><b>Information!</b></h6>",
                        text: "phone number is missing",
                        timer: 3500,
                        showConfirmButton: false,
                        showcancelButton: false,
                        icon: "info",
                    })
                    return false;
                }
                
                
                 if($('#membership_number').val() == ""){
                    Swal.fire({
                        title: "<h6><b>Information!</b></h6>",
                        text: "Membership number is missing, if you don't remember use 0000 as membership number",
                        timer: 6000,
                        showConfirmButton: false,
                        showcancelButton: false,
                        icon: "info",
                    })
                    return false;
                }
                
                 if($('#membership_type').val() == ""){
                    Swal.fire({
                        title: "<h6><b>Information!</b></h6>",
                        text: "please select membership type e.g life time, ordinary etc",
                        timer: 3500,
                        showConfirmButton: false,
                        showcancelButton: false,
                        icon: "info",
                    })
                    return false;
                }
                
                 if($('#annual_fee').val() == ""){
                    Swal.fire({
                        title: "<h6><b>Information!</b></h6>",
                        text: "Annual subscription fee is missing, for lifetime members enter current year (2021)",
                        timer: 5500,
                        showConfirmButton: false,
                        showcancelButton: false,
                        icon: "info",
                    })
                    return false;
                }
                
                
                 if($('#qualification').val() == ""){
                    Swal.fire({
                        title: "<h6><b>Information!</b></h6>",
                        text: "Qualification is missing",
                        timer: 3500,
                        showConfirmButton: false,
                        showcancelButton: false,
                        icon: "info",
                    })
                    return false;
                }
                
                
                $.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;

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

                            Swal.fire({
                                title: "<h4 class='text-primary'><b>Notification!</b></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'><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-info'><b>Notification!</b></h4>",
                                text: message,
                                icon: "info",
                                timer: 5500,
                                showConfirmButton: false,
                                showCancelButton: false,
                            })
                        }
                    }
                })
            })

            //------------------------------ check up form -----------------------//
            $('#checkup_form').on('submit',function(event){
                    event.preventDefault();

                    $.ajax({
                        url: "{{route('membership_record_update.check_status')}}",
                        method: "POST",
                        dataType: "JSON",
                        data: $(this).serialize(),
                        success:function(data){
                            
                            //--------------success-----------//  
                            if(data.success){
                            var message = data.success;

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

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

                            //--------------------------------//
                            if(data.info){
                                $('#checkup_form')[0].reset();
                                 
                                var message = data.info;
                                Swal.fire({
                                    title: "<h4 class='text-info'><b>Notification!</b></h4>",
                                    text: message,
                                    icon: "info",
                                    timer: 9500,
                                    showConfirmButton: false,
                                    showCancelButton: false,
                                })
                            }  
                            //--------------------------------//
                            if(data.errors){
                                var message = data.errors;
                                // Swal.fire({
                                //     title: "<h4 class='text-primary'><b>Notification!</b></h4>",
                                //     text: message,
                                //     icon: "warning",
                                //     timer: 8500,
                                //     showConfirmButton: false,
                                //     showCancelButton: false,

                                // })
                                
                                Swal.fire({
                                      title: "<h4 class='text-primary'><b>Notification!</b></h4>",
                                      text: message,
                                      icon: 'warning',
                                      showCancelButton: true,
                                      confirmButtonColor: '#3085d6',
                                      cancelButtonColor: '#d33',
                                      confirmButtonText: 'Register now!'
                                    }).then((result) => {
                                  if (result.isConfirmed) {
                                    // Swal.fire(
                                    //   'Deleted!',
                                    //   'Your file has been deleted.',
                                    //   'success'
                                    // )
                                    $('#otherDiv').hide();
                                    $('.modal-title').text('Personal Details');
                                    $('#member_form')[0].reset();
                                    $('#onlineModal').modal('show');
                                    $('#nextBtn').show();
                                    $('#personalDiv').show();
                                    $('#prevBtn').hide();
                                    $('#saveBtn').hide();
                                    
                                  }
                                })
                            }

                        }
                    })
                
                })
        })
    </script>

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

@endsection