@extends('layouts.simple.master')

@section('title', trans(app()->getLocale() . '.settings_management'))

@section('css')
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/animate.css') }}">
@endsection

@section('main_content')
    <div class="container-fluid">
        <div class="page-title">
            <div class="row">
                <div class="col-sm-6">
                    <h3>{{ trans(app()->getLocale() . '.settings') }}</h3>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}"> <svg class="stroke-icon">
                                    <use href="{{ asset('assets/svg/icon-sprite.svg#stroke-home') }}"></use>
                                </svg></a></li>
                        <li class="breadcrumb-item active">{{ trans(app()->getLocale() . '.settings') }}</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <!-- Container-fluid starts-->
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-body">
                        <form id="settingForm" class="row g-3 needs-validation" action="{{ route('admin.setting.store') }}" method="POST" novalidate>
                            @csrf

                            <div class="col-md-12">
                                <label class="form-label">{{ trans(app()->getLocale() . '.settings') }}</label>
                                <div id="settingsContainer">
                                    <div class="setting-input-group mb-2">
                                        <div class="row g-2">
                                            <div class="col-md-5">
                                                <input type="text" class="form-control setting-key" name="settings[0][key]" placeholder="{{ trans(app()->getLocale() . '.enter_setting_key') }}" required>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="input-group">
                                                    <input type="text" class="form-control setting-value" name="settings[0][value]" placeholder="{{ trans(app()->getLocale() . '.enter_setting_value') }}">
                                                    <button type="button" class="btn btn-outline-danger remove-setting-btn" onclick="removeSetting(this)" style="display: none;">
                                                        <i data-feather="trash-2"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <button type="button" class="btn btn-sm btn-outline-primary mt-2" onclick="addSetting()">
                                    {{ trans(app()->getLocale() . '.add') }} +
                                </button>
                            </div>

                            <div class="col-md-12 d-flex justify-content-end">
                                <button class="btn btn-primary" type="submit" id="submitBtn">{{ trans(app()->getLocale() . '.save_settings') }}</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Container-fluid Ends-->
@endsection

@section('scripts')
    <script>
        // Add setting input field
        function addSetting() {
            const settingsContainer = document.getElementById('settingsContainer');
            const settingCount = settingsContainer.querySelectorAll('.setting-input-group').length;
            const settingInputGroup = document.createElement('div');
            settingInputGroup.className = 'setting-input-group mb-2';
            settingInputGroup.innerHTML = `
                <div class="row g-2">
                    <div class="col-md-5">
                        <input type="text" class="form-control setting-key" name="settings[${settingCount}][key]" placeholder="{{ trans(app()->getLocale() . '.enter_setting_key') }}" required>
                    </div>
                    <div class="col-md-6">
                        <div class="input-group">
                            <input type="text" class="form-control setting-value" name="settings[${settingCount}][value]" placeholder="{{ trans(app()->getLocale() . '.enter_setting_value') }}">
                            <button type="button" class="btn btn-outline-danger remove-setting-btn" onclick="removeSetting(this)">
                                <i data-feather="trash-2"></i>
                            </button>
                        </div>
                    </div>
                </div>
            `;
            settingsContainer.appendChild(settingInputGroup);
            feather.replace();
            updateRemoveButtons();
        }

        // Remove setting input field
        function removeSetting(btn) {
            const settingInputGroup = btn.closest('.setting-input-group');
            settingInputGroup.remove();
            updateRemoveButtons();
        }

        // Update remove buttons visibility
        function updateRemoveButtons() {
            const settingInputGroups = document.querySelectorAll('.setting-input-group');
            const removeButtons = document.querySelectorAll('.remove-setting-btn');

            if (settingInputGroups.length > 1) {
                removeButtons.forEach(btn => btn.style.display = 'block');
            } else {
                removeButtons.forEach(btn => btn.style.display = 'none');
            }
        }

        // Load existing settings on page load
        document.addEventListener('DOMContentLoaded', function() {
            @php
                $settings = \App\Models\Setting::all();
            @endphp

            @if($settings->count() > 0)
                const settingsContainer = document.getElementById('settingsContainer');
                settingsContainer.innerHTML = '';

                const settingsData = @json($settings);

                settingsData.forEach(function(setting, index) {
                    const settingInputGroup = document.createElement('div');
                    settingInputGroup.className = 'setting-input-group mb-2';
                    settingInputGroup.innerHTML = `
                        <div class="row g-2">
                            <div class="col-md-5">
                                <input type="text" class="form-control setting-key" name="settings[${index}][key]" value="${setting.key.replace(/"/g, '&quot;')}" placeholder="{{ trans(app()->getLocale() . '.enter_setting_key') }}" required>
                                <input type="hidden" name="settings[${index}][id]" value="${setting.id}">
                            </div>
                            <div class="col-md-6">
                                <div class="input-group">
                                    <input type="text" class="form-control setting-value" name="settings[${index}][value]" value="${(setting.value || '').replace(/"/g, '&quot;')}" placeholder="{{ trans(app()->getLocale() . '.enter_setting_value') }}">
                                    <button type="button" class="btn btn-outline-danger remove-setting-btn" onclick="removeSetting(this)">
                                        <i data-feather="trash-2"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    `;
                    settingsContainer.appendChild(settingInputGroup);
                });

                feather.replace();
                updateRemoveButtons();
            @endif
        });

        // Handle form submission
        document.getElementById('settingForm').addEventListener('submit', function(e) {
            const form = this;

            // Validate form
            if (!form.checkValidity()) {
                e.preventDefault();
                e.stopPropagation();
                form.classList.add('was-validated');
                return false;
            }

            // Disable submit button to prevent double submission
            const submitBtn = document.getElementById('submitBtn');
            submitBtn.disabled = true;
            submitBtn.textContent = '{{ trans(app()->getLocale() . ".saving") }}';

            // Form will submit normally, page will reload with session flash message
            return true;
        });
    </script>
@endsection