@extends('layouts.app')

@section('content')
<div class="container">
    <h3 style="color: azure">Asignar Materias a {{ $maestro->nombre }}</h3>

    @if (session('success'))
    <div class="alert alert-success">
        {{ session('success') }}
    </div>
@endif
@if($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
    <form action="{{ route('maestro_materia.store') }}" method="POST">
        @csrf
        <input type="hidden" name="maestro_id" value="{{ $maestro->id }}">
    
        <div class="form-group">
            <label for="materias">Materias Asignadas</label>
            <select name="materias[]" id="materias" class="form-control select2" multiple>
                @foreach($materiasDisponibles as $materia)
                    <option value="{{ $materia->id }}">{{ $materia->nombre }}--{{ $materia->abreviacion }}</option>
                @endforeach
            </select>
        </div>
        <button type="submit" class="btn btn-success">Asignar</button>
    </form>
    
</div>
@endsection

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
@push('scripts')
<script>
    $(document).ready(function() {
        $('.select2').select2({
            placeholder: "Seleccione materias",
            allowClear: true
        });
    });
</script>
@endpush