@extends('layouts.adminmaster')

@section('styles')

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

<!-- INTERNAL Sweet-Alert css -->
<link href="{{asset('build/assets/plugins/sweet-alert/sweetalert.css')}}?v=1746412902" rel="stylesheet" />

@endsection

					@section('content')

					<!--Page header-->
					<div class="page-header d-xl-flex d-block">
						<div class="page-leftheader">
							<h4 class="page-title"><span class="font-weight-normal text-muted ms-2">{{lang('Feature Box', 'menu')}}</span></h4>
						</div>
					</div>
					<!--End Page header-->

					<!-- Feature Box Section -->
					<div class="col-xl-12 col-lg-12 col-md-12">
						<div class="card ">
							<form method="POST" action="{{url('/admin/feature-box/feature')}}" enctype="multipart/form-data">
								@csrf

								 

								<div class="card-header border-0 d-sm-max-flex">
									<h4 class="card-title">{{lang('Feature Box Section')}}</h4>
								</div>
								<div class="card-body" >
									<div class="row">
										<div class="col-sm-12 col-md-12">
											<input type="hidden" class="form-control " name="id" value="{{$basic->id}}">
											<div class="form-group">
												<label class="form-label">{{lang('Title')}} <span  class="text-red">*</span></label>
												<input type="text" class="form-control @error('featuretitle') is-invalid @enderror" name="featuretitle" value="{{$basic->featuretitle}}">
												@error('featuretitle')

													<span class="invalid-feedback d-block" role="alert">
														<strong>{{ lang($message) }}</strong>
													</span>
												@enderror

											</div>
										</div>
										<div class="col-sm-12 col-md-12">
											<div class="form-group">
												<label class="form-label">{{lang('Subtitle')}}</label>
												<input type="text" class="form-control @error('featuresub') is-invalid @enderror" name="featuresub" value="{{$basic->featuresub}}">
												@error('featuresub')

													<span class="invalid-feedback d-block" role="alert">
														<strong>{{ lang($message) }}</strong>
													</span>
												@enderror

											</div>
										</div>
									</div>
								</div>
								<div class="col-md-12 card-footer ">
									<div class="form-group float-end">
										{{-- <input type="submit" class="btn btn-secondary" value="{{lang('Save Changes')}}" onclick="this.disabled=true;this.form.submit();"> --}}
                                        <button type="submit" class="btn btn-secondary" onclick="this.disabled=true;this.innerHTML=`Saving <i class='fa fa-spinner fa-spin'></i>`;this.form.submit();">{{lang('Save Changes')}}</button>
									</div>
								</div>
						</form>
						</div>
					</div>
					<!-- End Feature Box Section -->

					<!-- Feature Box List -->
					<div class="col-xl-12 col-lg-12 col-md-12">
						<div class="card">
							<div class="card-header border-0 d-sm-max-flex">
								<h4 class="card-title ">{{lang('Feature Box List')}}</h4>
								<div class="card-options  mt-sm-max-2">
									@can('Feature Box Create')

									<a href="javascript:void(0)" class="btn btn-secondary me-3" id="create-new-featurebox">{{lang('Add Feature')}}</a>
									@endcan

								</div>
							</div>
							<div class="card-body" >
								<div class="table-responsive spruko-delete">
									@can('Feature Box 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="featurebox">
										<thead>
											<tr>
												<th width="10" >{{lang('Sl.No')}}</th>
												@can('Feature Box Delete')

												<th width="10" >
													<input type="checkbox"  id="customCheckAll">
													<label  for="customCheckAll"></label>
												</th>
												@endcan
												@cannot('Feature Box Delete')

												<th width="10" >
													<input type="checkbox"  id="customCheckAll" disabled>
													<label  for="customCheckAll"></label>
												</th>
												@endcannot

												<th >{{lang('Title')}}</th>
												<th >{{lang('Subtitle')}}</th>
												<th >{{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>
					<!-- End Feature Box List -->
					@endsection

		@section('modal')

		   @include('admin.featurebox.model')

		@endsection

@section('scripts')

<!-- INTERNAL Vertical-scroll js-->
<script src="{{asset('build/assets/plugins/vertical-scroll/jquery.bootstrap.newsbox.js')}}?v=1746412902"></script>


<!-- INTERNAL Index js-->
@vite(['resources/assets/js/support/support-sidemenu.js'])

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

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

<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", (event) => {
            let dateFormat = @json(setting('date_format'));
            let editPerm = @json(Auth::user()->can('Feature Box Edit'));
            let delPerm = @json(Auth::user()->can('Feature Box Delete'));

            var dataTable;
            var tableDropDown;
            let tableData = @json($featureboxes);
            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 (dataTable)
                //     dataTable.destroy();
                if ($.fn.DataTable.isDataTable('#featurebox')) {
                    $('#featurebox').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>${data.title ? truncateTitle(data.title) : ''}</td>

                            <td> ${data.subtitle ? truncateTitle(data.subtitle) : ''} </td>

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


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

                                </div>
                            </td>

                        </tr>
                    `;
                });

                createTbody.innerHTML = rows.length ? rows.join('') : '';
                document.getElementById('featurebox').appendChild(createTbody);

                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...')) !!};
                // Reinitialize DataTable
                dataTable = $('#featurebox').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, 3]
                    }],
                });

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

                $('.form-select').select2({
                        minimumResultsForSearch: Infinity,
                        width: '100%'
                    });
                $('.form-select').on('focus', function() {
                    $(this).attr('aria-hidden', 'false');
                });
                document.getElementById('hideAfterloading')?.classList.add('d-none');
                document.getElementById('theadShow')?.classList.remove('d-none');





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

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

        $(function() {
            "use strict";

            (function($)  {

                // Variables
                var SITEURL = '{{url('')}}';

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

                /*  When user click add featurebox button */
                $('#create-new-featurebox').on('click', function () {
                    $('#nameError').html('');
                    $('#descriptionError').html('');
                    $('#ImageError').html('');
                    $('#btnsave').val("create-feature");
                    $('#featurebox_id').val('');
                    $('#featurebox_form').trigger("reset");
                    $('.modal-title').html("{{lang('Add New Feature Box')}}");
                    $('.imageshowdiv').hide();
                    $('#addfeature').modal('show');
                });

                /* When click edit featurebox */
                $('body').on('click', '.edit-testimonial', function () {
                    var testimonial_id = $(this).data('id');
                    $.get('feature-box/' + testimonial_id , function (data) {
                        $('#featurebox_form').trigger("reset");
                        $('#nameError').html('');
                        $('#descriptionError').html('');
                        $('#ImageError').html('');
                        $('.modal-title').html("{{lang('Edit Feature Box')}}");
                        $('#btnsave').val("edit-testimonial");
                        $('#addfeature').modal('show');
                        $('#featurebox_id').val(data.id);
                        $('#name').val(data.title);
                        $('#description').val(data.subtitle);
                        $('#featureboxurl').val(data.featureboxurl);
                        if(data.imageurl != null){
                            // const fileInput = document.querySelector('[name="image"]');
                            // const dataTransfer = new DataTransfer();
                            // dataTransfer.items.add(new File([], data.image));
                            // fileInput.files = dataTransfer.files;
                            $('.imageshowdiv').show();
                            $('#featureImage').attr('src', data.imageurl);
                            $('.delete-image').attr('data-id', data.id);
                        }else{
                            $('.imageshowdiv').hide();
                        }

                        if (data.url_checkbox == "on")
                        {
                            $('#url_checkbox').prop('checked', true);
                        }else{
                            $('#url_checkbox').prop('checked', false);
                        }

                    })
                });

                // Delete Featurebox Image
                $('body').on('click', '.delete-image', function () {
                    var featureId = $(this).data("id");
                    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({
                                type: "post",
                                url: SITEURL + "/admin/feature-box/image/delete/" +featureId,
                                success: function (data) {
                                    toastr.success(data.success);
                                    $('.imageshowdiv').hide();
                                },
                                error: function (data) {
                                    console.log('Error:', data);
                                }
                            });
                        }
                    });
                });

                // Delete Featurebox function
                $('body').on('click', '#delete-testimonial', function () {
                    var _id = $(this).data("id");
                    let parent = $(this).closest('tr');
                    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({
                                type: "get",
                                url: SITEURL + "/admin/feature-box/delete/"+_id,
                                success: function (data) {
                                    toastr.success(data.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);
                                }
                            });
                        }
                    });
                });

                // Feature Box Submit button
                $('body').on('submit', '#featurebox_form', function (e) {
                    e.preventDefault();
                    var actionType = $('#btnsave').val();
                    var fewSeconds = 2;
                    $('#btnsave').html('Sending... <i class="fa fa-spinner fa-spin"></i>');
                    $('#btnsave').prop('disabled', true);
                    setTimeout(function(){
                        $('#btnsave').prop('disabled', false);
                    }, fewSeconds*1000);
                    var formData = new FormData(this);
                    $.ajax({
                        type:'POST',
                        url: SITEURL + "/admin/feature-box/create",
                        data: formData,
                        cache:false,
                        contentType: false,
                        processData: false,
                        success: (data) => {
                            if(data.errors){
                                $('#nameError').html('');
                                $('#descriptionError').html('');
                                $('#ImageError').html('');
                                $('#nameError').html(data.errors.title);
                                $('#descriptionError').html(data.errors.subtitle);
                                $('#ImageError').html(data.errors.image);
                                $('#btnsave').html('{{lang('Save Changes')}}');
                            }
                            if(data.success){
                                $('#nameError').html('');
                                $('#descriptionError').html('');
                                $('#ImageError').html('');
                                $('#featurebox_form').trigger("reset");
                                $('#btnsave').html('{{lang('Save Changes')}}');
                                toastr.success(data.success);
                                $('#addfeature').modal('hide');
                                let newFeature = data.data
                                    let exists = false;
                                    tableData = tableData.map(category => {
                                        if (category.id === newFeature.id) {
                                            exists = true;
                                            return newFeature;
                                        }
                                        return category;
                                    });

                                    if (!exists) {
                                        tableData.push(newFeature);
                                    }
                                    document.getElementById('hideAfterloading')?.classList.remove('d-none');
                                    document.querySelector('.card-body').style.setProperty('filter','blur(1px)');
                                    loadTable(tableData);
                               
                            }
                        },
                        error: function(data){
                            $('#nameError').html('');
                            $('#descriptionError').html('');
                            $('#ImageError').html('');
                            console.log('Error:', data);
                            $('#btnsave').html('{{lang('Save Changes')}}');
                        }
                    });
                });
                // 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('featurebox.deleteall')}}",
                                    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);
                                                $('#massdelete').hide();
                                        // location.reload();

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

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



                //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);
                        }
                    }
                });

            })(jQuery);
        })
    });
</script>

@endsection