@extends('../layout/' . $layout)

@section('subhead')
    <title>Atarud MIS - Student Report</title>
@endsection
<style type="text/css">
    .stu_pro tr td {
        padding: 1px;
    }

    .fileBtn:hover {
        cursor: progress;
        color: red;
    }
</style>

@section('subcontent')
    <div class="intro-y flex items-center mt-8">
        <h2 class="text-lg font-medium mr-auto">Student Report</h2>
    </div>
  
    <div class="box ">

        <div class="col-span-12 lg:col-span-8 2xl:col-span-9 ">
           
                

                    <div class="flex box items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400">
                        <h2 class="font-medium text-base mr-auto">Filter</h2>
                    </div>

                    <div class="p-5 box">
                        <div class="flex flex-col-reverse xl:flex-row flex-col">
                            <div class="flex-1 mt-6 xl:mt-0">
    {{-- <form action="{{url('/report/incexp/filter/')}}" method="get">
        @method('get')
        @csrf --}}
                                <div class="grid grid-cols-12 gap-2">
                                    <div class="form-control col-span-5 mt-2" >
                                        <label class="control-label">Program</label>
                                        <select name="program" id="program" class="form-control" required
                                                value="{{ old('program') }}">
                                                <option value="">Choose Prgoram</option>
                                             @foreach($program as $row)
                                                <option value="{{$row->id}}">{{$row->title}}</option>
                                             @endforeach
                                            </select>
                                    </div>
                                    <div class="form-control col-span-5 mt-2">
                                        <label class="control-label">Choose A Type</label>
                                        <select name="type" id="range_type" class="form-control" onchange="rangeType(this)">
                                                <option value="">Choose A Type</option>
                                                <option value="daily">Daily</option>
                                                <option value="weekly">Weekly</option>
                                                <option value="monthly">Monthly</option>
                                                <option value="3_months">3 Months</option>
                                                <option value="yearly">Yearly</option>
                                            </select>
                                    </div>
                                    <div class="form-control col-span-5 mt-2">
                                        <label class="control-label">From</label>
                                        <input   type="date" name="from" id="dateFrom"
                                             class="form-control" placeholder="From">
                                    </div>
                                    <div class="form-control col-span-5 mt-2">
                                        <label class="control-label">To</label>
                                        <input   type="date" name="to" id="dateTo" class="form-control"
                                            placeholder="From" >
                                    </div>

                                </div>

                                <div class="grid grid-cols-12 gap-2">
                                    <button type="submit" onclick="filter()" class="btn btn-primary mt-5" style="float: right;">Filter</button>
                                </div>

                            </div>

                        </div>
                    </div>
                </div>

   
                <div class="p-5 box" id="result">
                    {{-- <div class="flex flex-col-reverse xl:flex-row flex-col">
                        <div class="flex-1 mt-6 xl:mt-0" id="result">

                           

                             

                        </div>

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

    </div>
    <!-- END: Display Information -->
 
   
    </div>
@endsection

@section('script')
    <script src="{{ asset('dist/js/jquery.js') }}"></script>

    <script>

         
        function rangeType(el) {
            if(el.value == ''){
                document.getElementById('dateFrom').disabled = true;
                document.getElementById('dateTo').disabled = true;
            }
            else{
                document.getElementById('dateFrom').disabled = false;
                document.getElementById('dateTo').disabled = false;
            }
          
        }
        function filter(){
            var dateFrom = document.getElementById('dateFrom').value;
            var dateTo = document.getElementById('dateTo').value;
            var program = document.getElementById('program').value;
            var range_type = document.getElementById('range_type').value;

            $.ajax({
                method: 'GET',
                url: "{{ url('/report/student/filter/') }}",
                data: {
                    from: dateFrom,
                    to: dateTo,
                    program: program,
                    type: range_type,
                },

                success: function(response) {
                    console.log(response);
                    jQuery('#result').html(response);

                }
            });
        }
         

       
       // print invoice function
    function PrintElem() {
        Popup($('#invoice_print').html());
    }

function Popup(data)
{
    var mywindow = window.open('', 'Report', 'height=600,width=850');
    mywindow.document.write('<html><head><title>Invoice</title>');
    mywindow.document.write('</head><body >');
    mywindow.document.write(data);
    mywindow.document.write('</body></html>');
    setTimeout(function(){
        mywindow.print();
    mywindow.close();
    }, 500);
   

    return true;
}
           
    </script>
@endsection