@extends('layouts.app')

@section('content')
<div class="container">
    <h3 style="color: azure">Editar Materias de {{ $maestro->nombre }}</h3>
    @if (session('success'))
    <div class="alert alert-success">
        {{ session('success') }}
    </div>
@endif
    @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.update', $maestro->id) }}" method="POST">
        @csrf
        @method('PUT')
        <div class="form-group">
            <label for="materias">Materias Asignadas</label>
            <select name="materias[]" id="materias" class="form-control select2" multiple>
                @foreach($materiasAsignadas as $materia)
                    <option value="{{ $materia->id }}" selected>{{ $materia->nombre }}</option>
                @endforeach
                @foreach($materiasDisponibles as $materia)
                    <option value="{{ $materia->id }}">{{ $materia->nombre }}--{{ $materia->abreviacion }}</option>
                @endforeach
            </select>
        </div>
        <button type="submit" class="btn btn-success">Actualizar</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