@extends('admin/course-management/course-details/index')
@section('main-content-tab')
    <div class="post d-flex flex-column-fluid" id="kt_post">
        <!--begin::Container-->
        <div id="kt_content_container" class="container-xxl">
            <div class="card mb-5">
                <!--begin::Body-->
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h3 class="fs-18px fw-500 mb-0">Statistics</h3>
                    <div class="d-flex pt-5">
                        <button type="submit" onclick="loadStatisticsAdd()" class="btn btn--primary rounded-btn" style="background: rgba(117,117,117,0.1);"><i class="bi bi-pencil-fill fs-7"></i>Add Statistics</button>
                    </div>
                </div>
                <div class="card-body py-4 faculty-table-card">
                    <!--begin::Table-->
                    <div class="table-responsive">
                        <table class="table table-row-bordered data-table">
                        <thead>
                        <tr>
                            <th class="text-center">SL</th>
                            <th class="text-center">title (EN)</th>
                            <th class="text-center">Value (EN)</th>
                            <th class="text-center">Order</th>
                            <th class="text-center">Status</th>
                            <th class="text-center">Action</th>
                        </tr>
                        </thead>
                        <tbody class="text-gray-600 fw-bold">

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

        </div>
        <!--end::Container-->
    </div>

    <div class="modal fade custom-modal" tabindex="-1" id="kt_modal_statistics_add">
        <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">Add Statistics</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="edit-form" action="{{ route("course.statistics.store") }}" method="POST">
                        @csrf
                        <input type="hidden" name="institute_slug" value="{{ $institute_slug }}">
                        <input type="hidden" name="course_slug" value="{{ $course_slug }}">
                        <div class="row g-2 mb-4">
                            <div class="col-12">

                                <div class="form-group mb-4">
                                    <label for="title_en" class="form-label">Title (EN)</label>
                                    <input class="form-control" name="title_en" placeholder="Enter Title EN">
                                </div>

                                <div class="form-group mb-4">
                                    <label for="title_bn" class="form-label">Title (BN)</label>
                                    <input class="form-control" name="title_bn" placeholder="Enter Title BN">
                                </div>

                                <div class="form-group mb-4">
                                    <label for="value_en" class="form-label">Value EN</label>
                                    <input type="number" class="form-control" name="value_en" placeholder="Enter Value EN">
                                </div>

                                <div class="form-group mb-4">
                                    <label for="value_bn" class="form-label">Value BN</label>
                                    <input class="form-control" name="value_bn" placeholder="Enter Value BN">
                                </div>

                                <div class="form-group mb-4">
                                    <label for="order" class="form-label">Order</label>
                                    <input type="number" class="form-control" name="order" placeholder="Enter Order">
                                </div>

                                <div class="d-flex mb-4 fv-row">
                                    <label class="form-check form-switch form-check-custom form-check-solid">
                                        <span class="required form-check-label fw-bold text-muted" style="margin-right: 10px;margin-left: 0px;">Status</span>
                                        <input class="form-check-input radio-btn" name="status" type="checkbox" value="1"/>
                                    </label>
                                    <!--end::Switch-->
                                </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_statistics_edit">
        <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">Edit Statistics</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="edit-form" action="{{ route("course.statistics.update") }}" method="POST">
                        @csrf
                        <input type="hidden" name="id" id="edit-id">
                        <input type="hidden" name="institute_slug" value="{{ $institute_slug }}">
                        <input type="hidden" name="course_slug" value="{{ $course_slug }}">
                        <div class="row g-2 mb-4">
                            <div class="col-12">

                                <div class="form-group mb-4">
                                    <label for="title_en" class="form-label">Title (EN)</label>
                                    <input class="form-control" id="title_en" name="title_en" placeholder="Enter Title EN">
                                </div>

                                <div class="form-group mb-4">
                                    <label for="title_bn" class="form-label">Title (BN)</label>
                                    <input class="form-control" id="title_bn" name="title_bn" placeholder="Enter Title BN">
                                </div>

                                <div class="form-group mb-4">
                                    <label for="value_en" class="form-label">Value EN</label>
                                    <input type="number" id="value_en" class="form-control" name="value_en" placeholder="Enter Value EN">
                                </div>

                                <div class="form-group mb-4">
                                    <label for="value_bn" class="form-label">Value BN</label>
                                    <input class="form-control" id="value_bn" name="value_bn" placeholder="Enter Value BN">
                                </div>

                                <div class="form-group mb-4">
                                    <label for="order" class="form-label">Order</label>
                                    <input type="number" class="form-control" id="order" name="order" placeholder="Enter Order">
                                </div>

                                <div class="d-flex mb-4 fv-row">
                                    <label class="form-check form-switch form-check-custom form-check-solid">
                                        <span class="required form-check-label fw-bold text-muted" style="margin-right: 10px; margin-left: 0px;">Status</span>
                                        <input type="hidden" name="status" value="0"> <!-- hidden input for unchecked value -->
                                        <input class="form-check-input radio-btn" id="status" name="status" type="checkbox" value="1"/>
                                    </label>
                                    <!--end::Switch-->
                                </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>
@endsection

@section('extra-extra-css')
    <link href="{{ asset('css/buttons.dataTables.min.css') }}" rel='stylesheet' type='text/css'>
    <style>
        a.badge.text-capitalize:hover {
            color: #fff;
        }
    </style>
@endsection

@section('extra-extra-script')
    <script src="{{asset('js/jquery.dataTables.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.my-profile.statistics',['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: 'title_en', name: 'title_en'},
                    {data: 'value_en', name: 'value_en'},
                    {data: 'order', name: 'order'},
                    {data: 'status', name: 'status'},
                    {data: 'action', name: 'action'},
                ],
            });

        });

        function loadStatisticsAdd() {
            $('#kt_modal_statistics_add').modal('show');
        }


        function loadStatisticsEdit(id) {
            $.ajax({
                url: '{{url('/course-details/course/statistics-data')}}/' + id,
                method: 'GET',
                success: function (returnData) {
                    var data = returnData.data.statistics;
                    $('#edit-id').val(data.id);
                    $('#title_en').val(data.title_en);
                    $('#title_bn').val(data.title_bn);
                    $('#value_en').val(data.value_en);
                    $('#value_bn').val(data.value_bn);
                    $('#order').val(data.order);
                    $('#status').prop('checked', data.status == 1);
                    $('#kt_modal_statistics_edit').modal('show');
                },
                error: function (xhr, status, error) {
                    // Handle error
                    console.error(xhr.responseText);
                }
            });
        }
    </script>
@endsection