@extends('layouts.app') @push('css')
<link rel="stylesheet" href="{{asset('css/report.css')}}">
<style>
    table {
        border-collapse: collapse;
        width: 100%;

    }

    table,
    th {
        font-size: 13px;
        text-align: left;
        padding-left: 5px;
        border: 1px solid #212529;
    }

    table,
    td {
        font-size: 13px;
        text-align: left;
        padding-left: 5px;
        border: 1px solid #212529;
    }

    thead {
        /* background: none; */
        color: black;
    }

    .foright {
        text-align: right;
    }

    h4 h5 {
        margin-bottom: 0;
    }

    hr {
        width: 160px;
        float: right;
        border-top: 1px solid #212529 !important;
    }
</style>
@endpush
@section('content')

<!-- Content Header (Page header) -->
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h4>District and Subject Wise Report</h4>
            </div>
            <!-- /.col -->
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                    <li class="breadcrumb-item active">Course and Subject Wise Report</li>
                </ol>
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </div>
    <!-- /.container-fluid -->
</div>
<!-- /.content-header -->

<!-- Main content -->
<section class="content">
    <div class="container-fluid">
        <!-- Main row -->
        <div class="row">
            <div class="col-md-12 col-x-12 col-sm-12">
                <form class="" id="FilterForm" action="{{route('subject.loadsubject') }}" method="POST">
                    @csrf
                    @method('POST')

                    <div class="row">
                        <div class="col-md-4 col-xs-6 col-sm-4">
                            <div class="form-group">
                                <label for="course"><span class="text-danger">*</span>Course Name</label>
                                <select id="selectCourse" class="searchable_select form-control @error('course_id') is-invalid @enderror" name="course_id">
                                    <option value="0">Select Course</option>
                                    @foreach ($courses as $course)
                                    <option value="{{ $course->id }}">{{ $course->title }}</option>
                                    @endforeach
                                </select>
                                <span id="error"></span>
                            </div>
                        </div>
                        <div class="col-md-3 col-xs-6 col-sm-3">
                            <div class="form-group">
                                <label for="course">District Name</label>
                                <select id="district_id" class="searchable_select form-control" name="district_id">
                                    <option value="0">All District</option>
                                    @foreach ($districts as $district)
                                    <option value="{{ $district->id }}">{{ $district->district_name }}</option>
                                    @endforeach
                                </select>
                                <span id="error"></span>
                            </div>
                        </div>
                        <div class="col-md-3 col-xs-6 col-sm-3">
                            <div class="form-group">
                                <label for="venue">Upazila Name</label>
                                <select id="upazila_id" class="js-example-basic-single form-control @error('upazila_id') is-invalid @enderror" name="upazila_id">
                                </select>
                                @error('upazila_id')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>
                        <!-- <div class="col-md-4 col-xs-6 col-sm-4">
                            <div class="form-group">
                                <label for="roles"><span class="text-danger">*</span>Batch Name</label>
                                <select id="selectBatch" class="searchable_select form-control @error('batch_id') is-invalid @enderror" name="batch_id">
                                    <option value="0">Select Batch</option>
                                </select>
                                <span id="error"></span>
                            </div>
                        </div>
                        <div class="col-md-4 col-xs-6 col-sm-4">
                            <div class="form-group">
                                <label>Start Date</label>
                                <div class="date input-group" id="reservationdate" data-target-input="nearest">
                                    <input type="text" id="start_date" name="start_date" class="form-control datetimepicker-input" data-target="#reservationdate" />
                                    <div class="input-group-append" data-target="#reservationdate" data-toggle="datetimepicker">
                                        <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                    </div>
                                </div>
                            </div>
                            <span id="dateerroremessage"></span>
                        </div>
                        <div class="col-md-4 col-xs-6 col-sm-4">
                            <div class="form-group">
                                <label>End Date</label>
                                <div class="date input-group" id="reserenddateend" data-target-input="nearest">
                                    <input type="text" id="end_date" name="end_date" class="form-control datetimepicker-input" data-target="#reserenddateend" />
                                    <div class="input-group-append" data-target="#reserenddateend" data-toggle="datetimepicker">
                                        <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                    </div>
                                </div>
                            </div>
                            <span id="dateerroremessage"></span>
                        </div> -->
                        <div class="col-md-2 col-xs-6 col-sm-2">
                            <button type="submit" class="btn btn-success" style="margin-top:32px">Search</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <div id="formdata" style="background-color: #FFFFFF;"></div>
    </div>
    <!-- /.row (main row) -->

    <!-- /.container-fluid -->
</section>
<!-- /.content -->

@endsection @push('js')
<script>
    $(document).ready(function() {
        $("#FilterForm").submit(function(e) {
            e.preventDefault();
            $.ajax({
                type: "POST",
                url: $(this).attr('action'),
                data: $(this).serialize(), // serializes the form's elements.
                beforeSend: function() {
                    $('#wait').show();
                },
                success: function(data) {
                    $("#formdata").html(data);
                },
                error: function(err) {
                    $('#wait').hide();
                },
                complete: function() {
                    $('#wait').hide();
                }
            });
        });

        $('select[name="district_id"]').on('change', function() {
            var district_id = $(this).val();
            if (district_id) {
                $.ajax({
                    url: '{{ url('/') }}' + '/batch/district/' + district_id,
                    type: "GET",
                    dataType: "json",
                    beforeSend: function() {
                        $('#wait').show();
                    },
                    success: function(data) {
                        var res = '<option value="0">Select Upazila</option>';
                        $.each(data.upazila, function(key, value) {
                            res +=
                                '<option value="' + value.id + '">' + value
                                .upazila_name + '</option>';
                        });
                        $('select[name="upazila_id"]').html(res);
                    },
                    error: function(data) {
                        Swal.fire(
                            'Cancelled',
                            'Error occured. Please contact administrator!',
                            'error'
                        );
                    },
                    complete: function() {
                        $('#wait').hide();
                    }
                });
            }
        });

        ///not used
        $('select[name="course_id"]').on('change', function() {
            var course_id = $(this).val();
            if (course_id) {
                $.ajax({
                    url: '{{ url("/")}}' + '/marksheet/venue/' + course_id,
                    type: "GET",
                    dataType: "json",
                    success: function(data) {
                        var res = '<option value="0">Select Venue</option>';
                        $.each(data.venues, function(key, value) {
                            res +=
                                '<option value="' + value.id + '">' + value.name + '</option>';
                        });
                        $('select[name="venue_id"]').html(res);
                    }

                });

            }
        });
        $('select[name="venue_id"]').on('change', function() {
            var venue_id = $(this).val();

            if (venue_id) {
                $.ajax({
                    url: '{{ url("/")}}' + '/marksheet/batch/' + venue_id,
                    type: "GET",
                    dataType: "json",
                    success: function(data) {
                        var res = '<option value="0">Select Batch</option>';
                        $.each(data.batches, function(key, value) {
                            res +=
                                '<option value="' + value.id + '">' + value.name + '</option>';
                        });
                        $('select[name="batch_id"]').html(res);
                    }

                });

            }
        });
        //Date picker
        $("#reserenddateend").datetimepicker({
            format: 'YYYY/MM/DD',
        });
        $("#reservationdate").datetimepicker({
            format: 'YYYY/MM/DD',
        });
    });
</script>

@endpush