@extends('layouts.admin')
@section('contenido_admin')
    <h3 class="text-center my-3">Unidades Didácticas</h3>
    <div class="row justify-content-center">
        <div class="col-md-5">
            <table class="table table-hover table-striped table-sm">
                <thead class="table-success text-center">
                    <tr>
                        <th colspan="3">Lista</th>
                    </tr>
                </thead>
                <tbody id="contenido">
                    @forelse ($cursos as $key => $item)
                        <tr>
                            <td class="fw-bold">{{ ($key+1).'.' }}</td>
                            <td class="text-truncate">{{ $item->nombre }}</td>
                            <td class="text-center">
                                <div class="btn-group btn-group-sm" role="group">
                                    <button id="{{ $item->id }}" type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-nombre="{{ $item->nombre }}" data-selector="edit">Editar</button>
                                    <a type="button" class="btn btn-outline-secondary" href="{{ route('cursos_delete',$item->id) }}">Borrar</a>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="3">No hay registros</td>
                        </tr>
                    @endforelse
                </tbody>
                <tfoot class="table-secondary">
                    <tr>
                        <td colspan="3" class="text-center">
                            <button id="_agregar" class="btn btn-success btn-sm col-2" data-bs-toggle="modal" data-bs-target="#exampleModal" data-selector="create">Agregar</button>
                        </td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
    <!--Modal-->
    <!-- Modal -->
    <form id="frm" method="post" action="{{ route('cursos_guardar') }}">
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="Titulo_Modal">Agregar Unidad Didáctica</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <label for="_nombre" class="col col-form-label-lg text-end">Nombre:</label>
                        <div class="col-sm-8">
                                @csrf
                                <input id="_selector" name="_selector" type="text" value="" hidden>
                                <input id="_nombre" name="_nombre" class="form-control form-control-lg" type="text">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button id="_guardar" type="submit" class="btn btn-primary">Guardar</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
@section('scripts')
    <script>
        $(document).ready(function(){
            $("#_agregar").click(function (e) {
                $("#frm").attr("action",'{{ route('cursos_guardar') }}');
                $("#Titulo_Modal").empty().append("Agregar Unidad Didáctica");
                $("#_selector").val("create");
                $("#_nombre").val("");
            });
            $("#contenido").click(function (e) {
                if(e.target.tagName=="BUTTON"){
                    var selector = $("#"+e.target.id).attr("data-selector");
                    var nombre = $("#"+e.target.id).attr("data-nombre");
                    $("#frm").attr("action",'{{ route('cursos_guardar') }}/'+e.target.id);
                    $("#Titulo_Modal").empty().append("Cambiar Nombre");
                    console.log(selector);
                    $("#_selector").val(selector);
                    $("#_nombre").val(nombre);
                }
            });
        });
    </script>
@endsection
@endsection