@extends('admin/course-management/course-details/index', ['withoutCard' => true])

@section('main-content-tab')
    <div class="card mb-6">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h1 class="fs-18px fw-500 mb-0">Review List</h1>
        </div>
        <div class="card-body faculty-table-card">
            <div class="table-responsive">
                <table class="table table-row-bordered data-table">
                    <thead>
                        <tr>
                            <th class="text-center">ID.</th>
                            <th class="text-center">Name</th>
                            <th class="text-center">Batch</th>
                            <th class="text-center">University</th>
                            <th class="text-center">Review</th>
                            <th class="text-center">Message</th>
                            <th class="text-center">Action</th>
                        </tr>
                    </thead>
                    <tbody class="text-gray-600 fw-bold">

                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="modal fade custom-modal" tabindex="-1" id="kt_modal_status_change">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header bg--primary text-white">
                    <h3 class="modal-title">Change This review status.</h3>
                    <button type="button" class="btn btn-icon btn-sm btn-secondary modal-close-btn" data-bs-dismiss="modal"
                        aria-label="Close">
                        <i class="las la-times"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="status-edit-form" action="{{ route('course-review-status.update') }}" method="POST">
                        @method('PUT')
                        @csrf
                        <input type="hidden" id="id" name="id">
                        <div class="row g-2 mb-4">
                            <div class="col-12">
                                <div class="">
                                    <label class="form-label">Select Status</label>
                                    <select name="status" id="status" class="form-select">
                                        <option value="0">Pending</option>
                                        <option value="1">Hide</option>
                                        <option value="2">Approve</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="d-flex justify-content-center">
                            <button type="submit" class="btn btn-primary rounded-btn">Save</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade custom-modal" tabindex="-1" id="kt_modal_review_view">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header bg--primary text-white">
                    <h3 class="modal-title">View</h3>
                    <button type="button" class="btn btn-icon btn-sm btn-secondary modal-close-btn" data-bs-dismiss="modal"
                        aria-label="Close">
                        <i class="las la-times"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row g-2 mb-4">
                        <div class="col-12">
                            <div class="form-group">
                                <label for="view-name" class="form-label">Name</label>
                                <input class="form-control form-control-solid" id="view-name" name="name"
                                    placeholder="Name" readonly>
                            </div>

                            <div class="form-group">
                                <label for="title" class="form-label">Title</label>
                                <input class="form-control form-control-solid" id="title" name="title"
                                    placeholder="title" readonly>
                            </div>

                            <div class="form-group">
                                <label for="university" class="form-label">University</label>
                                <input class="form-control form-control-solid" id="university" name="university"
                                    placeholder="university" readonly>
                            </div>

                            <div class="form-group">
                                <label for="batch" class="form-label">Batch</label>
                                <input class="form-control form-control-solid" id="batch" name="batch"
                                    placeholder="batch" readonly>
                            </div>

                            <div class="form-group">
                                <label for="total_ratings" class="form-label">total_ratings</label>
                                <input class="form-control form-control-solid" id="total_ratings" name="total_ratings"
                                    placeholder="total_ratings" readonly>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="placement_ratings" class="form-label">placement_ratings</label>
                                        <input class="form-control form-control-solid" id="placement_ratings"
                                            name="placement_ratings" placeholder="placement_ratings" readonly>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="infrastructure_ratings"
                                            class="form-label">infrastructure_ratings</label>
                                        <input class="form-control form-control-solid" id="infrastructure_ratings"
                                            name="infrastructure_ratings" placeholder="infrastructure_ratings" readonly>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="campus_ratings" class="form-label">campus_ratings</label>
                                        <input class="form-control form-control-solid" id="campus_ratings"
                                            name="campus_ratings" placeholder="campus_ratings" readonly>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="vfm_ratings" class="form-label">vfm_ratings</label>
                                        <input class="form-control form-control-solid" id="vfm_ratings"
                                            name="vfm_ratings" placeholder="vfm_ratings" readonly>
                                    </div>
                                </div>
                            </div>


                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="faculty_ratings" class="form-label">faculty_ratings</label>
                                        <input class="form-control form-control-solid" id="faculty_ratings"
                                            name="faculty_ratings" placeholder="faculty_ratings" readonly>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="course_ratings" class="form-label">course_ratings</label>
                                        <input class="form-control form-control-solid" id="course_ratings"
                                            name="course_ratings" placeholder="course_ratings" readonly>
                                    </div>
                                </div>
                            </div>


                            <div class="form-group">
                                <label for="view-description" class="form-label">Description</label>
                                <textarea class="form-control form-control-solid auto-height" id="view-description" name="description"
                                    placeholder="Description" disabled></textarea>
                            </div>

                        </div>
                    </div>
                    <div class="d-flex justify-content-center">
                        <button type="button" class="btn btn-primary rounded-btn" data-bs-dismiss="modal"
                            aria-label="Close">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('extra-extra-css')
    <link href="{{ asset('css/toastr.css') }}" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="{{ asset('css/dropify.min.css') }}">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link href="{{ asset('css/buttons.dataTables.min.css') }}" rel='stylesheet' type='text/css'>
@endsection

@section('extra-extra-script')
    <script src="{{ asset('js/jquery.js') }}"></script>
    <script src="{{ asset('js/jquery.validate.js') }}"></script>
    <script src="{{ asset('js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('js/bootstrap.min.js') }}"></script>
    <script src="{{ asset('js/dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('js/dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('js/jszip.min.js') }}"></script>
    <script src="{{ asset('js/pdfmake.min.js') }}"></script>
    <script src="{{ asset('js/vfs_fonts.js') }}"></script>
    <script src="{{ asset('js/buttons.html5.min.js') }}"></script>
    <script type="text/javascript">
        $(function() {

            var table = $('.data-table').DataTable({
                processing: true,
                serverSide: true,
                aaSorting: [],
                lengthMenu: [
                    [10, 25, 50, 100],
                    [10, 25, 50, 100]
                ],
                ajax: "{{ route('course-review.index', ['institute_slug' => $institute_slug, 'course_slug' => $course_slug]) }}",
                dom: 'Blfrtip',
                buttons: [{
                        extend: 'pdf',
                        exportOptions: {
                            columns: [0, 1, 2, 3, 4] // Column index which needs to export
                        }
                    },
                    {
                        extend: 'csv',
                        exportOptions: {
                            columns: [0, 1, 2, 3, 4] // Column index which needs to export
                        }
                    },
                    {
                        extend: 'excel',
                        exportOptions: {
                            columns: [0, 1, 2, 3, 4] // Column index which needs to export
                        }
                    }
                ],
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'batch',
                        name: 'batch'
                    },
                    {
                        data: 'university',
                        name: 'university'
                    },
                    {
                        data: 'total_ratings',
                        name: 'review'
                    },
                    {
                        data: 'review',
                        name: 'message'
                    },
                    {
                        data: 'action',
                        name: 'action'
                    },
                ],
            });

        });

        $(document).ready(function() {
            $('#status-edit-form').submit(function(event) {
                event.preventDefault();
                var formData = $(this).serialize();
                $.ajax({
                    url: $(this).attr('action'),
                    method: 'POST',
                    data: formData,
                    success: function(response) {
                        $('#kt_modal_status_change').modal('hide');
                        $('.data-table').DataTable().ajax.reload(null, false);
                        toastr.success('Course Review Status Updated!');
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr.responseText);
                        toastr.error('Failed to update review status. Please try again later.');
                    }
                });
            });
        });


        function changeCourseReviewStatus(id) {
            $.ajax({
                url: '{{ url('/api/course/review/') }}/' + id,
                method: 'GET',
                success: function(returnData) {
                    var data = returnData.data;
                    $('#id').val(data.id);
                    $('#status').val(data.status);
                    $('#kt_modal_status_change').modal('show');
                },
                error: function(xhr, status, error) {
                    console.error(xhr.responseText);
                }
            });
        }

        function loadCourseReviewView(id) {
            $.ajax({
                url: '{{ url('/api/course/review/') }}/' + id,
                method: 'GET',
                success: function(returnData) {
                    var data = returnData.data;
                    $('#view-id').val(data.id);
                    $('#title').val(data.title);
                    $('#view-name').val(data.name);
                    $('#view-description').val(data.review);
                    $('#total_ratings').val(data.total_ratings);
                    $('#university').val(data.university);
                    $('#batch').val(data.batch);
                    $('#placement_ratings').val(data.placement_ratings);
                    $('#infrastructure_ratings').val(data.infrastructure_ratings);
                    $('#campus_ratings').val(data.campus_ratings);
                    $('#vfm_ratings').val(data.vfm_ratings);
                    $('#faculty_ratings').val(data.faculty_ratings);
                    $('#course_ratings').val(data.course_ratings);
                    $('#kt_modal_review_view').modal('show');
                },
                error: function(xhr, status, error) {
                    console.error(xhr.responseText);
                }
            });
        }
    </script>
    <script src="{{ asset('js/toastr.min.js') }}"></script>
    <script type="text/javascript">
        @if (Session::has('message'))
            var type = "{{ Session::get('alert-type', 'info') }}"
            switch (type) {
                case 'info':
                    toastr.info("{{ Session::get('message') }}");
                    break;
                case 'success':
                    toastr.success("{{ Session::get('message') }}");
                    break;
                case 'warning':
                    toastr.warning("{{ Session::get('message') }}");
                    break;
                case 'error':
                    toastr.error("{{ Session::get('message') }}");
                    break;
            }
        @endif

        @if (count($errors) > 0)
            @foreach ($errors->all() as $error)
                toastr.error("{{ $error }}");
            @endforeach
        @endif
    </script>
@endsection