@extends('layouts.app')

@section('title', 'Settings')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="mb-0"><i class="fas fa-cog"></i> System Settings</h5>
                        <button type="button" class="btn btn-success btn-sm" onclick="saveSettings()">
                            <i class="fas fa-save"></i> Save All Changes
                        </button>
                    </div>
                </div>
                
                <div class="card-body">
                    @if(session('success'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            <i class="fas fa-check-circle"></i> {{ session('success') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif
                    
                    @if(session('error'))
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <i class="fas fa-exclamation-circle"></i> {{ session('error') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif
                    
                    @if($settings->isEmpty())
                        <div class="alert alert-warning">
                            <i class="fas fa-exclamation-triangle"></i> No settings found. Please run the installation.
                            <a href="{{ route('settings.install') }}" class="btn btn-warning btn-sm ms-2">
                                <i class="fas fa-download"></i> Install Default Settings
                            </a>
                        </div>
                    @else
                        <form id="settingsForm" method="POST" action="{{ route('settings.update') }}">
                            @csrf
                            
                            <div class="row">
                                <div class="col-md-3">
                                    <!-- Categories Navigation -->
                                    <div class="list-group mb-3" id="settingsNav">
                                        @foreach($categories as $index => $category)
                                            <a class="list-group-item list-group-item-action {{ $index === 0 ? 'active' : '' }}" 
                                               data-bs-toggle="tab" 
                                               href="#{{ str_replace(' ', '_', $category) }}">
                                                <i class="fas fa-folder me-2"></i>
                                                {{ ucfirst($category) }}
                                            </a>
                                        @endforeach
                                    </div>
                                </div>
                                
                                <div class="col-md-9">
                                    <!-- Settings Content -->
                                    <div class="tab-content" id="settingsContent">
                                        @foreach($categories as $index => $category)
                                            <div class="tab-pane fade {{ $index === 0 ? 'show active' : '' }}" 
                                                 id="{{ str_replace(' ', '_', $category) }}">
                                                <div class="card">
                                                    <div class="card-header bg-light">
                                                        <h6 class="mb-0">
                                                            <i class="fas fa-folder-open me-2"></i>
                                                            {{ ucfirst($category) }} Settings
                                                        </h6>
                                                    </div>
                                                    <div class="card-body">
                                                        @if(isset($settings[$category]))
                                                            <div class="row">
                                                                @foreach($settings[$category] as $setting)
                                                                    <div class="col-md-6 mb-3">
                                                                        <div class="form-group">
                                                                            <label for="setting_{{ $setting->key }}" class="form-label">
                                                                                {{ ucwords(str_replace('_', ' ', $setting->key)) }}
                                                                                @if($setting->description)
                                                                                    <small class="text-muted d-block">{{ $setting->description }}</small>
                                                                                @endif
                                                                            </label>
                                                                            
                                                                            @if($setting->type === 'text')
                                                                                <textarea 
                                                                                    name="settings[{{ $setting->key }}]"
                                                                                    id="setting_{{ $setting->key }}"
                                                                                    class="form-control"
                                                                                    rows="3"
                                                                                    {{ $setting->is_editable ?? true ? '' : 'readonly' }}
                                                                                >{{ old('settings.' . $setting->key, $setting->value) }}</textarea>
                                                                            @elseif($setting->type === 'boolean')
                                                                                <select 
                                                                                    name="settings[{{ $setting->key }}]"
                                                                                    id="setting_{{ $setting->key }}"
                                                                                    class="form-control"
                                                                                    {{ $setting->is_editable ?? true ? '' : 'disabled' }}
                                                                                >
                                                                                    <option value="1" {{ $setting->value == 1 ? 'selected' : '' }}>Yes</option>
                                                                                    <option value="0" {{ $setting->value == 0 ? 'selected' : '' }}>No</option>
                                                                                </select>
                                                                            @elseif($setting->type === 'number')
                                                                                <input 
                                                                                    type="number" 
                                                                                    name="settings[{{ $setting->key }}]"
                                                                                    id="setting_{{ $setting->key }}"
                                                                                    class="form-control"
                                                                                    value="{{ old('settings.' . $setting->key, $setting->value) }}"
                                                                                    step="any"
                                                                                    {{ $setting->is_editable ?? true ? '' : 'readonly' }}
                                                                                >
                                                                            @else
                                                                                <input 
                                                                                    type="text" 
                                                                                    name="settings[{{ $setting->key }}]"
                                                                                    id="setting_{{ $setting->key }}"
                                                                                    class="form-control"
                                                                                    value="{{ old('settings.' . $setting->key, $setting->value) }}"
                                                                                    {{ $setting->is_editable ?? true ? '' : 'readonly' }}
                                                                                >
                                                                            @endif
                                                                            
                                                                            @if(!($setting->is_editable ?? true))
                                                                                <small class="text-muted">
                                                                                    <i class="fas fa-lock"></i> This setting is not editable
                                                                                </small>
                                                                            @endif
                                                                        </div>
                                                                    </div>
                                                                @endforeach
                                                            </div>
                                                        @else
                                                            <div class="alert alert-info">
                                                                <i class="fas fa-info-circle"></i> No settings found for this category.
                                                            </div>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </form>
                    @endif
                </div>
                
                @if(!$settings->isEmpty())
                    <div class="card-footer">
                        <div class="d-flex justify-content-end">
                            <button type="button" class="btn btn-primary me-2" onclick="saveSettings()">
                                <i class="fas fa-save"></i> Save Changes
                            </button>
                            <button type="button" class="btn btn-secondary" onclick="resetForm()">
                                <i class="fas fa-undo"></i> Reset
                            </button>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    // Initialize Bootstrap tabs
    document.addEventListener('DOMContentLoaded', function() {
        var triggerTabList = [].slice.call(document.querySelectorAll('#settingsNav a'))
        triggerTabList.forEach(function (triggerEl) {
            var tabTrigger = new bootstrap.Tab(triggerEl)
            
            triggerEl.addEventListener('click', function (event) {
                event.preventDefault()
                tabTrigger.show()
            })
        })
    })
    
    function saveSettings() {
        if (confirm('Are you sure you want to save all changes?')) {
            document.getElementById('settingsForm').submit();
        }
    }
    
    function resetForm() {
        if (confirm('Are you sure you want to reset all changes?')) {
            document.getElementById('settingsForm').reset();
        }
    }
    
    // Show save confirmation when leaving page with unsaved changes
    let formChanged = false;
    const form = document.getElementById('settingsForm');
    
    if (form) {
        form.addEventListener('change', function() {
            formChanged = true;
        });
        
        window.addEventListener('beforeunload', function(e) {
            if (formChanged) {
                e.preventDefault();
                e.returnValue = 'You have unsaved changes. Are you sure you want to leave?';
            }
        });
    }
</script>
@endpush

@push('styles')
<style>
    .list-group-item.active {
        background-color: #0d6efd;
        border-color: #0d6efd;
    }
    
    .tab-pane {
        animation: fadeIn 0.3s ease-in;
    }
    
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    
    .form-label small {
        font-size: 0.85rem;
        margin-top: 0.25rem;
    }
</style>
@endpush