@extends('layouts.front.app')

@section('og')
<meta property="og:type" content="home"/>
<meta property="og:description" content="{{ config('app.description') }}"/>
@endsection


@section('content')

<section>
  <div class="container my-3">
    <nav class="grey lighten-3 rounded">
      <ol class="breadcrumb">
        <li class="breadcrumb-item">
          <a class="font-weight-bold fosco-text" href="{{ route('home') }}">
            <i class="fas fa-home mr-1"></i>Home
          </a>
        </li>
        <li class="breadcrumb-item font-weight-bolder black-text">{{ $title }}</li>
      </ol>
    </nav>
  </div>
</section>

<section>
  <div class="container">
    
    <div class="row">
      
      <div class="col-lg-3">
        
        <div class="filtro">
          
          <div class="border my-1">
            <div class="card-group-item">
              
              <div class="card-header grey lighten-3">
                <h5 class="font-weight-bold text-center">Preço</h5>
              </div>
              
              <div class="card-body">
                <div class="form-row">
                  
                  <form action="{{ route('search.product.byPrice') }}" method="get">
                    <input type="hidden" name="tipo_filtro">
                    
                    <div class="form-group col-md">
                      <div class="input-group mb-3">
                        <div class="input-group-prepend">
                          <span class="input-group-text">Min</span>
                          <span class="input-group-text">{{ config('cart.currency_symbol') }}</span>
                        </div>
                        <input type="text" class="form-control" name="min_price">
                      </div>
                    </div>
                    
                    <div class="form-group col-md text-right">
                      <div class="input-group mb-3">
                        <div class="input-group-prepend">
                          <span class="input-group-text">Max</span>
                          <span class="input-group-text">{{ config('cart.currency_symbol') }}</span>
                        </div>
                        <input type="text" class="form-control" name="max_price">
                      </div>
                    </div>
                    
                    <button type="submit" class="btn green-shadow white-text w-100">Pesquisar</button>
                  </form>
                  
                </div>
              </div>
              
            </div>
          </div>
          
        </div>
        
      </div>
      
      <div class="col-lg">
        @include(config('site.domain').'.front.products.product-list')
      </div>
      
    </div>
    
  </div>
</section>

@endsection

@section('js')
<script>
  $(function () {
    $('input[name=min_price]').maskMoney({showSymbol: false, decimal: ",", thousands: "."})
    $('input[name=max_price]').maskMoney({showSymbol: false, decimal: ",", thousands: "."})
  })
</script>
@endsection