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

    <style>
        .btn-success {
            background: rgb(7, 128, 7);
            color: #fff;
        }

        .btn-danger {
            background: rgb(235, 7, 29);
            color: #fff;
        }
    </style>



    <!-- Main content -->
    <section class="content">

        <div class="box box-solid">
            <div class="box-body">
                <div class="row">
                    <div class="col-sm-12">
                        <a href="{{ url('superadmin/features') }}" style="float: right;margin-bottom: 10px;" class="btn btn-primary">Back</a>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table table-bordered table-striped" id="featuresCategoryTable">
                        <thead>
                            <tr>
                                <th>{{ __('Heading') }}</th>
                                <th>{{ __('Description') }}</th>
                                <th>{{ __('Status') }}</th>
                                <th>{{ __('Action') }}</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>

    </section>
    <!-- /.content -->

    {{-- Add Category Modal --}}
    <div class="modal fade" data-bs-backdrop="static" id="addRole" 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">
                    <h5 class="modal-title"></h5>
                    {{-- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> --}}
                </div>
                <div class="modal-body">

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

                        @csrf

                        <div class="row">
                            {{-- Role --}}
                            <div class="form-group col-md-12">
                                <label for="name" class="form-label">Heading</label>
                                <input type="hidden" name="id" id="id">
                                <input type="text" class="form-control" name="heading" id="heading">

                                <label for="description" class="form-label">Description</label>
                                <textarea class="form-control"name="description" id="description"></textarea>

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

@endsection

@section('javascript')

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

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

            // featuresCategoryTable
            var featuresCategoryTable = $('#featuresCategoryTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: '/superadmin/feature/category-list', // Replace with your actual route
                columns: [{
                        data: 'heading',
                        name: 'heading'
                    },
                    {
                        data: 'description',
                        name: 'description'
                    },
                    {
                        data: 'is_active',
                        name: 'is_active'
                    },
                    {
                        data: 'action',
                        name: 'action'
                    },
                ]
            });


            // for close model
            $('#modalClose').on('click', function() {
                $('#edit_featuresCategory')[0].reset();
                $('#addRole').modal('hide');
            });


            // edit course
            $(document).on('click', '.editFetuCatee', function(e) {

                e.preventDefault();

                // $('#addCateeBtn').text('Update');
                // $('#addCateeBtn').addClass('updateRoles');

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

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

                $.ajax({
                    url: "{{ route('features.category.edit') }}",
                    method: 'POST',
                    data: {
                        id: id,
                    },
                    success: function(response) {
                        console.log(response);
                        $('#id').val(response.data.id);
                        $('#heading').val(response.data.heading);
                        $('#description').val(response.data.description);
                        $('#is_active').val(response.data.is_active);

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


            // update category
            $('#edit_featuresCategory').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.update') }}", // 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) {
                        toastr.success(response.message);

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

                        $('#addRole').modal('hide');
                        featuresCategoryTable.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 data
            $(document).on('click', '.deleteFetuCatee', 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.category.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,
                                        });
                                        featuresCategoryTable.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