@extends('layouts.app')

@section('pagetitle', 'Gas - Autolettura contatore')

@section('css')
    <link href="{{ asset('css/electricity.css') }}" rel="stylesheet">
    <link href="{{ asset('css/contact-form.css') }}" rel="stylesheet">
    <link href="{{ asset('plugins/animate.min.css') }}" rel="stylesheet">
@endsection

@section('js')
    <script src="{{ asset('js/electricity-gas.js') }}" defer></script>
@endsection

@section('content')
<div class="container-fluid">
    <div class="row autolettura-header">
        <div class='col-12 text-center my-auto'>
            <img class='icon-sm animate__animated animate__swing' src='/img/gas-icon.png'/>
            <h1 class=''>
                <strong>Autolettura</strong><br>
                Gas Metano
            </h1>
        </div>
    </div>
    <div class='row grey-box animated-icons-block'>
        <div class='col-md-4 offset-md-2 mt-5 p-5 animated-box animated-box-right'>
            <h2 class='section-title black'>Comunicaci la lettura del Contatore</h2>
            <form class='contact-form' method='post' action="{{route('mail.selfreading', ['slug' => $partner->slug, 'form' => 'gas'])}}">
                @csrf
                <div class='row mt-3'>
                    <div class='col-md-12'>
                        <input required name='name' type='text' class='form-control' placeholder='Nome *'/>
                    </div>
                </div>
                <div class='row'>
                    <div class='col-md-12'>
                        <input required name='surname' type='text' class='form-control' placeholder='Cognome *'/>
                    </div>
                </div>
                <div class='row'>
                    <div class='col-md-12'>
                        <input required name='contract' type='text' class='form-control' placeholder='Numero contratto *'/>
                    </div>
                </div>
                <div class='row'>
                    <div class='col-md-12'>
                        <input required name='email' type='email' class='form-control' placeholder='Email *'/>
                    </div>
                </div>
                <div class='row'>
                    <div class='col-md-12'>
                        <label>Lettura contatore (cifre in nero senza gli 0)</label>
                    </div>
                </div>
                <div class='row'>
                    <div class='col-md-4'>
                        <input required name='value' type='number' class='form-control' placeholder='Lettura *' min='0'/>
                    </div>
                </div>
                <div class='row'>
                    <div class='col-md-12'>
                        Esprimo il consenso al trattamento dei miei dati ed all’eventuale loro trasferimento a terze parti nel rispetto delle modalità previste dalla normativa vigente, in particolare dall’art.13 del GDPR affinché possiate trattarli per esclusive finalità informative e di marketing. In ogni momento potrò esercitare il diritto di cancellazione e recesso dai vostri archivi secondo le modalità esplicitate nell'<a href='{{route("privacy",["slug" => $partner->slug])}}'>informativa estesa</a>
                    </div>
                </div>
                <div class='row mt-3'>
                    <div class='col-md-12'>
                        <div class="form-check">
                            <input required name='privacy-policy' class="form-check-input" type="checkbox" value="true" id="privacy-policy">
                            <label class="form-check-label" for="privacy-policy">
                                Dichiaro di aver preso atto della informativa Privacy e di averla accettata
                            </label>
                        </div>
                    </div>
                </div>
                <div class='row'>
                    <div class='col-md-12'>
                        <div class="form-check">
                            <input name='commercial-contact' class="form-check-input" type="checkbox" value="" id="commercial-contact">
                            <label class="form-check-label" for="commercial-contact">
                                Desidero essere contattato da un vostro commerciale per ulteriori informazioni
                            </label>
                        </div>
                    </div>
                </div>
                <div class='row mt-4'>
                    <div class='col-md-12'>
                        <button class='default-btn btn-autolettura-elettricita float-right'>INVIA AUTOLETTURA</button>
                    </div>
                </div>
            </form>
        </div>
        <div class='col-md-4 mt-5 p-5 animated-box animated-box-left'>
            <h2 class='section-title black'>Mantieni aggiornati i tuoi consumi</h2>
            <p class='mt-3'>
                Mantieni aggiornati i tuoi consumi del gas comunicando la lettura del tuo contatore. Sia che tu ne abbia uno tradizionale o eletronico le cifre che ci devi comunicare sono quelle scritte su fondo nero, senza gli zero iniziali. Nel contatore elettronico le ottieni schiacciando il tasto, solitamente blu sotto quello verde di accensione. I numeri da comunicare sono quelli prima della virgola, senza gli zero.
            </p>
            <p class='mt-4'>
                Ti basterà compilare il form contatti a lato e verificare sempre nella tua bolletta il periodo corretto per comunicare la tua lettura.
            </p>
            <h6 class='mt-5 number-support'><strong>RICHIEDI SUPPORTO AL NUMERO</strong></h6>
            <h2 class='black number mt-3'><strong><a href="tel:{{preg_replace('/\D/', '', $partner->phone)}}">{{$partner->phone}}</a></strong></h2>
        </div>
    </div>
</div>
@include('contact-form')
@endsection