@extends('layouts.landing')

@section('head')
    @include('layouts._partials.tablaStyle')
@endsection

@section('title',"Edit")

@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">
                        <h6 class="m-0 font-weight-bold text-primary">Editar carrera</h6>
                        <a href="{{route('carrera.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('carrera.update',$carrera->id)}}" method="POST">
                @method('PUT')
                @csrf
                <div class="mb-3">
                    <label class="small mb-1">Nombre</label>
                    <input class="form-control" name="name" value="{{$carrera->name}}">
                </div>

                <div class="mb-3">
                    <label for="status">Seleccionar nivel</label>
                    <select class="form-control" name="status" id="status">
                    @foreach ($nivels as $nivel)
                        <option value="{{ $nivel->id }}"{{ $carrera->nivel== $nivel->id ? 'selected' : '' }} >{{ $nivel->name }}</option>
                    @endforeach
                    </select>
                </div>

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

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

    {{-- contenedor de materias --}}
    <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('material.create')
                        <button onclick="Livewire.dispatch('create-material')" class="d-sm-inline-block btn btn-sm btn-success shadow-sm"><i class="fas fa-download fa-sm text-white-50"></i> Agregar</button>
                        @endcan
            </div>
        </div>

        <div class="card-body">
            @if (session('infoMaterial'))
                <div class="alert alert-success">
                    <strong>{{session('infoMaterial')}}</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>Nombre</th>
                                <th>Opciones</th>
                            </tr>
                        </thead>
                        <tbody>
                                @forelse ($carrera->carreraMaterial as $material)
                                    <tr style="width:100%">
                                        <td>{{$material->id}}</td>
                                        <td>{{$material->name}}</td>
                                        <td class="row mx-auto">
                                            @can('material.edit')
                                            <div class="col-sm-6 col-md-6"><a href="#"
                                            onclick="Livewire.dispatch('edit-material', { id: {{ $material->id }} })"
                                            class="btn btn-sm btn-primary">
                                            Editar
                                            </a></div>
                                            @endcan

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

                                        </td>
                                    </tr>
                                @empty
                                    <p>Sin materiales.</p>
                                @endforelse

                        </tbody>
                    </table>


                </div>

            <livewire:modal-materias :carrera="$carrera"/>
        </div>
    </div>
</div>

@endsection

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

<script>
document.addEventListener('livewire:init', () => {
    Livewire.on('open-material-modal', () => {
        $('#exampleModal').modal('show');
    });
});
</script>
@endsection