@extends('layouts.master')
@section('content')
<div class="download-app-div download-dealers-div" style="background-image: url({{ asset('img/www/distribuidores-autorizados.jpg') }});">
    <div class="overlay-primary"></div>
    <div class="content">
       <div class="col-6 col-md-12 col-mx-auto">
           <h1 class="text-center p-centered bold">Conoce a todos Nuestros Distribuidores Autorizados</h1>
           <p class="text-center p-centered fs-22 fw-600">…y por qué no?, conviértete en <br /> uno de ellos!</p>
       </div>
    </div>
</div>

<div class="container grid-lg pt-60 pb-60">
    <div class="col-12 col-mx-center">
        <p class="text-center p-centered fs-20 cl-y fw-600">Distribuidores </p>
        <p class="text-center p-centered fs-26 fw-600 mt-minus-17">YekoClub® </p>
    </div>
</div>

<div class="container grid-lg">
    <div class="columns">
        <div class="col-dealers" style="display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; width:100%;">
            @foreach ($data['dealers'] as $dealer)
                @php
                    $image = isset($dealer->image) ? env('SERVICE_ADMIN') . '/images/' . $dealer->image : 'https://semantic-ui.com/images/wireframe/image.png';
                @endphp
                <div class="mb-20" style="display: flex; flex-direction: column; justify-content: space-between;">
                    <img class="logos-dealers-tm" src="{{ $image }}" style="width: 200px;"></img>
                    <h5 class="pt-20 title-dealers">{{ $dealer->name }}</h5>
                </div>
            @endforeach
        </div>
    </div>
</div>

<div class="container pb-80">
    <div class="alg-dealers">
        <a href="/general/dealers-form" class="btn btn-general">Quiero ser distribuidor<br>YekoClub®</a>
    </div>
</div>

<div class="container p-40 bg-grey">
    <div class="text-center contact-ip-div content pt-30 pb-30">
        <h3>¿Tienes alguna pregunta? no dudes en hacérnosla saber</h3>
        <p>Estamos preparados para atender cualquier duda que tengas, no dudes en ponerte en contacto y con gusto te atenderemos</p>
        <div class="pt-20">
            <a href="/general/contact" class="btn btn-general">Contáctanos</a>
        </div>
    </div>
</div>

@endsection