@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">Facility Item List</h1>
            <a href="{{ route('facility.create', ['institute_slug' => $institute_slug, 'course_slug' => $course_slug]) }}"
                class="btn btn--primary rounded-btn text-cs-gray" style="background: rgba(117,117,117,0.1);">
                <i class="fa fa-pen"></i> Add Facility Item
            </a>
        </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">SL.</th>
                            <th class="text-center">Title</th>
                            <th class="text-center">Status</th>
                            <th class="text-center">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="text-gray-600 fw-bold">

                    </tbody>
                </table>
            </div>
        </div>
    </div>
    {{-- <!-- Modal-->
<div class="modal fade" id="exampleModalCustomScrollable" tabindex="-1" role="dialog" aria-labelledby="staticBackdrop" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal Title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <i aria-hidden="true" class="ki ki-close"></i>
                </button>
            </div>
            <div class="modal-body">
                <div data-scroll="true" data-height="300">
                    ...
                <div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light-primary font-weight-bold" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary font-weight-bold">Save changes</button>
            </div>
        </div>
    </div>
</div> --}}

    <!--begin::Modal-->
    <div class="modal fade" id="postHeaderEditModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Edit Facility</h5>
                    <button type="button" onclick="return editHeaderFunction();" class="btn-close" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="headerEditForm" method="POST" action="javascript:void(0)">
                        @csrf
                        <div class="alert alert-danger print-error-msg" style="display:none">
                            <ul></ul>
                        </div>
                        <input type="hidden" name="id" id="editId">
                        <div class="d-flex mb-5 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" id="facility_status" name="status"
                                    type="checkbox" value="1" />
                                {{-- <input class="form-check-input radio-btn" name="status" type="checkbox" value="1" {{$facility_item->status == 0 ? '' : 'checked'}}/> --}}
                            </label>
                            <!--end::Switch-->
                        </div>
                        <div class="mb-3" style="text-align:right;">
                            <button onclick="return editHeaderFunction();" data-bs-dismiss="modal" aria-label="Close"
                                style="margin-right:5px;" class="btn btn-secondary" type="button"
                                class="btn-close">Close</button>
                            <button class="btn btn-success btn-submit-edit">Update</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!--end::Modal-->
@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('facility.index', ['institute_slug' => $institute_slug, 'course_slug' => $course_slug]) }}",
                dom: 'Blfrtip',
                buttons: [{
                        extend: 'pdf',
                        exportOptions: {
                            columns: [0, 1, 2] // Column index which needs to export
                        }
                    },
                    {
                        extend: 'csv',
                        exportOptions: {
                            columns: [0, 1, 2] // Column index which needs to export
                        }
                    },
                    {
                        extend: 'excel',
                        exportOptions: {
                            columns: [0, 1, 2] // Column index which needs to export
                        }
                    }
                ],
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'title',
                        name: 'title'
                    },
                    {
                        data: 'status',
                        name: 'status'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    },
                ],
            });
        });
        var id
        var institute_slug
        var course_slug

        function setData(id, institute_slug, course_slug, status) {
            this.id = id
            this.institute_slug = institute_slug
            this.course_slug = course_slug

            status == 1 ? $("#facility_status").prop("checked", true) :
                $("#facility_status").prop("checked", false);
        }

        function editHeaderFunction() {
            $(".print-error-msg").css('display', 'none');
            document.getElementById("headerEditForm").reset();
            return true;
        }

        $("#headerEditForm").submit(function(e) {
            e.preventDefault();
            var formData = new FormData(this);
            formData.append('id', id);
            formData.append('institute_slug', institute_slug);
            formData.append('course_slug', course_slug);
            $.ajax({
                type: 'POST',
                url: "{{ route('facility.update') }}",
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                success: function(data) {
                    location.reload();
                }
            });

        });
    </script>
@endsection