@extends('layouts.landing')

@section('title',"Editar")

@section('content')

<div class="container-fluid">
    {{-- Card editar grupo --}}
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <div class="d-sm-flex align-items-center justify-content-between">
                <h6 class="m-0 font-weight-bold text-primary">Editar grupo</h6>
                <a href="{{route('grupo.index')}}" class="d-sm-inline-block btn btn-sm btn-primary shadow-sm">
                    <i class="fas fa-download fa-sm text-white-50"></i> Regresar
                </a>
            </div>
        </div>

        <div class="card-body">
            @if (session('info'))
                <div class="alert alert-success">
                    <strong>{{session('info')}}</strong>
                </div>
            @endif
            <form action="{{route('grupo.update',$grupo->id)}}" method="POST">
                @method('PUT')
                @csrf
                <div class="mb-3">
                    <label>Seleccionar Carrera</label>
                    <select class="form-control" name="plan_id">
                        <option value="">Seleccionar plan</option>
                        @foreach ($plans as $nivel => $grupos)
                            <optgroup label="{{ $nivel }}">
                                @foreach ($grupos as $plan)
                                    <option value="{{ $plan->id }}" {{ $plan->id == $grupo->plan_id ? 'selected' : '' }}>
                                        {{ $plan->carreraRel->name }}
                                        ({{ $plan->name }}-{{ $plan->rvoe }})
                                    </option>
                                @endforeach
                            </optgroup>
                        @endforeach
                    </select>
                </div>

                <div class="mb-3">
                    <label>Seleccionar ciclo</label>
                    <select class="form-control" name="ciclo">
                        <option value="0">Seleccionar ciclo</option>
                        @for ($i=1 ; $i <= $ciclos->duracion ; $i++)
                            <option value="{{ $i }}" @selected($i == $grupo->ciclo)>{{$i}}</option>
                        @endfor
                    </select>
                </div>

                <div class="mb-3">
                    <label>Seleccionar turno</label>
                    <select class="form-control" name="turno">
                        <option value="0">Seleccionar turno</option>
                        @foreach ($turnos as $turno)
                            <option value="{{ $turno->id }}" {{ $turno->id == $grupo->turno ? 'selected' : '' }}>
                                {{$turno->name}}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="mb-3">
                    <label>Seleccionar plantel</label>
                    <select class="form-control" name="plantel">
                        <option value="0">Seleccionar plantel</option>
                        @foreach ($planteles as $plantel)
                            <option value="{{ $plantel->id }}" {{ $plantel->id == $grupo->plantel ? 'selected' : '' }}>
                                {{$plantel->name}}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="mb-3">
                    <label>Seleccionar status</label>
                    <select class="form-control" name="status">
                        <option value="1" {{ 1 == $grupo->status ? 'selected' : '' }}>Activo</option>
                        <option value="0" {{ 0 == $grupo->status ? 'selected' : '' }}>Inactivo</option>
                    </select>
                </div>

                <input class="btn btn-primary" type="submit" value="Guardar">
            </form>
        </div>
    </div>

    {{-- Card Materias y Docentes --}}
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <div class="d-sm-flex align-items-center justify-content-between">
                <h6 class="m-0 font-weight-bold text-primary">Materias</h6>
                @can('grupo.create')
                    <button onclick="$('#modalDocente').modal('show')"
                        class="d-sm-inline-block btn btn-sm btn-success shadow-sm">
                        <i class="fas fa-plus fa-sm text-white-50"></i> Asignar materia a docente
                    </button>
                @endcan
            </div>
        </div>

        <div class="card-body">
            @if (session('infogrupo'))
                <div class="alert alert-success">
                    <strong>{{session('infogrupo')}}</strong>
                </div>
            @endif

            <div class="container-fluid">
                <table id="tcont" class="table table-striped table-bordered nowrap table-hover" style="width:100%;">
                    <thead>
                        <tr>
                            <th>Id</th>
                            <th>Ciclo</th>
                            <th>Nombre de la materia</th>
                            <th>Docente</th>
                            <th>Docente asignado</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($grupo->plan->carreraRel->carreraMaterial as $material)
                            @php
                                $docenteAsignado = $grupo->docentes->firstWhere('pivot.materia_id', $material->id);
                                $usr = $docenteAsignado?->docentes->first();
                            @endphp
                            <tr>
                                <td>{{ $material->id }}</td>
                                <td>{{ $material->ciclo }}</td>
                                <td>{{ $material->name }}</td>
                                <td>{{ $usr?->name }} {{ $usr?->apellidoPaterno ?? 'Sin docente' }}</td>
                                <td>
                                    @if($docenteAsignado)
                                        @can('grupo.destroy')
                                        <form class="delete-form"
                                            action="{{route('grupo.destroy',$grupo->id)}}"
                                            method="POST">
                                            @csrf
                                            @method('DELETE')
                                            <input class="d-none" name="docente" value="{{$docenteAsignado->id}}">
                                            <button type="submit" style="border:none; background:none;">
                                                <i class="fa-solid fa-circle-xmark fa-xl" style="color:#e66565;"></i>
                                            </button>
                                        </form>
                                        @endcan
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="5">Sin materias en este plan.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <livewire:grupo-docente :grupo="$grupo"/>
        </div>
    </div>

    {{-- Card Alumnos --}}
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <div class="d-sm-flex align-items-center justify-content-between">
                <h6 class="m-0 font-weight-bold text-primary">Alumnos</h6>
                @can('grupo.create')
                    <button onclick="Livewire.dispatch('create-grupo')"
                        class="d-sm-inline-block btn btn-sm btn-success shadow-sm">
                        <i class="fas fa-plus fa-sm text-white-50"></i> Agregar alumno
                    </button>
                @endcan
            </div>
        </div>

        <div class="card-body">
            <div class="container-fluid">
                <table id="tcont2" class="table table-striped table-bordered nowrap table-hover" style="width:100%;">
                    <thead>
                        <tr>
                            <th>Id</th>
                            <th>Nombre</th>
                            <th>Opciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($grupo->alumnos as $alumno)
                            <tr>
                                <td>{{$alumno->id}}</td>
                                <td>
                                    {{$alumno->usuario->first()?->name}}
                                    {{$alumno->usuario->first()?->apellidoPaterno}}
                                    {{$alumno->usuario->first()?->apellidoMaterno}}
                                </td>
                                <td>
                                    @can('grupo.destroy')
                                    <form class="delete-form"
                                        action="{{route('grupo.destroy',$grupo->id)}}"
                                        method="POST">
                                        @csrf
                                        @method('DELETE')
                                        <input class="d-none" name="alumno" value="{{$alumno->id}}">
                                        <button type="submit" style="border:none; background:none;">
                                            <i class="fa-solid fa-circle-xmark fa-xl" style="color:#e66565;"></i>
                                        </button>
                                    </form>
                                    @endcan
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="3">Sin alumnos.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <livewire:grupo-alumno :grupo="$grupo"/>
        </div>
    </div>
</div>

@endsection

@section('scripts')
    @include('layouts._partials.tablaScript')
    @include('layouts._partials.delete')

<script>
document.addEventListener('livewire:init', () => {
    // Modal agregar alumno
    Livewire.on('open-grupo-modal', () => {
        $('#exampleModal').modal('show');
    });
    Livewire.on('close-modal', () => {
        $('#exampleModal').modal('hide');
    });

    // Modal agregar docente
    Livewire.on('open-modal-docente', () => {
        $('#modalDocente').modal('show');
    });
    Livewire.on('close-modal-docente', () => {
        $('#modalDocente').modal('hide');
    });
});
</script>
@endsection