@extends('layouts.app')

@section('pagetitle', 'Elettricità 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/luce-icon.png'/>
            <h1 class=''>
                <strong>Autolettura</strong><br>
                elettricità
            </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' => 'electricity'])}}">
                @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</label>
                    </div>
                </div>
                <div class='row'>
                    <div class='col-md-4'>
                        <input required  name='a1' type='number' class='form-control' placeholder='A1 *' min='0'/>
                    </div>
                    <div class='col-md-4'>
                        <input required  name='a2' type='number' class='form-control' placeholder='A2 *' min='0'/>
                    </div>
                    <div class='col-md-4'>
                        <input required  name='a3' type='number' class='form-control' placeholder='A3 *' 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  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="true" 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 dell’elettricità comunicando la lettura del tuo contatore. Inserisci la lettura del tuo contatore elettrico per avere una bolletta sempre in linea con i tuoi reali consumi.
            </p>
            <p class='mt-4'>
                Ti basta schiacciare il testo nero di lettura in alto a destra e trascrivere i 3 valori A1, A2, A3 che ti compaiono successivamente, corrispondenti ai consumi di energia nelle 3 fascie orarie F1-F2-F3.
                <ul>
                    <li>F1 : dalle 8:00 alle 19:00 LUN-VEN</li>
                    <li>F2: dalle 7:00 alle 8:00 e dalle 19:00 alle 23:00 LUN-VEN</li>                                                                                                      
                    <li>F3: dalle 0:00 alle 7:00 e dalle 23:00 alle 24:00 LUN-VEN, SABATO e FESTIVI</li>
                </ul>
            </p>
            <p class='mt-4'>
                Ti basterà compilare il <strong>form contatti a lato</strong> 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