@extends('layouts.app')
@include('layouts.footer')

@section('content')
<link href="{{asset('css/profile.css')}}" rel="stylesheet">
<section id="hero" class="vouchers d-flex align-items-center">
    <div class="container position-relative" data-aos="fade-up" data-aos-delay="500">
      <h1>Voucher Euroindy</h1>
      <h2>Escolha o produto que deseja oferecer, e preencha os seus dados</h2>
    </div>
</section>
<div class="container">
    <form action="{{ route('storevoucher')}}" method="POST" name="vouchers">
        @csrf
        <div class="form-group row">
            <label><strong>Karts</strong></label>
        </div>
        
        <p>Selecione a opção que pretende clicando nas sessões de cada kart</p>
        @if ($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach ( $errors->all() as $error )
                        <li>{{$error}}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        <div class="form-group row">
                
                @foreach($produts as $product)
                <div class="col-lg-4 col-md-4 col-sm-1">
                    <div class="card" style="margin-top: 5px ">
                        <a href="{{ asset('https://www.euroindy.com/img/'.$product->img)}}"><img src="{{ asset('https://www.euroindy.com/img/'.$product->img) }}" class="card-img-top" alt="{{$product->title}}"></a>
                        <ul class="list-group list-group-flush">
                            @foreach ($product->OptionProduct()->get() as $item)
                                <li class="list-group-item" style="margin-left: 12px">
                                    <input 
                                        class="form-check-input" 
                                        id="kart{{$item->id}}" 
                                        type="radio" 
                                        name="karts" 
                                        value="{{$product->title."|".$item->price}}"
                                        {{ old('karts')==$product->title."|".$item->price ? 'checked' : ''}} 
                                    />
                                    <label class="form-chech-label" for="kart{{$item->id}}">{{ $item->name }}: 
                                    <b>{{ $item->price }}€</b></label>
                                </li>
                            @endforeach
                        </ul>
                    </div> 
                </div>
                @endforeach
            
        </div>
        <div class="form-group row">
            <label><strong>Informação</strong></label>
        </div>
        <div class="form-group row">
            <label class="col-lg-3">
                <span style="color: red">*</span> Nome
            </label>
            <div class="col-lg-5">
                <input 
                    class="form-control" 
                    type="text" 
                    name="primeiro" 
                    placeholder="Primeiro nome"
                    value="{{ old('primeiro') }}" />
            </div>
            <div class="col-lg-4">
                <input 
                    class="form-control" 
                    type="text" 
                    name="ultimo" 
                    placeholder="último nome"
                    value="{{ old('ultimo') }}" />
            </div>
        </div>
        <div class="form-group row">
            <label class="col-lg-3">
                <span style="color: red">*</span> E-mail
            </label>
            <div class="col-lg-9">
                <input 
                    class="form-control" 
                    type="text" 
                    name="email" 
                    placeholder="e-mail"
                    value="{{ old('email') }}" />
            </div>
        </div>
        <div class="form-group row">
            <label><strong>Dados para fatura</strong></label>
        </div>
        <div class="form-group row">
            <label class="col-lg-3">
                Localidade
            </label>
            <div class="col-lg-9">
                <input 
                    class="form-control" 
                    type="text" 
                    name="localidade" 
                    placeholder="localidade"
                    value="{{ old('localidade') }}" />
            </div>
        </div>
        <div class="form-group row">
            <label class="col-lg-3">
                <span style="color: red">*</span> Telefone
            </label>
            <div class="col-lg-9">
                <input 
                    class="form-control" 
                    type="number" 
                    name="telefone" 
                    placeholder="telefone"
                    value="{{ old('telefone')}}" />
                    <span style="font-size: 12px">Caso o número de telefone que indicar for inválido, a forma de pagamento MBWAY não será possivel</span>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-lg-3">
                <span style="color: red">*</span> NIF
            </label>
            <div class="col-lg-9">
                <input 
                    class="form-control" 
                    type="number" 
                    name="nif" 
                    placeholder="nif"
                    value="{{ old('nif')}}" />
                    <span style="font-size: 12px">Caso o nif for inválido, a fatura será emitida em consumidor final</span>
            </div>
        </div>
        <div class="form-group row">
            <label><strong>Pagamento</strong></label>
        </div>
        <div class="form-group row">
            <label class="col-lg-3">
                <span style="color: red">*</span> Forma de pagamento  
            </label>
            <div class="col-lg-9">
                <select class="form-control" name="pagamento" aria-label="Selecione a forma de pagamento">
                    <option selected value="">Selecione a forma de pagamento</option>
                    <option value="multibanco">Referência Multibanco</option>
                    <option value="mbway">MB WAY</option>
                </select>
                <span style="font-size: 12px"><strong>Referência multibanco:</strong> 24 horas para proceder ao pagamento. <strong>MB WAY:</strong> 4 minutos para proceder ao pagamento</span>
            </div>
        </div>
        <div class="form-group row">
            <label><strong>Proteção de dados</strong></label>
        </div>
        <div class="form-group row">
            <div class="form-check">
                <input class="form-check-input" type="checkbox" value="checkemail" id="checkmarkting">
                <label class="form-check-label" for="checkmarkting">
                    Aceito que o meu e-mail seja objeto de tratamento pelo Euroindy, 
                    possibilitando a divulgação de futuras provas, eventos, produtos e promoções
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox" value="checkemailstore" id="checkstore">
                <label class="form-check-label" for="checkstore">
                    Aceito que os meus dados sejam armazenados pelo Euroindy para efeitos de gestão de clientes, 
                    nomeadamente marcação de eventos ou provas, documentos financeiros e futuras remarcações de provas.
                </label>
            </div>
        </div>
        <div class="row justify-content-md-center">
             <h6 style="color: red">*: Campos obrigatórios</h6>
        </div>
            @if($debug)
            <div class="row justify-content-md-center">
                <h6 style="color: red">Em versão testes: não será emitida nenhuma referencia válida</h6>
            </div>
            @endif
        
        <div class="row justify-content-md-center">
            
            
            <input class="btn btn-success" type="submit" value="Pedir Voucher" style="width: 220px; font-size: 18px" />
        </div>
    </form>
</div>
@endsection