@extends('web.layouts.master')
@section('content') 
        <section class="bg-half-170 d-table w-100" style="background-color: #efefef;">
            <div class="container mt-5 pt-4 mb-4">
                <div class="col-md-12">
                    <div class="card p-2 rounded border-0" style="background-color: #16183f1c; color: #141639c4;">
                        <div class="col-md-12">
                            <div class="container">
                                <div class="row mt-2">
                                    <h6 style="font-weight:bold !important;">There are two methods for submitting your proposal :</h6>                            
                                    <p style="font-size: 13px;"><strong>Method 1:</strong> Contact your supervisor and request their Account Reference Number (ARN). With this number, you can search for the supervisor's account and submit your proposal.</p>                            
                                    <p style="font-size: 13px;"><strong>Method 2:</strong> Request your supervisor to invite you through Q apply. Once you receive the email invitation, click on the link provided in the email. This will automatically link your application with the supervisor's account, and you only need to click the Submit button</p>                            
                                </div>
                            </div>                                                           
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-8 mt-4">
                            <div class="card p-3 rounded border-0" style="background-color: white;">
                                <div class="col-md-12">
                                    <div class="container-fluid" style="padding:0px !important;">
                                        <div class="row">
                                            <h6 style="font-weight:bold !important; margin: 0px; color: #141639c4;">Submit your proposals with ease</h6>   
                                            <p style="font-size: 13px; color: #141639c4;">Simplify the process and contact with potential supervisors effortlessly!</p>                            
                                            <p class="mt-1" style="font-size: 13px; color: #141639c4;">Please input the Supervisor's Account Reference Number (ARN) in the search bar below. After verifying that the Supervisor Name, Department and University Name are accurate, click on the <strong>"Apply"</strong> button to complete your submission.</p>                            
                                        </div>
                                    </div>                                                           
                                </div>
                                <div class="col-md-12">
                                    <div class="row" style="display:flex;">
                                        <div class="mb-1">
                                            <div class="form-icon position-relative" style="display:flex;">
                                                <input type="text" class="form-control search-box" id="teacher_ref_no" placeholder="Please type your Supervisor's ARN here" name="teacher_ref_no" required="">
                                                <sapn class="search_button hand search-btn"><span style="display:block;margin-left:18px; margin-top:8px; cursor: pointer;">Search</span></span>
                                            </div>
                                            <div id="load_data"></div> 
                                        </div> 
                                    </div>  
                                </div>
                            </div>
                        </div><!--end col-->
                        <div class="col-md-3 mt-4" style="background-color:white; border-radius: 6px; width: 31.5%; margin-left: 8px;">
                            <div class="row p-2">
                                <div class="col-md-12">
                                    <div class="mt-2 mb-2">
                                        <div class="container-fluid" style="padding:0px !important;">
                                            <div class="row">
                                                <p  style="font-size: 13px;">Earn points by referring your friends or colleagues to register and submit their first application. Once they submit their application, you will receive the points.</p>                            
                                                <div class="col-md-12">
                                                    <form class="login-form">
                                                        <div class="row">
                                                            <div class="col-md-12">
                                                                <div class="mb-3">
                                                                    <label class="form-label"></label>
                                                                    <div class="form-icon position-relative">
                                                                        <input type="email" class="form-control" placeholder="Email" name="email" required="">
                                                                    </div>
                                                                </div>
                                                            </div>    
                                                            <div class="col-lg-12" style="margin-top:-18px;">
                                                                <div class="mb-3">
                                                                    <label class="form-label"></label>
                                                                    <div class="form-icon position-relative">
                                                                        <input type="password" class="form-control" placeholder="Password" required="">
                                                                    </div>
                                                                </div>
                                                            </div><!--end col-->

                                                            <div class="col-md-12">
                                                                <div class="mt-2 mb-4 text-center">
                                                                    <button type="submit" class="btn btn1" style="padding: 3px 18px;">
                                                                        {{ __('Invite') }}
                                                                    </button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>                                                           
                                    </div>
                                </div>
                            </div>    
                        </div>
                    </div><!--end row-->
                    <div class="card p-2 mt-4 rounded border-0" style="background-color: white;">
                        <div class="col-md-12">
                            <div class="container">
                                <div class="row mt-2">
                                    <div class="col-md-12">
                                            <h6 style="font-weight:bold !important; color: #141639c4;">Application you have submitted that are currently awaiting decisions</h6>                            
                                        <div class="table-responsive">
                                            <table class="table table-bordered list_table">
                                                <thead>
                                                    <tr>
                                                        <th>Sl</th>
                                                        <th>Supervisor Name</th>
                                                        <th>University Name</th>
                                                        <th>Proposal Ref.</th>
                                                        <th>Applied On</th>
                                                        <th>Status</th>
                                                        <th>action</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td style="font-size: 11px;">test</td>
                                                        <td style="font-size: 11px;">test</td> 
                                                        <td style="font-size: 11px;">test</td> 
                                                        <td style="font-size: 11px;">test</td>
                                                        <td style="font-size: 11px;">test</td>
                                                        <td style="font-size: 11px;">test</td>
                                                        <td style="font-size: 11px;">test</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>                                    
                                    </div>
                                </div>
                            </div>                                                           
                        </div>
                    </div>
                    <div class="w3-container mt-5">
                        

                            
                        </div>
                </div><!--end container-->
            </div>
        </section>
@endsection

@push('js')

<script>
    $(function(){
        $('.search_button').on('click', function(){
            get_data();
        });

        function get_data(){
            var base = '{{url('/')}}';  
            var teacher_ref_no = $('#teacher_ref_no').val();  
            if(teacher_ref_no){
                $.ajax({
                    method: 'GET', 
                    url: base+'/home/search', 
                    data: {'teacher_ref_no' : teacher_ref_no}, 
                    success: function(response){ // What to do if we succeed
                        //console.log(response); 
                        $('#load_data').html(response);
                    },
                    error: function(jqXHR, textStatus, errorThrown) { // What to do if we fail
                        console.log(JSON.stringify(jqXHR));
                        console.log("AJAX error: " + textStatus + ' : ' + errorThrown);
                    }
                });
            }else{
                pop_up_error_msg('Please type a Teacher Reference No.')
            }
          
        } 
        
    });
</script>


@endpush