@extends('layouts.app')



@section('title', __('superadmin::lang.superadmin') . ' | ' . __('superadmin::lang.packages'))







@section('content')



    @include('superadmin::layouts.nav')



    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.css" />

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/css/iziToast.css" />



    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/js/iziToast.min.js"></script>



    <style>
        @media only screen and (min-width: 767.5px) and (max-width: 991.5px) {



            #featureCatList {

                padding: 5.4px 6px !important;

            }



            #hideFetCatForm {

                padding: 2px 13px !important;

                top: 32% !important;

                right: 4% !important;

            }

        }
    </style>













    <!-- Main content -->



    <section class="content">



        <section class="content-header" style="margin-bottom:15px;margin-left: -15px;">



            <h1>{{ __('Home Features List') }} <span onclick="addFetModal()" class="btn btn-primary" style="float:right;">Add
                    New</span></h1>



        </section>

        <div class="box box-solid">

            <div class="box-body">

                <div class="table-responsive">

                    <table class="table table-bordered table-striped" id="featuresTable">

                        <thead>

                            <tr>

                                <th>{{ __('Title') }}</th>

                                <th>{{ __('Description') }}</th>

                                <th>{{ __('Features') }}</th>

                                <th>{{ __('Image') }}</th>

                                <th>{{ __('Action') }}</th>

                            </tr>

                        </thead>

                    </table>

                </div>

            </div>

        </div>









        <div class="modal fade" data-bs-backdrop="static" id="addHomeFeture" tabindex="-1" aria-hidden="true"
            style="display: none;">

            <div class="modal-dialog modal-dialog-scrollable modal-lg">

                <div class="modal-content">

                    <div class="modal-header">

                        <h3 class="modal-title">
                            Add Home Feature
                        </h3>

                        {{-- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> --}}

                    </div>

                    <div class="modal-body">



                        <form action="" id="homeFetForm" autocomplete="off">

                            <div class="row">

                                <div class="col-sm-6">

                                    <div class="form-group">

                                        <label for="title" class="form-label">Title</label>

                                        <input type="text" class="form-control" name="title" id="title">

                                    </div>

                                </div>

                                <div class="col-sm-6">

                                    <div class="form-group">

                                        <label for="image" class="form-label">Image</label>

                                        <input type="file" class="form-control" name="image" id="image">

                                    </div>

                                </div>



                                <div class="col-sm-12">

                                    <div class="form-group">

                                        <label for="features" class="form-label">Features <span
                                                style="padding: 5px 15px; background: #7c5cc4;color:#fff; font-size: 20px; margin-left:10px;"
                                                onclick="addFeturr()">+</span></label>



                                        <div class="row" id="fetursss" style="padding:5px 15px;">

                                            <div class="col-sm-3">

                                                <input type="text" class="form-control" name="features[]" id="features"
                                                    style="margin-top:5px;">

                                                <span
                                                    style="position: absolute;top: 0%;right: 0;padding: 0px 18px;font-size: 22px;margin-top:5px;"
                                                    class="btn btn-danger">-</span>

                                            </div>

                                        </div>

                                    </div>

                                </div>

                                <div class="col-sm-12">

                                    <div class="form-group">

                                        <label for="description" class="form-label">Description</label>

                                        <textarea class="form-control" rows="6" name="description" id="description"></textarea>

                                    </div>

                                </div>

                            </div>



                            <div class="modal-footer">

                                <button type="button" class="btn btn-danger" id="modalClose">Close</button>

                                <input type="submit" id="addCateeBtn" class="btn btn-primary" value="Save">

                            </div>

                        </form>

                    </div>

                </div>

            </div>

        </div>



        <div class="modal fade" data-bs-backdrop="static" id="editHomeFeature" tabindex="-1" aria-hidden="true"
        style="display: none;">
        <div class="modal-dialog modal-dialog-scrollable modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">
                        Edit Home Feature
                    </h3>
                    {{-- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> --}}
                </div>
                <div class="modal-body">



                    <form action="" id="edit_home_feature" autocomplete="off">

                        <div class="row">

                            <div class="col-sm-6">

                                <div class="form-group">

                                    <label for="title" class="form-label">Title</label>

                                    <input type="hidden" name="id" id="id1">
                                    <input type="text" class="form-control" name="title" id="title1">

                                </div>

                            </div>

                            <div class="col-sm-6">

                                <div class="form-group">

                                    <label for="image" class="form-label">Image</label>

                                    <input type="file" class="form-control" name="new_image">
                                    <input type="hidden" name="image" id="image1">
                                    <img src="" id="oldImg" width="50%" alt="old image">

                                </div>

                            </div>



                            <div class="col-sm-12">

                                <div class="form-group">

                                    <label for="features1" class="form-label">Features <span
                                            style="padding: 5px 15px; background: #7c5cc4; color:#fff; font-size: 20px; margin-left:10px;"
                                            onclick="editFeturr()">+</span></label>



                                    <div class="row" id="fetursss1" style="padding:5px 15px;">

                                        <div class="col-sm-3">

                                            <input type="text" class="form-control" name="features[]" id="features1"
                                                style="margin-top:5px;">

                                            <span
                                                style="position: absolute;top: 0%;right: 0;padding: 0px 18px;font-size: 22px;margin-top:5px;"
                                                class="btn btn-danger">-</span>

                                        </div>

                                    </div>

                                </div>

                            </div>

                            <div class="col-sm-12">

                                <div class="form-group">

                                    <label for="description" class="form-label">Description</label>

                                    <textarea class="form-control" rows="6" name="description" id="description1"></textarea>

                                </div>

                            </div>

                        </div>



                        <div class="modal-footer">

                            <button type="button" class="btn btn-danger" id="editModalClose">Close</button>

                            <input type="submit" id="addCateeBtn" class="btn btn-primary" value="Save">

                        </div>

                    </form>

                </div>
            </div>
        </div>
    </div>







    </section>







@endsection







@section('javascript')



    <script>
        function addFetModal() {

            $('#addHomeFeture').modal('show');

        }





        // Remove a feature input

        $('#fetursss').on('click', '.remove-feature', function() {

            $(this).parent().remove();

        });

        // for edit form
        $('#fetursss1').on('click', '.remove-feature1', function() {

            $(this).parent().remove();

        });



        function addFeturr() {

            $('#fetursss').append('<div class="col-sm-3">\
                                        <input type="text" class="form-control" name="features[]" id="features" style="margin-top:5px;">\
                                        <span style="position: absolute;top: 0%;right: 0;padding: 0px 18px;font-size: 22px;margin-top:5px;" class="btn btn-danger remove-feature">-</span>\
                                    </div>');

        }

        // for edit form
        function editFeturr() {

            $('#fetursss1').append('<div class="col-sm-3">\
                                        <input type="text" class="form-control" name="features[]" id="features1" style="margin-top:5px;">\
                                        <span style="position: absolute;top: 0%;right: 0;padding: 0px 18px;font-size: 22px;margin-top:5px;" class="btn btn-danger remove-feature1">-</span>\
                                    </div>');

        }







        $(document).ready(function() {



            // homeFeaturesTbl

            var homeFeaturesTbl = $('#featuresTable').DataTable({

                processing: true,

                serverSide: true,

                ajax: '/superadmin/homefeature/show', // Replace with your actual route

                columns: [{

                        data: 'title',

                        name: 'title'

                    },

                    {

                        data: 'description',

                        name: 'description'

                    },

                    {

                        data: 'features',

                        name: 'features'

                    },

                    {

                        data: 'image',

                        name: 'image'

                    },

                    {

                        data: 'action',

                        name: 'action'

                    },

                ]

            });







            // feature submit

            $('#homeFetForm').on('submit', function(e) {

                e.preventDefault(); // Prevent the default form submission



                // Serialize the form data

                const fd = new FormData(this);



                // Perform an Ajax request

                $.ajax({

                    url: "{{ route('home.features.store') }}", // Replace with the actual URL where you want to send the request

                    method: 'POST', // Specify the HTTP method (POST in this case)

                    data: fd, // Send the serialized form data

                    processData: false,

                    contentType: false,

                    cache: false,

                    dataType: 'json',

                    success: function(response) {

                        $('#homeFetForm')[0].reset();

                        $('#addHomeFeture').modal('hide');

                        $('#fetursss').empty();

                        // Handle the success response here

                        // console.log(response);

                        toastr.success(response.message);

                        homeFeaturesTbl.ajax.reload();

                    },

                    error: function(xhr) {

                        if (xhr.status === 400) {

                            var errors = xhr.responseJSON.errors;

                            // console.log(errors);

                            for (var key in errors) {

                                toastr.error(errors[key][0]);

                            }

                        } else {

                            // Handle other errors

                            toastr.error('An error occurred while submitting the form.');

                        }

                    }

                });

            });



            // modal close

            $('#modalClose').on('click', function() {

                $('#addHomeFeture').modal('hide');

            });
            $('#editModalClose').on('click', function() {

                $('#editHomeFeature').modal('hide');

            });



            // features edit
            $(document).on('click', '.editHomeFet', function(e) {



                e.preventDefault();



                let id = $(this).attr('data-id');



                $('#edit_home_feature')[0].reset();



                $.ajax({

                    url: "{{ route('home.features.edit') }}",

                    method: 'POST',

                    data: {

                        id: id,

                    },

                    success: function(response) {

                        $('#fetursss1').empty();

                        console.log(response);

                        $('#id1').val(response.data.id);

                        $('#title1').val(response.data.title);

                        $('#description1').val(response.data.description);

                        $.each(response.data.fetu, function(i, val){
                            $('#fetursss1').append('<div class="col-sm-3">\
                                        <input type="text" class="form-control" name="features[]" id="features1" value="'+val+'" style="margin-top:5px;">\
                                        <span style="position: absolute;top: 0%;right: 0;padding: 0px 18px;font-size: 22px;margin-top:5px;" class="btn btn-danger remove-feature1">-</span>\
                                    </div>');
                        });


                        // $('#features1').val(response.data.features);

                        $('#image1').val(response.data.image);

                        $('#oldImg').attr('src', response.data.image);



                        $('#editHomeFeature').modal('show');

                    },

                    error: function() {

                        iziToastError('Server Error!');

                    }

                });

            });


            // update home features
            $('#edit_home_feature').on('submit', function(e) {
                e.preventDefault(); // Prevent the default form submission

                // Serialize the form data
                const fd = new FormData(this);


                // Perform an Ajax request
                $.ajax({
                    url: "{{ route('home.feature.update') }}",
                    method: 'POST',
                    data: fd,
                    processData: false,
                    contentType: false,
                    cache: false,
                    dataType: 'json',
                    success: function(response) {
                        toastr.success(response.message);

                        $('#edit_home_feature')[0].reset();

                        $('#editHomeFeature').modal('hide');
                        homeFeaturesTbl.ajax.reload();
                    },
                    error: function(xhr) {
                        if (xhr.status === 400) {
                            var errors = xhr.responseJSON.errors;
                            // console.log(errors);
                            for (var key in errors) {
                                toastr.error(errors[key][0]);
                            }
                        } else {
                            // Handle other errors
                            toastr.error('An error occurred while submitting the form.');
                        }
                    }
                });
            });



            // delete feature

            $(document).on('click', '.deleteHomeFet', function(e) {



                let id = $(this).attr('data-id');



                // for delete confirmation

                iziToast.question({

                    timeout: 20000,

                    close: false,

                    overlay: true,

                    displayMode: 'once',

                    id: 'question',

                    zindex: 999,

                    title: 'Warning',

                    message: 'Are you sure? You wont be able to revert the action',

                    position: 'center',

                    buttons: [

                        ['<button><b>YES</b></button>', function(instance, toast) {



                            instance.hide({

                                transitionOut: 'fadeOut'

                            }, toast, 'button');



                            $.ajax({

                                url: "{{ route('home.feature.delete') }}",

                                type: "DELETE",

                                data: {

                                    id: id

                                },

                                success: function(response) {

                                    if (response.success) {

                                        iziToast.success({

                                            progressBar: true,

                                            pauseOnHover: true,

                                            resetOnHover: true,

                                            timeout: 5000,

                                            position: 'topRight',

                                            message: response.success,

                                        });

                                        homeFeaturesTbl.ajax.reload();

                                    } else if (response.status == 404) {

                                        iziToast.error({

                                            progressBar: true,

                                            timeout: 4000,

                                            position: 'topRight',

                                            pauseOnHover: true,

                                            message: response.error,

                                        });

                                    } else {

                                        iziToast.error({

                                            progressBar: true,

                                            pauseOnHover: true,

                                            resetOnHover: true,

                                            timeout: 5000,

                                            position: 'topRight',

                                            message: response.error,

                                        });

                                    }

                                },

                            });

                        }, true],



                        ['<button>NO</button>', function(instance, toast) {

                            instance.hide({

                                transitionOut: 'fadeOut'

                            }, toast, 'button');

                        }],

                    ]

                });

            });


        });
    </script>



@endsection