@section('title', 'UI Elements')
<x-admin-layout>
    <x-slot name="header">
        @yield('title')
    </x-slot>

    <x-slot name="js">
        <script>
            $(function() {
                // Summernote
                $('#summernote').summernote()
            })
        </script>
        <script>
            $(function() {
                // Summernote
                $('#copyright').summernote()
            })
        </script>
        <script>
            $(document).ready(function() {
                // Initialize variable to keep track of the last added phone number field
                var lastPhoneField = $('.phone-input-group').first();

                // Add phone number field
                $(document).on('click', '.add-phone', function() {
                    var phoneInputGroup = $(this).closest('.phone-input-group');
                    var clonedInputGroup = phoneInputGroup.clone();
                    clonedInputGroup.find('input').val(''); // Clear the input field
                    var button = clonedInputGroup.find('.add-phone');
                    button.removeClass('add-phone btn-info').addClass(
                        'remove-phone btn-danger'); // Change the button class
                    button.html('<i class="fas fa-times"></i>'); // Change the button icon
                    lastPhoneField.after(
                        clonedInputGroup); // Append the cloned group after the last phone number field
                    lastPhoneField = clonedInputGroup; // Update the last added phone number field
                });

                // Remove phone number field
                $(document).on('click', '.remove-phone', function() {
                    $(this).closest('.phone-input-group').remove();
                    lastPhoneField = $('.phone-input-group').last(); // Update the last added phone number field
                });
            });
        </script>

        <script>
            $(document).ready(function() {
                // Initialize variable to keep track of the last added email field
                var lastEmailField = $('.email-input-group').first();

                // Add email field
                $(document).on('click', '.add-email', function() {
                    var emailInputGroup = $(this).closest('.email-input-group');
                    var clonedInputGroup = emailInputGroup.clone();
                    clonedInputGroup.find('input').val(''); // Clear the input field
                    var button = clonedInputGroup.find('.add-email');
                    button.removeClass('add-email btn-info').addClass(
                        'remove-email btn-danger'); // Change the button class
                    button.html('<i class="fas fa-times"></i>'); // Change the button icon
                    lastEmailField.after(
                        clonedInputGroup); // Append the cloned group after the last email field
                    lastEmailField = clonedInputGroup; // Update the last added email field
                });

                // Remove email field
                $(document).on('click', '.remove-email', function() {
                    $(this).closest('.email-input-group').remove();
                    lastEmailField = $('.email-input-group').last(); // Update the last added email field
                });
            });
        </script>

        <script>
            $(document).ready(function() {
                var lastKeyFeatureField = $('.key-features-input-group').last();

                $(document).on('click', '.add-key-features', function() {
                    var keyFeatureGroup = $(this).closest('.key-features-input-group');
                    var clonedGroup = keyFeatureGroup.clone();
                    clonedGroup.find('input').val('');
                    var button = clonedGroup.find('.add-key-features');
                    button.removeClass('add-key-features btn-info').addClass('remove-key-features btn-danger');
                    button.html('<i class="fas fa-times"></i>');
                    lastKeyFeatureField.after(clonedGroup);
                    lastKeyFeatureField = clonedGroup;
                });

                $(document).on('click', '.remove-key-features', function() {
                    $(this).closest('.key-features-input-group').remove();
                    lastKeyFeatureField = $('.key-features-input-group').last();
                });
            });
        </script>


        <!-- Page specific script -->
        <script>
            function deleteConfirmation(ele) {
                var id = $(ele).data("id");
                var action_url = $(ele).data("action");
                Swal.fire({
                    icon: 'info',
                    title: "Delete?",
                    text: "Please ensure and then confirm!",
                    type: "warning",
                    showCancelButton: !0,
                    confirmButtonText: "Yes, delete it!",
                    cancelButtonText: "No, cancel!",
                    reverseButtons: !0
                }).then(function(e) {
                    if (e.value === true) {
                        var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
                        $.ajax({
                            type: 'DELETE',
                            url: action_url,
                            data: {
                                _token: CSRF_TOKEN
                            },
                            dataType: 'JSON',
                            success: function(results) {
                                if (results.success === true) {
                                    Swal.fire({
                                        icon: 'success',
                                        title: 'Deleted!',
                                        type: "success",
                                        text: results.message,
                                        showConfirmButton: false,
                                        timer: 1500
                                    });
                                    location.reload();
                                } else {
                                    Swal.fire({
                                        icon: 'error',
                                        title: 'Error!',
                                        type: "danger",
                                        text: results.message,
                                        showConfirmButton: false,
                                        timer: 1500
                                    });
                                    location.reload();
                                }
                            }
                        });
                    } else {
                        e.dismiss;
                    }
                }, function(dismiss) {
                    return false;
                })
            }
        </script>
    </x-slot>

    <div class="card card-primary card-outline card-tabs">
        <div class="card-header p-0 pt-1 border-bottom-0">
            <ul class="nav nav-tabs" id="custom-tabs-three-tab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" id="custom-tabs-three-company-tab" data-toggle="pill"
                        href="#custom-tabs-three-company" role="tab" aria-controls="custom-tabs-three-company"
                        aria-selected="true">Company</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="custom-tabs-three-about-tab" data-toggle="pill"
                        href="#custom-tabs-three-about" role="tab" aria-controls="custom-tabs-three-about"
                        aria-selected="true">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="custom-tabs-three-slider-tab" data-toggle="pill"
                        href="#custom-tabs-three-slider" role="tab" aria-controls="custom-tabs-three-slider"
                        aria-selected="false">Slider</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="custom-tabs-three-contact-tab" data-toggle="pill"
                        href="#custom-tabs-three-contact" role="tab" aria-controls="custom-tabs-three-contact"
                        aria-selected="false">Contact</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="custom-tabs-three-social-tab" data-toggle="pill"
                        href="#custom-tabs-three-social" role="tab" aria-controls="custom-tabs-three-social"
                        aria-selected="false">Social</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="custom-tabs-three-pages-tab" data-toggle="pill"
                        href="#custom-tabs-three-pages" role="tab" aria-controls="custom-tabs-three-pages"
                        aria-selected="false">Pages</a>
                </li>
            </ul>
        </div>
        <div class="card-body">
            <div class="tab-content" id="custom-tabs-three-tabContent">
                <div class="tab-pane fade active show" id="custom-tabs-three-company" role="tabpanel"
                    aria-labelledby="custom-tabs-three-company-tab">

                    @include('admin.ui-elements.components.company')

                </div>

                <div class="tab-pane fade" id="custom-tabs-three-about" role="tabpanel"
                    aria-labelledby="custom-tabs-three-about-tab">

                    @include('admin.ui-elements.components.about')

                </div>

                <div class="tab-pane fade" id="custom-tabs-three-slider" role="tabpanel"
                    aria-labelledby="custom-tabs-three-slider-tab">

                    @include('admin.ui-elements.components.slider')

                </div>
                <div class="tab-pane fade" id="custom-tabs-three-contact" role="tabpanel"
                    aria-labelledby="custom-tabs-three-contact-tab">

                    @include('admin.ui-elements.components.contact')

                </div>
                <div class="tab-pane fade" id="custom-tabs-three-social" role="tabpanel"
                    aria-labelledby="custom-tabs-three-social-tab">

                    @include('admin.ui-elements.components.social')

                </div>
                <div class="tab-pane fade" id="custom-tabs-three-pages" role="tabpanel"
                    aria-labelledby="custom-tabs-three-pages-tab">

                    @include('admin.ui-elements.components.pages')

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

    </div>

</x-admin-layout>