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


<div class="card mb-6 p-10">
    <form id="about" method="POST" action="{{ route('about-add.store', @$about->id_encrypted) }}" class="row g-5" enctype="multipart/form-data">
        @csrf
        <div class="card-body">
            <div class="row">
                <!-- Page Header Image Display -->
                <div class="col-md-4 d-flex align-items-sm-center gap-6">
                    <img src="{{ asset('storage/about/' . @$about->page_header_image) }}" alt="logo" class="d-block w-px-100 h-px-100 rounded" id="uploaded_page_header_image">
                    <div class="button-wrapper">
                        <label for="page_header_image" 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.about.h_image')</span>
                            <i class="ri-upload-2-line d-block d-sm-none"></i>
                            <input type="file" id="page_header_image" name="page_header_image" class="account-file-input" hidden accept="image/png, image/jpeg">
                        </label>
                    </div>
                </div>
            </div>
            
            <div class="row mt-1 g-5">
                <div class="col-md-6">
                    <div class="form-floating form-floating-outline">
                        <input type="text" class="form-control" placeholder="@lang('messages.about.title_en')" value="{{ @$about->page_title_en }}" id="page_title_en" name="page_title_en" aria-label="page_title_en" aria-describedby="page_title_en">
                        <label for="page_title_en">@lang('messages.about.title_en')</label>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-floating form-floating-outline">
                        <input type="text" class="form-control" placeholder="@lang('messages.about.title_ro')" value="{{ @$about->page_title_ro }}" id="page_title_ro" name="page_title_ro" aria-label="page_title_ro" aria-describedby="page_title_ro">
                        <label for="page_title_ro">@lang('messages.about.title_ro')</label>
                    </div>
                </div>
            </div>
            <div class="row mt-1 g-5">
                <div class="col-md-6">
                    <span>@lang('messages.about.description_en')</span>
                    <div id="page_description_en" name="page_description_en">
                    </div>
                </div>
                <div class="col-md-6">
                    <span>@lang('messages.about.description_ro')</span>
                    <div id="page_description_ro" name="page_description_ro">
                    </div>
                </div>
            </div>
            <div class="row mt-1 g-5">
                <div class="col-md-6">
                    <div class="form-floating form-floating-outline">
                        <input type="text" class="form-control" placeholder="@lang('messages.about.who_we_title_en')" value="{{ @$about->who_we_are_title_en }}" name="who_we_are_title_en" aria-label="who_we_are_title_en" aria-describedby="who_we_are_title_en">
                        <label for="who_we_are_title_en">@lang('messages.about.who_we_title_en')</label>
                    </div>
                </div>
                <div class="col-md-6 fv-plugins-icon-container">
                    <div class="form-floating form-floating-outline">
                        <input type="text" class="form-control" placeholder="@lang('messages.about.who_we_title_ro')" value="{{ @$about->who_we_are_title_ro }}" name="who_we_are_title_ro" aria-label="who_we_are_title_ro" aria-describedby="who_we_are_title_ro">
                        <label for="who_we_are_title_ro">@lang('messages.about.who_we_title_ro')</label>
                    </div>
                </div>
            </div>
            <div class="row mt-1 g-5">
                    <div class="col-md-6">
                    <span>@lang('messages.about.who_sub_en')</span>
                    <div id="who_we_are_subtitle_en" name="who_we_are_subtitle_en">
                    </div>
                </div>
                <div class="col-md-6">
                    <span>@lang('messages.about.who_sub_ro')</span>
                    <div id="who_we_are_subtitle_ro" name="who_we_are_subtitle_ro">
                    </div>
                </div>
            </div>
            <div class="row mt-12">
                <!-- Footer Logo Image Display -->
                <div class="col-md-4 d-flex align-items-sm-center gap-6">
                    <img src="{{ asset('storage/about/'.@$about->who_we_are_first_icon) }}" alt="First Icon" class="d-block w-px-100 h-px-100 rounded" id="uploaded_who_we_are_first_icon">
                    <div class="button-wrapper">
                        <label for="who_we_are_first_icon" 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.about.upload_first_icon')</span>
                            <i class="ri-upload-2-line d-block d-sm-none"></i>
                            <input type="file" id="who_we_are_first_icon" name="who_we_are_first_icon" 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/about/' . @$about->who_we_are_second_icon) }}" alt="Second Icon" class="d-block w-px-100 h-px-100 rounded" id="uploaded_who_we_are_second_icon">
                    <div class="button-wrapper">
                        <label for="who_we_are_second_icon" 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.about.upload_second_icon')</span>
                            <i class="ri-upload-2-line d-block d-sm-none"></i>
                            <input type="file" id="who_we_are_second_icon" name="who_we_are_second_icon" 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/about/' . @$about->who_we_are_third_icon) }}" alt="Third Icon" class="d-block w-px-100 h-px-100 rounded" id="uploaded_who_we_are_third_icon">
                    <div class="button-wrapper">
                        <label for="who_we_are_third_icon" 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.about.upload_third_icon')</span>
                            <i class="ri-upload-2-line d-block d-sm-none"></i>
                            <input type="file" id="who_we_are_third_icon" name="who_we_are_third_icon" class="account-file-input" hidden accept="image/png, image/jpeg">
                        </label>
                    </div>
                </div>
            </div>
            <div class="row mt-1 g-5">
                <div class="col-md-6">
                    <div class="form-floating form-floating-outline">
                        <input type="text" class="form-control" placeholder="@lang('messages.about.who_we_1st_title_en')" value="{{ @$about->who_we_are_first_title_en }}" name="who_we_are_first_title_en" aria-label="who_we_are_first_title_en" aria-describedby="who_we_are_first_title_en">
                        <label for="who_we_are_first_title_en">@lang('messages.about.who_we_1st_title_en')</label>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-floating form-floating-outline">
                        <input type="text" class="form-control" placeholder="@lang('messages.about.who_we_1st_title_ro')" value="{{ @$about->who_we_are_first_title_ro }}" name="who_we_are_first_title_ro" aria-label="who_we_are_first_title_ro" aria-describedby="who_we_are_first_title_ro">
                        <label for="who_we_are_first_title_ro">@lang('messages.about.who_we_1st_title_ro')</label>
                    </div>
                </div>
            </div>
            <div class="row mt-1 g-5">
                <div class="col-md-6">
                    <span>@lang('messages.about.who_1st_sub_en')</span>
                    <div id="who_we_are_first_description_en" name="who_we_are_first_description_en">
                    </div>
                </div>
                <div class="col-md-6">
                    <span>@lang('messages.about.who_1st_sub_ro')</span>
                    <div id="who_we_are_first_description_ro" name="who_we_are_first_description_ro">
                    </div>
                </div>
            </div>
            <div class="row mt-1 g-5">
                <div class="col-md-6">
                    <div class="form-floating form-floating-outline">
                        <input type="text" class="form-control" placeholder="@lang('messages.about.who_we_2nd_title_en')" value="{{ @$about->who_we_are_second_title_en }}" name="who_we_are_second_title_en" aria-label="who_we_are_second_title_en" aria-describedby="who_we_are_second_title_en">
                        <label for="who_we_are_second_title_en">@lang('messages.about.who_we_2nd_title_en')</label>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-floating form-floating-outline">
                        <input type="text" class="form-control" placeholder="@lang('messages.about.who_we_2nd_title_ro')" value="{{ @$about->who_we_are_second_title_ro }}" name="who_we_are_second_title_ro" aria-label="who_we_are_second_title_ro" aria-describedby="who_we_are_second_title_ro">
                        <label for="who_we_are_second_title_ro">@lang('messages.about.who_we_2nd_title_ro')</label>
                    </div>
                </div>
            </div>
            <div class="row mt-1 g-5">
                <div class="col-md-6">
                    <span>@lang('messages.about.who_2nd_sub_en')</span>
                    <div id="who_we_are_second_description_en" name="who_we_are_second_description_en">
                    </div>
                </div>
                <div class="col-md-6">
                    <span>@lang('messages.about.who_2nd_sub_ro')</span>
                    <div id="who_we_are_second_description_ro" name="who_we_are_second_description_ro">
                    </div>
                </div>
            </div>
            <div class="row mt-1 g-5">
                <div class="col-md-6">
                    <div class="form-floating form-floating-outline">
                        <input type="text" class="form-control" placeholder="@lang('messages.about.who_we_3rd_title_en')" value="{{ @$about->who_we_are_third_title_en }}" name="who_we_are_third_title_en" aria-label="who_we_are_third_title_en" aria-describedby=who_we_are_third_title_en">
                        <label for="who_we_are_third_title_en">@lang('messages.about.who_we_3rd_title_en')</label>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-floating form-floating-outline">
                        <input type="text" class="form-control" placeholder="@lang('messages.about.who_we_3rd_title_ro')" value="{{ @$about->who_we_are_third_title_ro }}" name="who_we_are_third_title_ro" aria-label="who_we_are_third_title_ro" aria-describedby="who_we_are_third_title_ro">
                        <label for="who_we_are_third_title_ro">@lang('messages.about.who_we_3rd_title_ro')</label>
                    </div>
                </div>
            </div>
            <div class="row mt-1 g-5">
                <div class="col-md-6">
                    <span>@lang('messages.about.who_3rd_sub_en')</span>
                    <div id="who_we_are_third_description_en" name="who_we_are_third_description_en">
                    </div>
                </div>
                <div class="col-md-6">
                    <span>@lang('messages.about.who_3rd_sub_ro')</span>
                    <div id="who_we_are_third_description_ro" name="who_we_are_third_description_ro">
                    </div>
                </div>
            </div>


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

    <form>
</div>
@endsection

@section('footer_scripts')
<script>
    "use strict";

    // page_description_en
    var page_description_en = new Quill("#page_description_en", {bounds: "#page_description_en", placeholder: "Type Something...", modules: {formula: true, toolbar: [[{font: []}, {size: []}], ["bold", "italic", "underline", "strike"], [{color: []}, {background: []}], [{script: "super"}, {script: "sub"}], [{header: "1"}, {header: "2"}, "blockquote", "code-block"], [{list: "ordered"}, {list: "bullet"}, {indent: "-1"}, {indent: "+1"}], [{direction: "rtl"}], ["link", "image", "video", "formula"], ["clean"]]}, theme: "snow"});
    page_description_en.root.innerHTML = `{!! addslashes($about->page_description_en) !!}`;
    
    // page_description_ro
    var page_description_ro = new Quill("#page_description_ro", {bounds: "#page_description_ro", placeholder: "Type Something...", modules: {formula: true, toolbar: [[{font: []}, {size: []}], ["bold", "italic", "underline", "strike"], [{color: []}, {background: []}], [{script: "super"}, {script: "sub"}], [{header: "1"}, {header: "2"}, "blockquote", "code-block"], [{list: "ordered"}, {list: "bullet"}, {indent: "-1"}, {indent: "+1"}], [{direction: "rtl"}], ["link", "image", "video", "formula"], ["clean"]]}, theme: "snow"});
    page_description_ro.root.innerHTML = `{!! addslashes($about->page_description_ro) !!}`;

    // who_we_are_subtitle_en
    var who_we_are_subtitle_en = new Quill("#who_we_are_subtitle_en", {bounds: "#who_we_are_subtitle_en", placeholder: "Type Something...", modules: {formula: true, toolbar: [[{font: []}, {size: []}], ["bold", "italic", "underline", "strike"], [{color: []}, {background: []}], [{script: "super"}, {script: "sub"}], [{header: "1"}, {header: "2"}, "blockquote", "code-block"], [{list: "ordered"}, {list: "bullet"}, {indent: "-1"}, {indent: "+1"}], [{direction: "rtl"}], ["link", "image", "video", "formula"], ["clean"]]}, theme: "snow"});
    who_we_are_subtitle_en.root.innerHTML = `{!! addslashes($about->who_we_are_subtitle_en) !!}`;
    
    // who_we_are_subtitle_ro
    var who_we_are_subtitle_ro = new Quill("#who_we_are_subtitle_ro", {bounds: "#who_we_are_subtitle_ro", placeholder: "Type Something...", modules: {formula: true, toolbar: [[{font: []}, {size: []}], ["bold", "italic", "underline", "strike"], [{color: []}, {background: []}], [{script: "super"}, {script: "sub"}], [{header: "1"}, {header: "2"}, "blockquote", "code-block"], [{list: "ordered"}, {list: "bullet"}, {indent: "-1"}, {indent: "+1"}], [{direction: "rtl"}], ["link", "image", "video", "formula"], ["clean"]]}, theme: "snow"});
    who_we_are_subtitle_ro.root.innerHTML = `{!! addslashes($about->who_we_are_subtitle_ro) !!}`;
    
    // who_we_are_first_description_en
    var who_we_are_first_description_en = new Quill("#who_we_are_first_description_en", {bounds: "#who_we_are_first_description_en", placeholder: "Type Something...", modules: {formula: true, toolbar: [[{font: []}, {size: []}], ["bold", "italic", "underline", "strike"], [{color: []}, {background: []}], [{script: "super"}, {script: "sub"}], [{header: "1"}, {header: "2"}, "blockquote", "code-block"], [{list: "ordered"}, {list: "bullet"}, {indent: "-1"}, {indent: "+1"}], [{direction: "rtl"}], ["link", "image", "video", "formula"], ["clean"]]}, theme: "snow"});
    who_we_are_first_description_en.root.innerHTML = `{!! addslashes($about->who_we_are_first_description_en) !!}`;
    
    // who_we_are_first_description_ro
    var who_we_are_first_description_ro = new Quill("#who_we_are_first_description_ro", {bounds: "#who_we_are_first_description_ro", placeholder: "Type Something...", modules: {formula: true, toolbar: [[{font: []}, {size: []}], ["bold", "italic", "underline", "strike"], [{color: []}, {background: []}], [{script: "super"}, {script: "sub"}], [{header: "1"}, {header: "2"}, "blockquote", "code-block"], [{list: "ordered"}, {list: "bullet"}, {indent: "-1"}, {indent: "+1"}], [{direction: "rtl"}], ["link", "image", "video", "formula"], ["clean"]]}, theme: "snow"});
    who_we_are_first_description_ro.root.innerHTML = `{!! addslashes($about->who_we_are_first_description_ro) !!}`;
    
    // who_we_are_second_description_en
    var who_we_are_second_description_en = new Quill("#who_we_are_second_description_en", {bounds: "#who_we_are_second_description_en", placeholder: "Type Something...", modules: {formula: true, toolbar: [[{font: []}, {size: []}], ["bold", "italic", "underline", "strike"], [{color: []}, {background: []}], [{script: "super"}, {script: "sub"}], [{header: "1"}, {header: "2"}, "blockquote", "code-block"], [{list: "ordered"}, {list: "bullet"}, {indent: "-1"}, {indent: "+1"}], [{direction: "rtl"}], ["link", "image", "video", "formula"], ["clean"]]}, theme: "snow"});
    who_we_are_second_description_en.root.innerHTML = `{!! addslashes($about->who_we_are_second_description_en) !!}`;
    
    // who_we_are_second_description_ro
    var who_we_are_second_description_ro = new Quill("#who_we_are_second_description_ro", {bounds: "#who_we_are_second_description_ro", placeholder: "Type Something...", modules: {formula: true, toolbar: [[{font: []}, {size: []}], ["bold", "italic", "underline", "strike"], [{color: []}, {background: []}], [{script: "super"}, {script: "sub"}], [{header: "1"}, {header: "2"}, "blockquote", "code-block"], [{list: "ordered"}, {list: "bullet"}, {indent: "-1"}, {indent: "+1"}], [{direction: "rtl"}], ["link", "image", "video", "formula"], ["clean"]]}, theme: "snow"});
    who_we_are_second_description_ro.root.innerHTML = `{!! addslashes($about->who_we_are_second_description_ro) !!}`;
    
    // who_we_are_third_description_en
    var who_we_are_third_description_en = new Quill("#who_we_are_third_description_en", {bounds: "#who_we_are_third_description_en", placeholder: "Type Something...", modules: {formula: true, toolbar: [[{font: []}, {size: []}], ["bold", "italic", "underline", "strike"], [{color: []}, {background: []}], [{script: "super"}, {script: "sub"}], [{header: "1"}, {header: "2"}, "blockquote", "code-block"], [{list: "ordered"}, {list: "bullet"}, {indent: "-1"}, {indent: "+1"}], [{direction: "rtl"}], ["link", "image", "video", "formula"], ["clean"]]}, theme: "snow"});
    who_we_are_third_description_en.root.innerHTML = `{!! addslashes($about->who_we_are_third_description_en) !!}`;
    
    // who_we_are_third_description_ro
    var who_we_are_third_description_ro = new Quill("#who_we_are_third_description_ro", {bounds: "#who_we_are_third_description_ro", placeholder: "Type Something...", modules: {formula: true, toolbar: [[{font: []}, {size: []}], ["bold", "italic", "underline", "strike"], [{color: []}, {background: []}], [{script: "super"}, {script: "sub"}], [{header: "1"}, {header: "2"}, "blockquote", "code-block"], [{list: "ordered"}, {list: "bullet"}, {indent: "-1"}, {indent: "+1"}], [{direction: "rtl"}], ["link", "image", "video", "formula"], ["clean"]]}, theme: "snow"});
    who_we_are_third_description_ro.root.innerHTML = `{!! addslashes($about->who_we_are_third_description_ro) !!}`;

    // locale
    var locale = '{{ app()->getLocale() }}'; // Get the current application locale

    // Header Image Upload
    document.getElementById('page_header_image').addEventListener('change', function(event) {
        handleImageUpload(event, 'uploaded_page_header_image');
    });

    // who_we_are_first_icon Image Upload
    document.getElementById('who_we_are_first_icon').addEventListener('change', function(event) {
        handleImageUpload(event, 'uploaded_who_we_are_first_icon');
    });

    // who_we_are_second_icon Image Upload
    document.getElementById('who_we_are_second_icon').addEventListener('change', function(event) {
        handleImageUpload(event, 'uploaded_who_we_are_second_icon');
    });

     // who_we_are_third_icon Image Upload
     document.getElementById('who_we_are_third_icon').addEventListener('change', function(event) {
        handleImageUpload(event, 'uploaded_who_we_are_third_icon');
    });

    // 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() {
        $("#about").submit(function(e) {
            e.preventDefault();
        }).validate({
            rules: {
                page_title_en: {
                    required: true,
                    maxlength: 255
                },
                page_title_ro: {
                    required: true,
                    maxlength: 255
                },
                page_description_en: {
                    required: true
                },
                page_description_ro: {
                    required: true
                },
                who_we_are_title_en: {
                    required: true,
                    maxlength: 255
                },
                who_we_are_title_ro: {
                    required: true,
                    maxlength: 255
                },
                who_we_are_subtitle_en: {
                    required: true
                },
                who_we_are_subtitle_ro: {
                    required: true
                },
                who_we_are_first_title_en: {
                    required: true,
                    maxlength: 255
                },
                who_we_are_first_title_ro: {
                    required: true,
                    maxlength: 255
                },
                who_we_are_first_description_en: {
                    required: true
                },
                who_we_are_first_description_ro: {
                    required: true
                },
                who_we_are_second_title_en: {
                    required: true,
                    maxlength: 255
                },
                who_we_are_second_title_ro: {
                    required: true,
                    maxlength: 255
                },
                who_we_are_second_description_en: {
                    required: true
                },
                who_we_are_second_description_ro: {
                    required: true
                },
                who_we_are_third_title_en: {
                    required: true,
                    maxlength: 255
                },
                who_we_are_third_title_ro: {
                    required: true,
                    maxlength: 255
                },
                who_we_are_third_description_en: {
                    required: true
                },
                who_we_are_third_description_ro: {
                    required: true
                },
                page_header_image: {
                    accept: "image/jpeg,image/png,image/jpg,image/gif",
                    filesize: 2048000 // 2048 KB
                },
                who_we_are_second_icon: {
                    accept: "image/jpeg,image/png,image/jpg,image/gif",
                    filesize: 2048000, // 2048 KB
                    required: function(element) {
                        return $("#yourFormId input[name='who_we_are_second_icon']").val() !== '';
                    }
                },
                who_we_are_third_icon: {
                    accept: "image/jpeg,image/png,image/jpg,image/gif",
                    filesize: 2048000, // 2048 KB
                    required: function(element) {
                        return $("#yourFormId input[name='who_we_are_third_icon']").val() !== '';
                    }
                }
            },
            errorElement: 'span',
            submitHandler: function(form) {
                var formData = new FormData(form);
                formData.append('page_description_en', page_description_en.root.innerHTML);
                formData.append('page_description_ro', page_description_ro.root.innerHTML);

                formData.append('who_we_are_subtitle_en', who_we_are_subtitle_en.root.innerHTML);
                formData.append('who_we_are_subtitle_ro', who_we_are_subtitle_ro.root.innerHTML);

                formData.append('who_we_are_first_description_en', who_we_are_first_description_en.root.innerHTML);
                formData.append('who_we_are_first_description_ro', who_we_are_first_description_ro.root.innerHTML);

                formData.append('who_we_are_second_description_en', who_we_are_second_description_en.root.innerHTML);
                formData.append('who_we_are_second_description_ro', who_we_are_second_description_ro.root.innerHTML);

                formData.append('page_description_en', page_description_en.root.innerHTML);
                formData.append('page_description_ro', page_description_ro.root.innerHTML);

                formData.append('who_we_are_third_description_en', who_we_are_third_description_en.root.innerHTML);
                formData.append('who_we_are_third_description_ro', who_we_are_third_description_ro.root.innerHTML);
                $.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();
                        }
                    },
                    error: function(xhr, status, error) {
                        var jsonResponse = JSON.parse(xhr.responseText);
                        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