@extends('template.layouts.template-base')
@section('title', 'App Setting')

@section('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" />
    <script src="https://cdn.ckeditor.com/4.21.0/standard/ckeditor.js"></script>
    <script>
        CKEDITOR.config.removePlugins = 'notification,notificationaggregator';
    </script>
    <style>
        .page-content {
            background-color: #F0F4F8 !important;
            padding: 80px 10px;
        }
    </style>
@endsection

@section('content')
    <section class="product-page add-service">
        <!-- Header -->
        <div class="page-header">
            <div class="container-fluid">
                <div class="row align-items-center">
                    <div class="col">
                        <div class="page-title">
                            <a href="{{ route('backend.setting-management.add') }}"> Setting / <span
                                    class="breadcrumb-link">App Setting</span></a>
                        </div>
                    </div>
                    <div class="col-auto cate-top-btns setting-page">
                        <div class="position-relative">
                            <div class="custom-dropdown product-lang">
                                <button class="dropdown-btn  langu-drpdwn" type="button">
                                    English
                                    <span class="caret"><i class="ri-arrow-down-s-fill"></i></span>
                                </button>
                                <ul class="dropdown-menu-custom">
                                    <li class="active" data-lang="en">English</li>
                                    <li data-lang="ta">Tamil</li>
                                </ul>
                            </div>
                        </div>
                        {{-- <a class="btn-add-category" href="{{ route('backend.setting-management.edit') }}">
                            Edit Setting
                        </a> --}}
                    </div>
                </div>
            </div>
        </div>

        <!-- Main Container -->
        <div class="container-fluid">
            <form id="appSettingsForm" method="POST" action="{{ route('backend.setting-management.update', 'app') }}"
                enctype="multipart/form-data">
                @csrf
                <!-- Section 1: Product -->
                <div class="add-product-section">
                    <h2 class="section-title">Basic Information</h2>

                    <div class="row">
                        <div class="col-lg-4">
                            <div class="lang-field lang-en">
                                <label for="app-name">App Name</label>
                                <input type="text" name="app_name" value="{{ Arr::get($settings, 'app_name') }}"
                                    placeholder="Enter App Name">
                            </div>
                            <div class="lang-field lang-ta" style="display:none;">
                                <label for="app-name-ta">App Name (Tamil)</label>
                                <input type="text" name="app_name_tamil"
                                    value="{{ Arr::get($settings, 'app_name_tamil') }}" placeholder="பயன்பாட்டின் பெயர்">
                            </div>
                        </div>

                        <div class="col-lg-4">
                            <label for="app-version">App Version</label>
                            <input type="text" name="app_version"
                                value="{{ Arr::has($settings, 'app_version') ? $settings['app_version'] : null }}"
                                placeholder="Enter App Version" />
                        </div>
                        <div class="col-lg-4">
                            <label for="play-store-url">Play Store URL</label>
                            <input type="text" name="play_store_url"
                                value="{{ Arr::has($settings, 'play_store_url') ? $settings['play_store_url'] : null }}"
                                placeholder="Enter Play Store URL" />
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-4">
                            <div class="lang-field lang-en">
                                <label>App Logo Dark <span class="required">*</span>
                                    <span class="small-txt">(120px*120px)</span></label>
                                <div class="image-upload-box-2"
                                    style="{{ !empty($settings['app_logo_dark']) ? 'background-image: url(' . asset($settings['app_logo_dark']) . '); background-size: cover;' : '' }}">
                                    <input type="file" name="app_logo_dark" id="productImageDark" hidden>
                                    <label for="productImageDark" class="upload-label">
                                        <div class="upload-content">
                                            <img src="{{ asset('assets/template/images/svg/gallery-add.png') }}"
                                                class="add-img" alt="Images">
                                            <div class="upload-text">Choose a file or drag and drop it here</div>
                                            <div class="file-info">JPG, PNG or JPEG (Max 1 MB)</div>
                                        </div>
                                    </label>
                                </div>
                                @if (!empty($settings['app_logo_dark']))
                                    <a href="javascript:void(0)" class="btn btn-sm btn-outline-primary show_file_modal mt-2"
                                        data-url="{{ asset($settings['app_logo_dark']) }}" data-title="App Logo Dark">
                                        <i class="fa fa-eye"></i> View
                                    </a>
                                @endif
                            </div>
                            <div class="lang-field lang-ta" style="display:none">
                                <label>App Logo Dark (Tamil) <span class="required">*</span>
                                    <span class="small-txt">(120px*120px)</span></label>
                                <div class="image-upload-box-2"
                                    style="{{ !empty($settings['app_logo_dark_tamil']) ? 'background-image: url(' . asset($settings['app_logo_dark_tamil']) . '); background-size: cover;' : '' }}">
                                    <input type="file" name="app_logo_dark_tamil" id="productImageDarkTamil" hidden>
                                    <label for="productImageDarkTamil" class="upload-label">
                                        <div class="upload-content">
                                            <img src="{{ asset('assets/template/images/svg/gallery-add.png') }}"
                                                class="add-img" alt="Images">
                                            <div class="upload-text">Choose a file or drag and drop it here</div>
                                            <div class="file-info">JPG, PNG or JPEG (Max 1 MB)</div>
                                        </div>
                                    </label>
                                </div>
                                @if (!empty($settings['app_logo_dark_tamil']))
                                    <a href="javascript:void(0)" class="btn btn-sm btn-outline-primary show_file_modal mt-2"
                                        data-url="{{ asset($settings['app_logo_dark_tamil']) }}"
                                        data-title="App Logo Dark (Tamil)">
                                        <i class="fa fa-eye"></i> View
                                    </a>
                                @endif
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="lang-field lang-en">
                                <label>App Logo Light<span class="required">*</span>
                                    <span class="small-txt">(120px*120px)</span></label>
                                <div class="image-upload-box-2 light-logo-sec"
                                    style="{{ !empty($settings['app_logo_light']) ? 'background-image: url(' . asset($settings['app_logo_light']) . '); background-size: cover;' : '' }}">
                                    <input type="file" name="app_logo_light" id="productImageLight" hidden>
                                    <label for="productImageLight" class="upload-label">
                                        <div class="upload-content">
                                            <img src="{{ asset('assets/template/images/svg/gallery-add-1.png') }}"
                                                class="add-img" alt="Images">
                                            <div class="upload-text">Choose a file or drag and drop it here</div>
                                            <div class="file-info">JPG, PNG or JPEG (Max 1 MB)</div>
                                        </div>
                                    </label>
                                </div>
                                @if (!empty($settings['app_logo_light']))
                                    <a href="javascript:void(0)"
                                        class="btn btn-sm btn-outline-primary show_file_modal mt-2"
                                        data-url="{{ asset($settings['app_logo_light']) }}" data-title="App Logo Light">
                                        <i class="fa fa-eye"></i> View
                                    </a>
                                @endif
                            </div>
                            <div class="lang-field lang-ta" style="display:none">
                                <label>App Logo Light (Tamil) <span class="required">*</span>
                                    <span class="small-txt">(120px*120px)</span></label>
                                <div class="image-upload-box-2 light-logo-sec"
                                    style="{{ !empty($settings['app_logo_light_tamil']) ? 'background-image: url(' . asset($settings['app_logo_light_tamil']) . '); background-size: cover;' : '' }}">
                                    <input type="file" name="app_logo_light_tamil" id="productImageLightTamil" hidden>
                                    <label for="productImageLightTamil" class="upload-label">
                                        <div class="upload-content">
                                            <img src="{{ asset('assets/template/images/svg/gallery-add-1.png') }}"
                                                class="add-img" alt="Images">
                                            <div class="upload-text">Choose a file or drag and drop it here</div>
                                            <div class="file-info">JPG, PNG or JPEG (Max 1 MB)</div>
                                        </div>
                                    </label>
                                </div>
                                @if (!empty($settings['app_logo_light_tamil']))
                                    <a href="javascript:void(0)"
                                        class="btn btn-sm btn-outline-primary show_file_modal mt-2"
                                        data-url="{{ asset($settings['app_logo_light_tamil']) }}"
                                        data-title="App Logo Light (Tamil)">
                                        <i class="fa fa-eye"></i> View
                                    </a>
                                @endif
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="lang-field lang-en">
                                <label>App Icon<span class="required">*</span>
                                    <span class="small-txt">(80px*80px)</span></label>
                                <div class="image-upload-box-2"
                                    style="{{ !empty($settings['app_icon']) ? 'background-image: url(' . asset($settings['app_icon']) . '); background-size: cover;' : '' }}">
                                    <input type="file" name="app_icon" id="productImageIcon" hidden>
                                    <label for="productImageIcon" class="upload-label">
                                        <div class="upload-content">
                                            <img src="{{ asset('assets/template/images/svg/gallery-add.png') }}"
                                                class="add-img" alt="Images">
                                            <div class="upload-text">Choose a file or drag and drop it here</div>
                                            <div class="file-info">JPG, PNG or JPEG (Max 1 MB)</div>
                                        </div>
                                    </label>
                                </div>
                                @if (!empty($settings['app_icon']))
                                    <a href="javascript:void(0)"
                                        class="btn btn-sm btn-outline-primary show_file_modal mt-2"
                                        data-url="{{ asset($settings['app_icon']) }}" data-title="App Icon">
                                        <i class="fa fa-eye"></i> View
                                    </a>
                                @endif
                            </div>
                            <div class="lang-field lang-ta" style="display:none">
                                <label>App Icon (Tamil) <span class="required">*</span>
                                    <span class="small-txt">(80px*80px)</span></label>
                                <div class="image-upload-box-2"
                                    style="{{ !empty($settings['app_icon_tamil']) ? 'background-image: url(' . asset($settings['app_icon_tamil']) . '); background-size: cover;' : '' }}">
                                    <input type="file" name="app_icon_tamil" id="productImageIconTamil" hidden>
                                    <label for="productImageIconTamil" class="upload-label">
                                        <div class="upload-content">
                                            <img src="{{ asset('assets/template/images/svg/gallery-add.png') }}"
                                                class="add-img" alt="Images">
                                            <div class="upload-text">Choose a file or drag and drop it here</div>
                                            <div class="file-info">JPG, PNG or JPEG (Max 1 MB)</div>
                                        </div>
                                    </label>
                                </div>
                                @if (!empty($settings['app_icon_tamil']))
                                    <a href="javascript:void(0)"
                                        class="btn btn-sm btn-outline-primary show_file_modal mt-2"
                                        data-url="{{ asset($settings['app_icon_tamil']) }}"
                                        data-title="App Icon (Tamil)">
                                        <i class="fa fa-eye"></i> View
                                    </a>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>


                <!-- Action Buttons -->
                <div class="action-buttons">
                    <button type="submit" class="btn btn-primary show-toast px-5"
                        data-toast-target="#appSettingToast">Save</button>
                </div>
            </form>
        </div>
        </div>
    </section>
    <div class="position-fixed top-0 end-25 p-4" style="z-index: 1090">
        <div id="appSettingToast" class="toast login-success-toast" role="alert" aria-live="assertive"
            aria-atomic="true">

            <div class="toast-body d-flex align-items-center gap-3">
                <div class="toast-left">
                    <div class="check-circle">
                        ✓
                    </div>
                </div>
                <div class="toast-right">
                    <h6>App Settings Saved Successfully</h6>
                    <p>The app settings has been saved successfully.</p>
                </div>

            </div>
        </div>
    </div>
    <div class="position-fixed top-0 end-25 p-4" style="z-index: 1090">
        <div id="blogAddedInActiveToast" class="toast login-success-toast" role="alert" aria-live="assertive"
            aria-atomic="true">

            <div class="toast-body d-flex align-items-center gap-3">
                <div class="toast-left">
                    <div class="check-circle">
                        ✓
                    </div>
                </div>
                <div class="toast-right">
                    <h6>Blog Added Successfully</h6>
                    <p>The Blog has been added successfully and is currently inactive. You can activate it anytime from the
                        blog
                        list.</p>
                </div>

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

@endsection


@section('scripts')
    <link href="https://unpkg.com/@yaireo/tagify/dist/tagify.css" rel="stylesheet">
    <script src="https://unpkg.com/@yaireo/tagify"></script>
    <script>
        const editorConfig = {
            height: 150,
            toolbar: [{
                    name: "styles",
                    items: ["Format"]
                },
                {
                    name: "basicstyles",
                    items: ["Bold", "Italic", "Underline"]
                },
                {
                    name: "paragraph",
                    items: ["JustifyLeft", "JustifyCenter", "JustifyRight"],
                },
                {
                    name: "insert",
                    items: ["NumberedList", "BulletedList"]
                },
            ],
        };

        CKEDITOR.replace("product-description", editorConfig);
        CKEDITOR.replace("product-benefits", editorConfig);
        CKEDITOR.replace("product-description-ta", editorConfig);
        CKEDITOR.replace("product-benefits-ta", editorConfig);

        $('#selectAllCategories').on('change', function() {
            $('.category-checkbox').prop('checked', $(this).is(':checked'));
        });

        $('.category-checkbox, #selectAllCategories').on('change', function() {
            let selected = [];

            $('.category-checkbox:checked').each(function() {
                selected.push($(this).closest('label').text().trim());
            });

            if (selected.length === 0) {
                $('#categoryDropdown').text('Select Category');
            } else if (selected.length > 2) {
                $('#categoryDropdown').text(selected.length + ' Categories Selected');
            } else {
                $('#categoryDropdown').text(selected.join(', '));
            }
        });

        $('#selectAllAnimals').on('change', function() {
            $('.animal-checkbox').prop('checked', $(this).is(':checked'));
        });

        $('.animal-checkbox, #selectAllAnimals').on('change', function() {
            let selected = [];

            $('.animal-checkbox:checked').each(function() {
                selected.push($(this).closest('label').text().trim());
            });

            if (selected.length === 0) {
                $('#animalDropdown').text('Select Animal Type');
            } else if (selected.length > 2) {
                $('#animalDropdown').text(selected.length + ' Animal Type Selected');
            } else {
                $('#animalDropdown').text(selected.join(', '));
            }
        });

        // Toggle collapsible section
        function toggleCollapse(button) {
            const chevron = button.querySelector(".chevron");
            chevron.classList.toggle("open");
        }

        document.addEventListener('DOMContentLoaded', function() {

            var input = document.querySelector('#product-tags');
            //console.log(input);

            var tagify = new Tagify(input, {
                delimiters: ",",
                maxTags: 10,
                dropdown: {
                    enabled: 1,
                    maxItems: 20,
                    closeOnSelect: false
                }
            });

            fetch('/tags/list')
                .then(res => res.json())
                .then(tags => {
                    tagify.settings.whitelist = tags;
                });

        });
    </script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script>
        // Open filter modal
        function openFilterModal() {
            document.getElementById("filterModalOverlay").classList.add("active");
        }

        // Close filter modal
        function closeFilterModal() {
            document
                .getElementById("filterModalOverlay")
                .classList.remove("active");
        }

        // Close modal when clicking on overlay
        function closeFilterOnOverlay(event) {
            if (event.target === document.getElementById("filterModalOverlay")) {
                closeFilterModal();
            }
        }

        // Switch tabs
        function switchTab(event, tabName) {
            const tabs = document.querySelectorAll(".tab");
            const contents = document.querySelectorAll(".tab-content");

            tabs.forEach((tab) => tab.classList.remove("active"));
            contents.forEach((content) => content.classList.remove("active"));

            event.target.classList.add("active");
            document.getElementById(tabName).classList.add("active");
        }

        // Initialize Flatpickr for date inputs
        flatpickr("#from-date", {
            dateFormat: "d M, Y",
            defaultDate: new Date(),
            onChange: function(selectedDates, dateStr, instance) {
                console.log("From Date selected:", dateStr);
            },
        });

        flatpickr("#to-date", {
            dateFormat: "d M, Y",
            defaultDate: new Date(),
            onChange: function(selectedDates, dateStr, instance) {
                console.log("To Date selected:", dateStr);
            },
        });

        // Clear all filters
        function clearFilters() {
            const checkboxes = document.querySelectorAll('input[type="checkbox"]');
            checkboxes.forEach((cb) => (cb.checked = false));

            const radios = document.querySelectorAll('input[type="radio"]');
            radios.forEach((radio) => (radio.checked = false));

            document.getElementById("from-date").value = "";
            document.getElementById("to-date").value = "";

            console.log("Filters cleared");
        }

        // Submit filters
        function submitFilters() {
            const filters = {
                stockStatus: Array.from(
                    document.querySelectorAll("#stock-status input:checked"),
                ).map((cb) => cb.id),
                productStatus: Array.from(
                    document.querySelectorAll("#product-status input:checked"),
                ).map((cb) => cb.id),
                weight: Array.from(
                    document.querySelectorAll("#weight input:checked"),
                ).map((cb) => cb.id),
                price: document.querySelector('input[name="price"]:checked')?.id || null,
                soldStatus: Array.from(
                    document.querySelectorAll("#sold-status input:checked"),
                ).map((cb) => cb.id),
                fromDate: document.getElementById("from-date").value,
                toDate: document.getElementById("to-date").value,
            };

            console.log("Filters submitted:", filters);
            closeFilterModal();
        }
    </script>
    <script>
        (() => {
            const btn = document.getElementById("categoryMsBtn");
            const menu = document.getElementById("categoryMsMenu");
            const selectedBox = document.getElementById("categoryMsSelected");
            const checkboxes = menu.querySelectorAll("input[type='checkbox']");

            // Toggle dropdown
            btn.addEventListener("click", (e) => {
                e.stopPropagation();
                menu.classList.toggle("show");
            });

            // Render selected items
            function renderCategorySelected() {
                selectedBox.innerHTML = "";

                const selected = [...checkboxes].filter(cb => cb.checked);

                if (selected.length === 0) {
                    selectedBox.innerHTML =
                        `<span class="category-ms-placeholder">Select Category</span>`;
                    return;
                }

                selected.forEach(cb => {
                    const tag = document.createElement("div");
                    tag.className = "category-ms-tag";
                    tag.innerHTML = `${cb.value} <span>&times;</span>`;

                    tag.querySelector("span").addEventListener("click", (e) => {
                        e.stopPropagation();
                        cb.checked = false;
                        renderCategorySelected();
                    });

                    selectedBox.appendChild(tag);
                });
            }

            // Checkbox change
            checkboxes.forEach(cb => {
                cb.addEventListener("change", renderCategorySelected);
            });

            // Close on outside click
            document.addEventListener("click", () => {
                menu.classList.remove("show");
            });
        })();
    </script>

    <script>
        (() => {
            const btn = document.getElementById("animalMsBtn");
            const menu = document.getElementById("animalMsMenu");
            const selectedBox = document.getElementById("animalMsSelected");
            const checkboxes = menu.querySelectorAll("input[type='checkbox']");

            // Toggle dropdown
            btn.addEventListener("click", (e) => {
                e.stopPropagation();
                menu.classList.toggle("show");
            });

            // Update selected tags
            function renderSelected() {
                selectedBox.innerHTML = "";

                const selected = [...checkboxes].filter(cb => cb.checked);

                if (selected.length === 0) {
                    selectedBox.innerHTML =
                        `<span class="animal-ms-placeholder">Select Animal</span>`;
                    return;
                }

                selected.forEach(cb => {
                    const tag = document.createElement("div");
                    tag.className = "animal-ms-tag";
                    tag.innerHTML = `${cb.value} <span>&times;</span>`;

                    tag.querySelector("span").addEventListener("click", (e) => {
                        e.stopPropagation();
                        cb.checked = false;
                        renderSelected();
                    });

                    selectedBox.appendChild(tag);
                });
            }

            // Checkbox change
            checkboxes.forEach(cb => {
                cb.addEventListener("change", renderSelected);
            });

            // Close on outside click
            document.addEventListener("click", () => {
                menu.classList.remove("show");
            });
        })();
    </script>



    <script>
        $(document).ready(function() {
            const phoneInput = $('input[name="app_phone_number"]');
            const whatsappInput = $('input[name="app_whatsapp_number"]');
            const sameWhatsappCheck = $('#sameWhatsapp');

            function syncWhatsapp() {
                if (sameWhatsappCheck.is(':checked')) {
                    whatsappInput.val(phoneInput.val());
                    whatsappInput.attr('readonly', true);
                } else {
                    whatsappInput.removeAttr('readonly');
                }
            }

            // Initial check on page load
            if (phoneInput.val() && phoneInput.val() === whatsappInput.val()) {
                sameWhatsappCheck.prop('checked', true);
                whatsappInput.attr('readonly', true);
            }

            sameWhatsappCheck.on('change', function() {
                if (this.checked) {
                    syncWhatsapp();
                } else {
                    whatsappInput.val('');
                    syncWhatsapp();
                }
            });

            phoneInput.on('input', function() {
                if (sameWhatsappCheck.is(':checked')) {
                    syncWhatsapp();
                }
            });
        });

        // ── Language Switching Logic ─────────────────────────────────────────
        $(document).on('click', '.product-lang .dropdown-menu-custom li', function() {
            const lang = $(this).data('lang');
            const text = $(this).text();

            // Update dropdown button text
            $('.langu-drpdwn').html(`${text} <span class="caret"><i class="ri-arrow-down-s-fill"></i></span>`);

            // Update active class
            $('.product-lang .dropdown-menu-custom li').removeClass('active');
            $(this).addClass('active');

            const $loader = $('#loading-image');
                $loader.removeClass('d-none').show();

                setTimeout(() => {
                    if (lang === 'ta') {
                        $('.lang-en').hide();
                        $('.lang-ta').show();
                    } else {
                        $('.lang-ta').hide();
                        $('.lang-en').show();
                    }
                    $loader.hide().addClass('d-none');
                }, 500); 
        });
        // ── Image Preview Logic ─────────────────────────────────────────────
        $(document).on('change', '.image-upload-box-2 input[type="file"]', function() {
            const input = this;
            const box = $(this).closest('.image-upload-box-2');

            if (input.files && input.files[0]) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    box.css({
                        'background-image': 'url(' + e.target.result + ')',
                        'background-size': 'cover',
                        'background-position': 'center'
                    });
                }
                reader.readAsDataURL(input.files[0]);
            }
        });

        $(document).ready(function() {
            $.validator.addMethod("phone", function(value, element) {
                return this.optional(element) || /^[6-9]\d{9}$/.test(value);
            }, "Please enter a valid 10-digit phone number");

            $("#appSettingsForm").validate({
                rules: {
                    app_name: {
                        required: false
                    },
                    app_version: {
                        required: false
                    },
                    play_store_url: {
                        required: false,
                        url: true
                    },
                    app_phone_number: {
                        required: false,
                        phone: true
                    },
                    app_whatsapp_number: {
                        required: false,
                        phone: true
                    },
                    app_email: {
                        required: false,
                        email: true
                    }
                },
                errorElement: 'div',
                errorClass: 'text-danger small mt-1',
                highlight: function(element) {
                    $(element).addClass('is-invalid');
                },
                unhighlight: function(element) {
                    $(element).removeClass('is-invalid');
                }
            });
        });
    </script>
@endsection