@extends('layouts.app')

@section('title', 'Paramètres système')

@section('breadcrumb')
    <li class="breadcrumb-item active">Paramètres système</li>
@endsection

@section('content')

{{-- Modale : Ajouter un paramètre --}}
<div class="modal fade" id="modalAddParam" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <form method="POST" action="{{ route('system-parameters.store') }}">
            @csrf
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="bi bi-plus-circle me-2"></i>Ajouter une valeur</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="type" id="modalAddType">
                    <div class="mb-3">
                        <label class="form-label fw-semibold text-muted small">Type</label>
                        <p class="fw-bold mb-0" id="modalAddTypeLabel"></p>
                    </div>
                    <div class="mb-3">
                        <label for="modalAddValue" class="form-label">Valeur (clé interne) <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="modalAddValue" name="value"
                               placeholder="Ex: bureau, hangar, autre2..."
                               pattern="[a-z0-9_-]+" title="Lettres minuscules, chiffres, tirets et underscores uniquement">
                        <div class="form-text">Lettres minuscules, chiffres, _ et - uniquement. Ne peut pas être modifié après.</div>
                    </div>
                    <div class="mb-3">
                        <label for="modalAddLabel" class="form-label">Libellé affiché <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="modalAddLabel" name="label"
                               placeholder="Ex: Bureau, Hangar...">
                    </div>
                    <div class="mb-3">
                        <label for="modalAddOrder" class="form-label">Ordre d'affichage</label>
                        <input type="number" class="form-control" id="modalAddOrder" name="sort_order" value="99" min="0">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                    <button type="submit" class="btn btn-success"><i class="bi bi-check-lg me-1"></i>Ajouter</button>
                </div>
            </div>
        </form>
    </div>
</div>

{{-- Modale : Modifier un paramètre --}}
<div class="modal fade" id="modalEditParam" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <form method="POST" id="editParamForm">
            @csrf
            @method('PUT')
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="bi bi-pencil me-2"></i>Modifier la valeur</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label fw-semibold text-muted small">Valeur (clé)</label>
                        <p class="fw-bold mb-0" id="modalEditValue"></p>
                    </div>
                    <div class="mb-3">
                        <label for="modalEditLabel" class="form-label">Libellé affiché <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="modalEditLabel" name="label">
                    </div>
                    <div class="mb-3">
                        <label for="modalEditOrder" class="form-label">Ordre d'affichage</label>
                        <input type="number" class="form-control" id="modalEditOrder" name="sort_order" min="0">
                    </div>
                    <div class="form-check form-switch mb-2">
                        <input class="form-check-input" type="checkbox" id="modalEditActive" name="is_active" value="1">
                        <label class="form-check-label" for="modalEditActive">Actif (visible dans les formulaires)</label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                    <button type="submit" class="btn btn-primary"><i class="bi bi-save me-1"></i>Mettre à jour</button>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="d-flex align-items-center justify-content-between mb-3">
    <h4 class="mb-0"><i class="bi bi-sliders me-2"></i>Paramètres système</h4>
    <p class="text-muted mb-0 small">Gérez les valeurs des listes déroulantes dans les formulaires</p>
</div>

{{-- Logo de l'application --}}
@php
    $logoFiles   = glob(public_path('storage/app-logo.*'));
    $currentLogo = $logoFiles ? asset('storage/' . basename($logoFiles[0])) : null;
@endphp
<div class="card mb-4">
    <div class="card-header fw-semibold">
        <i class="bi bi-image me-2 text-primary"></i>Logo de l'application
    </div>
    <div class="card-body">
        <div class="row align-items-center g-3">
            <div class="col-auto">
                @if($currentLogo)
                    <img src="{{ $currentLogo }}" alt="Logo actuel" class="rounded border"
                         style="width:80px;height:80px;object-fit:contain;background:#f8f9fa;padding:4px;">
                @else
                    <div class="rounded border d-flex align-items-center justify-content-center bg-light"
                         style="width:80px;height:80px;">
                        <i class="bi bi-image text-muted fs-2"></i>
                    </div>
                @endif
            </div>
            <div class="col">
                <form action="{{ route('settings.logo.update') }}" method="POST" enctype="multipart/form-data"
                      class="d-flex align-items-center gap-2 flex-wrap">
                    @csrf
                    <input type="file" class="form-control form-control-sm @error('logo') is-invalid @enderror"
                           name="logo" accept="image/png,image/jpeg,image/gif,image/webp" style="max-width:280px;">
                    @error('logo')
                        <div class="invalid-feedback d-block">{{ $message }}</div>
                    @enderror
                    <button type="submit" class="btn btn-sm btn-primary">
                        <i class="bi bi-upload me-1"></i>{{ $currentLogo ? 'Changer' : 'Envoyer' }}
                    </button>
                </form>
                @if($currentLogo)
                <form action="{{ route('settings.logo.destroy') }}" method="POST" class="mt-2"
                      onsubmit="return confirm('Supprimer le logo ?')">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-sm btn-outline-danger">
                        <i class="bi bi-trash me-1"></i>Supprimer le logo
                    </button>
                </form>
                @endif
                <div class="form-text mt-1">Formats : PNG, JPG, GIF, WEBP — max 2 Mo. Recommandé : carré, min 100×100 px.</div>
            </div>
        </div>
    </div>
</div>

<div class="row g-3">
    @foreach($types as $typeKey => $typeDef)
    <div class="col-md-6">
        <div class="card h-100">
            <div class="card-header d-flex align-items-center justify-content-between">
                <span class="fw-semibold">
                    <i class="bi {{ $typeDef['icon'] }} me-2 text-primary"></i>{{ $typeDef['label'] }}
                </span>
                <button type="button" class="btn btn-success btn-sm"
                        onclick="openAddModal('{{ $typeKey }}', '{{ addslashes($typeDef['label']) }}')"
                        title="Ajouter une valeur">
                    <i class="bi bi-plus-lg"></i> Ajouter
                </button>
            </div>
            <div class="card-body p-0">
                <table class="table table-sm table-hover mb-0 align-middle">
                    <thead class="table-light">
                        <tr>
                            <th class="ps-3" style="width:50px">#</th>
                            <th>Libellé</th>
                            <th style="width:80px" class="text-center">Actif</th>
                            <th style="width:90px" class="text-end pe-3">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($params->get($typeKey, collect()) as $param)
                        <tr>
                            <td class="ps-3 text-muted small">{{ $param->sort_order }}</td>
                            <td>
                                <span class="fw-semibold">{{ $param->label }}</span>
                                <span class="text-muted small ms-1">({{ $param->value }})</span>
                            </td>
                            <td class="text-center">
                                @if($param->is_active)
                                    <span class="badge bg-success-subtle text-success">Actif</span>
                                @else
                                    <span class="badge bg-secondary-subtle text-secondary">Inactif</span>
                                @endif
                            </td>
                            <td class="text-end pe-3">
                                <button type="button" class="btn btn-sm btn-outline-primary py-0"
                                        onclick="openEditModal({{ $param->id }}, '{{ addslashes($param->value) }}', '{{ addslashes($param->label) }}', {{ $param->sort_order }}, {{ $param->is_active ? 'true' : 'false' }})"
                                        title="Modifier">
                                    <i class="bi bi-pencil"></i>
                                </button>
                                <form method="POST" action="{{ route('system-parameters.destroy', $param) }}"
                                      class="d-inline"
                                      onsubmit="return confirm('Supprimer « {{ addslashes($param->label) }} » ?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-sm btn-outline-danger py-0" title="Supprimer">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </form>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="4" class="text-center text-muted py-3 fst-italic">Aucune valeur définie</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    @endforeach
</div>
@endsection

@push('scripts')
<script>
function openAddModal(type, typeLabel) {
    document.getElementById('modalAddType').value   = type;
    document.getElementById('modalAddTypeLabel').textContent = typeLabel;
    document.getElementById('modalAddValue').value  = '';
    document.getElementById('modalAddLabel').value  = '';
    document.getElementById('modalAddOrder').value  = 99;
    new bootstrap.Modal(document.getElementById('modalAddParam')).show();
}

function openEditModal(id, value, label, sortOrder, isActive) {
    document.getElementById('editParamForm').action = '/system-parameters/' + id;
    document.getElementById('modalEditValue').textContent = value;
    document.getElementById('modalEditLabel').value  = label;
    document.getElementById('modalEditOrder').value  = sortOrder;
    document.getElementById('modalEditActive').checked = isActive;
    new bootstrap.Modal(document.getElementById('modalEditParam')).show();
}
</script>
@endpush