@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>{{ __('Company Logo') }} <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>{{ __('Name') }}</th>

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

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

                            </tr>

                        </thead>

                    </table>

                </div>

            </div>

        </div>









        <div class="modal fade" data-bs-backdrop="static" id="addCompanyLogo" 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 Company
                        </h3>

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

                    </div>

                    <div class="modal-body">



                        <form action="" id="company_logo_form" 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="name" 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="logo" id="image">

                                    </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="edit_logo_form" 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 Logo
                    </h3>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">



                    <form action="" id="edit_logo" 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="name" 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_logo">
                                    <input type="hidden" name="logo" id="image1">
                                    <img src="" id="oldImg" width="50%" alt="old logo">
                                </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() {

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

        }



        $(document).ready(function() {



            // logoTbl

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

                processing: true,

                serverSide: true,

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

                columns: [{

                        data: 'name',

                        name: 'name'

                    },

                    {

                        data: 'logo',

                        name: 'logo'

                    },

                    {

                        data: 'action',

                        name: 'action'

                    },

                ]

            });







            // feature submit

            $('#company_logo_form').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('logo.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) {

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

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

                        toastr.success(response.message);

                        logoTbl.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() {

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

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

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

            });



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



                e.preventDefault();



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



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



                $.ajax({

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

                    method: 'POST',

                    data: {

                        id: id,

                    },

                    success: function(response) {

                        console.log(response);

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

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

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

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


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

                    },

                    error: function() {

                        iziToastError('Server Error!');

                    }

                });

            });


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

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

                        $('#edit_logo_form').modal('hide');
                        logoTbl.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('logo.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,

                                        });

                                        logoTbl.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