@extends('admin.layouts.main')

@section('content')

<div class="normalheader transition animated fadeIn">
    <div class="hpanel">
        <div class="panel-body">
            <a class="small-header-action" href="">
                <div class="clip-header">
                    <i class="fa fa-arrow-up"></i>
                </div>
            </a>
            <div id="hbreadcrumb" class="pull-right m-t-lg">
                <ol class="hbreadcrumb breadcrumb">
                    <li><a href="{{ route('admin/dashboard') }}">Dashboard</a></li>
                    <li class="active">
                        <span>Salas</span>
                    </li>
                </ol>
            </div>
            <h2 class="font-light m-b-xs">
				<i class="fa fa-wrench"></i>
                Salas
            </h2>
            <small>Salas de demostración por concesionario</small>
        </div>
    </div>
</div>

<div class="content animate-panel">

	<div class="row">
		<div class="col-md-12">
			<div class="hpanel">
				<div class="panel-body">
          <div class="col-md-6">
            <a href="{{ url('admin/salas/create') }}" class="btn btn-success">
              <i class="fa fa-plus-circle"></i>
              Agregar sala
            </a>
          </div>
          <div class="col-sm-6 pull-right">
            <form id="salas_concesionario" class="form-inline pull-right">
              <div class="form-group">
                <meta name="csrf-token" content="{{ csrf_token() }}" />
                <select id="id_concesionario" name="id_concesionario" class="form-control">
                  <option value="0">Todos los concesionarios</option>
                  @foreach($concesionarios as $concesionario)
                  <option value="{{$concesionario->id}}">{{$concesionario->nombre}}</option>
                  @endforeach
                </select>
              </div>
              <button id="buscar_salas" class="btn btn-default">Buscar</button>
            </form>
          </div>
				</div>
			</div>
		</div>
	</div>

	<div class="row">

		<div class="col-sm-12">

			<div class="hpanel hgreen">

				<div class="panel-heading hbuilt">
					<h2>Horarios de Salas por Concesionario</h2>
				</div>

				<div class="panel-body">

					<div class="row m-b-xl">
						<div id="tabla_salas" class="col-sm-12">
							<div id="msg_table" class="alert alert-warning col-sm-12" style="display: none;">
								Este concesionario no tiene salas.
							</div>
							<table id="salasTable" class="table table-striped table-bordered">
								<tr>
									<th>Concesionario</th>
									<th>Nombre de sala</th>
									<th>Horario</th>
									<th>Acciones</th>
								</tr>
								@foreach($salas as $sala)
								<tr>
									<td>{{ $sala->concesionario->nombre }}</td>
									<td>{{ $sala->nombre }}</td>
									<td>{{ date('H:i', strtotime($sala->hora_ini)) }} - {{ date('H:i', strtotime($sala->hora_fin)) }}</td>
									<td class="text right">
										<a href="{{ url('admin/salas/edit/'.$sala->id) }}" class="btn btn-default btn-sm"
											title="Editar {{$sala->nombre}}">
											<i class="fa fa-edit"></i>
										</a>
										<a href="{{ url('admin/salas/delete/'.$sala->id) }}"
											class="btn btn-default btn-sm"
											title="Eliminar {{$sala->nombre}}"
											data-confirm="¿Est&aacute; seguro que desea eliminar esta sala?">
											<i class="fa fa-trash-o"></i>
										</a>
									</td>
								</tr>
								@endforeach
							</table>
						</div>
					</div>

				</div>

			</div>

		</div>

	</div>

</div>
@endsection

@section('scripts')
<script type="text/javascript">
	$(document).ready(function() {

		$("#salas_concesionario").submit(function(e){
			e.preventDefault();
		});

		$("#buscar_salas").click(function(){
			var concesionario = $("#id_concesionario").val();
			var token = $('meta[name="csrf-token"]').attr('content');
			var route = "/admin/salas/salas_concesionario";
			console.log('token', token);

			$.ajax({
				type: "POST",
				url: route,
				data: {
					_token: token,
					id_concesionario: concesionario
				},
				success: function(data){
					updateTablaSalas(data);
				}
			}).done(function(){
				console.log("yay!");
			})


		});

	});

	function updateTablaSalas(data){
		var test = data;

		if(data.salas.length > 0){
			$("tr:has(td)").remove();
			$("#msg_table").hide();
			$.each(data.salas, function(key, value){

				$("#salasTable").append(
					"<tr>" +
						"<td>" + value.concesionario.nombre + "</td>" +
						"<td>" + value.nombre + "</td>" +
						"<td>" + value.hora_ini + "-" + value.hora_fin + "</td>" +
						"<td class=\"text right\">" +
							"<a href=\"{{ url('admin/salas/edit') }}/"+value.id+" \" class=\"btn btn-default btn-sm\">" +
								"<i class=\"fa fa-edit\"></i>" +
							"</a>" +
							"<a href=\"{{ url('admin/salas/delete') }}/"+value.id+" \" class=\"btn btn-default btn-sm\" data-confirm=\"¿Est&aacute; seguro que desea eliminar esta sala?\">" +
								"<i class=\"fa fa-trash-o\"></i>" +
							"</a>" +
						"</td>" +
					"</tr>"
				);

			});

		}else{
			$("tr:has(td)").remove();
			$("#msg_table").show();
		}

	}

</script>
@endsection