@extends('layouts.adminmaster')
@section('styles')
    <!-- INTERNAL Data table css -->
    <link href="{{ asset('build/assets/plugins/datatable/css/dataTables.bootstrap5.min.css') }}?v=1746440847"
        rel="stylesheet" />
    <link href="{{ asset('build/assets/plugins/datatable/responsive.bootstrap5.css') }}?v=1746440847"
        rel="stylesheet" />

    <!-- INTERNAL Sweet-Alert css -->
    <link href="{{ asset('build/assets/plugins/sweet-alert/sweetalert.css') }}?v=1746440847" rel="stylesheet" />
  <style>
    .logo-upload{
        position: relative;
    }
      .logo-upload-cancel-badge{
        padding: 5px 6px;
        position: absolute;
        inset-inline-end: 5px;
        inset-block-start: -38px;
    }
    .logo-upload-cancel-badge:hover{
     color:#fff;
    }
  </style>
@endsection
@section('content')
    @can('Addspace Create')
        <div class="col-xl-12 col-lg-12 col-md-12 ">
            <div class="card mt-5">
                <form  method="POST" enctype="multipart/form-data" id="addSpaceCreateForm">
                    {{-- <input type="hidden" name="id" id="addSpaceId" value=""> --}}
                    <input type="hidden" name="id" id="addSpaceId" value="{{ old('id', $existingId ?? '') }}">
                    @csrf
                    <div class="card-header border-0 justify-content-between">
                        <h4 class="card-title" id="addspacetitle">{{lang('Create an AddSpace')}}</h4>
                        <div class="form-group mb-0">
                            <div class="switch_section m-0">
                                <div class="switch-toggle d-flex">
                                    <label class="form-label pe-2">{{lang('Status')}}</label>
                                    <a class="onoffswitch2">
                                        <input type="checkbox"  name="status" id="status" class=" toggle-class onoffswitch2-checkbox" >
                                        <label for="status" class="toggle-class onoffswitch2-label" ></label>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row">
                           <div class="col-xl-6">
                            <div class="form-group">
                                <label class="form-label">{{lang('Title')}} <span class="text-red">*</span></label>
                                <input type="text" class="form-control @error('addSpaceTitle') is-invalid @enderror"
                                    name="addSpaceTitle" id="addSpaceTitle" maxlength="120">
                                    <span id="addSpaceTitleError" class="text-danger alert-message"></span>
                            </div>
                           </div>
                           <div class="col-xl-6">
                            <div class="form-group">
                                <label class="form-label">{{lang('Link')}} <span class="text-red">*</span></label>
                                <input type="text" class="form-control" name="addSpaceLink" id="addSpaceLink">
                                    <span id="addSpaceLinkError" class="text-danger alert-message"></span>
                            </div>
                           </div>
                        </div>

                        <div class="form-group">
                            <div class="col-xl-12 col-lg-8 col-md-8 ">
                                <label class="form-label pe-2">{{lang('Image')}} <span class="text-red">*</span>
                                <small class="text-muted ">('Max: 5mb, Size: 380*480 recommended') </small></label>
                                <div class="spfileupload">
                                    <div class="row">
                                        <div class="col-xl-6 col-lg-12 col-md-12">
                                            <div class="form-group">

                                                <div class="@error('addspace') is-invalid @enderror">
                                                    <div class="row">
                                                       <div class="col-xl-12">
                                                        <div class="input-group file-browser">
                                                            <input class="form-control" id="addspaceImage" name="addspaceImage" type="file"autocomplete="off">
                                                        </div>
                                                       </div>
                                                       <div class="col-xl-12">
                                                        <div class="mt-3">
                                                            <span class="logo-upload">
                                                            <img src="{{ asset('build/assets/images/photos/addimage.jpg') }}" alt="" height="100" width="100" class="rounded-2" id="add-img">
                                                                <a href="javascript:void(0);" class="d-none badge rounded-pill bg-danger avatar-badge logo-upload-cancel-badge">
                                                                    <i class="fe fe-trash"></i>
                                                                </a>
                                                            </span>
                                                        </div>
                                                       </div>
                                                    </div>

                                                </div>
                                                <span id="addspaceImageError" class="text-danger alert-message"></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer">
                        <div class="form-group">
                            <button type="submit" class="btn btn-secondary" id="addSpaceSave">{{lang('Create Add')}}</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    @endcan
    <div class="col-xl-12 col-lg-12 col-md-12">
        <div class="card mb-0">
            <div class="card-header d-sm-max-flex border-0">
                <h4 class="card-title">{{ lang('AddSpace List') }}</h4>
            </div>
            <div class="card-body" style="min-height: 230px;" >
                <div class="table-responsive spruko-delete" style="min-height: 230px;">
                    @can('Addspace Delete')
                        <button id="massdeletenotify" class="btn btn-outline-light btn-sm mb-4 data-table-btn"
                            style="display: none;"><i class="fe fe-trash"></i> {{ lang('Delete') }}</button>
                    @endcan
                    <table class="table table-bordered border-bottom text-nowrap ticketdeleterow w-100" id="articlelist" >
                        <thead>
                            <tr>
                                <th width="9">{{ lang('Sl.No') }}</th>
                                @can('Addspace Delete')
                                    <th width="10">
                                        <input type="checkbox" id="customCheckAll">
                                        <label for="customCheckAll"></label>
                                    </th>
                                @endcan
                                @cannot('Addspace Delete')
                                    <th width="10">
                                        <input type="checkbox" id="customCheckAll" disabled>
                                        <label for="customCheckAll"></label>
                                    </th>
                                @endcannot

                                <th>{{ lang('Add Space Title') }}</th>
                                <th>{{ lang('Image') }}</th>
                                <th class="w-5">{{ lang('Status') }}</th>
                                <th class="w-5">{{ lang('Actions') }}</th>
                            </tr>
                        </thead>
                        <div id="hideAfterloading"><img src="{{ asset('build/assets/images/loader.svg') }}" alt="">
                            <p>loading.. Please Wait</p>
                        </div>
                    </table>
                </div>
            </div>
        </div>
    </div>



    {{-- Createing a separate form to test OPENAPI

    <form id="openai-form" class="m-5">
        <textarea name="message" id="message" rows="4" placeholder="Ask something..."></textarea>
        <button type="submit">Submit</button>
    </form>

    <div id="response"></div> --}}


    {{-- Creating a separate from for Gemini Api testing --}}

    {{-- <form id="text-generator-form" class="m-5">
        <label for="prompt">Enter Prompt:</label>
        <input type="text" id="prompt" name="prompt" required>
        <button type="submit">Generate Text</button>
    </form>

    <h3>Generated Text:</h3>
    <div id="generated-text"></div> --}}

@endsection

@section('scripts')
     <!-- INTERNAL Sweet-Alert js-->
     <script src="{{ asset('build/assets/plugins/sweet-alert/sweetalert.min.js') }}"></script>

     <!-- INTERNAL Data tables -->
    <script src="{{ asset('build/assets/plugins/datatable/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('build/assets/plugins/datatable/js/dataTables.bootstrap5.js') }}"></script>
    <script src="{{ asset('build/assets/plugins/datatable/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('build/assets/plugins/datatable/responsive.bootstrap5.min.js') }}"></script>

    <script>
        document.addEventListener("DOMContentLoaded", (event) => {

            let tableData = @json($addspace);
            let dateFormat = @json(setting('date_format'));
            let delPerm = @json(Auth::user()->can('Addspace Delete'));
            let editPerm =@json(Auth::user()->can('Addspace Edit'));
            var SITEURL = '{{ url('') }}';

            var dataTable;
            var tableDropDown;

            loadTable(tableData);

            function truncateTitle(title) {
                const maxLength = 40;
                return title.length > maxLength ? title.substring(0, maxLength) + '...' : title;
            }

            function loadTable(tableData) {
                document.getElementById('hideAfterloading')?.classList.remove('d-none');
                document.getElementById('theadShow')?.classList.add('d-none');
                if (tableDropDown)
                    tableDropDown.destroy();

                if ($.fn.DataTable.isDataTable('#articlelist')) {
                    $('#articlelist').DataTable().clear().destroy();
                }

                if (document.getElementById('tableBody'))
                    document.getElementById('tableBody').remove();

                let createTbody = document.createElement('tbody');
                createTbody.setAttribute('id', "tableBody");
                let rows = tableData.map((data, index) => {

                    return `
                    <tr>
                        <td>${index + 1}</td>
                        <td class="text-center">
                            ${delPerm
                                ? ` <input type="checkbox" name="spruko_checkbox[]" class="checkall" value="${data.id}">`: '~'
                            }
                        </td>

                        <td >${truncateTitle(data.title)}</td>

                        <td>
                            <a href="${data.link}" target="_blank"><img src="${SITEURL}/uploads/addspace/${data.image}" width="50px" height="50px" alt=""></a>
                        </td>

                        <td>

                           ${ editPerm ? ( data.status == '1' ? `<label class="custom-switch form-switch mb-0">
                                <input type="checkbox" name="status" data-id="${data.id}" id="myonoffswitch${data.id}" value="1" class="custom-switch-input tswitch" checked>
                                <span class="custom-switch-indicator"></span>
                            </label>` : `<label class="custom-switch form-switch mb-0">
                                <input type="checkbox" name="status" data-id="${data.id}" id="myonoffswitch${data.id}" value="1" class="custom-switch-input tswitch">
                                <span class="custom-switch-indicator"></span>
                            </label>` ) : '~' }

                        </td>

                        <td>
                            <div class="btn-list">
                                ${editPerm ? `<a href="javascript:void(0)" class="action-btns1 edit-btn" data-id="${data.id}">
                                            <i class="feather feather-edit text-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="{{lang('Edit')}}"></i>
                                        </a>` : '~'
                                }


                                ${delPerm ? `<a href="javascript:void(0)" class="action-btns1" data-id="${data.id}" id="show-delete" data-bs-toggle="tooltip" data-bs-placement="top" title="{{lang('Delete')}}"><i class="feather feather-trash-2 text-danger"></i></a>`
                                : '~'
                                }

                            </div>
                        </td>

                    </tr>
                `;
                });

                if (tableData.length == 0)
                    createTbody.innerHTML = ` `;
                else
                    createTbody.innerHTML = rows.join('');


                // Append the tbody to your table
                // Replace 'your-table-id' with the actual ID of your table element
                document.getElementById('articlelist').appendChild(createTbody);

                document.getElementById('hideAfterloading')?.classList.add('d-none');
                document.getElementById('theadShow')?.classList.remove('d-none');

                // Csrf field
                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    });

                    let prev = {!! json_encode(lang('Previous')) !!};
                    let next = {!! json_encode(lang('Next')) !!};
                    let nodata = {!! json_encode(lang('No data available in table')) !!};
                    let noentries = {!! json_encode(lang('No entries to show')) !!};
                    let showing = {!! json_encode(lang('showing page')) !!};
                    let ofval = {!! json_encode(lang('of')) !!};
                    let maxRecordfilter = {!! json_encode(lang('- filtered from ')) !!};
                    let maxRecords = {!! json_encode(lang('records')) !!};
                    let entries = {!! json_encode(lang('entries')) !!};
                    let show = {!! json_encode(lang('Show')) !!};
                    let search = {!! json_encode(lang('Search...')) !!};

                    // Datatable
                    dataTable = $('#articlelist').DataTable({
                        language: {
                            searchPlaceholder: search,
                            scrollX: "100%",
                            sSearch: '',
                            paginate: {
                                previous: prev,
                                next: next
                            },
                            emptyTable: nodata,
                            infoFiltered: `${maxRecordfilter} _MAX_ ${maxRecords}`,
                            info: `${showing} _PAGE_ ${ofval} _PAGES_`,
                            infoEmpty: noentries,
                            lengthMenu: `${show} _MENU_ ${entries} `,
                        },
                        order: [],
                        columnDefs: [{
                            "orderable": false,
                            "targets": [0, 1, 4]
                        }],
                    });

                    document.querySelector('.card-body').style.setProperty('filter','')

                    // select2 js
                    $('.form-select').select2({
                        minimumResultsForSearch: Infinity,
                        width: '100%'
                    });

                    $('.form-select').on('focus', function() {
                        $(this).attr('aria-hidden', 'false');
                    });



                initializeTooltips();
                // checkboxNoLabel()
                // buttonAlertFunctions();
                // Pagenate();

                function initializeTooltips() {
                    var tooltipElements = document.querySelectorAll('[data-bs-toggle="tooltip"]');
                    tooltipElements.forEach(function(element) {
                        new bootstrap.Tooltip(element);
                    });
                }


            }

            let loadFile = (event) => {
                if (!event.target.files[0]) return;
                var reader = new FileReader();
                reader.onload = function () {
                    var output = document.getElementById('add-img');
                    if (event.target.files[0].type.match('image.*')) {
                        output.src = reader.result;
                    } else {
                        event.target.value = '';
                        alert('please select a valid image');
                    }
                };
                reader.readAsDataURL(event.target.files[0]);
            };
            // for profile photo update
            let ProfileChange = document.querySelector('#addspaceImage');
            ProfileChange.onchange = (e) => {
                loadFile(e);
                document.querySelector('.bg-danger.avatar-badge').classList.remove('d-none')
            };

            document.querySelector('.bg-danger.avatar-badge').onclick = () => {
                var output = document.getElementById('add-img');
                output.src = '{{ asset('build/assets/images/photos/addimage.jpg') }}'; // Set to original image
                document.querySelector('#addspaceImage').value = ''; // Clear the file input
                document.querySelector('.bg-danger.avatar-badge').classList.add('d-none'); // Hide the delete button
            };

             //Mass Delete
             $('body').on('click', '#massdeletenotify', function() {
                        var id = [];
                        var parent = [];
                        $('.checkall:checked').each(function() {
                            id.push($(this).val());
                            parent.push($(this).closest('tr'));
                        });
                        if (id.length > 0) {
                            swal({
                                    title: `{{ lang('Are you sure you want to continue?', 'alerts') }}`,
                                    text: "{{ lang('This might erase your records permanently', 'alerts') }}",
                                    icon: "warning",
                                    buttons: true,
                                    dangerMode: true,
                                })
                                .then((willDelete) => {
                                    if (willDelete) {
                                        $.ajax({
                                            url: "{{ route('AddSpaceDeleteAll') }}",
                                            method: "post",
                                            data: {
                                                id: id
                                            },
                                            success: function(data) {
                                                toastr.success(data.success);
                                                parent.forEach(element => {
                                                    element.addClass(
                                                        'fade-out');
                                                });

                                                let newData = tableData.filter(item => !id.includes(String(item.id)));
                                                tableData = newData;
                                                document.getElementById('hideAfterloading')?.classList.remove('d-none');
                                                document.querySelector('.card-body').style.setProperty('filter','blur(1px)');

                                                setTimeout(() => {
                                                    loadTable(
                                                        tableData);
                                                }, 1500);
                                                $('.checkall:checked').prop('checked', false);
                                                $('#customCheckAll').prop('checked', false);
                                                // location.reload();

                                            },
                                            error: function(data) {
                                                console.log(data);
                                            }
                                        });
                                    }
                                });
                        } else {
                            toastr.error(
                                '{{ lang('Please select at least one check box.', 'alerts') }}'
                            );
                        }

                    });

                     //checkbox script
                     $(document).ready(function() {

                        $(document).on('click', '#customCheckAll', function() {
                            $('.checkall').prop('checked', this.checked);
                            updateMassDeleteVisibility();
                        });

                        $(document).on('click', '.checkall', function() {
                            updateCustomCheckAll();
                            updateMassDeleteVisibility();
                        });


                        $(document).on('click', '.pagination a', function() {

                            setTimeout(function() {
                                updateMassDeleteVisibility();
                            }, 100);
                        });


                        $('#customCheckAll').prop('checked', false);


                        function updateMassDeleteVisibility() {
                            if ($('.checkall:checked').length === 0) {
                                $('#massdeletenotify').hide();
                            } else {
                                $('#massdeletenotify').show();
                            }
                        }


                        function updateCustomCheckAll() {
                            var totalCheckboxes = $('.checkall').length;
                            var checkedCheckboxes = $('.checkall:checked').length;

                            if (checkedCheckboxes === totalCheckboxes) {
                                $('#customCheckAll').prop('checked', true);
                            } else {
                                $('#customCheckAll').prop('checked', false);
                            }
                        }
                    });

                      // Delete addspace
                      $('body').on('click', '#show-delete', function() {
                        var id = $(this).data("id");
                        let parent = $(this).closest('tr');
                        let _url = `{{ url('/admin/addspace/delete/${id}') }}`;
                        let _token = $('meta[name="csrf-token"]').attr('content');
                        swal({
                                title: `{{ lang('Are you sure you want to continue?', 'alerts') }}`,
                                text: "{{ lang('This might erase your records permanently', 'alerts') }}",
                                icon: "warning",
                                buttons: true,
                                dangerMode: true,
                            })
                            .then((willDelete) => {
                                if (willDelete) {
                                    $.ajax({
                                        url: _url,
                                        type: 'DELETE',
                                        data: {
                                            _token: _token
                                        },
                                        success: function(response) {
                                            toastr.success(response.success);
                                            $(parent[0]).addClass('fade-out');
                                            let newData = tableData.filter(item => item.id != parseInt(id));
                                            tableData = newData;document.getElementById('hideAfterloading')?.classList.remove('d-none');
                                            document.querySelector('.card-body').style.setProperty('filter','blur(1px)');
                                            setTimeout(() => {
                                                parent.remove();
                                                loadTable(tableData);
                                            }, 1500);
                                            // location.reload();
                                        },
                                        error: function(data) {
                                            console.log('Error:', data);
                                        }
                                    });
                                }
                            });
                    });

                     // Status change department
                     $('body').on('click', '.tswitch', function() {
                        var _id = $(this).data("id");
                        var status = $(this).prop('checked') == true ? '1' : '0';
                        $.ajax({
                            type: "post",
                            url: SITEURL + "/admin/addspace/status" + '/' + _id,
                            data: {
                                'status': status
                            },
                            success: function(data) {
                                toastr.success(data.success);
                            },
                            error: function(data) {
                                console.log('Error:', data);
                            }
                        });
                    });


                    document.getElementById('addSpaceCreateForm').addEventListener('submit', function(event) {
                        event.preventDefault();
                        var addSpaceTitle = $('#addSpaceTitle').val().trim();
                        var addSpaceLink = $('#addSpaceLink').val().trim();
                        var addspaceImage = $('#addspaceImage').val();
                        var id = document.getElementById('addSpaceId').value;

                        var hasError = false;

                        // Clear previous error messages
                        $('#addSpaceTitleError').text('');
                        $('#addSpaceLinkError').text('');
                        $('#addspaceImageError').text('');

                        // Validate required fields
                        if (!addSpaceTitle) {
                            $('#addSpaceTitleError').text('Title field is required.');
                            hasError = true;
                        }
                        if (!addSpaceLink) {
                            $('#addSpaceLinkError').text('Link field is required.');
                            hasError = true;
                        }
                        if (!id && !addspaceImage) {
                            $('#addspaceImageError').text('Image field is required.');
                            hasError = true;
                        }

                        if (hasError) {
                            return;
                        }

                        const formData = new FormData(this);
                        formData.append('id', id);
                        const title = document.getElementById('addSpaceTitle').value; // Get the title from the input
                        const method = 'POST';
                        const url = '{{ route("createAddSpace") }}';
                        fetch(url, {
                            method: method,
                            body: formData,
                            headers: {
                                'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value // Include CSRF token
                            },
                        })
                        .then(response => {
                            if (!response.ok) {
                                throw new Error('Network response was not ok');
                            }
                            return response.json();
                        })
                        .then(data => {
                            // Handle success
                            if (data.success) {
                                toastr.success(data.success);
                                document.getElementById('addSpaceCreateForm').reset();
                                document.getElementById('add-img').src = `${SITEURL}/public/uploads/addspace/addimage/addimage.jpg`;
                                var output = document.getElementById('add-img');
                                output.src = '{{ asset('build/assets/images/photos/addimage.jpg') }}';

                                let newAdd = data.data;
                                let exists = false;
                                tableData = tableData.map(category => {
                                    if (category.id === newAdd.id) {
                                        exists = true;
                                        return newAdd;
                                    }
                                    return category;
                                });

                                if (!exists) {
                                    tableData.push(newAdd);
                                }
                                document.getElementById('hideAfterloading')?.classList.remove('d-none');
                                document.querySelector('.card-body').style.setProperty('filter','blur(1px)');
                                loadTable(tableData);
                                document.getElementById('addspacetitle').innerText = "Create an Addspace";
                                document.getElementById('addSpaceSave').innerText = "Create Add";
                                document.querySelector('.bg-danger.avatar-badge').classList.add('d-none');



                            } else {
                                // Handle validation errors returned from server
                                toastr.error("Please fill all required fields");
                                for (const [key, value] of Object.entries(data.errors)) {
                                    const errorMessageElement = document.getElementById(`${key}Error`);
                                    if (errorMessageElement) {
                                        errorMessageElement.textContent = value.join(', ');
                                    }
                                }
                            }
                        })
                        .catch(error => {
                            console.error('Error:', error);
                        });
                    });

                    // document.getElementById('tableBody').addEventListener('click', function(event) {
                    document.addEventListener('click', (event) => {
                    const targetElement = event.target.closest('.edit-btn');
                    if(targetElement){
                            const id = event.target.closest('.edit-btn').getAttribute('data-id');
                            editAddSpace(id);
                        }
                    });

                    function editAddSpace(id) {
                        $.ajax({
                            url: `${SITEURL}/admin/addspace/${id}`, // Adjust the URL according to your route
                            method: 'GET',
                            success: function(data) {

                                document.getElementById('addspacetitle').innerText = "Edit Addspace"
                                document.querySelector('input[name="addSpaceTitle"]').value = data.data.title;
                                document.querySelector('input[name="addSpaceLink"]').value = data.data.link;
                                document.querySelector('input[name="status"]').checked = data.data.status == '1';
                                document.getElementById('addSpaceId').value = id;
                                document.getElementById('addSpaceSave').innerText = "Save"

                                // Update image preview if there's an image
                                if (data.data.image) {
                                    document.getElementById('add-img').src = `${SITEURL}/uploads/addspace/${data.data.image}`;
                                } else {
                                    document.getElementById('add-img').src = `${SITEURL}/build/assets/images/photos/addimage.jpg`; // Default image
                                }

                                  // Scroll to the form
                                document.querySelector('#addSpaceCreateForm').scrollIntoView({ behavior: 'smooth' });
                            },
                            error: function(err) {
                                console.error('Error fetching addSpace data:', err);
                                // Handle error (e.g., show a message)
                            }
                        });
                    }

    });





    </script>


    {{-- <script>
        var SITEURL = '{{ url('') }}';
        document.getElementById('openai-form').addEventListener('submit', async function(event) {
        event.preventDefault();

        const message = document.getElementById('message').value;

        const response = await fetch(SITEURL +'/admin/openai/generate', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({ message }),
        });

        const data = await response.json();
        document.getElementById('response').innerText = data.choices[0].message.content;
    });

    </script> --}}

@endsection