{{-- Exemple de structure pour la vue de configuration --}}
@extends('admin.layouts.app')

@section('content')
<div class="row">
    <div class="col-xl-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between bg-galaxy-transparent">
            <h4 class="mb-sm-0">{{ __('admin/settings.company_config_title') }}</h4>
            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="{{ route('admin.settings.index') }}">{{ __('admin/settings.breadcrumb.settings') }}</a></li>
                    <li class="breadcrumb-item active">{{ __('admin/settings.breadcrumb.config') }}</li>
                </ol>
            </div>
        </div>

        <!-- Menu bar -->
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <div class="d-flex align-items-center flex-wrap gap-2">
                        <div class="flex-grow-1">
                            <a href="{{ route('admin.settings.index') }}" class="btn btn-light me-2">
                                <i class="ri-arrow-left-line me-1"></i>{{ __('admin/settings.actions.back') }}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>        

        <div class="row">
            <div class="col-lg-8">
                <!-- Configuration entreprise -->
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">{{ __('admin/settings.company.title') }}</h5>
                    </div>
                    <div class="card-body">
                        <form id="company-config-form">
                            @csrf
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">{{ __('admin/settings.company.fields.name') }} <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" name="company_name"
                                            value="{{ $companyConfig['company_name'] ?? '' }}" required>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">{{ __('admin/settings.company.fields.full_name') }} <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" name="full_name"
                                            value="{{ $companyConfig['full_name'] ?? '' }}" required>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">{{ __('admin/settings.company.fields.email') }} <span class="text-danger">*</span></label>
                                        <input type="email" class="form-control" name="email"
                                            value="{{ $companyConfig['email'] ?? '' }}" required>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">{{ __('admin/settings.company.fields.phone') }} <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" name="phone"
                                            value="{{ $companyConfig['phone'] ?? '' }}" required>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-8">
                                    <div class="mb-3">
                                        <label class="form-label">{{ __('admin/settings.company.fields.address') }} <span class="text-danger">*</span></label>
                                        <textarea class="form-control" name="address" rows="2" required>{{ $companyConfig['address'] ?? '' }}</textarea>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label class="form-label">{{ __('admin/settings.company.fields.website') }}</label>
                                        <input type="url" class="form-control" name="website"
                                            value="{{ $companyConfig['website'] ?? '' }}">
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">{{ __('admin/settings.company.fields.iban') }}</label>
                                        <input type="text" class="form-control" name="bank[iban]"
                                            value="{{ $companyConfig['bank']['iban'] ?? '' }}">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">{{ __('admin/settings.company.fields.bic') }}</label>
                                        <input type="text" class="form-control" name="bank[bic]"
                                            value="{{ $companyConfig['bank']['bic'] ?? '' }}">
                                    </div>
                                </div>
                            </div>

                            <div class="text-end">
                                <button type="submit" class="btn btn-primary">
                                    <i class="ri-save-line me-1"></i>{{ __('admin/settings.company.save_config') }}
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

                <!-- Variables de configuration -->
                <div class="card">
                    <div class="card-header">
                        <div class="d-flex justify-content-between align-items-center">
                            <h5 class="card-title mb-0">{{ __('admin/settings.config_vars.title') }}</h5>
                            <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#addVariableModal">
                                <i class="ri-add-line me-1"></i>{{ __('admin/settings.config_vars.add_variable') }}
                            </button>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            @php
                                $reservedKeys = ['company_name', 'full_name', 'email', 'phone', 'address', 'website', 'bank'];
                                $customVariables = array_diff_key($config, array_flip($reservedKeys));
                            @endphp

                            @if(count($customVariables) > 0)
                            <table class="table table-nowrap align-middle">
                                <thead class="table-light">
                                    <tr>
                                        <th>{{ __('admin/settings.config_vars.table.key') }}</th>
                                        <th>{{ __('admin/settings.config_vars.table.value') }}</th>
                                        <th>{{ __('admin/settings.config_vars.table.type') }}</th>
                                        <th class="text-end">{{ __('admin/settings.config_vars.table.actions') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {{-- Exemple de ligne de configuration --}}
                                    @foreach($config as $key => $value)
                                    @if(!in_array($key, ['company_name', 'full_name', 'email', 'phone', 'address', 'website', 'bank']))
                                    <tr>
                                        <td>
                                            <code class="text-primary">{{ $key }}</code>
                                        </td>
                                        <td>
                                            <div class="config-value" data-key="{{ $key }}">
                                                @if(is_array($value))
                                                <span class="badge bg-info-subtle text-info">{{ __('admin/settings.config_vars.types.array') }} ({{ count($value) }} items)</span>
                                                @elseif(is_bool($value))
                                                <span class="badge bg-{{ $value ? 'success' : 'danger' }}-subtle text-{{ $value ? 'success' : 'danger' }}">
                                                    {{ $value ? 'true' : 'false' }}
                                                </span>
                                                @else
                                                <span class="text-truncate d-inline-block" style="max-width: 200px;">{{ $value }}</span>
                                                @endif
                                            </div>
                                        </td>
                                        <td>
                                            <span class="badge bg-secondary-subtle text-secondary">
                                                {{ is_array($value) ? __('admin/settings.config_vars.types.array') : (is_bool($value) ? __('admin/settings.config_vars.types.boolean') : (is_numeric($value) ? __('admin/settings.config_vars.types.integer') : __('admin/settings.config_vars.types.string'))) }}
                                            </span>
                                        </td>
                                        <td class="text-end">
                                            <ul class="list-inline mb-0">
                                                <li class="list-inline-item" data-bs-toggle="tooltip" title="{{ __('admin/settings.config_vars.tooltips.edit') }}">
                                                    <button class="btn btn-sm btn-outline-primary edit-config-var"
                                                        data-key="{{ $key }}"
                                                        data-value="{{ is_array($value) ? json_encode($value) : $value }}"
                                                        data-type="{{ is_array($value) ? 'array' : (is_bool($value) ? 'boolean' : (is_numeric($value) ? 'integer' : 'string')) }}">
                                                        <i class="ri-pencil-line"></i>
                                                    </button>
                                                </li>
                                                <li class="list-inline-item" data-bs-toggle="tooltip" title="{{ __('admin/settings.config_vars.tooltips.delete') }}">
                                                    <button class="btn btn-sm btn-outline-danger open-delete-modal"
                                                        data-bs-toggle="modal"
                                                        href="#deleteConfigModal"
                                                        data-delete-url="{{ route('admin.settings.delete-config-variable', ['key' => $key]) }}"
                                                        data-item-name="{{ $key }}"
                                                        data-item-type="{{ __('admin/settings.delete_modal.config_var.item_type') }}"
                                                        id="delete-record-{{ $key }}">
                                                        <i class="ri-delete-bin-line"></i>
                                                    </button>
                                                </li>
                                            </ul>
                                        </td>
                                    </tr>
                                    @endif
                                    @endforeach
                                </tbody>
                            </table>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <!-- Aperçu de la configuration -->
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">{{ __('admin/settings.company.preview.title') }}</h5>
                    </div>
                    <div class="card-body">
                        <div class="text-center mb-3">
                            <div class="avatar-lg mx-auto mb-3">
                                <span class="avatar-title bg-primary-subtle text-primary rounded-circle fs-2">
                                    <i class="ri-building-line"></i>
                                </span>
                            </div>
                            <h5>{{ $companyConfig['company_name'] ?? __('admin/settings.company.preview.defaults.company_name') }}</h5>
                            <p class="text-muted">{{ $companyConfig['full_name'] ?? __('admin/settings.company.preview.defaults.full_name') }}</p>
                        </div>
                        
                        <div class="vstack gap-2">
                            @if(!empty($companyConfig['email']))
                            <div class="d-flex align-items-center">
                                <i class="ri-mail-line text-muted me-2"></i>
                                <span>{{ $companyConfig['email'] }}</span>
                            </div>
                            @endif
                            
                            @if(!empty($companyConfig['phone']))
                            <div class="d-flex align-items-center">
                                <i class="ri-phone-line text-muted me-2"></i>
                                <span>{{ $companyConfig['phone'] }}</span>
                            </div>
                            @endif
                            
                            @if(!empty($companyConfig['address']))
                            <div class="d-flex align-items-start">
                                <i class="ri-map-pin-line text-muted me-2 mt-1"></i>
                                <span>{{ $companyConfig['address'] }}</span>
                            </div>
                            @endif
                            
                            @if(!empty($companyConfig['website']))
                            <div class="d-flex align-items-center">
                                <i class="ri-global-line text-muted me-2"></i>
                                <a href="{{ $companyConfig['website'] }}" target="_blank">{{ $companyConfig['website'] }}</a>
                            </div>
                            @endif
                        </div>
                    </div>
                </div>
                
                <!-- Informations système -->
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">{{ __('admin/settings.system_info.title') }}</h5>
                    </div>
                    <div class="card-body">
                        <div class="vstack gap-2">
                            <div class="d-flex justify-content-between">
                                <span class="text-muted">{{ __('admin/settings.system_info.config_stats.config_file') }}</span>
                                <span><code>config/sfer.php</code></span>
                            </div>
                            <div class="d-flex justify-content-between">
                                <span class="text-muted">{{ __('admin/settings.system_info.config_stats.total_vars') }}</span>
                                <span class="badge bg-primary">{{ count($config) }}</span>
                            </div>
                            <div class="d-flex justify-content-between">
                                <span class="text-muted">{{ __('admin/settings.system_info.config_stats.last_modified') }}</span>
                                <span>{{ $configStats['last_modified'] }}</span>
                            </div>
                            @if($configStats['backups_count'] > 0)
                            <div class="d-flex justify-content-between">
                                <span class="text-muted">{{ __('admin/settings.system_info.config_stats.backups') }}</span>
                                <span class="badge bg-success">{{ $configStats['backups_count'] }}</span>
                            </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal d'ajout/modification de variable -->
<div class="modal fade" id="addVariableModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addVariableModalLabel">{{ __('admin/settings.config_vars.modal.add_title') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="config-variable-form">
                <div class="modal-body">
                    @csrf
                    <input type="hidden" name="action" value="add">

                    <div class="mb-3">
                        <label class="form-label">{{ __('admin/settings.config_vars.modal.key_label') }} <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" name="key" required
                            placeholder="{{ __('admin/settings.config_vars.modal.key_placeholder') }}">
                    </div>

                    <div class="mb-3">
                        <label class="form-label">{{ __('admin/settings.config_vars.modal.type_label') }} <span class="text-danger">*</span></label>
                        <select class="form-select" name="type" id="config_type" required>
                            <option value="string">{{ __('admin/settings.config_vars.modal.type_options.string') }}</option>
                            <option value="integer">{{ __('admin/settings.config_vars.modal.type_options.integer') }}</option>
                            <option value="boolean">{{ __('admin/settings.config_vars.modal.type_options.boolean') }}</option>
                            <option value="array">{{ __('admin/settings.config_vars.modal.type_options.array') }}</option>
                        </select>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">{{ __('admin/settings.config_vars.modal.value_label') }} <span class="text-danger">*</span></label>
                        <textarea class="form-control" name="value" rows="3" required
                            placeholder="{{ __('admin/settings.config_vars.modal.value_placeholder') }}"></textarea>
                        <small class="text-muted" id="value-help">{{ __('admin/settings.config_vars.modal.value_help') }}</small>

                        <!-- Exemples pour les arrays -->
                        <div id="array-examples" style="display: none;" class="mt-2">
                            <small class="text-info d-block mb-1"><strong>{{ __('admin/settings.config_vars.modal.array_examples.title') }}</strong></small>
                            <small class="d-block">• {{ __('admin/settings.config_vars.modal.array_examples.object') }}</small>
                            <small class="d-block">• {{ __('admin/settings.config_vars.modal.array_examples.nested') }}</small>
                        </div>                        
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">{{ __('admin/settings.actions.cancel') }}</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="ri-save-line me-1"></i>{{ __('admin/settings.actions.save') }}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal de suppression -->
<x-admin.delete-modal
    modal-id="deleteConfigModal"
    item-type="{{ __('admin/settings.delete_modal.config_var.item_type') }}"
    confirm-text="{{ __('admin/settings.delete_modal.config_var.confirm_text') }}"
    delete-text="{{ __('admin/settings.delete_modal.config_var.delete_text') }}"
    cancel-text="{{ __('admin/settings.actions.cancel') }}" />

<!-- Composant toast global -->
<x-admin.toast-messages />
@endsection

@push('script')
<script>
    document.addEventListener('DOMContentLoaded', function() {

        // Configuration de l'entreprise
        const companyConfigForm = document.getElementById('company-config-form');
        if (companyConfigForm) {
            companyConfigForm.addEventListener('submit', function(e) {
                e.preventDefault();

                const formData = new FormData(this);
                const submitBtn = this.querySelector('button[type="submit"]');
                const originalText = submitBtn.innerHTML;

                submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>{{ __("admin/settings.messages.saving") }}';
                submitBtn.disabled = true;

                fetch('{{ route("admin.settings.update-company-config") }}', {
                        method: 'POST',
                        body: formData,
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                        }
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            showToast(data.message, 'success');
                            // Recharger la page pour voir les changements
                            setTimeout(() => window.location.reload(), 1500);
                        } else {
                            showToast(data.message, 'error');
                        }
                    })
                    .catch(error => {
                        console.error('Erreur:', error);
                        showToast('{{ __("admin/settings.messages.errors.save_error") }}', 'error');
                    })
                    .finally(() => {
                        submitBtn.innerHTML = originalText;
                        submitBtn.disabled = false;
                    });
            });
        }

        // gestion de l'aide
        const configVariableForm = document.getElementById('config-variable-form');
        if (configVariableForm) {
            const typeSelect = configVariableForm.querySelector('select[name="type"]');
            const valueHelp = document.getElementById('value-help');
            const valueTextarea = configVariableForm.querySelector('textarea[name="value"]');
            const arrayExamples = document.getElementById('array-examples');       
            typeSelect.addEventListener('change', function() {
                switch(this.value) {
                    case 'boolean':
                        valueHelp.textContent = '{{ __("admin/settings.config_vars.modal.value_help_boolean") }}';
                        valueTextarea.placeholder = 'true';
                        arrayExamples.style.display = 'none';
                        break;
                    case 'integer':
                        valueHelp.textContent = '{{ __("admin/settings.config_vars.modal.value_help_integer") }}';
                        valueTextarea.placeholder = '123';
                        arrayExamples.style.display = 'none';
                        break;
                    case 'array':
                        valueHelp.textContent = '{{ __("admin/settings.config_vars.modal.value_help_array") }}';
                        valueTextarea.placeholder = '{"iban": "BE42 1234 4567 7890", "bic": "ABCDEFGH"}';
                        arrayExamples.style.display = 'block';
                        break;
                    default:
                        valueHelp.textContent = '{{ __("admin/settings.config_vars.modal.value_help_string") }}';
                        valueTextarea.placeholder = '{{ __("admin/settings.config_vars.modal.value_placeholder") }}';
                        arrayExamples.style.display = 'none';
                }
            });

            // Gestion du formulaire de variable
            configVariableForm.addEventListener('submit', function(e) {
            e.preventDefault();

            const formData = new FormData(this);
            const action = formData.get('action');
            const submitBtn = this.querySelector('button[type="submit"]');
            const originalText = submitBtn.innerHTML;

            submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>{{ __("admin/settings.messages.saving") }}';
            submitBtn.disabled = true;

            const url = action === 'add' ?
                '{{ route("admin.settings.add-config-variable") }}' :
                '{{ route("admin.settings.update-config-variable") }}';

            fetch(url, {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showToast(data.message, 'success');
                        bootstrap.Modal.getInstance(document.getElementById('addVariableModal')).hide();
                        setTimeout(() => window.location.reload(), 1500);
                    } else {
                        showToast(data.message, 'error');
                    }
                })
                .catch(error => {
                    console.error('Erreur:', error);
                    showToast('{{ __("admin/settings.messages.errors.save_error") }}', 'error');
                })
                .finally(() => {
                    submitBtn.innerHTML = originalText;
                    submitBtn.disabled = false;
                });
            });            
        }

        // Gestion de l'édition de variable
        document.querySelectorAll('.edit-config-var').forEach(function(button) {
            button.addEventListener('click', function() {
                const key = this.getAttribute('data-key');
                const value = this.getAttribute('data-value');
                const type = this.getAttribute('data-type');

                // Remplir le modal d'ajout/modification
                const modal = document.getElementById('addVariableModal');
                const form = document.getElementById('config-variable-form');

                // Changer le titre et l'action
                modal.querySelector('.modal-title').textContent = '{{ __("admin/settings.config_vars.modal.edit_title") }}';
                form.querySelector('input[name="action"]').value = 'update';

                // Remplir les champs
                form.querySelector('input[name="key"]').value = key;
                form.querySelector('input[name="key"]').readOnly = true; // Empêcher la modification de la clé
                form.querySelector('select[name="type"]').value = type;
                form.querySelector('textarea[name="value"]').value = value;

                // Gérer l'aide selon le type
                document.getElementById('config_type').dispatchEvent(new Event('change'));

                // Ouvrir le modal
                const bsModal = new bootstrap.Modal(modal);
                bsModal.show();
            });
        });

        // Réinitialiser le modal quand il se ferme
        document.getElementById('addVariableModal').addEventListener('hidden.bs.modal', function() {
            const form = document.getElementById('config-variable-form');
            form.reset();
            form.querySelector('input[name="action"]').value = 'add';
            form.querySelector('input[name="key"]').readOnly = false;
            this.querySelector('.modal-title').textContent = '{{ __("admin/settings.config_vars.modal.add_title") }}';
        });

        // Fonction utilitaire pour les toasts
        function showToast(message, type = 'info') {
            if (typeof window.showSuccessToast === 'function' && type === 'success') {
                window.showSuccessToast(message);
            } else if (typeof window.showErrorToast === 'function' && type === 'error') {
                window.showErrorToast(message);
            } else if (typeof window.showToast === 'function') {
                window.showToast(message, type);
            } else {
                alert(message);
            }
        }
    });
</script>
@endpush