@extends('layouts.landing')

@section('head')
    @include('layouts._partials.tablaStyle')
@endsection
@section('title',"Inicio")

@section('content')

<div class="container-fluid">
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <div class="d-sm-flex align-items-center justify-content-between">
                @hasrole('Promotor')
                <h6 class="m-0 font-weight-bold text-primary">Prospectos</h6>
                @endrole

                @hasrole('Control escolar')
                <h6 class="m-0 font-weight-bold text-primary">Alumnos</h6>
                @endrole
                @can('alumno.create')
                <button onclick="Livewire.dispatch('create-prospecto')" class="d-sm-inline-block btn btn-sm btn-primary shadow-sm"><i class="fas fa-download fa-sm text-white-50"></i> Agregar</button>
                @endcan
            </div>
        </div>

        <div class="card-body row">

            @hasrole('Promotor')
                <div class="col-sm-2 overflow-auto" style="height: 80vh">
                    <div class="list-group">
                    @forelse ($alumnos as $alumno)

                    @foreach ($alumno->alumnos as $prospect)
                    <a data-prospect-id="{{ $prospect->id }}"
                        class="list-group-item list-group-item-action"
                        onclick="Livewire.dispatch('edit-prospecto', { id: {{ $prospect->id }},user: {{ $alumno->id }}})">
                        <div class="d-flex w-100 justify-content-between">
                            <h5 class="mb-1">{{ $alumno->name }}</h5>
                            <div class="p-3">
                                <i class="fa-duotone fa-regular fa-circle-user fa-2xl"></i>
                            </div>
                        </div>
                        <small>And some small print.</small>
                    </a>
                        @endforeach


                    @empty
                        <a href="#" class="list-group-item list-group-item-action">
                            <div class="d-flex w-100 justify-content-between">
                            <h5 class="mb-1">Sin elementos</h5>
                            <div class="p-3"><i class="fa-duotone fa-solid fa-brake-warning fa-beat-fade fa-2xl" style="--fa-primary-color: #872222; --fa-secondary-color: #f00000;"></i></div>
                            </div>
                            <p class="mb-1"></p>
                            <small>Agrega un alumno...</small>
                        </a>
                    @endforelse
                    </div>
                </div>

                <div class="col-sm-10 overflow-auto" style="height: 70vh">
                    @livewire('data-prospecto')
                </div>

                     @livewire('modal-prospecto')
            @endrole

            @hasrole('Control escolar')

            <table id="tcont" class="table table-striped table-bordered nowrap table-hover" style="width:100%;">
                <thead>
                    <tr>
                        <th>Id</th>
                        <th>Alumno</th>
                        <th>Campus</th>
                        <th>Status</th>
                        <th>Opciones</th>
                    </tr>
                </thead>

                <tbody>

                    @forelse ($alumnos as $alumno)
                    <tr style="width:100%">

                        <td>{{ $alumno->id }}</td>

                        <td>
                            @foreach($alumno->alumnos as $user)
                                <a href="{{ route('alumno.show', $alumno->id) }}">
                                    {{ $user->name }}
                                </a>
                            @endforeach
                        </td>

                        <td class="text-center">
                            @foreach($alumno->alumnos as $user)

                                @forelse($user->plantelUsuarios as $plantel)
                                    <span class="badge bg-primary text-white">
                                        {{ $plantel->name }}
                                    </span>
                                @empty
                                    <span class="text-muted">Sin plantel</span>
                                @endforelse

                            @endforeach
                        </td>
                        <td class="text-center">
                            @if ($alumno->status==2) <span class="badge bg-warning text-white"> @endif
                            @if ($alumno->status==3) <span class="badge bg-success text-white"> @endif
                            @if ($alumno->status==4) <span class="badge bg-danger text-white"> @endif
                            @if ($alumno->status==5) <span class="badge bg-dark text-white"> @endif
                            @if ($alumno->status==6) <span class="badge text-white" style="background-color: #630ac9"> @endif

                            {{ $alumno->statusAlumno->name }}
                                </span>
                        </td>

                        <td class="row mx-auto">

                            @can('alumno.edit')
                            <div class="col-sm-6 col-md-6">
                                <a class="btn btn-primary" href="{{ route('alumno.edit',$alumno->id) }}">
                                    Edit
                                </a>
                            </div>
                            @endcan

                            @can('alumno.destroy')
                            <div class="col-sm-6 col-md-6">
                                <form class="delete-form" action="{{ route('alumno.destroy',$alumno->id) }}" method="POST">
                                    @csrf
                                    @method('DELETE')
                                    <input type="submit" value="DELETE" class="btn btn-danger">
                                </form>
                            </div>
                            @endcan

                        </td>

                    </tr>

                    @empty
                    <tr>
                        <td colspan="4">Sin alumnos.</td>
                    </tr>
                    @endforelse

                </tbody>
            </table>

            @endrole

        </div>
    </div>



</div>

@endsection


@section('scripts')
    @include('layouts._partials.tablaScript')
    @include('layouts._partials.delete')
    <script>
    document.addEventListener('livewire:init', () => {
        Livewire.on('mark-active-prospect', ({ id }) => {

            document.querySelectorAll('.list-group-item')
                .forEach(item => item.classList.remove('active'));

            const activeItem = document.querySelector(
                `[data-prospect-id="${id}"]`
            );

            if (activeItem) {
                activeItem.classList.add('active');
            }
        });

    });
</script>

<script>
function verDocumento(url, docId) {

    document.getElementById('visorFrame').src = url;

    Livewire.dispatch('set-documento', { id: docId });

    // 🔥 guardar instancia global
    visorModalInstance = new bootstrap.Modal(
        document.getElementById('visorModal')
    );

    visorModalInstance.show();
}

document.addEventListener('livewire:init', () => {

    Livewire.on('cerrar-modal', () => {

        if (visorModalInstance) {
            visorModalInstance.hide();
        }

        // 🔥 limpiar iframe
        document.getElementById('visorFrame').src = "";

    });

});
</script>

@endsection