@extends('cms.includes.layout')

@section('title', '')

@inject('course', 'App\Http\Models\Courses')

@section('content')

    
    @include('cms.includes.nav')
    <section class="contents">
        <div class="container">
            <div class="modulo-1">
                <div class="row">
                    <div class="col-xs-10">
                        <h1>Curso: {{ $course->show($id_curso)->titulo }}<br>Módulos</h1>
                    </div>
                    <div class="col-xs-2">
                                <a href="{{ route('courses-list') }}"
                                   class="btn w-btn w-btn-back pull-right"><span
                                            class="glyphicon glyphicon-chevron-left"
                                            aria-hidden="true"></span>Volver</a>
                            </div>
                </div>

                <div class="listing-tools">
                    <div class="row">
                        <div class="col-xs-12 col-sm-4">
                        </div>
                        <div class="col-xs-12 col-sm-4 pull-right">
                            <a href="{{ route('modules-create', ['id_curso' => $id_curso]) }}"
                               class="btn w-btn w-btn-1 pull-right">Asociar módulo</a>
                        </div>
                    </div>
                </div>

                <div class="listing">

                    <div class="row">
                        <div class="col-xs-12">
                            <table id="datatable" class="table table-hover">
                                <thead>
                                <tr>
                                    <th class="col-md-2">Id</th>
                                    <th class="col-md-2">Descripción</th>
                                    <th class="col-md-2">Imagen</th>
                                    <th class="col-md-2">Imagen Hover</th>
                                    <th class="col-md-2">Fecha de creación</th>
                                    <th class="col-md-2"></th>
                                </tr>
                                </thead>
                                <tbody>

                                @foreach ($modules as $item)
                                <tr>
                                    <td>{{ $item->id }}</td>
                                    <td>{{ $item->descripcion_modulo }}</td>
                                    <td><img src="{{ env('RESOURCES_URI') . 'modulos/' .  $item->img_modulo_modulo }}" alt="" style="max-width: 70px;" alt=""></td>
                                    <td><img src="{{ env('RESOURCES_URI') . 'modulos/' .  $item->img_modulo_hover_modulo }}" alt="" style="max-width: 70px;" alt=""></td>
                                    <td>{{ date('d/m/Y', strtotime($item->fecha_creacion)) }}</td>
                                    <td class="text-center">
                                        <a href="javascript: void(0);" data-id="{{ $item->id }}" class="eliminar">Desasociar</a>
                                    </td>
                                </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>

                </div>
                <!-- / end listing -->

            </div>

        </div>
        <!-- /container -->
    </section>

    <div class="modal fade" id="confirmDelete" tabindex="-1" role="dialog" aria-labelledby="confirmDeleteLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form action="{{ route('modules-delete') }}" name="form-delete" id="form-delete" method="post">
                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                    <input type="hidden" name="id" id="id_modulo" value="">
                    <input type="hidden" name="id_curso" id="id_curso" value="{{ $id_curso }}">
                <div class="modal-header text-left">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="confirmDeleteLabel">Eliminar</h4>
                </div>
                <div class="modal-body text-left">
                    <p class="">
                        ¿Quieres borrar este elemento?
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn w-btn w-btn-3"
                            data-dismiss="modal">No quiero eliminarlo</button>
                    <button type="submit"
                            class="btn w-btn w-btn-4">Sí, elimínalo</button>
                </div>
                </form>
            </div>
        </div>
    </div>

    <!-- DataTables -->
    <link rel="stylesheet"
          href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.10.9/css/dataTables.bootstrap.min.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/datatables/1.10.9/js/jquery.dataTables.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
       
            $('#datatable').DataTable({
                "searchDelay": 1500,
                "deferRender": true,
                "processing": true,
                "serverSide": false,
                "autoWidth": false,
            });

            // SELECT2
            $(".dataTables_length select").select2({
                minimumResultsForSearch: Infinity
            });

            $('.eliminar').on('click', function(e){
                var id_modulo = $(this).attr('data-id');
                $('#confirmDelete input#id_modulo').val(id_modulo);

                $('#confirmDelete').modal({});
            });
        });
    </script>
@stop