@extends('layout.layoutAdmin')
@section('title', 'Estim\'Bien - Classifications')
@section('content')
<div class="container py-4">
    <h1 class="fw-bold mb-1 text-danger">Classifications</h1>
    <p class="text-secondary mb-4">Gérez les classifications de vos demandes d'estimation</p>

    <!-- Résumé -->
    <div class="row g-3 mb-4">
        <div class="col-md-4">
            <div class="p-3 border rounded d-flex justify-content-between align-items-center" style="border-left: 5px solid #8B0000;">
                <div>
                    <small class="text-uppercase text-muted">Total Classifications</small>
                    <h3 class="mb-0 text-danger">{{ $totalClassifications }}</h3>
                </div>
                <i class="bi bi-file-earmark-text text-danger fs-3"></i>
            </div>
        </div>

        <div class="col-md-4">
            <div class="p-3 border rounded d-flex justify-content-between align-items-center" style="border-left: 5px solid #007bff;">
                <div>
                    <small class="text-uppercase text-muted">Classification Populaire</small>
                    <h5 class="mb-0">
                        <a href="#" class="text-primary fw-bold text-decoration-none">{{ $classificationPopulaire?->nom ?? '-' }}</a>
                    </h5>
                </div>
                <i class="bi bi-bar-chart-line text-primary fs-3"></i>
            </div>
        </div>
    </div>

    <!-- Bouton nouvelle classification -->
    <div class="mb-3 text-end">
        <button class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#modalCreate">
            <i class="bi bi-plus-lg"></i> Nouvelle Classification
        </button>
    </div>

    <!-- Table classifications -->
    <div class="table-responsive border rounded p-3">
        <h5 class="text-danger fw-bold mb-3">Liste des Classifications</h5>
        <table class="table table-hover align-middle mb-0">
            <thead>
                <tr>
                    <th>Nom</th>
                    <th>Description</th>
                    <th>Couleur</th>
                    <th>Demandes</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach($classifications as $classification)
                    <tr>
                        <td class="fw-bold">{{ $classification->nom }}</td>
                        <td class="text-secondary text-truncate" style="max-width:300px;" title="{{ $classification->description }}">
                            {{ Str::limit($classification->description, 50) }}
                        </td>
                        <td>
                            <span class="badge rounded-pill border" style="background-color: {{ $classification->couleur }}; color: {{ $classification->couleur }};">
                                &nbsp;
                            </span>
                            <span class="badge rounded-pill border" style="color: {{ $classification->couleur }}; border-color: {{ $classification->couleur }};">
                                {{ $classification->nom }}
                            </span>
                        </td>
                        <td class="fw-semibold">{{ $classification->biens_count }} demandes</td>
                        <td>
                            <button class="btn btn-outline-danger btn-sm me-1" data-bs-toggle="modal" data-bs-target="#modalEdit" 
                                data-id="{{ $classification->id }}" 
                                data-nom="{{ $classification->nom }}" 
                                data-description="{{ $classification->description }}" 
                                data-couleur="{{ $classification->couleur }}">
                                <i class="bi bi-pencil"></i>
                            </button>
                            <form action="{{ route('classification.destroy', $classification->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Voulez-vous vraiment supprimer cette classification ?');">
                                @csrf
                                @method('DELETE')
                                <button class="btn btn-outline-danger btn-sm text-danger" type="submit">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </form>
                        </td>
                    </tr>
                @endforeach
                @if($classifications->isEmpty())
                    <tr><td colspan="5" class="text-center text-muted py-3">Aucune classification</td></tr>
                @endif
            </tbody>
        </table>
    </div>
</div>

<!-- Modal Création -->
<div class="modal fade" id="modalCreate" tabindex="-1" aria-labelledby="modalCreateLabel" aria-hidden="true">
  <div class="modal-dialog">
    <form action="{{ route('classification.store') }}" method="POST" class="modal-content">
      @csrf
      <div class="modal-header">
        <h5 class="modal-title" id="modalCreateLabel">Nouvelle Classification</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
      </div>
      <div class="modal-body">
          <div class="mb-3">
            <label for="nom" class="form-label">Nom</label>
            <input type="text" name="nom" id="nom" class="form-control" required maxlength="100" />
          </div>
          <div class="mb-3">
            <label for="description" class="form-label">Description</label>
            <textarea name="description" id="description" rows="3" class="form-control" required></textarea>
          </div>
          <div class="mb-3">
            <label for="couleur" class="form-label">Couleur</label>
            <input type="color" name="couleur" id="couleur" class="form-control form-control-color" required value="#8B0000" />
          </div>
      </div>
      <div class="modal-footer">
        <button type="submit" class="btn btn-danger">Créer</button>
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
      </div>
    </form>
  </div>
</div>

<!-- Modal Edition -->
<div class="modal fade" id="modalEdit" tabindex="-1" aria-labelledby="modalEditLabel" aria-hidden="true">
  <div class="modal-dialog">
    <form action="{{ route('classification.update', 0) }}" method="POST" class="modal-content" id="formEdit">
      @csrf
      @method('PUT')
      <input type="hidden" name="id" id="edit-id" />
      <div class="modal-header">
        <h5 class="modal-title" id="modalEditLabel">Modifier Classification</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
      </div>
      <div class="modal-body">
          <div class="mb-3">
            <label for="edit-nom" class="form-label">Nom</label>
            <input type="text" name="nom" id="edit-nom" class="form-control" required maxlength="100" />
          </div>
          <div class="mb-3">
            <label for="edit-description" class="form-label">Description</label>
            <textarea name="description" id="edit-description" rows="3" class="form-control" required></textarea>
          </div>
          <div class="mb-3">
            <label for="edit-couleur" class="form-label">Couleur</label>
            <input type="color" name="couleur" id="edit-couleur" class="form-control form-control-color" required />
          </div>
      </div>
      <div class="modal-footer">
        <button type="submit" class="btn btn-danger">Enregistrer</button>
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
      </div>
    </form>
  </div>
</div>


@endsection

@section('scripts')
<script>
    var editModal = document.getElementById('modalEdit');
    editModal.addEventListener('show.bs.modal', function (event) {
        var button = event.relatedTarget;
        var id = button.getAttribute('data-id');
        editModal.querySelector('#edit-id').value = id;
        editModal.querySelector('#edit-nom').value = button.getAttribute('data-nom');
        editModal.querySelector('#edit-description').value = button.getAttribute('data-description');
        editModal.querySelector('#edit-couleur').value = button.getAttribute('data-couleur');

        // Modifier dynamiquement l'action du formulaire
        var form = editModal.querySelector('#formEdit');
        var baseAction = "{{ route('classification.update', ':id') }}"; // Laravel blade route avec placeholder
        form.action = baseAction.replace(':id', id);
    });
</script>

@endsection