@extends('layouts.app')
@push('css')
    <style>
        .active {
            background-color: #a0c5e8;
        }

    </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">
                    <div class="d-inline p-2  text-dark" style="font-size: 26px;font-weight: bold">Create New Course
                        Coordinator</div>
                </div>
                <!-- /.col -->
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li><a href="{{ route('home') }}" class="btn btn-info btn-sm m-1"><i class="fas fa-home"></i> Home</a>
                        </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 action="{{ route('course.coordinator.store') }}" method="POST">
                        @csrf
                        <div class="row">
                            <div class="col-md-8 col-xs-8 col-sm-8">
                                <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>
                                    @error('course_id')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>

                        </div>
                        <div class="card card-info">
                        <div class="col-md-8 col-xs-8 col-sm-8">


                            <div class="form-group">
                                <label for="username">User Name</label>
                                <input id="username" type="text" placeholder="User Name"
                                    class="form-control @error('username') is-invalid @enderror" name="username"
                                    value="{{ old('username') }}" />
                                @error('username')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>


                            <div class="form-group">
                                <label for="fname">Full Name</label>
                                <input id="fname" type="text" placeholder="Full Name"
                                    class="form-control @error('fname') is-invalid @enderror" name="fname"
                                    value="{{ old('fname') }}" />
                                @error('fname')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>



                            <div class="form-group">
                                <label for="email">Email</label>
                                <input id="email" type="email" placeholder="Email"
                                    class="form-control @error('email') is-invalid @enderror" name="email"
                                    value="{{ old('email') }}" />
                                @error('email')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>


                            <div class="form-group">
                                <label for="phone">Contact Number</label>
                                <input id="phone" type="text" placeholder="phone"
                                    class="form-control @error('phone') is-invalid @enderror" name="phone"
                                    value="{{ old('phone') }}" />
                                @error('phone')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>

                        </div>
                    



                        <input type="submit" class="btn btn-sm btn-success" value="Create">
                    </form>
                </div>
                </div>
                <br><br><br>
                <hr>
                <h3><b>Assign Course Coordinator</b></h3>
                <div class="col-md-12 col-x-12 col-sm-12">

                    <form action="#" method="POST">
                        @csrf
                        <div class="row">
                            <div class="col-md-8 col-xs-8 col-sm-8">
                                <div class="form-group">
                                    <label for="course">Course Name</label>
                                    <select id="selectCourse1"
                                        class="js-example-basic-single form-control @error('course_id') is-invalid @enderror"
                                        name="course_id">
                                        <option value="z">Select Course</option>
                                        @foreach ($courses as $course)
                                            <option value="{{ $course->id }}">{{ $course->title }}</option>
                                        @endforeach
                                    </select>
                                    @error('course_id')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>



                            </div>

                        </div>





                    <div class="card card-info">
                        <fieldset class="external">
                            <legend class="scheduler-border" style="width: auto;">Input Specific Query</legend>
                            <div class="row">
    
    
                                <div class="col-md-3 col-xs-3 col-sm-3">
                                    <div class="form-group">
                                        <label for="pds">PDS ID:</label>
                                        <input name="pds" id="pds" type="text" placeholder="PDS ID"
                                            class="form-control @error('pds') is-invalid @enderror"
                                            value="{{ old('pds') }}" />
                                        @error('pds')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>
    
    
                                <div class="col-md-3 col-xs-3 col-sm-3">
                                    <div class="form-group">
                                        <label for="nid">NID Number</label>
                                        <input name="nid" id="nid" type="text" placeholder="NID Number"
                                            class="form-control @error('nid') is-invalid @enderror"
                                            value="{{ old('nid') }}" />
                                        @error('nid')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>
                              
                                <div class="col-md-3 col-xs-3 col-sm-3">
                                    <div class="form-group">
                                        <label for="phone">Phone Number</label>
                                        <input name="phone" id="e_phone" type="text" placeholder="Phone Number"
                                            class="form-control @error('phone') is-invalid @enderror"
                                            value="{{ old('phone') }}" />
                                        @error('phone')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="email">Email</label>
                                    <input id="e_email" type="email" placeholder="Email"
                                        class="form-control @error('email') is-invalid @enderror" name="email"
                                        value="{{ old('email') }}" />
                                    @error('email')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
    
                            </div>
                            <button type="button" class="btn btn-success" onclick="searchSpecificCoordinator()"> Search
                            </button>
                   
                    </fieldset>
                </div>
             </div>


                    <div class="row">
                       

                        <div class="card card-info">
                        <div class="col-md-9 col-sm-9 col-lg-9">
                           
                            <div id="gg"></div>
                        </div>


                    </div>
            
            
            
                        <div class="row">
                            <div class="col-md-6 col-sm-6 col-lg-6">
                                <div id="view"></div>
                            </div>
                            <div class="col-md-6">
                                <div id="info">
            
                                </div>
                            </div>
                        </div>










                        {{-- <div class="container">
                            <div class="search">
                                <input type="search" name="search" id="search"
                                    placeholder="Search for Course Coordinator" class="form-control">


                            </div>



                        </div>

                        <div class="container">

                            <table class="table table-bordered" id="Content">



                            </table>

                        </div> --}}
                        <!-- /.row (main row) -->
                </div>
                <!-- /.container-fluid -->


    </section>
    <!-- /.content -->
@endsection
@push('js')
    <script>




function searchSpecificCoordinator() {

var pds_id = $("#pds").val();
var nid = $("#nid").val();
var phone = $("#e_phone").val();
var email = $("#e_email").val();



$.ajax({
    url: '{{ route('specificTrainer.search') }}',
    type: "POST",

    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    data: {
        pds_id: pds_id,
        nid: nid,
        phone: phone,
        email: email

    },
    beforeSend: function() {
        $('#wait').show();
    },
    success: function(data) {

        if (data == 1) {
            Swal.fire({
                title: '<strong>Sorry, No matching record Found</strong>',
                type: 'error',
                html: 'Problem: ' + 'No Teachers data match with input credentials' +
                    '</br> Please try again! </br>',
                showCloseButton: true
            });
        } else {
            console.log(data.id);


            displayUsers3(data);
        }
    },
    error: function(err) {
        $('#wait').hide();
    },
    complete: function() {
        $('#wait').hide();
    }



});
}






let displayUsers3 = (data) => {



let htmlTemplate = '';

htmlTemplate += ` <br><br><table class="table table-bordered table-hover">
    <thead>
    <tr>
        <th scope="col">#</th>
        <th scope="col">Select</th>
        <th scope="col">Full Name</th>
        <th scope="col">Email</th>
        <th scope="col">Designation</th>
    </tr>
    </thead>
    <tbody>`;
i = 1;
htmlTemplate += `
<tr>
<th scope="row"> ${i}</th>
<td> <input id="ad_Checkbox${data.id}" onclick="selectOrgChildRec(this)"  class="ads_Checkbox" type="checkbox" value="${data.id}" /> </td>
<td>
    ${data.full_name}
</td>
<td>${data.email}</td>

<td>${data.designation}</td>


</tr>`

htmlTemplate += `   </tbody>
    </table>
    <br>

    <input type="button" class="btn btn-sm btn-success" id="save_value" name="save_value" onclick="saveCoordinator()" value="Save" />
<br> <br>
    `;

document.querySelector('#gg').innerHTML = htmlTemplate;
}










function saveCoordinator() {

    var courseId = $("#selectCourse1").val();
            if (courseId == 'z') {
                alert("No course selected! Please select a course!!");
                return;
            }


var arr = $('.ads_Checkbox:checked').map(function() {
    return this.value;
}).get();


if (arr.length < 1 ) {
    alert("No Coordinator selected! Please select a course coordinator!!");
    return;
}

$.ajax({
    url: '{{ route('specificCourseCoordinator.store') }}',
    type: "POST",

    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    data: {
        data: arr,
        courseId : courseId
       

    },
    beforeSend: function() {
        $('#wait').show();
    },
    success: function(data) {

        if (data == 2) {
            swal("Success!",
                "The course coordinator has been added and duly notified!",
                "success")


        } else {
            Swal({
                title: 'Error!',
                text: 'The course coordinator could not be added : ' 
                
            })
        }

    },
    error: function(err) {
        $('#wait').hide();
    },
    complete: function() {
        $('#wait').hide();
    }


});




}

































        $('#search').on('keyup', function() {

            var courseId = $("#selectCourse1").val();
            if (courseId == 'z') {
                alert("No course selected! Please select a course!!");
                return;
            }

            $course = courseId;

            $value = $(this).val();

            $.ajax({

                type: 'get',
                url: '{{ URL::to('search/CourseCoordinator') }}',
                data: {
                    'search': $value,
                    'course': $course
                },
                success: function(data) {
                    console.log(data);
                    $('#Content').html(data);
                }


            });



        })



        function addCourseCoordinator(id) {

            var courseId = $("#selectCourse1").val();
            var u_id = id;

            if (courseId == 'z') {
                alert("No course selected! Please select a course!!");
                return;
            }

            var JsonData = {
                courseId: courseId,
                u_id: u_id,
                _token: "{{ csrf_token() }}"
            }


            $.ajax({
                url: '{{ route('add.courseCoordinator') }}',
                type: "POST",
                dataType: "json",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: JsonData,
                beforeSend: function() {
                    $('#wait').show();
                },
                success: function(data) {
                    swal({
                        title: "Success!",
                        text: "The selected person has been added as a Course Coordinator!",
                        icon: "success",
                        button: "Close",
                    }).then(function() {
            location.reload(); // Reload the current location
        })
                },

                error: function(err) {
                    $('#wait').hide();
                },
                complete: function() {
                    $('#wait').hide();
                }
            });
 



        }
    </script>
@endpush