@extends('master.principal')
@section('header')
    <style>
        .category {
            color: black;
            font-weight: 800;
        }

        .model-name {
            font-weight: lighter;
            color: black;
            font-size: 15px;
        }

        .iso-mi-camion {
            padding-top: 50px;
            padding-bottom: 20px;
        }

        .info,
        small {
            color: black
        }

        .model-img {
            padding: 30px 0 30px 30px;
        }

        .legal-title {
            color: #4ba7e2;
            font-size: 16px;
        }

        .buttons {
            padding-top: 10px;
            text-align: right;
            list-style: none;
        }

        .buttons li {
            padding: 12px 0;
        }
    </style>
@endsection
@section('content')
    <div id="headerBreadcrumb" class="header__breadcrumb absolute" style="top: 158px;">
        <a href="https://devol.com.ar/">inicio</a> / <a
            href="">Plan Mi Camión VW</a>
    </div>
    <div class="trucks--detailed">

        <div class="sectionTitle">
            <div>
                <span>
                    <span>Autoahorro</span>
                </span>
                <div class="yellowBorder"></div>
            </div>
            <div class="title">
                <span>Plan Mi Camión VW</span>
            </div>


            @foreach ($modelos as $modelo)
                <div class="row py-5">
                    <div class="col-md-6">
                        <h3 class="category text-black">{{ $modelo->categoria->nombre }}</h3>
                        <h4 class="model-name text-black">{{ $modelo->nombre_sin_categoria }}</h4>
                        <img src="{{ asset('img/iso-mi-camion.webp') }}" width="200" alt="Plan Mi Camion VW" class="iso-mi-camion">
                        <p class="info">{{ $modelo->info }}</p>
                    </div>
                    <div class="col-md-6">
                        <img src="{{ asset('storage/modelo/' . $modelo->id . '/ahorro/' . $modelo->img) }}"
                            class="img-fluid model-img" alt="{{ $modelo->nombre }}">
                        <ul class="buttons">
                            @if ($modelo->btn_label_1)
                                <li><a class="classic-link" href="{{ $modelo->btn_link_1 }}"
                                        target="_blank">{{ $modelo->btn_label_1 }}</a></li>
                            @endif
                            @if ($modelo->btn_label_2)
                                <li><a class="classic-link" href="{{ $modelo->btn_link_2 }}"
                                        target="_blank">{{ $modelo->btn_label_2 }}</a></li>
                            @endif
                            @if ($modelo->btn_label_3)
                                <li><a class="classic-link" href="{{ $modelo->btn_link_3 }}"
                                        target="_blank">{{ $modelo->btn_label_3 }}</a></li>
                            @endif
                        </ul>
                    </div>
                    <div class="col-md-12">
                        <h4 class="legal-title">Información adicional de la composición de las cuotas</h4>
                        <small>{{ $modelo->legal }}</small>
                    </div>
                </div>
            @endforeach


        </div>



    </div>
@endsection