@extends('layouts.admin')

@section('content')
<!--App-Content-->
<div class="app-content my-3 my-md-5">
    <div class="side-app">
        <x-page.header>Courses</x-page.header>
        @include('admin.errors.form-errors')
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Add New Course</h3>
                    </div>

                    <div class="card-body">
                        <p>Create a Brand new Course</p>
                        <form enctype="multipart/form-data" method="POST" action="{{route('courses.post')}}"
                            class="form-horizontal" id="create_form">
                            @csrf
                            <div class="form-group ">
                                <div class="row">
                                    <div class="col-md-3">
                                        <label class="form-label mt-2" for="education_system_name_create">Education System <i
                                                class="text-danger">(required)</i></label>
                                    </div>
                                    <div class="col-md-9">

                                        <select id="education_system_name_create" name="esid" class="form-control select2-show-search" required>
                                            <option value="0" disabled selected>Select</option>
                                            @foreach ($educationSystems as $item)

                                            <option value="{{$item->esid}}">{{$item->esname}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group ">
                                <div class="row">
                                    <div class="col-md-3">
                                        <label class="form-label mt-2" for="board_name_create">Board <i
                                                class="text-danger">(required)</i></label>
                                    </div>
                                    <div class="col-md-9">

                                        <select id="board_name_create" name="bid" class="form-control select2-show-search" required>


                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group ">
                                <div class="row">
                                    <div class="col-md-3">
                                        <label class="form-label mt-2" for="level_name_create">Level <i
                                                class="text-danger">(required)</i></label>
                                    </div>
                                    <div class="col-md-9">

                                        <select id="level_name_create" name="lid" class="form-control select2-show-search" required>

                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group ">
                                <div class="row">
                                    <div class="col-md-3">
                                        <label class="form-label mt-2" for="course_code_create">Code <i
                                                class="text-danger">(required)</i></label>
                                    </div>
                                    <div class="col-md-9">
                                        <input type="text" name="ccode" value="{{ old('ccode')}}" class="form-control" id="course_code_create" placeholder=""
                                            required>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group ">
                                <div class="row">
                                    <div class="col-md-3">
                                        <label class="form-label mt-2" for="course_name_create">Name <i
                                                class="text-danger">(required)</i></label>
                                    </div>
                                    <div class="col-md-9">
                                        <input type="text" name="cname" value="{{ old('cname')}}" class="form-control" id="course_name_create" placeholder=""
                                            required>
                                    </div>
                                </div>
                            </div>


                            <div class="form-group ">
                                <div class="row">
                                    <div class="col-md-3">
                                        <label class="form-label mt-2" for="course_description_create">Description</label>
                                    </div>
                                    <div class="col-md-9">

                                        <textarea class="form-control" name="cdescription" id="course_description_create"
                                            rows="3">{{ old('cdescription')}}</textarea>
                                    </div>
                                </div>
                            </div>

                            {{-- <div class="form-group ">
                                <div class="row">
                                    <div class="col-md-3">
                                        <label class="form-label mt-2" for="course_url_create">Website</label>
                                    </div>
                                    <div class="col-md-9">
                                        <input type="text" id="course_url_create" name="curl" value="{{ old('curl')}}" onchange="return validURL('course_url_create')" class="form-control" placeholder="">
                                    </div>
                                </div>
                            </div> --}}


                            <div class="form-group ">
                                <div class="row">

                                    <div class="col-md-3">
                                        <label class="form-label mt-2">
                                            Image
                                        </label>
                                    </div>
                                    <div class="col-md-9">
                                        <div class="control-group form-group">
                                            <div class="input-group file-browser">
                                                <input type="text"
                                                    class="form-control border-end-0 browse-file bg-transparent"
                                                    placeholder="Upload Image" readonly="">
                                                <label class="input-group-btn">
                                                    <span class="btn btn-primary br-bs-0 br-ts-0">
                                                        Browse <input type="file" id="course_image_create" name="cimage"
                                                            style="display: none;" accept="image/*"
                                                            onchange="return fileValidation('course_image_create')">
                                                    </span>
                                                </label>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>



                            <div class="form-group mb-0 row justify-content-end">
                                <div class="col-md-3">
                                    <button type="submit" class="btn btn-primary waves-effect waves-light">Add New
                                        Course</button>
                                </div>
                            </div>

                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Courses List</h3>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table
                                class="table table-striped table-bordered table-vcenter text-nowrap" id="course_table">
                                <thead>
                                    <tr>

                                        <th style="text-align: center;">Id</th>
                                        <th style="text-align: center;">Education System</th>
                                        <th style="text-align: center;">Board</th>
                                        <th style="text-align: center;">Level</th>

                                        <th style="text-align: center;">Code</th>
                                        <th style="text-align: center;">Image</th>

                                        <th style="text-align: center;">Name</th>
                                        <th style="text-align: center;">Description</th>
                                        {{-- <th style="text-align: center;">Website</th> --}}



                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php
                                    $count=0
                                    @endphp
                                    @foreach ($courses as $c )


                                    <tr>
                                        <td>{{++$count}}</td>

                                        <td>{{ !empty($c->educationSystem) ? $c->educationSystem->esname:'null' }}</td>
                                        <td>{{ !empty($c->board) ? $c->board->bname:'null' }}</td>
                                        <td>{{ !empty($c->level) ? $c->level->lname:'null' }}</td>

                                        <td>{{$c->ccode}}</td>

                                        <td><img src="{{$c->getImage($c->cimage)}}" alt=""
                                                class="w-8 h-8 br-7 border p-2"></td>

                                        <td>{{$c->cname}}</td>


                                        <td style="text-align: center;">
                                            <i class="mdi mdi-information-outline leading-loose"
                                                data-bs-toggle="tooltip" data-bs-placement="bottom" title=""
                                                data-bs-original-title="{{$c->cdescription}}"></i>
                                        </td>
                                        {{-- <td style="text-align: center;"><a href="{{$c->curl}}" target="_blank"><i
                                                    class="fa fa-globe text-secondary"></i></a></td> --}}




                                        <td style="text-align: center;">
                                            <div data-bs-toggle="tooltip" data-bs-original-title="Edit">
                                                <button type="button" value="{{$c->cid}}"
                                                    class="modal-effect btn btn-outline-light btn-sm waves-effect waves-light edit"
                                                    data-bs-effect="effect-sign" data-bs-toggle="modal"
                                                    data-bs-original-title="Edit" data-bs-target="#edit"><i
                                                        class="fa fa-edit fs-16"></i></button>
                                            </div>
                                            <a href="javascript:void(0)" onClick="confirmDelete(event,{{$c->cid}})" class="btn btn-outline-light btn-sm waves-effect waves-light"
                                                    data-bs-toggle="tooltip" data-bs-original-title="Delete"
                                                    title='Delete'>
                                                    <i class="fa fa-trash fs-16"></i>
                                            <form method="POST" action="{{ route('courses.destroy', $c->cid) }}" id="delete-form-{{$c->cid}}">
                                                @csrf
                                                <input name="_method" type="hidden" value="DELETE">

                                            </form>
                                            </a>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Edit form modal -->
<div class="modal  fade effect-sign show" id="edit" tabdocumentation="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="example-Modal3">Edit</h5>
                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form method="POST" action="" id="course_form_update" name="courseform" enctype="multipart/form-data">
                    @csrf
                    <div class="form-group ">
                        <div class="row">
                            <div class="col-md-3">
                                <label class="form-label mt-2" for="education_system_name_update">Education System <i
                                        class="text-danger">(required)</i></label>
                            </div>
                            <div class="col-md-9">

                                <select id='education_system_name_update' name="esid" class="form-control select2-show-search" required>
                                    @foreach ($educationSystems as $item)

                                    <option value="{{$item->esid}}">{{$item->esname}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="form-group ">
                        <div class="row">
                            <div class="col-md-3">
                                <label class="form-label mt-2" for="board_name_update">Board <i class="text-danger">(required)</i></label>
                            </div>
                            <div class="col-md-9">

                                <select id="board_name_update" name="bid" class="form-control select2-show-search" required>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="form-group ">
                        <div class="row">
                            <div class="col-md-3">
                                <label class="form-label mt-2" for="level_name_update">Level <i class="text-danger">(required)</i></label>
                            </div>
                            <div class="col-md-9">

                                <select id="level_name_update" name="lid" class="form-control select2-show-search" required>

                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="form-group ">
                        <div class="row">
                            <div class="col-md-3">
                                <label class="form-label mt-2" for="course_code_update">Code <i class="text-danger">(required)</i></label>
                            </div>
                            <div class="col-md-9">
                                <input type="text" name="ccode" class="form-control" id="course_code_update" placeholder=""
                                    required>
                            </div>
                        </div>
                    </div>
                    <div class="form-group ">
                        <div class="row">
                            <div class="col-md-3">
                                <label class="form-label mt-2" for="course_name_update">Name <i class="text-danger">(required)</i></label>
                            </div>
                            <div class="col-md-9">
                                <input type="text" name="cname" class="form-control" id="course_name_update" placeholder=""
                                    required>
                            </div>
                        </div>
                    </div>


                    <div class="form-group ">
                        <div class="row">
                            <div class="col-md-3">
                                <label class="form-label mt-2" for="course_description_update">Description</label>
                            </div>
                            <div class="col-md-9">

                                <textarea class="form-control" name="cdescription" id="course_description_update"
                                    rows="3"></textarea>
                            </div>
                        </div>
                    </div>

                    {{-- <div class="form-group ">
                        <div class="row">
                            <div class="col-md-3">
                                <label class="form-label mt-2" for="course_url_update">Website</label>
                            </div>
                            <div class="col-md-9">
                                <input type="text" id="course_url_update" onchange="return validURL('course_url_update')" name="curl" class="form-control" placeholder="">
                            </div>
                        </div>
                    </div> --}}


                    <div class="form-group ">
                        <div class="row">
                            <div class="col-md-3">
                                <label class="form-label mt-2" for="course_image_update">
                                    Image
                                </label>
                            </div>
                            <div class="col-md-9">
                                <div class="control-group form-group">
                                    <div class="input-group file-browser">
                                        <input type="text" class="form-control border-end-0 browse-file bg-transparent"
                                            placeholder="Upload Image" readonly="">
                                        <label class="input-group-btn">
                                            <span class="btn btn-primary br-bs-0 br-ts-0">
                                                Browse <input type="file" id="course_image_update" name="cimage"
                                                    style="display: none;" accept="image/*"
                                                    onchange="return fileValidation('course_image_update')">
                                            </span>
                                        </label>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="submit" id="submit" class="btn btn-primary" value="">Submit</button>
                <input type="hidden" id="course_id" name="course_id" value="0">
            </div>

            </form>
        </div>
    </div>
</div>

@endsection
@section('admin-js')
<script>
    $(document).ready(function () {
        $edit_bid=0;
        $edit_lid=0;

        // Check if the image is inserted
        // $( "#create_form" ).submit(function(event){
        //     validate_image(event)
        // })

        // Get Record data using it's id
        jQuery('body').on('click', '.edit', function () {
            var course_id = $(this).val();
            $.get('/staff/courses/' + course_id, function (data) {
                $edit_bid=data.bid;
                $edit_lid=data.lid;
                jQuery('#education_system_name_update').val(data.esid).change();
                jQuery('#course_code_update').val(data.ccode);
                jQuery('#course_name_update').val(data.cname);
                jQuery('#course_description_update').val(data.cdescription);
                // jQuery('#course_url_update').val(data.curl);
                jQuery('#submit').val("update");
                jQuery('#course_form_update').attr('action', '/staff/courses/' + course_id)
            })
        });


        // Education system and boards dependent select in update form
        $('#education_system_name_update').on('change', function () {
            var $board = $('#board_name_update');
            $('#board_name_update').empty();
             $('#level_name_update').empty();
            $('#board_name_update').append(`<option value="0" disabled selected>Processing...</option>`);
            $.ajax({
                url: "{{ route('getBoard') }}",
                type: 'GET',
                data: {
                    esid: $(this).val()
                },
                success: function (data) {

                    $('#board_name_update').empty();
                    $('#board_name_update').append(
                        `<option value="0" disabled selected>Select board*</option>`);
                    $.each(data, function (id, value) {
                        $board.append('<option value="' + id + '">' + value +
                            '</option>');
                    });
                    jQuery('#board_name_update').val($edit_bid).change();
                }
            });
        });



        // board and Levels dependent select in edit form
        $('#board_name_update').on('change', function () {
                    var $level_name_update = $('#level_name_update');
                    $('#level_name_update').empty();
                    $('#level_name_update').append(`<option value="0" disabled selected>Processing...</option>`);
                    $.ajax({
                        url: "{{ route('getLevel') }}",
                        type: 'GET',
                        data: {
                            bid: $(this).val()
                        },
                        success: function (data) {
                            console.log(data)
                            $('#level_name_update').empty();
                            $('#level_name_update').append(`<option value="0" disabled selected>Select Level*</option>`);
                            $.each(data, function (id, value) {
                                $level_name_update.append('<option value="' + id + '">' + value + '</option>');
                            });
                              jQuery('#level_name_update').val($edit_lid).change();
                            }
                    });
                });
    })
</script>
<script>
    $(document).ready(function(){
        $('#course_table').dataTable( {
            "drawCallback": function( settings ) {
            }
        })
    })
    </script>
@endsection