@extends("ushuaia.web.plantilla")
@section("contenido")
<section id="cupon">
    <div class="container pb-5">
        <div class="row py-sm-5 atras">
            <div class="col-12">
                <div class="mx-auto">
                    <a href="#" class="fas fa-arrow-left icon" onclick="window.history.back();"></a>
                    <a href="#" onclick="window.history.back();">
                        <h2 class="d-inline-block text my-md-0 my-3">Volver a la búsqueda</h2>
                    </a>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-4 col-12 text-center">
                <div class="img-thumbnail mx-auto shadow">
                    <img class="p-2 w-100" src="/ushuaia/images/{{$datosSucursal['imagen']}}" alt="">
                </div>
                <div class="info-cupon my-4">
                    <h3 class="nombre-comercio">{{ $datosSucursal['nombre_comercio'] }}</h3>
                    <p class="direccion">{{ $datosSucursal['direccion']}}</p>
                    <p class="info-estado">
                        <span class="text-uppercase estado {{$datosSucursal['clase']}}">{{$datosSucursal['estado']}}</span>
                        <span id="horarios-span" class="horarios">{{$datosSucursal['horarios']}} <button id="btnMostrarHorarios" title="Ver horarios" class="border-0 bg-transparent" onclick="mostrarHorarios();"><i class="fas fa-sort-down"></i></button></span>
                    <div id="horarios-grilla" class="d-none mx-auto">
                    </div>
                    </p>
                </div>
                @if($datosSucursal['direccion'])
                @if ($datosSucursal["tipoTienda"] == 1)
                <a class="ver-mapa" href="http://maps.google.com/?q={{$datosSucursal['direccion']}}" target="_blank">Ver en mapa <i class="fas fa-map"></i></a>
                @else
                <a class="ver-mapa" href="{{$datosSucursal['direccion']}}" target="_blank" title="{{ $datosSucursal['nombre_comercio'] }}">Ver tienda online <i class="fa fa-shopping-bag" aria-hidden="true"></i></a>
                @endif
                @endif
            </div>
            <div class="col-sm-8 col-12">
                <div class="row beneficios">
                    <div class="col-12">
                        <p class="font-weight-bold header text-md-left text-center mt-md-0 mt-4">Estos son tus beneficios activos</p>
                    </div>
                    @foreach($aCupones as $cupon)
                    <div class="col-sm-6 col-12">
                                                <div class="container-beneficio mb-3">
                            <div class="py-md-2 py-4 px-4">
                                <p class="titulo font-weight-bold">{{ $cupon->nombre }}</p>
                                <p class="descripcion font-weight-light mb-0">{{ $cupon->aclaracion }}</p>
                            </div>
                        </div>
                                            </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>

<script>
    $(document).ready(function() {
        $.ajax({
            type: "GET",
            url: "/cupon/obtenerHorariosSucursal",
            data: {
                idSucursal: ''
            },
            async: true,
            dataType: "json",
            success: function(data) {
                if (data == null) {
                    $("#horarios-grilla").empty();
                    $("#btnMostrarHorarios").hide();
                } else {
                    let idDia = ;
                    let responseHorarios = `
                        <div class="row">
                            <div class="col-12">
                                <div class="row ${data.lunes.iddia == idDia ? "font-weight-bold" : ""}" >
                                    <div class="col-4">
                                        <span class="dia">Lunes</span>
                                    </div>
                                    <div class="col-8">
                                        <span class="horario">${data.lunes.horario != "" ? data.lunes.horario : "Cerrado"}</span>
                                    </div>
                                </div>
                                <div class="row ${data.martes.iddia == idDia ? "font-weight-bold" : ""}">
                                    <div class="col-4">
                                        <span class="dia">Martes</span>
                                    </div>
                                    <div class="col-8">
                                        <span class="horario">${data.martes.horario != "" ? data.martes.horario : "Cerrado"}</span>
                                    </div>
                                </div>
                                <div class="row ${data.miercoles.iddia == idDia ? "font-weight-bold" : ""}">
                                    <div class="col-4">
                                        <span class="dia">Miércoles</span>
                                    </div>
                                    <div class="col-8">
                                        <span class="horario">${data.miercoles.horario != "" ? data.miercoles.horario : "Cerrado"}</span>
                                    </div>
                                </div>
                                <div class="row ${data.jueves.iddia == idDia ? "font-weight-bold" : ""}">
                                    <div class="col-4">
                                        <span class="dia">Jueves</span>
                                    </div>
                                    <div class="col-8">
                                        <span class="horario">${data.jueves.horario != "" ? data.jueves.horario : "Cerrado"}</span>
                                    </div>
                                </div>
                                <div class="row ${data.viernes.iddia == idDia ? "font-weight-bold" : ""}">
                                    <div class="col-4">
                                        <span class="dia">Viernes</span>
                                    </div>
                                    <div class="col-8">
                                        <span class="horario">${data.viernes.horario != "" ? data.viernes.horario : "Cerrado"}</span>
                                    </div>
                                </div>
                                <div class="row ${data.sabado.iddia == idDia ? "font-weight-bold" : ""}">
                                    <div class="col-4">
                                        <span class="dia">Sábado</span>
                                    </div>
                                    <div class="col-8">
                                        <span class="horario">${data.sabado.horario != "" ? data.sabado.horario : "Cerrado"}</span>
                                    </div>
                                </div>
                                <div class="row ${data.domingo.iddia == idDia ? "font-weight-bold" : ""}">
                                    <div class="col-4">
                                        <span class="dia">Domingo</span>
                                    </div>
                                    <div class="col-8">
                                        <span class="horario">${data.domingo.horario != "" ? data.domingo.horario : "Cerrado"}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    `;
                    $("#horarios-grilla").append(responseHorarios);
                }
            }
        });
    });

    function mostrarHorarios() {
        $('#horarios-grilla').toggleClass('d-none')
    }
</script>

@endsection