<!doctype html>
<html lang="{{ app()->getLocale() }}" prefix="og: http://ogp.me/ns#">
<head>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="description" content="{!! $options->description !!}">
    <meta name="keywords" content="{!! $options->keywords !!}">
    <meta name="author" content="{!! $options->author !!}">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="theme-color" content="{{ $options->color }}">
    @hasSection('ogp')
        @yield('ogp')
    @else
        <meta property="og:type" content="website">
        <meta property="og:url" content="{{ url('/') }}">
        <meta property="og:image" content="{{ asset($options->image ?? 'images/image.jpg') }}">
        <meta property="og:title" content="{{ $options->title }}">
        <meta property="og:description" content="{{ $options->description }}">
    @endif
    <title>@hasSection('title'){{ $options->title }} - @yield('title') @else{{ $options->title }}@endif</title>
    <link type="image/png" rel="icon" href="{{ asset($options->favicon ?: 'images/icon.png') }}"/>
    <link rel="stylesheet" href="{{ asset('assets/fa/css/all.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/animate.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/magnific-popup.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/owl.carousel.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/style.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/responsive.css') }}">
    {!! $options->scripts !!}
</head>
<body class="preload {{ isHome() ? 'home' : null }}">
<header class="header d-flex align-items-center justify-content-between">
    <div class="container d-flex align-items-center justify-content-between">
        <div class="logo-container">
            <a href="{{ url('/') }}">
                <img src="{{ asset($options->logo ?? 'images/logo.png') }}" alt="" class="logo">
            </a>
        </div>
        <nav class="nav">
            <ul class="list-unstyled d-flex align-items-center justify-content-between">
                @include('partials.navigation')
                <li>
                    <a href="{{ url('cuenta') }}">Mi cuenta</a>
                </li>
            </ul>
        </nav>
        <a href="#" class="cart-link btn-cart-toggle">
            <i class="far fa-shopping-bag"></i>
            <span class="cart-count">{{ Cart::count() }}</span>
        </a>
    </div>
    <a href="#" class="btn-menu fa fa-circle"></a>
</header>
<main>
    @yield('content')
</main>
<footer class="footer">
    <div class="container">
        <div class="row row-grid">
            <div class="col-lg-2 col-sm-5">
                <a href="{{ url('/') }}">
                    <img src="{{ asset($options->logo ?? 'images/logo.png') }}" alt="" class="footer-logo">
                </a>
            </div>
            <div class="col-lg-3 offset-lg-0 col-sm-6 offset-sm-1">
                <h3>Visite nuestro Showroom </h3>
                <ul class="list-unstyled">
                    <li>
                        <span>{!! nl2br($options->address) !!}</span>
                    </li>
                    <li>
                        <span>{!! nl2br($options->timetable) !!}</span>
                    </li>
                </ul>
            </div>
            <div class="col-lg-2 col-sm-3">
                <h3>Enlaces útiles</h3>
                <ul class="list-unstyled">
                    @foreach($footer_links as $link)
                        <li>
                            <a href="{{ url($link->post->slug) }}">{{ $link->post->title }}</a>
                        </li>
                    @endforeach
                </ul>
            </div>
            <div class="col-lg-2 col-sm-3">
                <h3>Síganos en las redes</h3>
                <ul class="list-unstyled">
                    @if($options->facebook)
                        <li>
                            <a href="{{ $options->facebook }}" target="_blank">Facebook</a>
                        </li>
                    @endif
                   {{-- @if($options->twitter)
                        <li>
                            <a href="{{ $options->twitter }}" target="_blank">Twitter</a>
                        </li>
                    @endif --}}
                    @if($options->instagram)
                        <li>
                            <a href="{{ $options->instagram }}" target="_blank">Instagram</a>
                        </li>
                    @endif
                </ul>
            </div>
            <div class="col-lg-3 col-sm-6">
                <h3>Bgreen Lighting</h3>
                <ul class="list-unstyled">
                    <li>
                        <span>{!! nl2br($options->footer_text) !!}</span>
                    </li>
                    @if($options->footer_image)
                        <li>
                            <img src="{{ asset($options->footer_image) }}" alt="" class="mx-auto">
                        </li>
                    @endif
                </ul>
            </div>
            <div class="col-12">
                <div class="copyright">&copy; {{ date('Y') }}. {{ $options->title }}. Todos los derechos reservados</div>
            </div>
        </div>
    </div>
</footer>
<div class="side-cart">
    <div class="side-cart-header d-flex align-items-center justify-content-between">
        <a href="#" class="side-cart-close fal fa-times btn-cart-toggle"></a>
        <h3>Tu carrito</h3>
        <a href="{{ url('carrito') }}" class="cart-link">
            <i class="far fa-shopping-bag"></i>
            <span class="cart-count">{{ Cart::count() }}</span>
        </a>
    </div>
    <div class="cart-content">
        @include('partials.cart')
    </div>
</div>
<script src="{{ asset('assets/js/jquery.min.js') }}"></script>
<script src="{{ asset('assets/js/wow.min.js') }}"></script>
<script src="{{ asset('assets/js/owl.carousel.min.js') }}"></script>
<script src="{{ asset('assets/js/jquery.magnific-popup.min.js') }}"></script>
<script src="{{ asset('assets/js/script.js') }}"></script>
@stack('scripts')
<script>
  $(function() {
    $('body').on('click', '.btn-cart-toggle', function() {
      $('.side-cart').toggleClass('menu-active');
      return false;
    });

    $('body').on('click', '.btn-cart-action', function() {
      var $this = $(this);
      $.post('{{ route('cart.action') }}', {
        product_id: $(this).data('product-id'),
        row_id: $(this).data('row-id'),
        qty: $(this).data('qty'),
        action: $(this).data('action')
      }, function(response) {
        $this.find('span').text(response.message);
        $this.addClass('btn-cart-toggle');
        $('.cart-count').text(response.count);
        $('.cart-content').html(response.cart);
        $('#cart .table-responsive').html(response.cart_full);
      }).fail(function(response) {
        alert(response.responseJSON.message);
      });
      return false;
    });

    $('body').on('click', '.input-number a', function() {
      var $button = $(this);
      var $qty = $button.parent().find('.qty');
      var $max = $qty.attr('max');
      var oldValue = $qty.val();

      if ($button.is('.plus')) {
        if($max && oldValue == $max) {
          var newVal = $max;
        } else {
          var newVal = parseFloat(oldValue) + 1;
        }
      } else {
        if (oldValue > 1) {
          var newVal = parseFloat(oldValue) - 1;
        } else {
          newVal = 1;
        }
      }

      $qty.val(newVal).change();

      return false;
    });
  });
</script>
</body>
</html>
