@extends('layouts.frontpages')

@section('content')
    @include('partials.header')

    <div class="page home">
        @guest
            <div id="home-carusel" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <a href="{{ url('registro') }}">
                            <img src="{{ asset('images/home-slider/banner_1.jpg') }}" class="d-block w-100"
                                alt="En esta familia, juntos nos cuidamos">
                        </a>
                    </div>
                    <div class="carousel-item">
                        <a href="{{ url('registro') }}">
                            <img src="{{ asset('images/home-slider/banner_2.jpg') }}" class="d-block w-100">
                        </a>
                    </div>
                </div>
                <a class="carousel-control-prev" href="#home-carusel" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#home-carusel" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
            <section class="stores d-none">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="left-info">
                                <p class="title">Encuentra tu dd más cercano</p>
                                <div class="city-name">
                                    <span class="ic-compass"></span> Bogotá
                                </div>
                                <div class="locations-list">
                                    <a class="list-group-item location zone1" href="#norte" data-toggle="collapse">
                                        <span>Norte</span>
                                        <span class="menu-ico-collapse"><i class="fa fa-chevron-down"></i></span>
                                    </a>
                                    <div class="list-group-submenu" id="norte">
                                        <a href="https://www.google.com/maps/dir/4.6349158,-74.0627189/4.6187049,-74.135313"
                                            target="_blank" class="list-group-item sub-item">Ir a Tienda 1</a>
                                        <a href="https://www.google.com/maps/dir//4.6528447,-74.11402699999996" target="_blank"
                                            class="list-group-item sub-item">Ver Tienda 2</a>
                                    </div>
                                    <a class="list-group-item location zone2" href="#oriente" data-toggle="collapse">
                                        <span>Oriente</span>
                                        <span class="menu-ico-collapse"><i class="fa fa-chevron-down"></i></span>
                                    </a>
                                    <a class="list-group-item location zone3" href="#occidente" data-toggle="collapse">
                                        <span>Ocidente</span>
                                        <span class="menu-ico-collapse"><i class="fa fa-chevron-down"></i></span>
                                    </a>
                                    <a class="list-group-item location zone4" href="#sur" data-toggle="collapse">
                                        <span>Sur</span>
                                        <span class="menu-ico-collapse"><i class="fa fa-chevron-down"></i></span>
                                    </a>
                                </div>
                            </div>
                            <div class="right-info">
                                <div class="wpb_wrapper">
                                    <iframe
                                        src="https://www.google.com/maps/d/u/1/embed?mid=1M5aOiNF2Ix731kh-mOSOUrPDqQQ&amp;ll=4.69260183348441%2C-74.17919574713505&amp;z=11"
                                        width="640" height="480"></iframe>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        @else
            @include('partials.banner-user')
            <div class="container">
                <div class="row list-menu">
                    @if (session('status'))
                        <div class="col-md-12">
                            <div class="alert alert-success">
                                {{ session('status') }}
                            </div>
                        </div>
                    @endif
                    @if (Auth::user()->pointsNearLiquidation())
                        <div class="col-md-2"></div>
                        <div class="col-md-8 my-3">
                            <div class="alert alert-danger text-center">
                                Tienes <span class="bold"> {{ Auth::user()->pointsNearLiquidation() }}</span> puntos que se
                                van a vencer el próximo mes, <a href="{{ route('points.expired') }}"
                                    class="text-danger bold">Ver más</a>
                            </div>
                        </div>
                        <div class="col-md-2"></div>
                    @else
                        <div class="col-md-12">
                            <br> <br>
                        </div>
                    @endif
                    <div class="col-md-3">
                        <a class="btn-pink background-orange" href="{{ route('home') }}">Inicio</a>
                    </div>
                    <div class="col-md-3">
                        <a class="btn-pink" href="{{ route('sales') }}">Resumen de compras</a>
                    </div>
                    <div class="col-md-3">
                        <a class="btn-pink" href="{{ route('bill.create') }}">Tus facturas</a>
                    </div>
                    {{-- <div class="col-md-3">
                        <a class="btn-pink" href="{{ route('campaings') }}">Beneficios</a>
                    </div> --}}
                    <div class="col-md-3">
                        <a class="btn-pink" href="{{ route('update-data') }}">Actualizar Datos</a>
                    </div>
                    <div class="col-md-12 text-center">
                        <br>
                        <h1 class="legend">RESUMEN DE PUNTOS</h1>
                    </div>
                    <div class="col-md-12">
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>Evento</th>
                                        <th>Fecha Registro</th>
                                        <th>Puntos</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($points as $item)
                                        <tr>
                                            <td>{{ $item['event'] }}</td>
                                            <td>{{ $item['created_at'] }}</td>
                                            <td>{{ $item['value'] }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                                <tbody>
                                    <tr class="totals">
                                        <td colspan="2">Total Puntos</td>
                                        <td>{{ Auth::user()->pointsAuth() }}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="col-md-12 text-center">
                            {{ $points->links() }}
                        </div>
                        <div class="col-md-12">
                            <br>
                        </div>
                    </div>
                </div>
            </div>
        @endguest
    </div>

    @include('partials.footer')

    @include('partials.modal-bills-icg')
@stop

@section('scripts')
    <script type="text/javascript">
        $('#bills-icg').modal('show')
    </script>
@endsection