@extends('supervisor.layouts.master')
@section('content')
<form method="POST" action="" style="padding: 10px; background-color: #16183f69; border-radius: 5px 5px 0px 0px;">
    <div class="row">
        <div class="col-md-3">
            <div class="mb-1">
                    <label class="form-label" for="apply_ref" style="color: white; font-size:12px;">Apply Ref/Student Name or Email</label>
                <div class="form-icon position-relative">
                    <input type="text" for="apply_ref" name="apply_ref" id="apply_ref" class="form-control ps-2" required="">
                </div>
            </div>
        </div>
        <div class="col-md-3">
                <div class="mb-1">
                    <label class="form-label" for="" style="color: white; font-size:12px;">Status</label>
                <div class="form-icon position-relative">
                    <select name="proposal_status" id="proposal_status" class="form-control frm" required="">
                        <option disabled="" selected="" value="">Default</option>
                        <option value="2">Reviewing</option>
                        <option value="3">Pause</option>
                        <option value="4">Hold</option>
                        <option value="5">Interested</option>
                        <option value="6">Rejected</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="mb-1">
                    <label class="form-label" style="color: white; font-size:12px;">Application Received</label>
                <div class="form-icon position-relative">
                    <input type="text" class="form-control submitted_date" name="submitted_date" id="submitted_date" placeholder="Date Range" data-validation="required" autocomplete="off" value="{{old('submitted_date')}}">
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="mb-1">
                    <label class="form-label" for="start date" style="color: white; font-size:12px;">Preffered Start Date</label>
                <div class="form-icon position-relative">
                    <input name="preffered_start_date" type="text" class="form-control preffered_start_date" id="preffered_start_date" placeholder="Date Range" data-validation="required" autocomplete="off" value="{{old('preffered_start_date')}}">
                </div>
            </div>
        </div>
    </div>
</form>
<div class="col-md-12" style="background-color:white; border-radius: 0px 0px 5px 5px;">
    <div class="mb-4" style="padding:15px;">
        <div class="text-end">
            <button class="btn btncl"><i class="fa fa-refresh"></i></button>
            <button class="btn btn2 search_button">search</button>
        </div>
    </div>
</div>
<div class="card rounded border-0 wait" style="background-color: #ffffff; color: #141639c4;">
<div id="load_data"></div>
</div>
@endsection
@push('js')
<script>

$(function(){
    get_data();

    $(".submitted_date").flatpickr({
        dateFormat: 'd-m-Y',
        mode: "range"
        // maxDate:"today",
    });

    $(".preffered_start_date").flatpickr({
        dateFormat: 'd-m-Y',
        mode: "range"
        // maxDate:"today",
    });


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

    function get_data(){
        $('.wait').waitMe({effect : 'facebook', text : 'Please wait...'});
        var base = '{{url('/')}}';
        var apply_ref = $('#apply_ref').val();
        var proposal_status = $('#proposal_status').find('option:selected').val();
        var submitted_date = $('#submitted_date').val();
        var preffered_start_date = $('#preffered_start_date').val();

        $.ajax({
            method: 'GET',
            url: base+'/supervisor/application-list/search',
            data: {'apply_ref' : apply_ref,'proposal_status' : proposal_status,'submitted_date' : submitted_date,'preffered_start_date' : preffered_start_date},

            success: function(response){ // What to do if we succeed
                $('.wait').waitMe("hide");
                $('#load_data').html(response);
            },
            error: function(jqXHR, textStatus, errorThrown) { // What to do if we fail
                $('.wait').waitMe("hide");
                console.log(JSON.stringify(jqXHR));
                console.log("AJAX error: " + textStatus + ' : ' + errorThrown);
            }
        });
    }

    $('.wait-me').on('click', function(){
        $('.wait').waitMe({effect : 'facebook', text : 'Please wait...'});
    });

});
</script>
@endpush