@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">

        <div class="date_panel">
            <p class="text-center"><span class="date_para">{{ simpleDate() }}</span></p>
        </div>

        <div class="col-md-10">
            <div class="card">

                <div class="card-body">

                    @if (session('status'))
                        <div class="alert alert-success" role="alert">
                            {{ session('status') }}
                        </div>
                    @endif

                    <p class="my_header_1 text-center">Filter Daily Class Implementation by Date</p>
                    <hr>
                    <div class="form-group row">
                        <span><b>Select</b> date</span>
                        <div class="col-sm-6">
                            <input type="date" name="aaqadDaily" id="aaqadDaily" class="form-control"
                                    value="{{serverDate()}}"
                                    @style(['height:3rem;'])>
                        </div>
                        <span><b>Today</b> date is default.</span>
                    </div>
                    <hr>
                    <div class="alert alert-success">
                        <p id="local_date" class="text-center"></p>
                    </div>
                    <div @style(['font-weight:bold', 'font-size:18px'])>
                        <ol id="colleges">
                        </ol>
                    </div>
                    <br>
                    <p class="align_right" id="view_link"></p>
                </div>
            </div>
        </div>
    </div>
</div>

<script>

    document.addEventListener("DOMContentLoaded",function(){
        $(function(){
            var dates = $("#aaqadDaily").val();
            jQueryInitialLoading(dates);

            $("#aaqadDaily").on("input", function(event)
            {
                event.preventDefault();
                dates = $(this).val();
                //
                jQueryInitialLoading(dates);
            });
        });
    });

    function jQueryInitialLoading(dates)
    {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
        $.ajax({
            url: "aaqad_daily_date",
            type: 'POST',
            data: {
                selected_date:dates
            },
            dataType: 'json',
            success: function(result){
                if (result.status){
                    var dat = result.day +', '+ result.user_date +' ('+ result.local_date +')';
                    $("#local_date").html(dat);
                    $("#colleges").html(result.colleges);
                    var link = "<a class='btn btn-sm btn-outline-primary' href='aaqad_daily_view/"+dates+"' target='_blank'> View Implementation Result</a>";
                    $("#view_link").html(link).show();
                }else{
                    $("#local_date").html('No data on this day');
                    $("#colleges").html('');
                    $("#view_link").hide();
                }
            }
        });
    }

</script>
@endsection