@extends('layouts.front_master')
@section('content')

<!-- ======= Featured Services Section ======= -->
<section id="membership" class="featured-services">

    <div class="container" data-aos="fade-up">

        <div class="section-title">
            <h2>TPHA Membership</h2>
            <hr>
        </div>

        <div class="row">
            @foreach ($members as $item)
            <div class="col-md-3">
                <div class="" data-aos="fade-up" data-aos-delay="100">
                    <div class="icon text-center">
                        <img style="border-radius: 50px;"
                            src="{{url('/uploads/membership_thumbnails/'.$item->thumbnail)}}">
                    </div>

                </div>
            </div>
            <div class="col-md-9">
                <h5 class="title"><a href="">{{$item->membership_title}}</a></h5>
                <p class="description" style="text-align: center">{!! $item->description !!}</p>
                <hr>
            </div>
            <hr>
            @endforeach

        </div>
        <hr>

        <div class="row">
            <div class="col-md-3">
                @if($payment_modules->count() != 0)

                @foreach ($payment_modules as $module)

                @if($module->operator != "")
                    <i class="fas fa-fw fa-mobile text-primary"></i>&nbsp;{{$module->operator}}: <b>{{$module->number}},</b> <br>
                    
                    @if($module->bank != "")
                    <i class="fas fa-fw fa-building text-primary"></i> &nbsp;Bank Name: {{$module->bank}}<br>
                    <i class="fas fa-fw fa-info-circle text-primary"></i> &nbsp;Account Name: {{$module->account_name}},<br>
                    <i class="fas fa-fw fa-hashtag text-primary"></i> &nbsp;Account: <b>{{$module->account}}</b><br> 
                    <i class="fas fa-fw fa-map-signs text-primary"></i> &nbsp;{{$module->address}}
                    @endif

                    @endif
                {{-- <marquee direction="up" onmouseover="this.stop();" onmouseout="this.start();" scrolldelay="500">
                    
                </marquee> --}}

                @endforeach
                
                @else
                    <p>Details About Payment will be here Soon.</p>
                @endif
            </div>
            <div class="col-md-9">
                <div class="row">
                    <div class="col-sm-4 col-md-6">
                        <div class="row">
                            <div class="col-md-5 text-left pt-1">
                                For New Members 
                            </div>
                            <div class="col-md-7 text-right">
                                <button id="regBtn" class="btn btn-primary w-100 shadow">Online Registration<i
                                    class="fas fa-fw fa-user-plus ml-2"></i></button>
                            </div>
                        </div>
                         
                    </div>
                    <div class="col-sm-4 col-md-6">
                        <div class="row">
                            <div class="col-md-6 text-left pt-1">
                                Registered Members
                            </div>
                            <div class="col-md-6 text-right">
                                <button id="annualBtn" class="btn btn-warning w-100 shadow">Annual Payment<i
                                    class="fas fa-fw fa-coins ml-2"></i></button>
                            </div>
                        </div>
                         
                    </div>
                </div>
                <hr>                
            </div>
        </div>

    </div>


    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <h5 class="modal-title text-white">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 action="" class="ui equal width form" id="registrationForm" enctype="multipart/form-data">

                        {{-- @csrf --}}
                        <div id="personalDiv">

                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-4">
                                        <label for="">Title: *</label>
                                        <select name="title" class="form-control-sm" id="title" required>
                                            <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-4">
                                        <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-4">
                                        <label for="">Telephone: *</label>
                                        <input type="text" name="telephone" placeholder="Enter Telephone" id="middle_name"
                                            class="form-control" required>
                                    </div>
                                    
                                </div>
                            </div>
                           

                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-4">
                                        <label for="">First Name: *</label>
                                        <input type="text" name="first_name" placeholder="Enter First Name" id="first_name"
                                            class="form-control" required>
                                    </div>

                                    <div class="col-md-4">
                                        <label for="">Middle Name:</label>
                                        <input type="text" name="middle_name" placeholder="Enter Middle Name"
                                            id="middle_name" class="form-control">
                                    </div>
                                    <div class="col-md-4">
                                        <label for="">Last Name: *</label>
                                        <input type="text" name="last_name" placeholder="Enter Last Name" id="last_name"
                                            class="form-control" required>
                                    </div>
                                </div>
                            </div>
                            

                            <div class="form-group">
                                <div class="row">
                                    
                                    <div class="col-md-4">
                                        <label for="">Fax Number:</label>
                                        <input type="text" name="fax" placeholder="Enter Fax Number" id="fax"
                                            class="form-control">
                                    </div>
                                    <div class="col-md-4">
                                        <label for="">Email Address: *</label>
                                        <input type="email" name="email" placeholder="Enter Email" id="email"
                                            class="form-control" required>
                                    </div>
                                    <div class="col-md-4">
                                        <label for="">Town: *</label>
                                        <input type="text" name="town" placeholder="Enter Town" id="town"
                                            class="form-control">
                                    </div>
                                </div>
                            </div>    

                            <div class="form-group">
                                <label for="">Permanent Address: *</label>
                                <textarea name="address" id="address" placeholder="Enter Permanent Address" class="form-control" rows="2"></textarea>
                                <small class="pt-1 text-danger">All Fields Marked with * Must be filled.</small>
                            </div>
                           
                        </div>

                        <div id="qualificationDiv">

                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-6">
                                        <label for="">Qualification: *</label>
                                        <input type="text" name="qualification" placeholder="Enter Qualification"
                                            id="qualification" class="form-control" required>
    
                                    </div>
                                    <div class="col-md-6">
                                        <label for="">Occupation/Profession: *</label>
                                        <input type="text" name="occupation" placeholder="Enter Occupation/Profession"
                                            id="occupation" class="form-control" required>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-6">
                                        <label for="">Working Experience:</label>
                                        <textarea name="experience" id="experience" class="form-control" rows="1" placeholder="Type Working Experience"></textarea>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="">Current Research:</label>
                                        <textarea name="research" id="research" class="form-control" rows="1" placeholder="Type Current Work or Research"></textarea>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-6">
                                        <label for="">Public Health Interest:</label>
                                        <textarea name="interest" id="interest" class="form-control" rows="1" placeholder="Your Public Health Interest"></textarea>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="">Other Membership:</label>
                                        <textarea name="membership" id="membership" class="form-control" rows="1" placeholder="Other Membership Association"></textarea>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-6">
                                        <label for="">Payment Method: *</label>
                                        <select name="payment_method" id="payment_method" class="form-control-sm" required>
                                            <option value="">Select Payment Method</option>
                                            <option value="mobile">Mobile</option>
                                            <option value="bank">NBC Bank</option>
                                        </select>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="">Payment Date: *</label>
                                        <input type="date" name="payment_date" class="form-control" id="payment_date" required>
                                    </div>
                                </div>
                            </div>

                            <div id="mobileDiv">
                                <div class="form-group">
                                    <label for="">Reference #: *</label>
                                    <input type="text" name="reference_mobile" id="reference_mobile" class="form-control" placeholder="Enter Mobile or Agent(Wakala) Number used to Pay">
                                </div>
                            </div>

                            <div id="bankDiv">
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <label for="">Reference #: *</label>
                                            <input type="text" name="reference_bank"id="reference_bank" class="form-control" placeholder="Enter Reference Number">
                                        </div>

                                        <div class="col-md-6">
                                            <label for="">Payment Slip:</label>
                                            <input type="file" name="photo" id="photo" class="form-control">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                        </div>

                        <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="prevBtn" type="button" class="btn btn-warning">Prev &nbsp;<i class="fas fa-fw fa-arrow-left"></i></button>
                            <button id="nextBtn" type="button" class="btn btn-warning">Next &nbsp;<i class="fas fa-fw fa-arrow-right"></i></button>
                            <button id="saveBtn" type="submit" class="btn btn-primary">Submit Now <i class="fas fa-fw fa-spinner fa-spin"></i></button>
                        </div>

                    </form>
                </div>

            </div>
        </div>
    </div>
 
    <!-- Modal -->
    <div class="modal fade" id="annualModal" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered" 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 action="" id="annualForm" enctype="multipart/form-data">
                        {{-- @csrf --}}

                        <div class="form-group">
                            <div class="row">
                                <div class="col-md-6">
                                    <label for="">Membership #: *</label>
                                    <input type="text" class="form-control" placeholder="TPHA Number" name="membership_number" id="membership_number_i" required>
                                </div>
                                <div class="col-md-6">
                                    <label for="">Joined Year: *</label>
                                    <input type="number" min="1980" placeholder="Joined Year" class="form-control" name="joined" id="joined_i" required>
                                </div>
                            </div>
                        </div> 
                        
                        <div class="form-group">
                            <div class="row">
                                <div class="col-md-6">
                                    <label for="">Payment Method: *</label>
                                    <select name="payment_method" id="payment_method_i" class="form-control" required>
                                        <option value="">Select Payment Method</option>
                                        <option value="mobile">Mobile</option>
                                        <option value="bank">Bank</option>
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label for="">Payment Date: *</label>
                                    <input type="date" name="payment_date" class="form-control" id="payment_date_i" required>
                                </div>
                            </div>
                        </div>

                        <div id="annualMobileDiv">
                            <div class="form-group">
                                <label for="">Reference #: *</label>
                                <input type="text" name="reference_mobile" id="reference_mobile_i" class="form-control" placeholder="Enter Mobile or Agent(Wakala) Number used to Pay">
                            </div>
                        </div>

                        <div id="annualBankDiv">
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-6">
                                        <label for="">Reference #: *</label>
                                        <input type="text" name="reference_bank"id="reference_bank_i" class="form-control" placeholder="Enter Reference Number">
                                    </div>

                                    <div class="col-md-6">
                                        <label for="">Payment Slip:</label>
                                        <input type="file" name="photo" id="photo_i" accept="images/png,.png,.jpeg,.jpg,.tiff" class="form-control-file">
                                    </div>
                                </div>
                            </div>
                        </div>

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

                        <div class="modal-footer">
                            <button type="button" class="btn btn-warning" data-dismiss="modal">Close <i class="fas fa-fw fa-times-circle"></i></button>
                            <button type="submit" class="btn btn-primary shadow">Submit Now &nbsp;<i class="fas fa-fw fa-coins"></i></button>
                        </div>
                    </form>
                   
                </div>
                
            </div>
        </div>
    </div>
</section>

<script type="text/javascript">
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
</script>

<script>

    $("document").ready(function () {

        //new member management
        $('#regBtn').on('click', function (event) {
            event.preventDefault();
            $('#registrationForm')[0].reset();
            $('.modal-title').text('Personal Details');
            $('#nextBtn').show();
            $('#prevBtn').hide();
            $('#saveBtn').hide();
            $('#qualificationDiv').hide();
            $('#personalDiv').show();
            $('.loader').hide();
            $('#myModal').modal('show');

            $('#nextBtn').on('click', function (event) {
                event.preventDefault();
                $('.modal-title').text('Qualification Details');
                $('#membershipDiv').hide();
                $('#nextBtn').hide();
                $('#prevBtn').show();
                $('#saveBtn').show();
                $('#personalDiv').hide();
                $('#bankDiv').hide();
                $('#mobileDiv').hide();
                $('#qualificationDiv').show();
            })

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

        //dealing with changing between mobile and bank
        $('#payment_method').on('change',function(event){
            event.preventDefault();

            if($('#payment_method').val() == "mobile"){
                $('#mobileDiv').show();
                $('#bankDiv').hide();
            }
            else{
                $('#mobileDiv').hide();
                $('#bankDiv').show(); 
            }
        })

        //submitting data
        $('#registrationForm').on('submit',function(event){
            event.preventDefault();

            var data_url = "{{route('member_registration.store')}}";

            $.ajax({
                url: data_url,
                method: "POST",
                data: new FormData(this),
                dataType: 'JSON',
                contentType: false,
                cache: false,
                processData: false,

                beforeSend: function(){
                // Show image container
                $(".loader").show();
                },

                success:function(data){
                    if(data.success){
                        var result = data.success;
                        $(".loader").hide();
                        $('#myModal').modal('hide');

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

                    }

                    if(data.errors){
                        var result = data.errors;

                        Swal.fire({
                            title: "<h4>Info!</h4>",
                            text: result,
                            timer: 8000,
                            showConfirmButton: false,
                            showCancelButton: false,
                            icon: "warning",
                        });
                    }
                }
            })
        })

        //annual membership payment
        $('#annualBtn').on('click',function(event){
            event.preventDefault();
            $('#annualForm')[0].reset();
            $('.modal-title').text('Annual Payment Form');
            $('#annualMobileDiv').hide();
            $('#annualBankDiv').hide();
            $('.loader1').hide();
            $('#annualModal').modal('show');
        })

         //dealing with changing between mobile and bank for annual
         $('#payment_method_i').on('change',function(event){
            event.preventDefault();

            if($('#payment_method_i').val() == "mobile"){
                $('#annualMobileDiv').show();
                $('#annualBankDiv').hide();
            }
            else{
                $('#annualMobileDiv').hide();
                $('#annualBankDiv').show(); 
            }
        })

        $('#annualForm').on('submit',function(event){
            event.preventDefault();

            var data_url = "{{route('member_payment.store')}}";

            $.ajax({
                url: data_url,
                method: "POST",
                data: new FormData(this),
                dataType: 'JSON',
                contentType: false,
                cache: false,
                processData: false,

                beforeSend: function(){
                // Show image container
                $(".loader1").show();
                },

                success:function(data_annual){
                    if(data_annual.success){
                        var result = data_annual.success;
                        $(".loader1").hide();
                        $('#annualModal').modal('hide');

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

                    if(data_annual.errors){
                        var result = data_annual.errors;

                        Swal.fire({
                            title: "<h4>Info!</h4>",
                            text: result,
                            timer: 8000,
                            showConfirmButton: false,
                            showCancelButton: false,
                            icon: "warning",
                        });
                    }
                }
            })
        })
        
    })
</script>
@endsection