@extends('layouts.admin')

@section('title', 'Site Settings')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h1 class="h3 mb-1">Site Settings</h1>
        @if($currentDomain)
            <p class="text-muted mb-0">
                <i class="bi bi-globe me-1"></i>Managing settings for: <strong>{{ $currentDomain->full_domain }}</strong>
                @if($currentDomain->subdomain)
                    <small class="text-muted">({{ $currentDomain->domain }})</small>
                @endif
            </p>
        @else
            <p class="text-muted mb-0">
                <i class="bi bi-gear me-1"></i>Global Settings
            </p>
        @endif
    </div>
    <div>
        <button type="submit" form="settingsForm" class="btn btn-modern-primary">
            <i class="bi bi-save me-2"></i>Save All Settings
        </button>
    </div>
</div>

@if(Auth::guard('admin')->user()->is_super_admin)
    <div class="search-filter-bar mb-3">
        <form method="GET" action="{{ route('admin.site-settings.index') }}" class="d-flex gap-2 align-items-center">
            <div class="domain-filter-dropdown">
                <select name="domain_id" class="form-select" onchange="this.form.submit()" style="min-width: 220px;">
                    <option value="">Global Settings</option>
                    @foreach($domains as $domain)
                        <option value="{{ $domain->id }}" {{ (string) $selectedDomainId === (string) $domain->id ? 'selected' : '' }}>
                            {{ $domain->full_domain }}
                        </option>
                    @endforeach
                </select>
            </div>

            @if($selectedDomainId)
                <a href="{{ route('admin.site-settings.index') }}" class="btn btn-outline-secondary">
                    <i class="bi bi-x-circle me-2"></i>Clear
                </a>
            @endif
        </form>
    </div>
@endif


<div class="card">
    <div class="card-header">
        <ul class="nav nav-tabs card-header-tabs" id="settingsTabs" role="tablist">
            @foreach($groups as $group)
                <li class="nav-item" role="presentation">
                    <button class="nav-link {{ $loop->first ? 'active' : '' }}"
                            id="{{ $group }}-tab"
                            data-bs-toggle="tab"
                            data-bs-target="#{{ $group }}"
                            type="button"
                            role="tab">
                        <i class="bi {{ $loop->index === 0 ? 'bi-gear' : ($loop->index === 1 ? 'bi-palette' : ($loop->index === 2 ? 'bi-envelope' : ($loop->index === 3 ? 'bi-share' : ($loop->index === 4 ? 'bi-search' : ($loop->index === 5 ? 'bi-bar-chart' : 'bi-tools'))))) }} me-2"></i>
                        {{ ucfirst($group) }}
                    </button>
                </li>
            @endforeach
        </ul>
    </div>

    <form id="settingsForm" method="POST" action="{{ route('admin.site-settings.update') }}" enctype="multipart/form-data">
        @csrf
        <div class="card-body">
            <div class="tab-content" id="settingsTabContent">
                @foreach($groups as $group)
                    <div class="tab-pane fade {{ $loop->first ? 'show active' : '' }}"
                         id="{{ $group }}"
                         role="tabpanel">

                        <div class="row">
                            @foreach($settings[$group] as $setting)
                                <div class="col-md-6 mb-3">
                                    <div class="form-group">
                                        <label for="{{ $setting->key }}" class="form-label fw-bold">
                                            {{ $setting->label }}
                                            @if($setting->description)
                                                <i class="bi bi-info-circle text-muted"
                                                   data-bs-toggle="tooltip"
                                                   title="{{ $setting->description }}"></i>
                                            @endif
                                        </label>

                                        @if($setting->type === 'textarea')
                                            <textarea class="form-control"
                                                      id="{{ $setting->key }}"
                                                      name="settings[{{ $setting->key }}]"
                                                      rows="3"
                                                      placeholder="{{ $setting->description }}">{{ $setting->value }}</textarea>
                                        @elseif($setting->type === 'file')
                                            <div class="file-upload-area">
                                                @if($setting->value)
                                                    <div class="current-file mb-2">
                                                        @php
                                                            $isImage = strpos($setting->value, '.png') !== false ||
                                                                      strpos($setting->value, '.jpg') !== false ||
                                                                      strpos($setting->value, '.jpeg') !== false ||
                                                                      strpos($setting->value, '.gif') !== false ||
                                                                      strpos($setting->value, '.webp') !== false;
                                                        @endphp
                                                        @if($isImage)
                                                            <img src="{{ str_starts_with($setting->value, 'http') ? $setting->value : Storage::disk('public')->url($setting->value) }}"
                                                                 alt="Current {{ $setting->label }}"
                                                                 class="img-thumbnail"
                                                                 style="max-width: 100px; max-height: 100px;">
                                                        @else
                                                            <div class="file-info">
                                                                <i class="bi bi-file-earmark"></i>
                                                                <small class="text-muted">{{ basename($setting->value) }}</small>
                                                            </div>
                                                        @endif
                                                        <button type="button"
                                                                class="btn btn-sm btn-outline-danger ms-2 remove-file"
                                                                data-key="{{ $setting->key }}">
                                                            <i class="bi bi-trash"></i> Remove
                                                        </button>
                                                    </div>
                                                @endif
                                                <div class="d-flex gap-2">
                                                    <input type="text"
                                                           class="form-control"
                                                           id="{{ $setting->key }}"
                                                           name="settings[{{ $setting->key }}]"
                                                           value="{{ $setting->value }}"
                                                           readonly
                                                           placeholder="Click browse to select {{ strtolower($setting->label) }}">
                                                    <button type="button"
                                                            class="btn btn-outline-primary"
                                                            id="lfm-{{ $setting->key }}"
                                                            data-input="{{ $setting->key }}"
                                                            data-preview="{{ $setting->key }}_preview">
                                                        <i class="bi bi-folder"></i> Browse
                                                    </button>
                                                </div>
                                                <div id="{{ $setting->key }}_preview" class="mt-2">
                                                    @if($setting->value)
                                                        @php
                                                            $isImage = strpos($setting->value, '.png') !== false ||
                                                                      strpos($setting->value, '.jpg') !== false ||
                                                                      strpos($setting->value, '.jpeg') !== false ||
                                                                      strpos($setting->value, '.gif') !== false ||
                                                                      strpos($setting->value, '.webp') !== false;
                                                        @endphp
                                                        @if($isImage)
                                                            <img src="{{ str_starts_with($setting->value, 'http') ? $setting->value : Storage::disk('public')->url($setting->value) }}"
                                                                 alt="Current {{ $setting->label }}"
                                                                 class="img-thumbnail"
                                                                 style="max-width: 150px; max-height: 150px;">
                                                        @endif
                                                    @endif
                                                </div>
                                                <div class="form-text">{{ $setting->description }}</div>
                                            </div>
                                        @elseif($setting->type === 'boolean')
                                            <div class="form-check form-switch">
                                                <input type="hidden" name="settings[{{ $setting->key }}]" value="0">
                                                <input class="form-check-input"
                                                       type="checkbox"
                                                       id="{{ $setting->key }}"
                                                       name="settings[{{ $setting->key }}]"
                                                       value="1"
                                                       {{ $setting->value ? 'checked' : '' }}>
                                                <label class="form-check-label" for="{{ $setting->key }}">
                                                    {{ $setting->value ? 'Enabled' : 'Disabled' }}
                                                </label>
                                            </div>
                                        @elseif($setting->type === 'color')
                                            <input type="color"
                                                   class="form-control form-control-color"
                                                   id="{{ $setting->key }}"
                                                   name="settings[{{ $setting->key }}]"
                                                   value="{{ $setting->value ?: '#667eea' }}"
                                                   title="Choose a color">
                                        @elseif($setting->type === 'select' && $setting->options)
                                            <select class="form-select"
                                                    id="{{ $setting->key }}"
                                                    name="settings[{{ $setting->key }}]">
                                                @foreach($setting->options as $option)
                                                    <option value="{{ $option }}" {{ $setting->value === $option ? 'selected' : '' }}>
                                                        {{ $option }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        @else
                                            <input type="{{ $setting->type === 'email' ? 'email' : ($setting->type === 'url' ? 'url' : 'text') }}"
                                                   class="form-control"
                                                   id="{{ $setting->key }}"
                                                   name="settings[{{ $setting->key }}]"
                                                   value="{{ $setting->value }}"
                                                   placeholder="{{ $setting->description }}">
                                        @endif

                                        @if($setting->description && $setting->type !== 'file')
                                            <div class="form-text">{{ $setting->description }}</div>
                                        @endif
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

        <div class="card-footer">
            <div class="d-flex justify-content-end gap-2">
                <button type="submit" class="btn btn-modern-primary">
                    <i class="bi bi-save me-2"></i>Save All Settings
                </button>
            </div>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="{{ asset('vendor/laravel-filemanager/js/stand-alone-button.js') }}"></script>
<script>

document.addEventListener('DOMContentLoaded', function() {
    // Initialize tooltips
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });

    // Handle file removal
    document.querySelectorAll('.remove-file').forEach(button => {
        button.addEventListener('click', function() {
            const key = this.getAttribute('data-key');
            if (confirm('Are you sure you want to remove this file?')) {
                fetch(`{{ url('admin/site-settings') }}/${key}/file`, {
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                        'Accept': 'application/json',
                        'Content-Type': 'application/json',
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        location.reload();
                    } else {
                        alert('Error removing file');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('Error removing file');
                });
            }
        });
    });

    // Auto-submit boolean switches
    document.querySelectorAll('input[type="checkbox"][name^="settings["]').forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            const form = document.getElementById('settingsForm');
            const formData = new FormData(form);

            fetch(form.action, {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                }
            })
            .then(response => response.json())
            .then(data => {
                // Update label text
                const label = this.parentNode.querySelector('.form-check-label');
                if (label) {
                    label.textContent = this.checked ? 'Enabled' : 'Disabled';
                }

                // Success handled by global flash message
            })
            .catch(error => {
                console.error('Error:', error);
                // Error handled by global flash message
            });
        });
    });

    // Initialize file manager for site settings
    @if(isset($settings['appearance']))
        @foreach($settings['appearance'] as $setting)
            @if($setting->key === 'site_logo' || $setting->key === 'site_favicon')
                $('#lfm-{{ $setting->key }}').filemanager('{{ $setting->key === 'site_logo' ? 'image' : 'file' }}', {prefix: '/admin/filemanager'});
            @endif
        @endforeach
    @endif
});
</script>
@endpush

@push('styles')
<style>
.file-upload-area {
    position: relative;
}

.current-file {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #dee2e6;
}

.file-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.file-info i {
    font-size: 1.2em;
}

.nav-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    color: #6c757d;
    font-weight: 500;
}

.nav-tabs .nav-link.active {
    border-bottom-color: #667eea;
    color: #667eea;
    background: none;
}

.nav-tabs .nav-link:hover {
    border-bottom-color: #667eea;
    color: #667eea;
}

.form-control-color {
    width: 60px;
    height: 38px;
    padding: 0.375rem;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
}

.card-header-tabs {
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 0;
}
</style>
@endpush