@extends('includes/layout')
@section('main-page-content')
    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="card mb-4">
            <div class="card-body">
                <div class="border-bottom py-2 d-flex justify-content-between align-items-center">
                    <div>
                        <div class="h4 pb-0 mb-0">Meeting Document Settings</div>
                        <small>List</small>
                    </div>
                    <div class="d-flex justify-content-end align-items-center">
                        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createMeetingSetting">
                            <span class="mdi mdi-plus"></span>
                            Add Setting
                        </button>
                    </div>
                </div>
                <div class="mt-3">
                    <div class="table-responsive text-nowrap mt-3 border-bottom">
                        <table class="table">
                            <thead class="table-head-color bg-primary">
                                <tr>
                                    <th>
                                        Title
                                    </th>

                                    <th>
                                        Description
                                    </th>
                                    <th>
                                        Action
                                    </th>

                                </tr>
                            </thead>
                            <tbody class="table-border-bottom-0 table-body">
                                @foreach($settings as $setting)
                                    <tr>
                                        <td>{{ $setting->title }}</td>
                                        <td class="text-wrap">{!! $setting->description !!}</td>
                                        <td>
                                        @if (1 || in_array('Employee List Maintain', Session::get('permissions')))
                                        <div class="dropdown cursor-pointer d-flex justify-content-center">
                                        <div   id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false"><span class="mdi mdi-dots-vertical list_color"></span></div>
                                            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                                            <a class="dropdown-item py-1 ps-2" data-bs-toggle="modal" 
                                                    data-bs-target="#createMeetingSettings" 
                                                    data-id="{{ $setting->id }}" 
                                                    data-title="{{ $setting->title }}" 
                                                    data-description="{{ $setting->description }}" 
                                                    data-type_of_setting="{{ $setting->type_of_setting }}">
                                                        <span class="mdi mdi-square-edit-outline mdi-20px text-warning"></span> Edit
                                                    </a>

                                             <li><a class="dropdown-item py-1 ps-2"  data-id="{{ $setting->id }}" onclick="_delete_modal(this)"><span class="mdi mdi-trash-can-outline mdi-20px text-danger"></span> Delete</a></li>
                                                </ul>
                                        </div>
                                        </td>
                                        @endif
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <nav aria-label="Page navigation" class="mt-3 ">
                        <ul class="pagination justify-content-end pages_btn">
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>




    <div class="modal fade" id="createMeetingSetting" tabindex="-1" aria-labelledby="createPreLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-primary px-4 py-2">
                    <h5 class="modal-title text-white" id="createPreLabel">Add Setting</h5>
                </div>
                <form id="add_meeting_document_setting" onsubmit="return false;" enctype="multipart/form-data">
                    <div class="modal-body">
                        @csrf
                        <div class="row">
                            <div class="col-12 mb-3">
                                <label>Title</label>
                                <input type="text" name="setting_title" class="form-control" id="setting_title">
                            </div>
                            <div class="col-12 mb-3">
                                <label>Type</label>
                                <select class="form-control form-select type_of_setting" name="type_of_setting" id="type_of_setting">
                                    <option value="">Select an option</option>
                                    <option value="prestart">Prestart</option>
                                    <option value="toolbox">Toolbox</option>

                                </select>
                            </div>
                            <div class="col-12">
                                <label>Description</label>
                                <textarea class="form-control" name="setting_description" id="setting_description"></textarea>    
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer border-top">
                        <button type="button" class="btn btn-outline-dark" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- edit -->


    <div class="modal fade" id="createMeetingSettings" tabindex="-1" aria-labelledby="editPreLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-primary px-4 py-2">
                <h5 class="modal-title text-white" id="editPreLabel">Edit Setting</h5>
            </div>
            <form id="edit_meeting_document_setting" onsubmit="return false;" enctype="multipart/form-data">
                <div class="modal-body">
                    @csrf
                    <div class="row">
                        <div class="col-12 mb-3">
                            <input type="hidden" name="setting_id" class="form-control" id="setting_id">
                            <label>Title</label>
                            <input type="text" name="setting_title_edit" class="form-control" id="setting_title_edit">
                        </div>
                        <div class="col-12 mb-3">
                                <label>Type</label>
                                <select class="form-control form-select type_of_setting_edit" name="type_of_setting_edit" id="type_of_setting_edit">
                                    <option value="">Select an option</option>
                                    <option value="prestart">Prestart</option>
                                    <option value="toolbox">Toolbox</option>

                                </select>
                            </div>
                        <div class="col-12">
                            <label>Description</label>
                            <textarea class="form-control" name="setting_description_edit" id="setting_description_edit"></textarea>
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-top">
                    <button type="button" class="btn btn-outline-dark" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>


    <!--  -->
    <div class="modal fade" id="DeleteEmp" tabindex="-1" aria-labelledby="deletePreLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-danger px-4 py-2">
                    <h5 class="modal-title text-white" id="deletePreLabel">Delete</h5>
                </div>
                <div class="modal-body">
                    Are you sure you want to delete this record?<br><br>
                    <b class="text-warning">Warning:</b> This record will no longer be available. Please ensure you
                    genuinely want to delete it before clicking the delete button.
                </div>
                <div class="modal-footer border-top py-2">
                    <button type="button" class="btn btn-outline-dark" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-danger" id="delete-emp-id" data-
                        onclick="_delete(this)">Delete</button>
                </div>
            </div>
        </div>
    </div>
@endsection




@section('css-js')
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>

    <script>
           $(document).ready(function() {
                $('#setting_description').summernote({
                    placeholder: 'Type your content here...',
                    tabsize: 2,
                    height: 200
                });

                // Initialize Summernote for editing settings
                $('#setting_description_edit').summernote({
                    placeholder: 'Edit your content here...',
                    tabsize: 2,
                    height: 200
                });

                $('#createMeetingSettings').on('show.bs.modal', function (event) {
                    var button = $(event.relatedTarget);
                    var id = button.data('id');
                    var title = button.data('title');
                    var type = button.data('type_of_setting');
                    var description = button.data('description');
                    var modal = $(this);
                    modal.find('#setting_id').val(id);
                    modal.find('#setting_title_edit').val(title);
                    modal.find('#type_of_setting_edit').val(type); // Set the selected value
                    $('#setting_description_edit').summernote('code', description);
                });

            });
        function _delete_modal(_this) {
            var id = $(_this).attr('data-id');
            $('#delete-emp-id').attr('data-id', id);
            $('#DeleteEmp').modal('show');
        }

        function _delete(_this) {
         var id = $(_this).attr('data-id');

            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                type: "DELETE",
                url: "{{ url('/meeting/settings/delete') }}/" + id,
                success: function(response) {
                    toastr.success(response.message);
                    setTimeout(function() {
                        location.reload();
                    }, 1200); 
                    $('#DeleteEmp').modal('hide');

                    loader(false);


                },
                error: function(response) {
                    loader(false);
                    if (response.status == 500) {
                        toastr.error("Something went wrong")
                    } else {
                        toastr.error(response.responseJSON.message)
                    }
                }
            });
        }
        $('#add_meeting_document_setting').submit(function(e) {
            e.preventDefault();
            var formData = new FormData(this);
            var type_of_setting_edit = $('type_of_setting_edit').val();
            formData.append("type_of_setting_edit", type_of_setting_edit);
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                type: "POST",
                url: "/meeting/settings/store",
                data: formData,
                contentType: false,
                processData: false,
                success: function(response) {
                    toastr.success(response.message);
                    setTimeout(function() {
                        location.reload();
                    }, 1200); 


                },
                error: function(response) {
                    if (response.status == 422) {
                        var error = response.responseJSON.message;
                        toastr.error(error);
                    } else if (response.status == 500) {
                        console.log('response::',response)
                        toastr.error("Something went wrong");
                    } else {
                        toastr.error(response.responseJSON.message);
                    }
                }
            });

        });
        $('#edit_meeting_document_setting').submit(function(e) {
            e.preventDefault();
            var formData = new FormData(this);
            var type_of_setting = $('.type_of_setting').val();
            formData.append("type_of_setting", type_of_setting);
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                type: "POST",
                url: "/meeting/settings/edit",
                data: formData,
                contentType: false,
                processData: false,
                success: function(response) {
                    toastr.success(response.message);
                     console.log('respnse',response)
                    return 

                    setTimeout(function() {
                        location.reload();
                    }, 1000); 


                },
                error: function(response) {
                    if (response.status == 422) {
                        var error = response.responseJSON.message;
                        toastr.error(error);
                    } else if (response.status == 500) {
                        toastr.error("Something went wrong");
                    } else {
                        toastr.error(response.responseJSON.message);
                    }
                }
            });

        });
    </script>
@endsection