@extends('layouts.app')
@push('css')
    <style>
        .btn-success.disabled,
        .btn-success:disabled {
            color: #fff;
            background-color: #8f9390;
            border-color: #8a918b;
        }

        .btn-danger.disabled,
        .btn-danger:disabled {
            color: #fff;
            background-color: #8f9390;
            border-color: #8f9390;
        }
    </style>
@endpush

<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
@section('content')
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0 text-dark">Manage Attendance</h1>
                </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">Attendance</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="ajax-contact-form" action="{{ route('attendance_insert') }}" method="POST"
                        enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            <div class="col-md-3 col-xs-6 col-sm-3">
                                <div class="form-group">
                                    <label for="date">Date</label>
                                    <input type="text" id="date" name="date" class="form-control">
                                </div>

                                <span id="dateerroremessage"></span>
                            </div>
                            @if (isset($lock))
                                <div class="col-md-3 col-xs-6 col-sm-3">
                                    <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="{{ $courses->id }}">{{ $courses->title }}</option>
                                        </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">Venue Name</label>
                                        <select id="selectVenue"
                                            class="js-example-basic-single form-control @error('venue_id') is-invalid @enderror"
                                            name="venue_id">
                                            <option value="{{ $venues->id }}">{{ $venues->name }} </option>
                                        </select>
                                        <span id="error"></span>
                                    </div>
                                </div>
                                <div class="col-md-3 col-xs-6 col-sm-3">
                                    <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">
                                            <option value="">Select
                                            </option>
                                            <option value="{{ $batches->id }}">{{ $batches->name }}
                                            </option>
                                        </select>
                                        <span id="error"></span>
                                    </div>
                                </div>
                            @else
                                <div class="col-md-3 col-xs-6 col-sm-3">
                                    <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-3 col-xs-6 col-sm-3">
                                    <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-3 col-xs-6 col-sm-3">
                                    <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>
                            @endif
                            <div class="col-md-3 col-xs-6 col-sm-3">
                                <div class="form-group">
                                    <button class="btn btn-success" id="loadData" name="loadData">Load</button>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12 col-x-12 col-sm-12">
                            <div id="view" class="form-group clearfix" style="background-color:#ffffff;">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!-- /.row (main row) -->
    </section>

    <!-- /.content -->
@endsection
@push('js')
    <script>
        $(document).ready(function() {
            // Load Venue on change of Course
            $('select[name="course_id"]').on('change', function() {
                $("#view").hide();
                var course_id = $(this).val();
                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();
                        }
                    });

                }
            });

            // Load Batch on change of Venue
            $('select[name="venue_id"]').on('change', function() {
                var venue_id = $(this).val();
                $("#view").hide();
                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();
                        }
                    });

                }
            });

            // If Batch is changed remove the partial view
            $('select[name="batch_id"]').on('change', function() {
                $("#view").hide();
                event.preventDefault();
            });

            // Load partial view on click of Load button
            $("#loadData").click(function() {
                event.preventDefault();
                let batch_id = $('#selectBatch').val();
                if (batch_id > 0 && batch_id != undefined) {
                    let date = $('#date').val();
                    var datearray = date.split("/");
                    var newdate = datearray[1] + '/' + datearray[0] + '/' + datearray[2];
                    newdate = newdate.split('/').join('-');
                    $.ajax({
                        url: '{{ url('/') }}' + '/trainner_information/' + batch_id + '/' +
                            newdate,
                        type: "GET",
                        dataType: "html",
                        beforeSend: function() {
                            $('#wait').show();
                        },
                        success: function(data) {
                            $('#view').hide().html(data).fadeIn();
                        },
                        error: function(err) {
                            $('#wait').hide();
                        },
                        complete: function() {
                            $('#wait').hide();
                        }
                    });
                } else {
                    Swal.fire(
                        'Cancelled',
                        'Please select a valid batch',
                        'error'
                    )
                }
            });
        });
    </script>
@endpush