@extends('front.layout')

@section('title','Catálogo de carreras')
@section('sub-title','Carreras')

@section('top-button')
	<a href="{{route('careers.create')}}" class="btn btn-green">Crear carrera</a>
@endsection

@section('content')
	<div class="row">
		<div class="col-lg-12">

			<table id="data-table-default" class="table table-bordered">
		        <thead>
			        <tr>
			            <th width="60px">Clave</th>
			            <th width="60px">Plan</th>
			            <th width="60px">Esp.</th>
			            <th>Nombre de carrera</th>
			            <th width="70px">Acuerdo</th>
			            <th width="100px">Clave DGES</th>
			            <th width="80px">Estatus</th>
			            <th width="3em;"></th>
			            <th width="2em;"></th>
			        </tr>
		        </thead>
		        
		        <tbody>
		        	@foreach($data as $career)
				        <tr>
				        	<td>{{$career->code}}</td>
				        	<td>{{$career->plan->name}}</td>
				        	<td>{{ $career->getSpecialization() }}</td>
				        	<td>{{$career->name}}</td>
				        	<td>{{$career->getAgreement()}}</td>
				        	<td>{{$career->getCodeDegs()}}</td>
				        	<td>{{$career->getActive()}}</td>
				        	<td style="text-align: center;">
				        		<form action="{{route('careers.destroy',$career->id)}}" method="post" id="career-{{$career->id}}">
									@csrf
									<input type="hidden" name="_method" value="delete" />
									<a data-id="{{$career->id}}" data-name="{{$career->name}}" class="swalCareer">
										<i class="fas fa-trash-alt"></i>
									</a>
								</form>
				        	</td>
				        	<td>
				        		<a href="{{route('careers.show',$career->id)}}" class="btn btn-blue btn-block">Editar</a>
				        	</td>
				        </tr>
			        @endforeach
		        </tbody>
		        
		    </table>
		</div>
	</div>
@endsection

@push('css')
	<link href="{{asset('assets/plugins/DataTables/media/css/dataTables.bootstrap.min.css')}}" rel="stylesheet" />
	<link href="{{asset('assets/plugins/DataTables/extensions/Responsive/css/responsive.bootstrap.min.css')}}" rel="stylesheet" />
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/8.11.8/sweetalert2.min.css">
@endpush

@push('js')
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/8.11.8/sweetalert2.all.min.js"></script>
	<script src="{{asset('assets/plugins/DataTables/media/js/jquery.dataTables.js')}}"></script>
	<script src="{{asset('assets/plugins/DataTables/media/js/dataTables.bootstrap.min.js')}}"></script>
	<script src="{{asset('assets/plugins/DataTables/extensions/Responsive/js/dataTables.responsive.min.js')}}"></script>
	<script>
		$('.swalCareer').click(function(e) {
	    	e.preventDefault();
	    	//Obtenemos id
	    	var id = $(this).data('id');
	    	var name = $(this).data('name');

	    	Swal.fire({
			  title: 'Eliminar Carrera',
			  text: "Estás seguro que quieres eliminar la"+' '+'Carrera '+name,
			  icon: 'warning',
			  showCancelButton: true,
			  confirmButtonColor: '#DC0000',
			  cancelButtonColor: 'transparent',
			  confirmButtonText: 'Eliminar'
			}).then((result) => {
			  if (result.value) {
			  	$('#career-'+id).submit();
			  }
			});
	    });

		$('#data-table-default').DataTable({
            responsive: true,
            language: {
                url: 'https://cdn.datatables.net/plug-ins/1.10.15/i18n/Spanish.json',
            }
        });
	</script>
@endpush