@extends('superadmin.layout.main')

<style>
    .border-red{
        border: 1px solid red;
    }

    .stylish-line {
        display: flex;
        align-items: center;
        text-align: center;
        margin: 40px 0;
        position: relative;
    }

    .stylish-line::before,
    .stylish-line::after {
        content: '';
        flex: 1;
        height: 1.2px;
        background: linear-gradient(to right, transparent 5%, #ff4343 30%, #6044ff 70%, transparent 95%);
        /* background: linear-gradient(to right, transparent, #ff4343, #6044ff, transparent); */
    }

    .stylish-line span {
        margin-top: 30px;
        margin-bottom: 30px;
        font-size: 18px;
        color: #333;
        font-weight: bold;
        background-color: #fff; /* Adjust to match your background */
        z-index: 1;
    }
    .dropzone .dz-preview .dz-image{
        width: 100% !important;
        height: auto !important;
        max-height: 200px !important;
    }
</style>

<!-- Page header -->
@section('page-header')
    <div class="page-header d-print-none">
        <div class="container-xl">
            <div class="row g-2 align-items-center">
                <div class="col">
                    <!-- Page pre-title -->
                    <div class="page-pretitle">
                        Media & Ads
                    </div>
                    <h2 class="page-title">
                        Setting
                    </h2>
                </div>
                <!-- Page title actions -->
                <div class="col-auto ms-auto d-print-none">
                    <div class="btn-list">
                        <span class="d-none d-sm-inline">
                            <a href="{{ route('admin.dashboard') }}" class="btn btn-primary">
                                {!! $GO_BACK !!} Go Back
                            </a>
                        </span>

                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


@section('main-container')

    <div class="row">
        <div class="col-sm-12 mt-5">
            @if ($errors->any())
                <div class="card">
                    <div class="card-body">
                        <div class="alert alert-danger">
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>        
            @endif
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h2 class="mb-0">Media & Advertisement Setting</h2>
                    <div class="ms-auto">
                        <button type="submit" form="form-id" class="btn btn-success">
                            {!! $CHECK !!} Update Settings
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    
                    <form method="POST" id="form-id" action="{{ route('admin.setting.media-update') }}" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')

                        <!-- Favicon and Logo Section (Two Sections in One Row) -->
                        <div class="row mb-4">
                            <div class="col-md-6">
                                <label class="form-label f-18">Favicon</label>
                                <div class="dropzone" id="favicon-image-dropzone">
                                    <div class="dz-message">
                                        <span>Drop your favicon here or click to upload</span>
                                    </div>
                                    <input type="file" class="form-control d-none" name="favicon" onchange="previewImage(event, 'favicon-preview')">
                                    <div class="mt-2">
                                        <img id="favicon-image-preview" src="{{ asset('storage/'.$setting->favicon) }}" class="img-fluid" style="max-height: 150px; display: none;">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label f-18">Logo</label>
                                <div class="dropzone" id="logo-image-dropzone">
                                    <div class="dz-message">
                                        <span>Drop your logo here or click to upload</span>
                                    </div>
                                    <input type="file" class="form-control d-none" name="logo" onchange="previewImage(event, 'logo-preview')">
                                    <div class="mt-2">
                                        <img id="logo-image-preview" src="{{asset('storage/'.$setting->logo)}}" class="img-fluid" style="max-height: 150px; display: none;">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="stylish-line">
                            <span>Cover Image</span>
                        </div>
                        <!-- Cover Image -->
                        <div class="row mb-4">
                            <div class="col-md-12 mb-2">
                                <label class="form-label f-18">Show Cover Image</label>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input change-status" url="{{url('admin/setting/update-ad-visibility')}}" data-id="{{$setting->id}}" data-col="show_cover_image" value="1" {{$setting->show_cover_image? 'checked' : false}} type="radio" name="show_cover_image" id="showCoverImage">
                                    <label class="form-check-label" for="coverImageYes">Yes</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input change-status" url="{{url('admin/setting/update-ad-visibility')}}" data-id="{{$setting->id}}" data-col="show_cover_image" value="0" {{!$setting->show_cover_image? 'checked' : false}} type="radio" name="show_cover_image" id="hideCoverImage">
                                    <label class="form-check-label" for="coverImageNo">No</label>
                                </div>

                                <!-- Image or Ad Fields -->
                                <div id="global_coverImageFields" class="mt-3 {{!$setting->show_cover_image? 'd-none' : false}}">
                                    <div class="dropzone" id="global-cover-image-dropzone">
                                        <div class="dz-message">
                                            <span>Drop hero image here or click to upload</span>
                                        </div>
                                        <input type="file" class="form-control d-none" name="global_cover_image" onchange="previewImage(event, 'global-cover-image-preview')">
                                        <div class="mt-2 text-center">
                                            {{-- <img id="global-cover-image-preview" src="{{$setting->global_cover_image? asset('storage/'.$setting->global_cover_image) : asset('assets/images/global-cover-image.jpg')}}" class="img-fluid" style="max-height: 150px; width: 50%"> --}}
                                        </div>
                                    </div>
                                </div>
                                
                            </div>
                        </div>

                        <div class="stylish-line">
                            <span>Media & Advertisement</span>
                        </div>

                        <!-- Hero Section (Image or Ad) -->
                        @php
                            $heroIsAd = $setting->hero_is_ad? true : false;
                        @endphp
                        <div class="row mb-4">
                            <div class="col-md-6 mb-2">
                                <label class="form-label f-18">Hero Section</label>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input change-status" url="{{url('admin/setting/update-ad-visibility')}}" data-id="{{$setting->id}}" data-col="hero_is_ad" type="radio" name="hero_is_ad" id="heroImage" value="0" {{!$heroIsAd? 'checked' : false}}>
                                    <label class="form-check-label" for="heroImage">Image</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input change-status" url="{{url('admin/setting/update-ad-visibility')}}" data-id="{{$setting->id}}" data-col="hero_is_ad" type="radio" name="hero_is_ad" id="heroAd" value="1" {{$heroIsAd? 'checked' : false}}>
                                    <label class="form-check-label" for="heroAd">Advertisement</label>
                                </div>

                                <!-- Image or Ad Fields -->
                                <div id="heroImageFields" class="mt-3 {{$heroIsAd? 'd-none' : false}}">
                                    <div class="dropzone" id="hero-image-dropzone">
                                        <div class="dz-message">
                                            <span>Drop hero image here or click to upload</span>
                                        </div>
                                        <input type="file" class="form-control d-none" name="hero_image" onchange="previewImage(event, 'hero-image-preview')">
                                        <div class="mt-2">
                                            <img id="hero-image-preview" src="{{asset('storage/'.$setting->hero_image)}}" class="img-fluid" style="max-height: 150px; display: none;">
                                        </div>
                                    </div>
                                </div>
                                <div id="heroAdFields" class="d-none mt-3">
                                    <div class="htmlEditor" data-input-name="hero_ad_script">{{old('hero_ad_script',$setting->hero_ad_script?? "<p> Your HTML content here </p>")}}</div>
                                    {{-- <textarea class="form-control" name="hero_ad_script" placeholder="Hero Advertisement Script">{{$setting->hero_ad_script}}</textarea> --}}
                                </div>
                            </div>
                        

                            <!-- Homepage Ending Section (Image or Ad) -->
                            @php
                                $homeEndIsAd = $setting->homepage_ending_is_ad? true : false;
                            @endphp
                            <div class="col-md-6 mb-2">
                                <label class="form-label f-18">Homepage Ending Section</label>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input change-status" url="{{url('admin/setting/update-ad-visibility')}}" data-id="{{$setting->id}}" data-col="homepage_ending_is_ad" type="radio" name="homepage_ending_is_ad" id="homepageEndingImage" value="0" {{!$homeEndIsAd? 'checked' : false}}>
                                    <label class="form-check-label" for="homepageEndingImage">Image</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input change-status" url="{{url('admin/setting/update-ad-visibility')}}" data-id="{{$setting->id}}" data-col="homepage_ending_is_ad" type="radio" name="homepage_ending_is_ad" id="homepageEndingAd" value="1"  {{$homeEndIsAd? 'checked' : false}}>
                                    <label class="form-check-label" for="homepageEndingAd">Advertisement</label>
                                </div>

                                <!-- Image or Ad Fields -->
                                <div id="homepage_endingImageFields" class="mt-3  {{$homeEndIsAd? 'd-none' : false}}">
                                    <div class="dropzone" id="homepage-ending-image-dropzone">
                                        <div class="dz-message">
                                            <span>Drop homepage ending image here or click to upload</span>
                                        </div>
                                        <input type="file" class="form-control d-none" name="homepage_ending_image" onchange="previewImage(event, 'homepage-ending-image-preview')">
                                        <div class="mt-2">
                                            <img id="homepage-ending-image-preview" src="{{asset('storage/'.$setting->homepage_ending_image)}}" class="img-fluid" style="max-height: 150px; display: none;">
                                        </div>
                                    </div>
                                </div>
                                <div id="homepage_endingAdFields" class="d-none mt-3">
                                    <div class="htmlEditor" data-input-name="homepage_ending_ad_script">{{old('homepage_ending_ad_script',$setting->homepage_ending_ad_script?? "<p> Your HTML content here </p>")}}</div>
                                    {{-- <textarea class="form-control" name="homepage_ending_ad_script" placeholder="Homepage Ending Advertisement Script">{{$setting->homepage_ending_ad_script}}</textarea> --}}
                                </div>
                            </div>
                        </div>

                        <!-- Sidebar Section (Image or Ad) -->
                        @php
                            $sidebarIsAd = $setting->sidebar_is_ad? true : false;
                        @endphp
                        <div class="row mb-4">
                            <div class="col-md-6 mb-2">
                                <label class="form-label f-18">Sidebar Section</label>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input change-status" url="{{url('admin/setting/update-ad-visibility')}}" data-id="{{$setting->id}}" data-col="sidebar_is_ad" type="radio" name="sidebar_is_ad" id="sidebarImage" value="0" {{!$sidebarIsAd? 'checked' : false}}>
                                    <label class="form-check-label" for="sidebarImage">Image</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input change-status" url="{{url('admin/setting/update-ad-visibility')}}" data-id="{{$setting->id}}" data-col="sidebar_is_ad" type="radio" name="sidebar_is_ad" id="sidebarAd" value="1"  {{$sidebarIsAd? 'checked' : false}}>
                                    <label class="form-check-label" for="sidebarAd">Advertisement</label>
                                </div>

                                <!-- Image or Ad Fields -->
                                <div id="sidebarImageFields" class="mt-3  {{$sidebarIsAd? 'd-none' : false}}">
                                    <div class="dropzone" id="sidebar-image-dropzone">
                                        <div class="dz-message">
                                            <span>Drop sidebar image here or click to upload</span>
                                        </div>
                                        <input type="file" class="form-control d-none" name="sidebar_image" onchange="previewImage(event, 'sidebar-image-preview')">
                                        <div class="mt-2">
                                            <img id="sidebar-image-preview" src="{{asset('storage/'.$setting->sidebar_image)}}" class="img-fluid" style="max-height: 150px; display: none;">
                                        </div>
                                    </div>
                                </div>
                                <div id="sidebarAdFields" class="d-none mt-3">
                                    <div class="htmlEditor" data-input-name="sidebar_ad_script">{{old('sidebar_ad_script',$setting->sidebar_ad_script?? "<p> Your HTML content here </p>")}}</div>
                                    {{-- <textarea class="form-control" name="sidebar_ad_script" placeholder="Sidebar Advertisement Script">{{$setting->sidebar_ad_script}}</textarea> --}}
                                </div>
                            </div>
                        

                            <!-- Before Content Section (Image or Ad) -->
                            @php
                                $beforeConentIsAd = $setting->before_content_is_ad? true : false;
                            @endphp
                            <div class="col-md-6 mb-2">
                                <label class="form-label f-18">Before Content Section</label>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input change-status" url="{{url('admin/setting/update-ad-visibility')}}" data-id="{{$setting->id}}" data-col="before_content_is_ad" type="radio" name="before_content_is_ad" id="beforeContentImage" value="0" {{!$beforeConentIsAd? 'checked' : false}}>
                                    <label class="form-check-label" for="beforeContentImage">Image</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input change-status"  url="{{url('admin/setting/update-ad-visibility')}}" data-id="{{$setting->id}}" data-col="before_content_is_ad" type="radio" name="before_content_is_ad" id="beforeContentAd" value="1" {{$beforeConentIsAd? 'checked' : false}}>
                                    <label class="form-check-label" for="beforeContentAd">Advertisement</label>
                                </div>

                                <!-- Image or Ad Fields -->
                                <div id="before_contentImageFields" class="mt-3 {{$beforeConentIsAd? 'd-none' : false}}">
                                    <div class="dropzone" id="before-content-image-dropzone">
                                        <div class="dz-message">
                                            <span>Drop before content image here or click to upload</span>
                                        </div>
                                        <input type="file" class="form-control d-none" name="before_content_image" onchange="previewImage(event, 'before-content-image-preview')">
                                        <div class="mt-2">
                                            <img id="before-content-image-preview" src="{{$setting->before_content_image? asset('storage/'.$setting->before_content_image) : false}}" class="img-fluid" style="max-height: 150px; display: none;">
                                        </div>
                                    </div>
                                </div>
                                <div id="before_contentAdFields" class="d-none mt-3">
                                    <div class="htmlEditor" data-input-name="before_content_ad_script">{{old('before_content_ad_script',$setting->before_content_ad_script?? "<p> Your HTML content here </p>")}}</div>
                                    {{-- <textarea class="form-control" name="before_content_ad_script" placeholder="Before Content Advertisement Script">{{$setting->before_content_ad_script}}</textarea> --}}
                                </div>
                            </div>
                        </div>

                        <!-- After Content Section (Image or Ad) -->
                        @php
                            $afterConentIsAd = $setting->after_content_is_ad? true : false;
                        @endphp
                        <div class="row mb-4">
                            <div class="col-md-6 mb-2">
                                <label class="form-label f-18">After Content Section</label>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input change-status"  url="{{url('admin/setting/update-ad-visibility')}}" data-id="{{$setting->id}}" data-col="after_content_is_ad" type="radio" name="after_content_is_ad" id="afterContentImage" value="0" {{!$afterConentIsAd? 'checked' : false}}>
                                    <label class="form-check-label" for="afterContentImage">Image</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input change-status"  url="{{url('admin/setting/update-ad-visibility')}}" data-id="{{$setting->id}}" data-col="after_content_is_ad" type="radio" name="after_content_is_ad" id="afterContentAd" value="1" {{$afterConentIsAd? 'checked' : false}}>
                                    <label class="form-check-label" for="afterContentAd">Advertisement</label>
                                </div>

                                <!-- Image or Ad Fields -->
                                <div id="after_contentImageFields" class="mt-3 {{$afterConentIsAd? 'd-none' : false}}">
                                    <div class="dropzone" id="after-content-image-dropzone">
                                        <div class="dz-message">
                                            <span>Drop after content image here or click to upload</span>
                                        </div>
                                        <input type="file" class="form-control d-none" name="after_content_image" onchange="previewImage(event, 'after-content-image-preview')">
                                        <div class="mt-2">
                                            <img id="after-content-image-preview" src="{{$setting->after_content_image? asset('storage/'.$setting->after_content_image) : false}}" class="img-fluid" style="max-height: 150px; display: none;">
                                        </div>
                                    </div>
                                </div>
                                <div id="after_contentAdFields" class="d-none mt-3">
                                    <div class="htmlEditor" data-input-name="after_content_ad_script">{{old('after_content_ad_script',$setting->after_content_ad_script?? "<p> Your HTML content here </p>")}}</div>
                                    {{-- <textarea class="form-control" name="after_content_ad_script" placeholder="After Content Advertisement Script">{{$setting->after_content_ad_script}}</textarea> --}}
                                </div>
                            </div>
                        

                            <!-- Footer Section (Image or Ad) -->
                            @php
                                $footerIsAd = $setting->footer_is_ad? true : false;
                            @endphp
                            <div class="col-md-6 mb-2">
                                <label class="form-label f-18">Footer Section</label>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input change-status" url="{{url('admin/setting/update-ad-visibility')}}" data-id="{{$setting->id}}" data-col="footer_is_ad" type="radio" name="footer_is_ad" id="footerImage" value="0" {{!$footerIsAd? 'checked' : false}}>
                                    <label class="form-check-label" for="footerImage">Image</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input change-status" url="{{url('admin/setting/update-ad-visibility')}}" data-id="{{$setting->id}}" data-col="footer_is_ad" type="radio" name="footer_is_ad" id="footerAd" value="1" {{$footerIsAd? 'checked' : false}}>
                                    <label class="form-check-label" for="footerAd">Advertisement</label>
                                </div>

                                <!-- Image or Ad Fields -->
                                <div id="footerImageFields" class="mt-3 {{$footerIsAd? 'd-none' : false}}">
                                    <div class="dropzone" id="footer-image-dropzone">
                                        <div class="dz-message">
                                            <span>Drop footer image here or click to upload</span>
                                        </div>
                                        <input type="file" class="form-control d-none" name="footer_image" onchange="previewImage(event, 'footer-image-preview')">
                                        <div class="mt-2">
                                            <img id="footer-image-preview" src="{{$setting->footer_image? asset('storage/'.$setting->footer_image) : false}}" class="img-fluid" style="max-height: 150px; display: none;">
                                        </div>
                                    </div>
                                </div>
                                <div id="footerAdFields" class="d-none mt-3">
                                    <div class="htmlEditor" data-input-name="footer_ad_script">{{old('footer_ad_script',$setting->footer_ad_script?? "<p> Your HTML content here </p>")}}</div>
                                    {{-- <textarea id="editor" class="form-control" name="footer_ad_script" placeholder="Footer Advertisement Script">{{$setting->footer_ad_script}}</textarea> --}}
                                </div>
                            </div>
                        </div>

                        <!-- Submit Button -->
                        <div class="mb-4">
                            <button type="submit" class="btn btn-success"> {!! $CHECK !!} Update Settings</button>
                        </div>
                    </form>
                    
                    
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/ace.js"></script>
<script>

    // Initialize Ace Editor for each .htmlEditor div
    const editors = {};

    document.querySelectorAll('.htmlEditor').forEach((div) => {
        const inputName = div.getAttribute('data-input-name');
        const editor = ace.edit(div);
        editor.session.setMode("ace/mode/html");
        editor.setOptions({ useWorker: true }); // Enable validation
        editors[inputName] = editor;
    });

    // Handle form submission
    document.getElementById('form-id').addEventListener('submit', async function (event) {
        let isValid = true;

        // Loop through all editors and validate content
        document.querySelectorAll('.htmlEditor').forEach((div) => {
            const inputName = div.getAttribute('data-input-name');
            const content = editors[inputName].getValue();
            // Create and append hidden input fields with the editor content
            const hiddenInput = document.createElement('input');
            hiddenInput.type = 'hidden';
            hiddenInput.name = inputName;
            hiddenInput.value = content;
            this.appendChild(hiddenInput);
        });

        // Prevent form submission if validation fails
        if (!isValid) {
            event.preventDefault();
        }
    });

    function getFileDetail(filePath, callback){
        $.ajax({
            url: "/admin/setting/get-file-detail", // Endpoint to fetch file details
            method: "POST",
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: {'filePath': filePath},
            success: function (response) {
                callback(response);
            },
            error: function (xhr, status, error) {
                callback(null);
                console.error("Error fetching file details:", error);
            }
        });  
    }

    // Disable auto discover to manually initialize Dropzones
    Dropzone.autoDiscover = false;

    // Generalized URL for upload and delete actions
    const uploadImgUrl = "{{ url('admin/setting/upload-image') }}";
    const deleteImgUrl = "{{ url('admin/setting/delete-image') }}";

    // Common Dropzone options
    const dropzoneOptions = {
        maxFiles: 1,
        maxFilesize: 5, // Max file size in MB
        addRemoveLinks: true, // Allow file removal
        dictDefaultMessage: "Drag and drop files here or click to upload",
        dictRemoveFile: "Remove file",
        dictMaxFilesExceeded: "You can only upload a maximum of 1 file.",
        url: uploadImgUrl,
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'), // CSRF token for Laravel
        },
    };

    // Initialize a Dropzone for each section (favicon, logo, etc.)
    function initializeDropzone(sectionId, filePath) {
        const dropzoneElement = document.querySelector(`#${sectionId}-image-dropzone`);
        const previewElement = document.querySelector(`#${sectionId}-image-preview`);
        
        // Initialize Dropzone
        const dropzone = new Dropzone(dropzoneElement, {
            ...dropzoneOptions,
            paramName: sectionId,
            init: function () {
                var $this = this;
                const existingFile = `{{ url('storage/${filePath}') }}`; // URL to the uploaded file

                if (existingFile) {
                    getFileDetail(filePath, function (fileDetail) {
                        // Create a mock file object for existing file
                        var mockFile = {
                            name: fileDetail.name,
                            size: fileDetail.size,
                            url: fileDetail.url
                        };
                        
                        // Add the existing file to the Dropzone
                        $this.files.push(mockFile);
                        $this.emit("addedfile", mockFile);
                        $this.emit("complete", mockFile);

                        // Set the thumbnail for the mock file
                        var imageElement = mockFile.previewElement.querySelector("[data-dz-thumbnail]");
                        if (imageElement) {
                            imageElement.src = existingFile;
                            imageElement.style.display = "block"; // Show the image preview
                        }

                        // Hide progress bar for the preloaded file
                        var progressElement = mockFile.previewElement.querySelector(".dz-progress");
                        if (progressElement) {
                            progressElement.style.display = "none";
                        }
                    });
                } else {
                    console.log('File not found for', sectionId);
                }

                // Handle file removal (new file uploaded, delete old one)
                $this.on("addedfile", function (file) {
                    if ($this.files.length > 1) {
                        var oldFile = $this.files[0]; // Old file in queue

                        // Remove old file's preview element
                        if (oldFile.previewElement) {
                            oldFile.previewElement.remove();
                        }
                        // Remove old file from Dropzone queue
                        $this.removeFile(oldFile);
                    }
                });

                // Handle file removal (when user clicks remove button)
                $this.on("removedfile", function (file) {
                    $.ajax({
                        url: deleteImgUrl,
                        method: "POST",
                        data: { url: file.url, section: sectionId }, // Pass file name to delete
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function (response) {
                            console.log("File deleted from server:", response);
                        },
                        error: function (xhr, status, error) {
                            console.error("Error deleting file:", error);
                        }
                    });
                });
            }
        });

        return dropzone;
    }

    // Initialize Dropzones for multiple sections
    document.addEventListener("DOMContentLoaded", function() {
        // Example sections: favicon, logo, hero image, etc.
        // Pattern (#sectionId,filePath)
        initializeDropzone('favicon', '{{ $setting->favicon }}');
        initializeDropzone('logo', '{{ $setting->logo }}');
        initializeDropzone('hero', '{{ $setting->hero_image }}');
        initializeDropzone('homepage-ending', '{{ $setting->homepage_ending_image }}');
        initializeDropzone('sidebar', '{{ $setting->sidebar_image }}');
        initializeDropzone('after-content', '{{ $setting->after_content_image }}');
        initializeDropzone('before-content', '{{ $setting->before_content_image }}');
        initializeDropzone('footer', '{{ $setting->footer_image }}');
        initializeDropzone('global-cover', '{{ $setting->global_cover_image }}');
        // Add more sections as needed
    });

</script>

<script>
    function previewImage(event, previewId) {
        var reader = new FileReader();
        reader.onload = function() {
            var output = document.getElementById(previewId);
            output.src = reader.result;
            output.classList.remove('d-none');
        };
        reader.readAsDataURL(event.target.files[0]);
    }

    document.querySelectorAll('input[type="radio"]').forEach(function (input) {
        input.addEventListener('change', function () {
            toggleFields();
        });
    });

    function toggleFields() {
        ['hero', 'homepage_ending', 'sidebar', 'before_content', 'after_content', 'footer'].forEach(function (section) {
            toggleField(section);
        });
        ['showCoverImage'].forEach(function (section) {
            toggleField(section);
        });
    }

    function toggleField(section) {
        if(section == 'showCoverImage' || section == 'hideCoverImage'){
            const isShowCoverImage = document.querySelector(`input[name="show_cover_image"]:checked`).value === '1';
            const imageFields = document.querySelector(`#global_coverImageFields`);
            // const adFields = document.querySelector(`#${section}AdFields`);
            imageFields.classList.toggle('d-none', !isShowCoverImage);
            // console.log(section)
            // adFields.classList.toggle('d-none', !isAdRadio);
        }
        else{
            const isAdRadio = document.querySelector(`input[name="${section}_is_ad"]:checked`).value === '1';
            const imageFields = document.querySelector(`#${section}ImageFields`);
            const adFields = document.querySelector(`#${section}AdFields`);
            imageFields.classList.toggle('d-none', isAdRadio);
            adFields.classList.toggle('d-none', !isAdRadio);
        }
    }
    
    function showHideCoverImage() {
        const isAdRadio = document.querySelector(`input[name="${section}_is_ad"]:checked`).value === '1';
        const imageFields = document.querySelector(`#${section}ImageFields`);
        const adFields = document.querySelector(`#${section}AdFields`);
        imageFields.classList.toggle('d-none', isAdRadio);
        adFields.classList.toggle('d-none', !isAdRadio);
    }

    toggleFields();  // Initialize on page load


</script>
@endsection