@extends('layouts.horizontal', ['title' => 'Modulos'])

@section('content')
<div class="container-fluid">

@include('layouts.partials.page-title', [
    'subtitle' => 'Modulos',
    'title' => 'Listado de Modulos'
])

<div class="card" data-table>
 @if (session('ok'))
        <div class="alert alert-success">{{ session('ok') }}</div>
      @endif
  {{-- HEADER SUPERIOR --}}
  <div class="card-header d-flex justify-content-between align-items-center">
    <h4 class="card-title m-0">Modulos</h4>
    <a href="{{ route('modulos.create') }}" class="btn btn-primary btn-sm">
      <i class="ti ti-plus"></i> Nuevo Modulo
    </a>
  </div>

<div class="row g-3">

@foreach($modulos as $modulo)
    <div class="col-12">
        <div class="card shadow-sm">

            {{-- HEADER MODULO PADRE --}}
            <div class="card-body d-flex align-items-center justify-content-between">

                <div class="d-flex align-items-center gap-2">
                    @if($modulo->hijos->count())
                        <button type="button"
                                class="btn btn-link p-0 toggle-hijos"
                                data-toggle-target="hijos-{{ $modulo->id }}"
                                data-state="closed">
                            <i class="ti ti-arrow-badge-right fs-4 me-1"></i>
                            <span class="toggle-text">Ver más</span>
                        </button>
                    @endif

                    @if($modulo->icono)
                        <i class="{{ $modulo->icono }}"></i>
                    @endif

                    <strong class="fs-5">{{ $modulo->nombre }}</strong>

                    <span class="badge bg-secondary">
                        {{ $modulo->slug }}
                    </span>
                </div>

                <div class="d-flex align-items-center gap-3">
                    <span class="badge bg-info">
                        {{ $modulo->permisos_count }} permisos
                    </span>

                    @if($modulo->activo)
                        <span class="badge bg-success">Activo</span>
                    @else
                        <span class="badge bg-danger">Inactivo</span>
                    @endif

                    <a href="{{ route('modulos.edit', $modulo) }}"
                       class="btn btn-sm btn-outline-primary">
                        Editar
                    </a>
                </div>
            </div>

            {{-- SUBMODULOS --}}
            @if($modulo->hijos->count())
                <div class="border-top d-none hijos-{{ $modulo->id }}">
                    @foreach($modulo->hijos as $hijo)
                        <div class="d-flex justify-content-between align-items-center px-4 py-2 bg-light">

                            <div class="text-muted">
                                — {{ $hijo->nombre }}
                                <span class="badge bg-light text-dark ms-2">
                                    {{ $hijo->slug }}
                                </span>
                            </div>

                            <div class="d-flex align-items-center gap-2">
                                <span class="badge bg-info">
                                    {{ $hijo->permisos->count() }}
                                </span>

                                @if($hijo->activo)
                                    <span class="badge bg-success">Activo</span>
                                @else
                                    <span class="badge bg-danger">Inactivo</span>
                                @endif

                                <a href="{{ route('modulos.edit', $hijo) }}"
                                   class="btn btn-sm btn-outline-secondary">
                                    Editar
                                </a>
                            </div>

                        </div>
                    @endforeach
                </div>
            @endif

        </div>
    </div>
@endforeach

</div>

</div>
</div>
@endsection
@push('scripts')
<script>
document.querySelectorAll('.toggle-hijos').forEach(btn => {
    btn.addEventListener('click', function (e) {
        e.preventDefault();

        const target = this.dataset.toggleTarget;
        const container = document.querySelector('.' + target);
        if (!container) return;

        const isOpen = !container.classList.contains('d-none');
        container.classList.toggle('d-none');

        const icon = this.querySelector('i');
        if (!icon) return;

        icon.classList.remove('ti-arrow-badge-right', 'ti-arrow-badge-down');
        icon.classList.add(
            isOpen ? 'ti-arrow-badge-right' : 'ti-arrow-badge-down'
        );

        this.dataset.state = isOpen ? 'closed' : 'open';
    });
});
</script>
@endpush