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

@section('main-content-tab')
    <div class="card mb-6">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center">
                <div class="pe-5">
                    <h1 class="fs-18px fw-500 mb-0">Facility</h1>
                    <p class="fs-14 text-cs-gray mb-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur delectus fugit necessitatibus numquam quod voluptates.</p>
                    {{--                    <a href="#" 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--}}
                    {{--                    </a>--}}
                    <button type="button" class="btn btn--primary rounded-btn" style="background: rgba(117,117,117,0.1);" data-bs-toggle="modal" data-bs-target="#addModal" id="faculty-modal"><i class="las la-pen"></i> Add Facility</button>

                </div>
                {{--                <button type="button" class="btn btn-icon btn-primary btn-lg rounded-circle"><i class="las la-play" style="font-size: 25px"></i></button>--}}
            </div>
        </div>
    </div>
    <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</h1>
            {{--            <a href="{{route('institute.profile.facilities.create', $slug)}}"  class="btn btn--primary rounded-btn" style="background: rgba(117,117,117,0.1);">--}}
            {{--                <i class="fa fa-pen"></i> Add Facility--}}
            {{--            </a>--}}
            <button type="button" class="btn btn--primary rounded-btn" style="background: rgba(117,117,117,0.1);" data-bs-toggle="modal" data-bs-target="#addModal" id="faculty-modal"><i class="las la-pen"></i> Add Facility</button>

        </div>
        <div class="card-body faculty-table-card">
            <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">Icon</th>
                    <th class="text-center">View</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 class="modal fade custom-modal" id="addModal">
        <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content">
                <div class="modal-header bg--primary text-white">
                    <h5 class="modal-title">Add Facility</h5>
                    <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 action="{{route('institute.profile.facilities.store', $slug)}}" class="form mb-15" name="institute" method="POST" id="kt_contact_form" enctype="multipart/form-data">
                        @csrf
                        <div class="px-lg-15 px-0">
                            <div class="row g-10">
                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <label for="name" class="required">Title (EN)</label>
                                        <input type="text" class="form-control form-control-solid" id="title" name="title" placeholder="Enter Title" required>
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <label for="name">Title (BN)</label>
                                        <input type="text" class="form-control form-control-solid" id="title_bn" name="title_bn" placeholder="Enter Title">
                                    </div>
                                </div>

                                <div class="d-flex flex-column mb-5 fv-row">
                                    <label class=" fs-5 fw-bold mb-2">Description (EN)</label>
                                    <textarea name="description" id="description" class="summernote form-control form-control-solid" placeholder="Enter Description (EN)" autocomplete="off">{{old('description', '')}}</textarea>
                                    @if($errors->has('description'))
                                        <span class="text-danger">{{ $errors->first('description') }}</span>
                                    @endif
                                </div>
                                <div class="d-flex flex-column mb-5 fv-row">
                                    <label class="fs-5 fw-bold mb-2">Description (BN)</label>
                                    <textarea name="description_bn" id="description_bn" class="summernote form-control form-control-solid" placeholder="Enter Description (BN)" autocomplete="off">{{old('description_bn', '')}}</textarea>
                                    @if($errors->has('description_bn'))
                                        <span class="text-danger">{{ $errors->first('description_bn') }}</span>
                                    @endif
                                </div>

                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <label for="name">Icon</label>
                                        <div class="w-100 rounded form-solid-bg mb-2 py-6 d-flex justify-content-center">
                                            <div class="image-input image-input-empty image-input-outline image-input-placeholder" data-kt-image-input="true">
                                                <!--begin::Preview existing avatar-->
                                                <div class="image-input-wrapper w-125px h-125px upload-bg" style="background-image: url('{{ asset($institute_about['video_thumbnail'] ?? '') }}');"></div>
                                                <!--end::Preview existing avatar-->
                                                <!--begin::Label-->
                                                <label class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="change" data-bs-toggle="tooltip" title="Change avatar">
                                                    <i class="bi bi-pencil-fill fs-7"></i>
                                                    <!--begin::Inputs-->
                                                    <input type="file" id="icon" name="icon" accept=".png, .jpg, .jpeg"/>
                                                    <input type="hidden" name="avatar_remove"/>
                                                    <!--end::Inputs-->
                                                </label>
                                                <!--end::Label-->
                                                <!--begin::Cancel-->
                                                <span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="cancel" data-bs-toggle="tooltip" title="Cancel avatar">
													<i class="bi bi-x fs-2"></i>
												</span>
                                                <!--end::Cancel-->
                                                <!--begin::Remove-->
                                                <span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="remove" data-bs-toggle="tooltip" title="Remove avatar">
													<i class="bi bi-x fs-2"></i>
												</span>
                                                <!--end::Remove-->
                                            </div>
                                        </div>
                                        <span style="font-size: 12px;color: red;">Suggested Image ratio: 60 x 60 | max-size: 50 KB</span>
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="row g-5">
                                        <div class="col-xl-12 col-md-12">
                                            <label class="form-check-label mb-1" for="flexSwitchDefault">
                                                Status
                                            </label>
                                            <div class="form-check form-switch form-check-custom form-check-primary form-check-solid">
                                                <input class="form-check-input radio-btn" name="status" type="checkbox" value="1" checked="checked"/>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex justify-content-center mt-10">
                                <button type="submit" class="btn btn-primary btn--primary rounded-btn">Save</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade custom-modal" id="editModal">
        <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content">
                <div class="modal-header bg--primary text-white">
                    <h5 class="modal-title">Edit Facility</h5>
                    <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 action="#" class="form mb-15" name="institute" method="POST" id="edit-form" enctype="multipart/form-data">
                        @csrf
                        @method("PUT")
                        <input type="hidden" name="avatar_data" value="">
                        <input type="hidden" value="{{$slug}}" name="slug_info"/>
                        <input type="hidden" name="id"/>
                        <div class="px-lg-15 px-0">
                            <div class="row g-10">
                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <label for="name">Title (EN)</label>
                                        <input type="text" class="form-control form-control-solid" id="title" name="title" placeholder="Enter Title">
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <label for="name">Title (BN)</label>
                                        <input type="text" class="form-control form-control-solid" id="title_bn" name="title_bn" placeholder="Enter Title">
                                    </div>
                                </div>

                                <div class="d-flex flex-column mb-5 fv-row">
                                    <label class=" fs-5 fw-bold mb-2">Description (EN)</label>
                                    <textarea name="description" id="description" class="summernote form-control form-control-solid" placeholder="Enter Description (EN)" autocomplete="off">{{old('description', '')}}</textarea>
                                </div>
                                <div class="d-flex flex-column mb-5 fv-row">
                                    <label class="fs-5 fw-bold mb-2">Description (BN)</label>
                                    <textarea name="description_bn" id="description_bn" class="summernote form-control form-control-solid" placeholder="Enter Description (BN)" autocomplete="off">{{old('description_bn', '')}}</textarea>
                                </div>

                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <label for="name">Icon</label>
                                        <div class="w-100 rounded form-solid-bg mb-2 py-6 d-flex justify-content-center">
                                            <div class="image-input image-input-empty image-input-outline image-input-placeholder" data-kt-image-input="true">
                                                <!--begin::Preview existing avatar-->
                                                <div class="image-input-wrapper w-125px h-125px upload-bg" style="background-image: url('{{ asset($institute_about['video_thumbnail'] ?? '') }}');"></div>
                                                <!--end::Preview existing avatar-->
                                                <!--begin::Label-->
                                                <label class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="change" data-bs-toggle="tooltip" title="Change avatar">
                                                    <i class="bi bi-pencil-fill fs-7"></i>
                                                    <!--begin::Inputs-->
                                                    <input type="file" id="icon" name="icon" accept=".png, .jpg, .jpeg"/>
                                                    <input type="hidden" name="avatar_remove"/>
                                                    <!--end::Inputs-->
                                                </label>
                                                <!--end::Label-->
                                                <!--begin::Cancel-->
                                                <span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="cancel" data-bs-toggle="tooltip" title="Cancel avatar">
													<i class="bi bi-x fs-2"></i>
												</span>
                                                <!--end::Cancel-->
                                                <!--begin::Remove-->
                                                <span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="remove" data-bs-toggle="tooltip" title="Remove avatar">
													<i class="bi bi-x fs-2"></i>
												</span>
                                                <!--end::Remove-->
                                            </div>
                                        </div>
                                        <span style="font-size: 12px;color: red;">Suggested Image ratio: 60 x 60 | max-size: 50 KB</span>
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="row g-5">
                                        <div class="col-xl-12 col-md-12">
                                            <label class="form-check-label mb-1" for="flexSwitchDefault">
                                                Status
                                            </label>
                                            <div class="form-check form-switch form-check-custom form-check-primary form-check-solid">
                                                <input class="form-check-input radio-btn" id="statusedit" name="status" type="checkbox" value="1" checked="checked"/>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex justify-content-center mt-10">
                                <button type="submit" class="btn btn-primary btn--primary rounded-btn">Save</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade custom-modal" id="viewModal">
        <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content">
                <div class="modal-header bg--primary text-white">
                    <h5 class="modal-title">View Facility</h5>
                    <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="px-lg-15 px-0">
                        <div class="row g-10">
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label for="name">Title (EN)</label>
                                    <input type="text" disabled class="form-control form-control-solid" id="view_title" name="title" placeholder="Enter Title">
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label for="name">Title (BN)</label>
                                    <input type="text" disabled class="form-control form-control-solid" id="view_title_bn" name="title_bn" placeholder="Enter Title">
                                </div>
                            </div>

                            <div class="d-flex flex-column mb-5 fv-row">
                                <label class=" fs-5 fw-bold mb-2">Description (EN)</label>
                                <textarea name="description" disabled id="view_description" class="summernote form-control form-control-solid" placeholder="Enter Description (EN)" autocomplete="off">{{old('description', '')}}</textarea>
                            </div>
                            <div class="d-flex flex-column mb-5 fv-row">
                                <label class="fs-5 fw-bold mb-2">Description (BN)</label>
                                <textarea name="description_bn" disabled id="view_description_bn" class="summernote form-control form-control-solid" placeholder="Enter Description (BN)" autocomplete="off">{{old('description_bn', '')}}</textarea>
                            </div>

                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label for="name">Icon</label>
                                    <div class="w-100 rounded form-solid-bg mb-2 py-6 d-flex justify-content-center">
                                        <div class="image-input image-input-empty image-input-outline image-input-placeholder" data-kt-image-input="true">
                                            <!--begin::Preview existing avatar-->
                                            <div class="image-input-wrapper w-125px h-125px upload-bg" style="background-image: url('{{ asset($institute_about['video_thumbnail'] ?? '') }}');"></div>
                                            <!--end::Preview existing avatar-->
                                            <!--begin::Label-->
                                            <label class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="change" data-bs-toggle="tooltip" title="Change avatar">
                                                <i class="bi bi-pencil-fill fs-7"></i>
                                                <!--begin::Inputs-->
                                                <input type="file" id="icon" name="icon" accept=".png, .jpg, .jpeg"/>
                                                <input type="hidden" name="avatar_remove"/>
                                                <!--end::Inputs-->
                                            </label>
                                            <!--end::Label-->
                                            <!--begin::Cancel-->
                                            <span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="cancel" data-bs-toggle="tooltip" title="Cancel avatar">
													<i class="bi bi-x fs-2"></i>
												</span>
                                            <!--end::Cancel-->
                                            <!--begin::Remove-->
                                            <span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="remove" data-bs-toggle="tooltip" title="Remove avatar">
													<i class="bi bi-x fs-2"></i>
												</span>
                                            <!--end::Remove-->
                                        </div>
                                    </div>
                                    <span style="font-size: 12px;color: red;">Suggested Image ratio: 60 x 60 | max-size: 50 KB</span>
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="row g-5">
                                    <div class="col-xl-12 col-md-12">
                                        <label class="form-check-label mb-1" for="flexSwitchDefault">
                                            Status
                                        </label>
                                        <div class="form-check form-switch form-check-custom form-check-primary form-check-solid">
                                            <input disabled class="form-check-input radio-btn" id="view_status" name="status" type="checkbox" value="1" checked="checked"/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </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>
        $('#edit-form').submit(function (event) {
            event.preventDefault();
            var formData = new FormData(this);
            var slug = $('input[name="slug_info"]').val();
            var avatar_data = $('input[name="avatar_data"]').val();

            var id = $('input[name="id"]').val();
            var actionUrl = "{{ route('institute.profile.facilities.update', ['slug' => ':slug', 'id' => ':id','avatar_data'=>':avatar_data']) }}";
            actionUrl = actionUrl.replace(':slug', slug).replace(':id', id);
            $.ajax({
                url: actionUrl,
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function (response) {
                    console.log(response);
                    location.reload();
                    $('#editModal').modal('hide');
                },
                error: function (xhr, status, error) {
                    console.error(xhr.responseText);
                }
            });
        });
    </script>
    <script>
        function loadView(id) {
            $.ajax({
                url: '{{ url('get-facility') }}?id=' + id,
                method: 'GET',
                success: function (returnData) {
                    $("input[name='title']").val(returnData.title);
                    $("input[name='title_bn']").val(returnData.title_bn);
                    $("textarea[name='description']").val(returnData.description);
                    $("textarea[name='description_bn']").val(returnData.description_bn);
                    if (returnData.status == 1) {
                        $('#view_status').prop('checked', true);
                    } else {
                        $('#view_status').prop('checked', false);
                    }
                    var avatarUrl = returnData.icon;
                    if (avatarUrl) {
                        var assetAvatarUrl = '{{ asset('') }}' + avatarUrl;
                        $('.image-input-wrapper').css('background-image', 'url(' + assetAvatarUrl + ')');
                    } else {
                        $('.image-input-wrapper').css('background-image', 'none');
                    }

                    $('#viewModal').modal('show');
                },
                error: function (xhr, status, error) {
                    console.error(xhr.responseText);
                }
            });
        }
    </script>
    <script>
        function loadEdit(id) {
            $("input[name='id']").val(id);
            $.ajax({
                url: '{{ url('get-facility') }}?id=' + id,
                method: 'GET',
                success: function (returnData) {
                    $("input[name='title']").val(returnData.title);
                    $("input[name='title_bn']").val(returnData.title_bn);
                    $("textarea[name='description']").val(returnData.description);
                    $("textarea[name='description_bn']").val(returnData.description_bn);
                    if (returnData.status == 1) {
                        $('#statusedit').prop('checked', true);
                    } else {
                        $('#statusedit').prop('checked', false);
                    }
                    var avatarUrl = returnData.icon;
                    if (avatarUrl) {
                        var assetAvatarUrl = '{{ asset('') }}' + avatarUrl;
                        $('.image-input-wrapper').css('background-image', 'url(' + assetAvatarUrl + ')');
                    } else {
                        $('.image-input-wrapper').css('background-image', 'none');
                    }

                    if (avatarUrl) {
                        $("input[name='avatar_data']").val(avatarUrl);
                    }

                    $('#editModal').modal('show');
                },
                error: function (xhr, status, error) {
                    console.error(xhr.responseText);
                }
            });
        }
    </script>
    <script type="text/javascript">
        function isValidURL(url) {
            try {
                new URL(url);
                return true;
            } catch (error) {
                return false;
            }
        }
        $(function () {
            var table = $('.data-table').DataTable({
                processing: true,
                serverSide: true,
                aaSorting: [],
                lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
                ajax: "{{ route('institute.profile.facilities', $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: 'icon', name: 'icon',
                        render: function (data, type, full, meta) {
                            if (data) {
                                var imageUrl = "<img class='rounded-circle' src=\"" + data + "\" height=\"40\"/>";
                                if(!isValidURL(data)){
                                    imageUrl = "<img class='rounded-circle' src=\"" + "{{URL::asset('/')}}" + data + "\" height=\"40\"/>";
                                }
                                return imageUrl;
                            } else {
                                return '';
                            }
                        }
                    },
                    {data: 'view', name: 'view'},
                    {data: 'status', name: 'status'},
                    {data: 'action', name: 'action', orderable: false, searchable: false},
                ],
            });

        });
    </script>
    <script>
        $(document).ready(function(){
            $('.institute-profile-tab-facilities').addClass('active');
        });
    </script>
@endsection