@extends('template.layoutAdmin', ['activeButton'=>'servicios'])

@section('title')
{{ trans('aforo.aforo') }}
@endsection
@section('style')
<style media="screen">
.btn-circle.btn-xl {
    width: 70px;
    height: 70px;
    padding: 10px 16px;
    border-radius: 35px;
    font-size: 24px;
    line-height: 1.33;
}

.btn-circle {
    width: 20px;
    height: 20px;
    padding: 0px 0px;
    border-radius: 15px;
    text-align: center;
    font-size: 12px;
    line-height: 1.42857;
}

</style>
@endsection
@section('cabecera')
    <h1>
        {{ trans('aforo.aforodereservas') }}
        <small>{{ trans('aforo.mensajeAyuda') }}</small>
    </h1>
@endsection

@section('contenido')
<div class="row">
    <div class="col-lg-12">
        <div class="info-box">
            <div class="box-body">
                <div class="row">
                    <div class="col-md-12">
                        <div class="box-header with-border">
                            <div class="row">
                                <div class="col-md-8">
                                <h3 class="box-title">{{ trans('aforo.aforodereservas') }} </h3>
                                </div>
                                <div class="col-md-4">
                                    <div class="col-md-12" id="tbActualizar2">
                                        <div class="row">
                                            <div class="col-md-10 text-center">
                                                <div class="form-group">
                                                <input type="number" min="1" name="aforo_reserva" class="form-control"  disabled value="{{$index['detalle']->aforo_reserva}}">
                                                </div>
                                            </div>
                                            <div class="col-md-2 text-center">
                                                @sidebar('aforo.aforoRes')
                                                @if($index['detalle']->aforo_reserva != null)
                                                <a href="Javascript:;" class="btn btn-info" onclick="aforo_res()"><i class="fa fa-pencil-square-o"></i></a>
                                                @else
                                                <a href="Javascript:;" class="btn btn-info" onclick="aforo_res()"><i class="fa fa-plus"></i></a>
                                                @endif
                                                @endsidebar
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {{-- <div class="col-md-6 text-right">
                                  <a href="{{route('listCatP')}}" class="btn btn-sm btn-info" data-toggle="tooltip" title="{{ trans('aforo.listaDeCategorias') }}"><i class="fa fa-list"></i> Categorias</a>
                                  <a href="{{route('createP')}}" class="btn btn-sm btn-info" data-toggle="tooltip" title="{{ trans('aforo.agregarProducto') }}"><i class="fa fa-plus"></i></a>
                                </div> --}}
                            </div>
                        </div>
                        <!-- <label for=""></label> -->
                       <table class="table table-responsive" id="tbActualizar">
                            <thead>
                                <tr>
                                    @foreach($index['diasP'] as $key => $dia)
                                    <td style="vertical-align: middle;" class="text-center"><a href="Javascript:;" @sidebar('aforo.store') onclick="addAforo('{{$index['dias'][$key]}}')" @endsidebar>
                                        {{$dia}} </a>
                                        @sidebar('aforo.store')
                                        <a  href="Javascript:;" onclick="addAforo('{{$index['dias'][$key]}}')"  class="text"><i class="fa fa-plus"></a></td>
                                        @endsidebar
                                    @endforeach
                                </tr>
                            </thead>
                            <tbody class="text-center">
                                @if(count($index['dataHorario'])>0)
                                    @for ($i = 0; $i < count($index['dataHorario'][0]); $i++)
                                        <tr>
                                            @for ($j = 0; $j < count($index['dataHorario']); $j++)
                                                <td style="vertical-align: middle;">
                                                    @if($index['dataHorario'][$j][$i] != null)
                                                        <a href="Javascript:;" @sidebar('aforo.changeState') onclick="stateAforo({{$index['dataHorario'][$j][$i]->idAforo}}, {{$index['dataHorario'][$j][$i]->state}})" @endsidebar>
                                                            <span class="badge badge-{{$index['dataHorario'][$j][$i]->state == 1?'dark':'danger'}}">
                                                                {{-- {!!json_encode($dia)!!} --}}
                                                                {{date("h:i a", strtotime($index['dataHorario'][$j][$i]->desde)) .' - '. date("h:i a", strtotime($index['dataHorario'][$j][$i]->hasta))}}
                                                                <br>
                                                                {{$index['dataHorario'][$j][$i]->numPersonas .' Person/s'}}
                                                            </span>
                                                        </a>
                                                    @else
                                                        <span class="badge badge-dark">
                                                        </span>
                                                    @endif
                                                </td>
                                            @endfor
                                        </tr>
                                    @endfor
                                @else
                                <tr>
                                    <td colspan="7">{{ trans('aforo.noTieneAforos') }}</td>
                                </tr>
                                @endif

                                {{-- <td style="vertical-align: middle;">
                                            <span class="badge badge-dark">
                                            {{date("h:i a", strtotime($aforo->desde)) .' - '. date("h:i a", strtotime($aforo->hasta))}}
                                            <br>
                                            {{$aforo->numPersonas .' Persona/s'}}
                                            </span>
                                        </td> --}}
                            </tbody>
                        </table>
                    </div>
                  </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="crearAforo" tabindex="-1" role="dialog" aria-labelledby="crearBodegaLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="crearBodegaLabel">{{ trans('aforo.agregarHorario') }}</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="formAforo" action="post">
                    <input type="hidden" name="idHorario" id="idHorario">
                    <small class="small">{{ trans('template.camposcon') }} (<span class="text-danger">*</span>) {{ trans('template.obligatorios') }}</small>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="time_init"> {{ trans('aforo.desde') }}
                                    <span class="text-danger">*</span></label>
                                <input type="time" name="time_init" id="time_init" class="form-control" required placeholder=" {{ trans('aforo.placeHolderNombre') }}">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="time_end">{{ trans('aforo.hasta') }} <span class="text-danger">*</span></label>
                                <input type="time" name="time_end" id="time_end" class="form-control" required placeholder="{{ trans('aforo.placeHolderNombre') }}">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="numPersonas"> {{ trans('aforo.numeroPersonas') }}</label>
                                <input type="number" onkeypress="return event.charCode >= 48"  min="1" name="numPersonas" class="form-control" id="numPersonas" required autocomplete="off" placeholder="{{  trans('aforo.descripcion') }}">
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer text-center">
                <button type="button" class="btn btn-secondary" data-dismiss="modal"> {{  trans('aforo.cerrar') }}
                </button>
                <button onclick="sendForm()" type="button" class="btn" style="background: #DB3920;color:#FFF;" > {{  trans('aforo.guardar') }}
                </button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="aforo_reserva" tabindex="-1" role="dialog" aria-labelledby="editarCatLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editarCatLabel"></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="editCat">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="aforo_resE">{{  trans('aforo.numeroMaximoAforo') }}</label>
                            <input type="number" min="1" value="{{$index['detalle']->aforo_reserva}}" onkeypress="return event.charCode >= 48" id="aforo_resE" placeholder=" {{  trans('aforo.numeroMaximo') }}" class="form-control">
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer text-center">
                <button type="button" class="btn btn-info" data-dismiss="modal"> {{  trans('aforo.cerrar') }}</button>
                <button type="button" onclick="actualizarAforo()" class="btn btn-info"> {{  trans('aforo.actualizar') }}</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="changeState" tabindex="-1" role="dialog" aria-labelledby="crearBodegaLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="crearBodegaLabel"> {{  trans('aforo.cambiarEstadoAforo') }}
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="col-md-12 text-center">
                    <div class="row">
                        <input type="hidden" id="idAforo">
                        <div class="col-md-4">
                            <a href="Javascript:;" class="btn btn-success" id="btnActivar" onclick="changeStateTo(1)"> {{  trans('aforo.activar') }}
                            </a>
                        </div>
                        <div class="col-md-4">
                            <a href="Javascript:;" class="btn btn-warning" id="btnInactivar" onclick="changeStateTo(0)"> {{  trans('aforo.inactivar') }}
                            </a>
                        </div>
                        <div class="col-md-4">
                            <a href="Javascript:;" class="btn btn-danger" id="btnEliminar" onclick="changeStateTo(2)"> {{  trans('aforo.eliminar') }}
                            </a>
                        </div>
                    </div>
                </div>
                <!-- <form id="formAforo" action="post">
                    <input type="hidden" name="idHorario" id="idHorario">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="time_init">Desde <span class="text-danger">*</span></label>
                                <input type="time" name="time_init" id="time_init" class="form-control" required placeholder="Nombre">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="time_end">Hasta <span class="text-danger">*</span></label>
                                <input type="time" name="time_end" id="time_end" class="form-control" required placeholder="Nombre">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="numPersonas">Numero máximo de personas</label>
                                <input type="number" onkeypress="return event.charCode >= 48"  min="1" name="numPersonas" class="form-control" id="numPersonas" required autocomplete="off" placeholder="Descripción">
                            </div>
                        </div>
                    </div>
                </form> -->
            </div>
            <!-- <div class="modal-footer text-center">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                <button onclick="sendForm()" type="button" class="btn" style="background: #DB3920;color:#FFF;" >Guardar</button>
            </div> -->
        </div>
    </div>
</div>

@endsection

@section('js')
<script>
    function addAforo(idHorario)
    {
        $('#idHorario').val(idHorario);
        $('#crearAforo').modal();

    }

    function aforo_res()
    {
        $('#aforo_reserva').modal();
    }

    function actualizarAforo()
    {
        var data = {
            data: document.getElementById('aforo_resE').value
        }
        var host = "{{$_SERVER["HTTP_HOST"]}}";
        var formData = new FormData(document.getElementById('formAforo'));
        $.ajax({
            url: UrlHost_+"/administrator/aforo/ajax/aforo_reserva",
            data: data,
            type: 'post',
            dataType: 'json',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            beforeSend: function () {
                swal({
                    title: " {{  trans('aforo.cargando') }}	",
                    text: " {{  trans('aforo.espereUnMomento') }}",
                    showConfirmButton: false
                });
            },
            success: function(response){
                if (response.code == 200) {
                    swal.close();
                    $("#aforo_resE").val();
                    $("#tbActualizar2").load(location.href+" #tbActualizar2>*","");
                    $("#aforo_reserva").modal('hide');
                }else{
                    swal("Info!", response.message, "info");
                }
            },
            error: function(xhr){
                swal("Error!", " {{  trans('aforo.errorIntenteloMasTarde') }}", "error");
            }
        });

    }

    function sendForm()
    {
        var host = "{{$_SERVER["HTTP_HOST"]}}";
        var formData = new FormData(document.getElementById('formAforo'));
        $.ajax({
            url: UrlHost_+"/administrator/aforo/ajax/store",
            data: formData,
            type: 'post',
            dataType: 'json',
            processData: false,
            contentType: false,
            cache: false,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            beforeSend: function () {
                swal({
                    title: "{{  trans('aforo.cargando') }}",
                    text: "{{  trans('aforo.espereUnMomento') }}",
                    showConfirmButton: false
                });
            },
            success: function(response){
                if (response.code == 200) {
                    swal.close();
                    $("#formAforo")[0].reset();
                    $("#tbActualizar").load(location.href+" #tbActualizar>*","");
                    $("#crearAforo").modal('hide');
                }else{
                    swal("Info!", response.message, "info");
                }
            },
            error: function(xhr){
                swal("Error!", " {{  trans('aforo.errorIntenteloMasTarde') }}", "error");
            }
        });
        /* $('#formAforo'). */
    }


    function stateAforo(f, s)
    {
        if(s)
        {
            $('#btnActivar').addClass('disabled')
        }else{
            $('#btnInactivar').addClass('disabled')
        }
        $('#idAforo').val(f);
        $('#changeState').modal();
    }

    function changeStateTo(a)
    {
        var data = {
            idAforo: document.getElementById('idAforo').value,
            new_state: a
        };
        var host = "{{$_SERVER["HTTP_HOST"]}}";
        $.ajax({
            url: UrlHost_+"/administrator/aforo/ajax/changeState",
            data: data,
            type: 'post',
            dataType: 'json',
            // processData: false,
            // contentType: false,
            // cache: false,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            beforeSend: function () {
                swal({
                    title: " {{  trans('aforo.cargando') }}	",
                    text: " {{  trans('aforo.espereUnMomento') }}",
                    showConfirmButton: false
                });
            },
            success: function(response){
                if (response.code == 200) {
                    $('#btnActivar').removeClass('disabled')
                    $('#btnInactivar').removeClass('disabled')
                    swal.close();
                    $("#idAforo").val();
                    $("#tbActualizar").load(location.href+" #tbActualizar>*","");
                    $("#changeState").modal('hide');
                }else{
                    swal("Info!", response.message, "info");
                }
            },
            error: function(xhr){
                swal("Error!", " {{  trans('aforo.errorIntenteloMasTarde') }}", "error");
            }
        });
    }


</script>
@endsection