@extends('backend.layouts.app')
@section('content')
<h4 class="py-3 mb-4">
    @lang('messages.general_settings.general_settings')
</h4>


<div class="card mb-6 p-10">
    <form id="general" method="POST" action="{{ route('general-settings.update', @$generalSettings->id_encrypted) }}" class="row g-5" enctype="multipart/form-data">
        @csrf
        @method('PUT')
        <div class="card-body">
            <div class="row">
                <!-- Logo Image Display -->
                <div class="col-md-4 d-flex align-items-sm-center gap-6">
                    <img src="{{ asset('storage/settings/' . @$generalSettings->header_logo) }}" alt="logo" class="d-block w-px-100 h-px-100 rounded" id="uploadedLogo">
                    <div class="button-wrapper">
                        <label for="uploadLogo" class="btn btn-sm btn-primary me-3 mb-4 waves-effect waves-light" tabindex="0">
                            <span class="d-none d-sm-block">@lang('messages.general_settings.upload_logo')</span>
                            <i class="ri-upload-2-line d-block d-sm-none"></i>
                            <input type="file" id="uploadLogo" name="header_logo_img" class="account-file-input" hidden accept="image/png, image/jpeg">
                        </label>
                    </div>
                </div>

                <!-- Footer Logo Image Display -->
                <div class="col-md-4 d-flex align-items-sm-center gap-6">
                    <img src="{{ asset('storage/settings/' . @$generalSettings->footer_logo) }}" alt="footer-logo" class="d-block w-px-100 h-px-100 rounded" id="uploadedFooterLogo">
                    <div class="button-wrapper">
                        <label for="uploadFooterLogo" class="btn btn-sm btn-primary me-3 mb-4 waves-effect waves-light" tabindex="0">
                            <span class="d-none d-sm-block">@lang('messages.general_settings.upload_footer_logo')</span>
                            <i class="ri-upload-2-line d-block d-sm-none"></i>
                            <input type="file" id="uploadFooterLogo" name="footer_logo_img" class="account-file-input" hidden accept="image/png, image/jpeg">
                        </label>
                    </div>
                </div>

                <!-- Favicon Image Display -->
                <div class="col-md-4 d-flex align-items-sm-center gap-6">
                    <img src="{{ asset('storage/settings/' . @$generalSettings->favicon) }}" alt="favicon" class="d-block w-px-100 h-px-100 rounded" id="uploadedFavicon">
                    <div class="button-wrapper">
                        <label for="uploadFavicon" class="btn btn-sm btn-primary me-3 mb-4 waves-effect waves-light" tabindex="0">
                            <span class="d-none d-sm-block">@lang('messages.general_settings.upload_favicon')</span>
                            <i class="ri-upload-2-line d-block d-sm-none"></i>
                            <input type="file" id="uploadFavicon" name="favicon" class="account-file-input" hidden accept="image/png, image/jpeg">
                        </label>
                    </div>
                </div>
            </div>
        </div>

        <div class="card-body pt-0">
            <div class="row mt-1 g-5">
                <div class="col-md-6 fv-plugins-icon-container">
                    <div class="form-floating form-floating-outline">
                        <div class="input-group input-group-floating">
                            <span class="input-group-text" id="basic-addon41">@</span>
                            <input type="text" class="form-control" placeholder="@lang('messages.general_settings.copyright_en')" value="{{ @$generalSettings->copyrights_en }}" name="copyrights_en" aria-label="copyright" aria-describedby="basic-addon41">
                            <span class="form-floating-focused"></span>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 fv-plugins-icon-container">
                    <div class="form-floating form-floating-outline">
                        <div class="input-group input-group-floating">
                            <span class="input-group-text" id="basic-addon41">@</span>
                            <input type="text" class="form-control" placeholder="@lang('messages.general_settings.copyright_ro')" value="{{ @$generalSettings->copyrights_ro }}" name="copyrights_ro" aria-label="copyright" aria-describedby="basic-addon41">
                        </div>
                        <span class="form-floating-focused"></span>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 fv-plugins-icon-container mt-5">
                    <div class="form-floating form-floating-outline">
                        <div class="input-group input-group-floating">
                            <span class="input-group-text"><i class="ri-anchor-line ri-22px"></i></span>
                            <div class="form-floating">
                                <input type="text" class="form-control" id="basic-url24" name="facebook_url" placeholder="" value="{{ @$generalSettings->facebook_url }}" aria-describedby="basic-url24">
                                <label for="basic-url24">@lang('messages.general_settings.facebook')</label>
                            </div>
                            <span class="form-floating-focused"></span>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 fv-plugins-icon-container mt-5">
                    <div class="form-floating form-floating-outline">
                        <div class="input-group input-group-floating">
                            <span class="input-group-text"><i class="ri-anchor-line ri-22px"></i></span>
                            <div class="form-floating">
                                <input type="text" class="form-control" id="basic-url24" name="linkedin_url" placeholder="" value="{{ @$generalSettings->linkedin_url }}" aria-describedby="basic-url24">
                                <label for="basic-url24">@lang('messages.general_settings.linkedin')</label>
                            </div>
                            <span class="form-floating-focused"></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 fv-plugins-icon-container mt-5">
                    <div class="form-floating form-floating-outline">
                        <div class="input-group input-group-floating">
                            <span class="input-group-text"><i class="ri-anchor-line ri-22px"></i></span>
                            <div class="form-floating">
                                <input type="text" class="form-control" id="basic-url24" name="twitter_url" placeholder="" value="{{ @$generalSettings->twitter_url }}" aria-describedby="basic-url24">
                                <label for="basic-url24">@lang('messages.general_settings.twitter')</label>
                            </div>
                            <span class="form-floating-focused"></span>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 fv-plugins-icon-container mt-5">
                    <div class="form-floating form-floating-outline">
                        <div class="input-group input-group-floating">
                            <span class="input-group-text"><i class="ri-anchor-line ri-22px"></i></span>
                            <div class="form-floating">
                                <input type="text" class="form-control" id="basic-url24" name="tiktok_url" placeholder="" value="{{ @$generalSettings->tiktok_url }}" aria-describedby="basic-url24">
                                <label for="basic-url24">@lang('messages.general_settings.tiktok')</label>
                            </div>
                            <span class="form-floating-focused"></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 fv-plugins-icon-container mt-5">
                    <div class="form-floating form-floating-outline">
                        <div class="input-group input-group-floating">
                            <span class="input-group-text"><i class="ri-anchor-line ri-22px"></i></span>
                            <div class="form-floating">
                                <input type="text" class="form-control" id="basic-url24" name="youtube_url" placeholder="" value="{{ @$generalSettings->youtube_url }}" aria-describedby="basic-url24">
                                <label for="basic-url24">@lang('messages.general_settings.youtube')</label>
                            </div>
                            <span class="form-floating-focused"></span>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 fv-plugins-icon-container mt-5">
                    <div class="form-floating form-floating-outline">
                        <div class="input-group input-group-floating">
                            <span class="input-group-text"><i class="ri-anchor-line ri-22px"></i></span>
                            <div class="form-floating">
                                <input type="text" class="form-control" id="basic-url24" name="pinterest_url" placeholder="" value="{{ @$generalSettings->pinterest_url }}" aria-describedby="basic-url24">
                                <label for="basic-url24">@lang('messages.general_settings.pinterest')</label>
                            </div>
                            <span class="form-floating-focused"></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 fv-plugins-icon-container mt-5">
                    <div class="form-floating form-floating-outline">
                        <div class="input-group input-group-floating">
                            <span class="input-group-text"><i class="ri-anchor-line ri-22px"></i></span>
                            <div class="form-floating">
                                <input type="text" class="form-control" id="basic-url24" name="telegram_url" placeholder="" value="{{ @$generalSettings->telegram_url }}" aria-describedby="basic-url24">
                                <label for="basic-url24">@lang('messages.general_settings.telegram')</label>
                            </div>
                            <span class="form-floating-focused"></span>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 fv-plugins-icon-container mt-5">
                    <div class="form-floating form-floating-outline">
                        <div class="input-group input-group-floating">
                            <span class="input-group-text"><i class="ri-anchor-line ri-22px"></i></span>
                            <div class="form-floating">
                                <input type="text" class="form-control" id="basic-url24" name="instagram_url" placeholder="" value="{{ @$generalSettings->instagram_url }}" aria-describedby="basic-url24">
                                <label for="basic-url24">@lang('messages.general_settings.instagram')</label>
                            </div>
                            <span class="form-floating-focused"></span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mt-6">
                <button type="submit" class="btn btn-primary me-3 waves-effect waves-light">@lang('messages.general_settings.save_changes')</button>
                <button type="reset" class="btn btn-outline-secondary waves-effect">@lang('messages.general_settings.reset')</button>
            </div>
            <input type="hidden">
        </div>

    <form>
</div>
@endsection

@section('footer_scripts')
<script>
    // Logo Image Upload
    document.getElementById('uploadLogo').addEventListener('change', function(event) {
        handleImageUpload(event, 'uploadedLogo');
    });

    // Footer Logo Image Upload
    document.getElementById('uploadFooterLogo').addEventListener('change', function(event) {
        handleImageUpload(event, 'uploadedFooterLogo');
    });

    // Favicon Image Upload
    document.getElementById('uploadFavicon').addEventListener('change', function(event) {
        handleImageUpload(event, 'uploadedFavicon');
    });

    // Function to handle image upload for each image input
    function handleImageUpload(event, imageId) {
        var uploadedImage = document.getElementById(imageId);
        var file = event.target.files[0];
        var reader = new FileReader();

        // Ensure file is selected
        if (file) {
            // Read the file as a data URL
            reader.readAsDataURL(file);
        }

        // Set the image source when file reading is completed
        reader.onloadend = function() {
            uploadedImage.src = reader.result;
        };
    }


    $(document).ready(function() {
        $("#general").submit(function(e) {
            e.preventDefault();
        }).validate({
            // rules: {
            //     facebook_url: {
            //         url: true,
            //     },
            //     tiktok_url: {
            //         url: true,
            //     },
            //     linkedin_url: {
            //         url: true,
            //     },
            //     twitter_url: {
            //         url: true,
            //     },
            //     youtube_url: {
            //         url: true,
            //     },
            //     pinterest_url: {
            //         url: true,
            //     },
            //     copyrights_en: {
            //         required: true,
            //         maxlength: 255
            //     },
            //     copyrights_ro: {
            //         required: true,
            //         maxlength: 255
            //     }
            // },

            errorElement: 'span',
            submitHandler: function(form) {
                var formData = new FormData(form);

                $.ajax({
                    url: $(form).attr('action'),
                    data: formData,
                    type: 'POST',
                    dataType: 'json',
                    processData: false,
                    contentType: false,
                    success: function(data) {
                        if (data.status) {
                            Swal.fire({
                                title: data.title,
                                text: data.message,
                                icon: 'success',
                            });
                            $(form)[0].reset();
                            $("#generalmodal").modal('hide');
                        }
                    },
                    error: function(xhr, status, error) {
                            var jsonResponse = JSON.parse(xhr.responseText);
                            var locale = '{{ app()->getLocale() }}'; // Get the current application locale

                            if (locale == 'en') {
                                // English error messages
                                var errorMessage = "Validation failed";
                            } else if (locale == 'ro') {
                                // Romanian error messages
                                errorMessage = "Validarea a eșuat";
                            } else if (locale == 'ar') {
                                // Arabic error messages
                                errorMessage = "فشل التحقق من الصحة";
                            } else {
                                // Default to English
                                // errorMessage += Object.values(errors).join(", ");
                            }
                            if (jsonResponse.errors) {
                                errorMessage += ":<br> ";
                                errorMessage += Object.values(jsonResponse.errors).join(
                                    "<br>");
                                Swal.fire('', errorMessage, 'error')
                            }
                        }
                });
                return false;
            }
        });

    });
</script>
@endsection