@extends('adminLayout.master')

@section('content')
    <style>
        .property-gallery {
            border-radius: 10px;
            padding: 20px;
        }

        .btn-custom {
            background-color: #2E2E72;
            color: white;
            border-radius: 30px;
            padding: 10px 20px;
            font-weight: bold;
            border: none;
            transition: 0.3s;
        }

        .btn-custom:hover {
            background-color: #25255a;
        }

        .text-muted {
            font-size: 0.9rem;
        }

        .property-gallery-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 15px;
            margin-top: 15px;
        }

        .bannerEn-image-item {
            position: relative;
            border-radius: 10px;
            overflow: hidden;
        }

        .bannerEn-image-item img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            border-radius: 10px;
            border: 2px solid #ddd;
            transition: 0.3s;
        }

        .bannerEn-image-item img:hover {
            transform: scale(1.05);
        }

        .removeEn-btn {
            position: absolute;
            top: 5px;
            right: 5px;
            background: white;
            color: black;
            border: none;
            border-radius: 50%;
            width: 25px;
            height: 25px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
        }
    </style>
    <div class="container-fluid" id="container-wrapper">

        <div class="card">
            <div class="d-sm-flex align-items-center justify-content-between px-3 py-3">
                <div>
                    <h3 class="m-0 fw-bold">General Setting</h3>
                </div>
            </div>
        </div>

        <div class="container mt-4 card pt-3">
            <form id="general-setting-form" action="{{ route('dashboard.generalSetting.update') }}" method="POST" enctype="multipart/form-data">
                @csrf

                <div class="row">

                    <!-- Title -->
                    <div class="col-md-6 mb-3">
                        <label for="title">Meta Title</label>
                        <input type="text" name="title" id="title" class="form-control"
                            value="{{ old('title', $setting->title ?? '') }}">
                            <span class="text-danger error" id="create-title-error">{{ $errors->first('title') }}</span>
                    </div>

                    <!-- Meta Keywords -->
                    <div class="col-md-6 mb-3">
                        <label for="meta_keywords">Meta Keywords</label>
                        <input type="text" name="meta_keywords" id="meta_keywords" class="form-control"
                            value="{{ old('meta_keywords', $setting->meta_keywords ?? '') }}">
                            <span class="text-danger error" id="create-meta_keywords-error">{{ $errors->first('meta_keywords') }}</span>
                    </div>
                </div>

                <div class="row mt-2">
                    {{-- Image Upload --}}
                    @php
                        $imageFields = [
                            'logo' => 'Logo',
                            // 'admin_logo' => 'Admin Logo',
                            'favicon' => 'Favicon',
                            // 'admin_favicon' => 'Admin Favicon',
                        ];
                    @endphp

                    @foreach ($imageFields as $field => $label)
                        <div class="col-md-3 mb-4">
                            <label class="form-label">{{ $label }}</label>
                            <div class="property-image-upload text-center border rounded p-1">
                                <label for="{{ $field }}Upload" class="d-block cursor-pointer">
                                    <img id="{{ $field }}Preview" class="edit_uploaded_image img-fluid mb-2"
                                        src="{{ asset($setting->$field ? 'images/generalSetting/' . $setting->$field : 'images/generalSetting/no-image.png') }}"
                                        alt="Upload {{ $label }}"
                                        style="max-height: 200px; object-fit: contain; visibility: visible;">
                                    <div class="upload-text text-muted">
                                        <i class="fa fa-camera me-1"></i> Upload {{ $label }}
                                    </div>
                                </label>
                                <input type="file" id="{{ $field }}Upload" name="{{ $field }}"
                                    accept="image/*" hidden onchange="previewImage(this, '{{ $field }}Preview')">
                            </div>
                            <span class="text-danger error" id="create-{{ $field }}Upload-error">{{ $errors->first($field) }}</span>
                        </div>
                    @endforeach
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="details">Banner Images (English)</label>
                            <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                                data-bs-target="#BannerImageEnModal" id="#myBtn">
                                <i class="icofont-plus"></i> Set Images
                            </button>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="details">Gallery Images (Hindi)</label>
                            <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                                data-bs-target="#BannerImageHiModal" id="#myBtn">
                                <i class="icofont-plus"></i> Set Images
                            </button>
                        </div>
                    </div>
                </div>

                <button type="submit" class="btn btn-primary">Save Settings</button>
            </form>
        </div>
    </div>
    <div class="modal fade" id="BannerImageEnModal" tabindex="-1" aria-labelledby="BannerImageEnModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content property-gallery">
                <div class="modal-header">
                    <h5 class="modal-title" id="imageGalleryModalLabel">Set Banner Images (English) </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <label class="btn btn-custom">
                        Upload File <input type="file" id="bannerEnImageUpload" name="property_gallary_images[]"
                            accept="image/*" multiple hidden>
                    </label>
                    <p class="text-muted mt-2">( You can upload multiple Images. )</p>

                    <!-- Image Grid -->
                    <div class="property-gallery-grid" id="bannerEnImagePreview">
                        @if ($setting->banner_image_en)
                            @php
                                $oldSelectedImages = json_decode($setting->banner_image_en, true);
                            @endphp
                            @foreach ($oldSelectedImages as $image)
                                <div class="bannerEn-image-item"><img
                                        src="{{ asset('images/generalSetting/en/' . $image) }}">
                                    <button class="removeEn-btn">✖</button>
                                </div>
                            @endforeach
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- <div class="modal fade" id="BannerImageHiModal" tabindex="-1" aria-labelledby="BannerImageHiModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content property-gallery">
                <div class="modal-header">
                    <h5 class="modal-title" id="imageGalleryModalLabel">Banner Images (Hindi)</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <label class="btn btn-custom">
                        Upload File <input type="file" id="gallaryImageUpload" name="property_gallary_images[]"
                            accept="image/*" multiple hidden>
                    </label>
                    <p class="text-muted mt-2">( You can upload multiple Images. )</p>

                    <!-- Image Grid -->
                    <div class="property-gallery-grid" id="imagePreview">
                        @if ($setting->banner_image_hi)
                            @php
                                $oldSelectedImages = json_decode($setting->banner_image_hi, true);
                            @endphp
                            @foreach ($oldSelectedImages as $image)
                                <div class="property-gallery-item"><img
                                        src="{{ asset('images/generalSetting/hi/' . $image) }}">
                                    <button class="remove-btn">✖</button>
                                </div>
                            @endforeach
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div> --}}

    <script>
        function previewImage(input, targetId) {
            const file = input.files[0];
            const reader = new FileReader();

            reader.onload = function(e) {
                document.getElementById(targetId).src = e.target.result;
            };

            if (file) {
                reader.readAsDataURL(file);
            }
        }
        $(document).ready(function() {
            $("#general-setting-form").validate({
                rules: {
                    logo: {
                        required: true,
                        extension: "jpg|jpeg|png|gif|webp"
                    },
                    favicon: {
                        required: true,
                        extension: "jpg|jpeg|png|gif|webp"
                    },
                    title: {
                        required: true,
                        minlength: 3
                    },
                    meta_keywords: {
                        required: false,
                        minlength: 3
                    },
                },
                messages: {
                    logo: {
                        extension: "Allowed image types: jpg, jpeg, png, gif, webp"
                    },
                    favicon: {
                        extension: "Allowed image types: jpg, jpeg, png, gif, webp"
                    },
                    title: {
                        required: "Please enter a title (English)",
                        minlength: "Title must be at least 3 characters"
                    },
                    meta_keywords: {
                        minlength: "Title must be at least 3 characters"
                    }
                },
                errorPlacement: function(error, element) {
                    let errorId = "#create-" + element.attr("id") + "-error";
                    $(errorId).text(error.text());
                },
                success: function(label, element) {
                    let errorId = "#create-" + $(element).attr("id") + "-error";
                    $(errorId).text("");
                }
            });
        });


        let bannerEnImageFiles = []; // To store newly added images
        let oldBannerEnImageRemove = []; // To track removed old images

        document.getElementById('bannerEnImageUpload').addEventListener('change', function(event) {
            let imagePreview = document.getElementById('bannerEnImagePreview');
            let files = event.target.files;

            for (let i = 0; i < files.length; i++) {
                let file = files[i];
                bannerEnImageFiles.push(file); // Add to array
                let reader = new FileReader();

                reader.onload = function(e) {
                    let imageItem = document.createElement('div');
                    imageItem.classList.add('bannerEn-image-item');

                    let img = document.createElement('img');
                    img.src = e.target.result;

                    let removeBtn = document.createElement('button');
                    removeBtn.innerHTML = '✖';
                    removeBtn.classList.add('removeEn-btn');
                    removeBtn.onclick = function() {
                        let index = bannerEnImageFiles.indexOf(file);
                        if (index !== -1) bannerEnImageFiles.splice(index, 1); // Remove from array
                        imageItem.remove();
                    };

                    imageItem.appendChild(img);
                    imageItem.appendChild(removeBtn);
                    imagePreview.appendChild(imageItem);
                };

                reader.readAsDataURL(file);
            }

            event.target.value = ''; // Clear input for new selections
        });
         // Handle removal of **previously saved** images
        document.querySelectorAll('.bannerEn-image-item').forEach(function(imageItem) {
            let removeBtn = imageItem.querySelector('.removeEn-btn');
            let imgSrc = imageItem.querySelector('img').getAttribute('src');

            removeBtn.addEventListener('click', function() {
                let fileName = imgSrc.split('/').pop(); // Extract filename from URL
                oldBannerEnImageRemove.push(fileName); // Store for backend processing
                imageItem.remove();
            });
        });
        // for hi banner
        // let bannerHiImageFiles = []; // To store newly added images
        // let oldBannerHiImageRemove = []; // To track removed old images

        // document.getElementById('bannerEnImageUpload').addEventListener('change', function(event) {
        //     let imagePreview = document.getElementById('bannerEnImagePreview');
        //     let files = event.target.files;

        //     for (let i = 0; i < files.length; i++) {
        //         let file = files[i];
        //         bannerHiImageFiles.push(file); // Add to array
        //         let reader = new FileReader();

        //         reader.onload = function(e) {
        //             let imageItem = document.createElement('div');
        //             imageItem.classList.add('bannerEn-image-item');

        //             let img = document.createElement('img');
        //             img.src = e.target.result;

        //             let removeBtn = document.createElement('button');
        //             removeBtn.innerHTML = '✖';
        //             removeBtn.classList.add('removeEn-btn');
        //             removeBtn.onclick = function() {
        //                 let index = bannerHiImageFiles.indexOf(file);
        //                 if (index !== -1) bannerHiImageFiles.splice(index, 1); // Remove from array
        //                 imageItem.remove();
        //             };

        //             imageItem.appendChild(img);
        //             imageItem.appendChild(removeBtn);
        //             imagePreview.appendChild(imageItem);
        //         };

        //         reader.readAsDataURL(file);
        //     }

        //     event.target.value = ''; // Clear input for new selections
        // });
        //  // Handle removal of **previously saved** images
        // document.querySelectorAll('.bannerEn-image-item').forEach(function(imageItem) {
        //     let removeBtn = imageItem.querySelector('.removeEn-btn');
        //     let imgSrc = imageItem.querySelector('img').getAttribute('src');

        //     removeBtn.addEventListener('click', function() {
        //         let fileName = imgSrc.split('/').pop(); // Extract filename from URL
        //         oldBannerHiImageRemove.push(fileName); // Store for backend processing
        //         imageItem.remove();
        //     });
        // });
    </script>
@endsection