@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;
    }

    table,
    td {
        font-size: 13px;
        text-align: left;
        padding-left: 5px;
    }

    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>Batch-Wise Attendance 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">Batch-Wise Attendance 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('trainee_report') }}" method="POST">
                    @csrf
                    @method('POST')
                    <!-- 
                        <div class="row">
                            <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-4 col-xs-6 col-sm-4">
                                <button type="submit" class="btn btn-success" style="margin-top:32px">Search</button>
                            </div>
                        </div> -->
                    <div class="card">
                        <div class="card-header">
                            Select Course Details
                        </div>
                        <div class="card-body">
                            <div class="col-md-12">
                                <div class="row">
                                    <div class="col-md-4 col-xs-12 col-sm-6">
                                        <div class="form-group">
                                            <label for="course">Course Name</label>
                                            <select id="selectCourse" class="js-example-basic-single form-control @error('course_id') is-invalid @enderror" name="course_id">
                                                <option value="">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-4 col-xs-12 col-sm-6">
                                        <div class="form-group">
                                            <label for="venue">Venue Name</label>
                                            <select id="selectVenue" class="js-example-basic-single form-control @error('venue_id') is-invalid @enderror" name="venue_id">
                                            </select>
                                            <span id="error"></span>
                                        </div>
                                    </div>
                                    <div class="col-md-4 col-xs-12 col-sm-6">
                                        <div class="form-group">
                                            <label for="roles">Batch Name</label>
                                            <select id="selectBatch" class="js-example-basic-single form-control @error('batch_id') is-invalid @enderror" name="batch_id">
                                            </select>
                                            <span id="error"></span>
                                        </div>
                                    </div>
                                    <div class="col-md-12 col-xs-12 col-sm-6">
                                        <div class="pull-right">
                                            <div class="form-group">
                                                <button class="btn btn-success" id="loadData" name="loadData">Load</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="card" id="report_body" style="visibility: hidden;">
            <div class="card-header">
                Attendance Report
            </div>
            <div class="card-body">
                <div id="formdata" style="background-color: #FFFFFF;">
                </div>
            </div>
        </div>
        <!-- /.row (main row) -->

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

@endsection @push('js')
<script>
    $(document).ready(function() {
        //Date picker
        $("#reserenddateend").datetimepicker({
            format: 'YYYY/MM/DD',
        });
        $("#reservationdate").datetimepicker({
            format: 'YYYY/MM/DD',
        });
    });
    // For searchable dropdown
    $(".js-example-basic-single").select2();

    // Initially the report table body will be hidden
    $("#report_body").css('visibility', 'hidden');

    $(document).ready(function() {
        $('select[name="course_id"]').on('change', function() {
            var course_id = $(this).val();
            $("#report_body").css('visibility', 'hidden');
            if (course_id) {
                $.ajax({
                    url: '{{ url('/') }}' + '/marksheet/venue/' + course_id,
                    type: "GET",
                    dataType: "json",
                    beforeSend: function() {
                        $('#wait').show();
                    },
                    success: function(data) {
                        var res = '<option value="">Select Venue</option>';
                        $.each(data.venues, function(key, value) {
                            res +=
                                '<option value="' + value.id + '">' + value.name +
                                '</option>';
                        });
                        $('select[name="venue_id"]').html(res);
                    },
                    error: function(err) {
                        $('#wait').hide();
                    },
                    complete: function() {
                        $('#wait').hide();
                    }
                });
            }
        });
        $('select[name="venue_id"]').on('change', function() {
            var venue_id = $(this).val();
            $("#report_body").css('visibility', 'hidden');
            if (venue_id) {
                $.ajax({
                    url: '{{ url('/') }}' + '/marksheet/batch/' + venue_id,
                    type: "GET",
                    dataType: "json",
                    beforeSend: function() {
                        $('#wait').show();
                    },
                    success: function(data) {
                        var res = '<option value="">Select Batch</option>';
                        $.each(data.batches, function(key, value) {
                            res +=
                                '<option value="' + value.id + '">' + value.name +
                                '</option>';
                        });
                        $('select[name="batch_id"]').html(res);
                    },
                    error: function(err) {
                        $('#wait').hide();
                    },
                    complete: function() {
                        $('#wait').hide();
                    }
                });
            }
        });
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $("#loadData").click(function() {
            event.preventDefault();

            var batch_id = $('#selectBatch').val();
            var course_id = $.trim($('select[name="course_id"] option:selected').val());
            if (batch_id > 0 && batch_id != undefined) {
                $("#report_body").css('visibility', 'visible');
                $.ajax({
                    type: 'POST',
                    url: "{{ route('batchwisetraineeattendance_report_getalldata') }}",
                    dataType: "json",
                    data: {
                        "batchId": batch_id
                    },
                    beforeSend: function() {
                        $('#wait').show();
                    },
                    success: function(data) {
                        if (data != null) {
                            $("#report_body").css('visibility', 'visible');
                            $('#formdata').hide().html(data.html).fadeIn();
                        }
                    },
                    error: function(err) {
                        Swal.fire(
                            'Cancelled',
                            'Error occured. Please contact administrator!',
                            'error'
                        );
                        $('#wait').hide();
                    },
                    complete: function() {
                        $('#wait').hide();
                    }
                });
            } else {
                $("#report_body").css('visibility', 'hidden');
                Swal.fire(
                    'Cancelled',
                    'Please select a valid batch',
                    'error'
                );
            }
        });
    });
</script>

@endpush