@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>



    <!-- Content Header (Page header) -->

    <section class="content-header">

        <!-- <h1>@lang('superadmin::lang.packages') <small>@lang('superadmin::lang.add_package')</small></h1> -->
        <h1>{{ __('Features Category') }} <small>{{ __('add features category') }}</small></h1>

        <span
            style="position: absolute;
    right: 12%;
    top: 32.8%;
    padding: 9.4px 15px;
    background: #7c5cc4;
    cursor:pointer;
    color: #fff;
    border-radius: 10px;"
            id="featureCatList">Category List</span>

        <span
            style="padding: 5px 15px;
    position: absolute;
    top: 35%;
    right: 5%;
    background: #aaa2a2;
    color: #fff;
    cursor:pointer;
    font-size: 20px;border-radius: 10px;"
            id="hideFetCatForm">+</span>

        <!-- <ol class="breadcrumb">

                                <li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>

                                <li class="active">Here</li>

                            </ol> -->

    </section>



    <!-- Main content -->

    <section class="content">

        <div class="box box-solid" id="featureCatForm" style="display: none;">
            <div class="box-body">
                <form action="" id="fetCatForm">
                    <div class="row">
                        <div class="col-sm-3">
                            <div class="form-group">
                                <label for="heading" class="form-label">Heading</label>
                                <input type="text" class="form-control" name="heading" id="heading">
                            </div>
                        </div>                     

                        <div class="col-sm-3">
                            <div class="form-group">
                                <label for="is_active" class="form-label">Status</label>
                                <select name="is_active" class="form-control" id="is_active">
                                    <option value="">select status</option>
                                    <option value="1">Active</option>
                                    <option value="0">Inactive</option>
                                </select>
                            </div>
                        </div>

                        <div class="col-sm-2">
                            <div class="form-group" style="padding-top:5px">
                                <label for="submit"></label>
                                <input type="submit" class="btn btn-primary form-control" name="submit" value="Save">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                    <div class="col-sm-12">
                          <div class="form-group">
                              <label for="description" class="form-label">Description</label>
                              <textarea class="form-control" rows="3" name="description" id="description"></textarea>
                          </div>
                      </div>
                        <div class="col-sm-1">
                          <div class="form-group" style="padding-top:5px">
                              <label for="submit"></label>
                              <input type="submit" class="btn btn-primary form-control" name="submit"
                                  value="Save">
                          </div>
                      </div>
                  </div>

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

        <hr>


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

            <h1>{{ __('Features') }} <small>{{ __('add features') }}</small></h1>

        </section>


        <div class="box box-solid" id="featureForm">
            <div class="box-body">
                <form action="" id="fetForm">
                    <div class="row">
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label for="feature_category" class="form-label">Category</label>
                                <select name="feature_category" class="form-control" id="feature_category">
                                    <option value="">select category</option>
                                    @if ($feature_categories)
                                        @foreach ($feature_categories as $feature_category)
                                            <option value="{{ $feature_category->id }}">{{ $feature_category->heading }}
                                            </option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                        </div>

                        <div class="col-sm-4">
                            <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-4">
                            <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-3">
                                                <div class="form-group">
                                                    <label for="is_active" class="form-label">Status</label>
                                                    <select name="is_active"class="form-control" id="is_active">
                                                        <option value="">select status</option>
                                                        <option value="1">Active</option>
                                                        <option value="0">Inactive</option>
                                                    </select>
                                                </div>
                                            </div> -->

                      
                    </div>
                     <div class="row">
                      <div class="col-sm-12">
                            <div class="form-group">
                                <label for="description" class="form-label">Description</label>
                                <textarea class="form-control" rows="3" name="description" id="description"></textarea>
                            </div>
                        </div>
                          <div class="col-sm-1">
                            <div class="form-group" style="padding-top:5px">
                                <label for="submit"></label>
                                <input type="submit" class="btn btn-primary form-control" name="submit"
                                    value="Save">
                            </div>
                        </div>
                    </div>
                        
                        
                </form>
            </div>
        </div>



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

            <h1>{{ __('Features') }} <small>{{ __('features list') }}</small></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>{{ __('Category') }}</th>
                                <th>{{ __('Title') }}</th>
                                <th>{{ __('Description') }}</th>
                                <th>{{ __('Image') }}</th>
                                <th>{{ __('Action') }}</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>




        <div class="modal fade" data-bs-backdrop="static" id="editFeturee" 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 Feature
                        </h3>
                        {{-- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> --}}
                    </div>
                    <div class="modal-body">

                        <form id="edit_features" novalidate autocomplete="off">

                            @csrf

                            <div class="row">

                                <div class="form-group col-md-12">

                                    <label for="is_active" class="form-label">Category</label>
                                    <select name="feature_category" id="feature_categoryyy" class="form-control">
                                        <option value="">select category</option>
                                        @foreach ($feature_categories as $feature_category)
                                            <option value="{{ $feature_category->id }}">{{ $feature_category->heading }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="form-group col-md-12">
                                    <label for="name" class="form-label">Title</label>
                                    <input type="hidden" name="id" id="id">
                                    <input type="text" class="form-control" name="title" id="titlee">
                                </div>

                                <div class="form-group col-md-12">
                                    <label for="description" class="form-label">Description</label>
                                    <textarea class="form-control"name="description" id="descriptione"></textarea>
                                </div>

                                <div class="form-group col-md-12">
                                    <label for="img">Image</label>
                                    <input type="file" name="new_img">
                                    <input type="hidden" name="image" id="imageee">
                                    <img src="" id="oldImg" style="width:25%; padding:25px;">
                                </div>
                            </div>


                            <div class="modal-footer">
                                <button type="button" class="btn btn-danger" id="modalClose">Close</button>
                                {{-- <button type="submit" id="addCateeBtn" class="btn btn-primary"></button> --}}
                                <input type="submit" id="addCateeBtn" class="btn btn-primary" value="Update">
                            </div>
                        </form><!-- End Custom Styled Validation -->
                    </div>
                </div>
            </div>
        </div>



    </section>



@endsection



@section('javascript')

    <script>
        $(document).ready(function() {

            // featuresTbl
            var featuresTbl = $('#featuresTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: '/superadmin/feature/features-list', // Replace with your actual route
                columns: [{
                        data: 'feature_category',
                        name: 'feature_category'
                    },
                    {
                        data: 'title',
                        name: 'title'
                    },
                    {
                        data: 'description',
                        name: 'description'
                    },
                    {
                        data: 'image',
                        name: 'image'
                    },
                    {
                        data: 'action',
                        name: 'action'
                    },
                ]
            });



            // feature submit
            $('#fetForm').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('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) {
                        $('#fetForm')[0].reset();
                        // Handle the success response here
                        // console.log(response);
                        toastr.success(response.message);
                        featuresTbl.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() {
                $('#editFeturee').modal('hide');
            });

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

                e.preventDefault();

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

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

                $.ajax({
                    url: "{{ route('features.edit') }}",
                    method: 'POST',
                    data: {
                        id: id,
                    },
                    success: function(response) {
                        console.log(response);
                        $('#id').val(response.data.id);
                        $('#titlee').val(response.data.title);
                        $('#descriptione').val(response.data.description);
                        $('#feature_categoryyy').val(response.data.feature_category);
                        $('#imageee').val(response.data.image);
                        $('#oldImg').attr('src', response.data.image);

                        $('#editFeturee').modal('show');
                    },
                    error: function() {
                        iziToastError('Server Error!');
                    }
                });
            });

            // delete feature
            $(document).on('click', '.deleteFetu', 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('features.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,
                                        });
                                        featuresTbl.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');
                        }],
                    ]
                });
            });


            // update category
            $('#edit_features').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('features.update') }}",
                    method: 'POST',
                    data: fd,
                    processData: false,
                    contentType: false,
                    cache: false,
                    dataType: 'json',
                    success: function(response) {
                        toastr.success(response.message);

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

                        $('#editFeturee').modal('hide');
                        featuresTbl.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.');
                        }
                    }
                });
            });



            // category submit
            $('#fetCatForm').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('features.category.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) {
                        $('#fetCatForm')[0].reset();
                        // Handle the success response here
                        // console.log(response);
                        toastr.success(response.message);

                        // setTimeout(function() {
                        //     window.location.href = "{{ url('superadmin/features') }}";
                        // }, 800);
                    },
                    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.');
                        }
                    }
                });
            });


            // for open category list page
            $('#featureCatList').on('click', function(e) {
                window.location.href = "{{ route('features.category.list') }}";
            });


            // Get references to the button and the div
            var toggleButton = document.getElementById("hideFetCatForm");
            var myDiv = document.getElementById("featureCatForm");

            // Add a click event listener to the button
            toggleButton.addEventListener("click", function() {
                if (myDiv.style.display === "none" || myDiv.style.display === "") {
                    myDiv.style.display = "block";
                    toggleButton.textContent = "-";
                } else {
                    myDiv.style.display = "none";
                    toggleButton.textContent = "+";
                }
            });
        });
    </script>

@endsection