@extends('layouts.app')

@section('pagetitle', 'Gas - Leggere la bolletta')

@section('css')
    <link href="{{ asset('css/gas.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 leggere-bolletta-header">
        <div class='col-12 text-center my-auto'>
            <img class='icon-sm animate__animated animate__swing' src='/img/gas-icon.png'/>
            <h1 class=''>
                Leggere la bolletta<br>
                <strong>della fornitura del GAS</strong>
            </h1>
        </div>
    </div>
</div>
<div class="container">
    <div class='row animated-icons-block text-center'>
         <div class="col-md-4 mt-5 p-5 animated-box animated-box-right thumb">
            <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title=""
               data-image='{{asset("/img/gas/CIP-bolletta-gas-multisito-dettaglio-900x1272.jpg")}}'
               data-target="#image-gallery">
                <img class="img-thumbnail"
                     src='{{asset("/img/gas/CIP-bolletta-gas-multisito-dettaglio-900x1272.jpg")}}'
                     alt="Another alt text">
            </a>
        </div>
        <div class="col-md-4 mt-5 p-5 animated-box animated-box-right thumb">
            <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title=""
               data-image='{{asset("/img/gas/CIP-bolletta-gas-multisito-dettaglio2-900x1272.jpg")}}'
               data-target="#image-gallery">
                <img class="img-thumbnail"
                     src='{{asset("/img/gas/CIP-bolletta-gas-multisito-dettaglio2-900x1272.jpg")}}'
                     alt="Another alt text">
            </a>
        </div>
        <div class="col-md-4 mt-5 p-5 animated-box animated-box-right thumb">
            <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title=""
               data-image='{{asset("/img/gas/CIP-bolletta-gas-multisito-dettaglio3-900x1272.jpg")}}'
               data-target="#image-gallery">
                <img class="img-thumbnail"
                     src='{{asset("/img/gas/CIP-bolletta-gas-multisito-dettaglio3-900x1272.jpg")}}'
                     alt="Another alt text">
            </a>
        </div>
    </div>
    <div class="modal fade" id="image-gallery" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="image-gallery-title"></h4>
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
                    </button>
                </div>
                <div class="modal-body">
                    <img id="image-gallery-image" class="img-responsive col-md-12" src="">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary float-left" id="show-previous-image"><i class="fa fa-arrow-left"></i>
                    </button>

                    <button type="button" id="show-next-image" class="btn btn-secondary float-right"><i class="fa fa-arrow-right"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <div class="row mb-5 animated-icons-block">
        <div class='col-md-6 animated-box animated-box-right mt-5 '>
            <h2 class='section-title'>
                Semplice da leggere<br>
                con un nuovo design
            </h2>
            <p class='muted mt-4'>
                La bolletta CIP GAS&LUCE è facile da leggere, tutta da scoprire, e se hai qualche dubbio, noi siamo qui per aiutarti a chiarirlo in ogni momento.
            </p>
        </div>
        <div class='col-md-6 animated-box animated-box-left mt-5 '>
            <h2 class='section-title'>
                Il Canone in bolletta
            </h2>
            <p class='muted mt-4'>
                L’Agenzia delle entrate ha pubblicato con PROT. N. 45059 le modalità operative ed i moduli per ottenere l’esenzione del pagamento del Canone RAI nella bolletta elettrica.
            </p>
            <p class='muted mt-4'>
                Diverse le modalità per la richiesta e le esenzioni. Nella sezione modulistica del nostro sito potete trovare sia i moduli che le istruzioni di compilazione. Altre informazioni si trovano al seguente link: <a class='external_link' href="https://bit.ly/2Pj9Sq0" target="_blank" rel="noopener noreferrer">www.agenziaentrate.gov</a>.
            </p>
        </div>
    </div>
</div>
@include('contact-form')
@endsection