@extends('layouts.app')
@push('css')
<style>
    .dvloader {
        display: none;
        width: 100%;
        height: 100%;
    }
</style>
@endpush
@section('content')
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <div class="d-inline p-2  text-dark" style="font-size: 26px; font-weight: bold">Selected Trainees</div>
            </div>
            <!-- /.col -->
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <div class="d-inline p-2 text-white text-right">
                        <a href="{{ route('home') }}" class="btn btn-sm btn-info"><i class="fas fa-home"></i> Home</a>
                    </div>
                </ol>
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </div>
    <!-- /.container-fluid -->
</div>

<section class="content">
    <div class="container-fluid">
        <!-- Main row -->
        <div class="row">
            <div class="col-md-4 col-xl-6 col-sm-4">
                <div class="form-group">
                    <label for="course">Select Course</label>
                    <select id="selectCourse" class="searchable_select 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-xl-6 col-sm-4">
                <div class="form-group">
                    <label for="venue"><span class="text-danger">*</span>Venue Name</label>
                    <select id="selectVenue" class="searchable_select form-control @error('venue_id') is-invalid @enderror" name="venue_id">
                    </select>
                    <span id="error"></span>
                </div>
            </div>
            <!-- <div class="dvloader"><img src="{{ asset('images/loader.gif') }}" /></div> -->

        </div>

        <!-- /.row (main row) -->
        <div id="formdata" style="background-color: #FFFFFF;"></div>
    </div>
    <!-- /.container-fluid -->
</section>
@endsection
@push('js')
<script>
    $(document).ready(function() {
        $('select[name="course_id"]').on('change', function() {
            // $(".dvloader").show();
            var course_id = $(this).val();
            if (course_id) {
                $.ajax({
                    url: '{{ url("/")}}' + '/course/selecteddata/' + course_id,
                    type: "GET",
                    //  dataType: "json",
                    success: function(data) {
                        $("#formdata").html(data);
                    }
                });
                //start load venue
                $.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() {
            $("#venue_id").val(this.value);
        });
    });
</script>
@endpush