@extends('layouts.plantilla')
@section('distribuidores','active')
@section('content')

<style type="text/css">
    .buscar{
        background-color: #F38130 !important;
        border: 1px solid #F38130 !important;
        color: #FFF !important;
    }
    .buscar:hover{
        color: #F38130 !important;
        background-color: #FFF !important;
    }
    .header{
        /* background-color: #F5F5F5; */
        background: rgba(147, 149, 152, 0.2);
    }
    .titulo{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 400;
        font-size: 42px;
        line-height: 51px;
        color: #131313;
    }
    .breadcrumb li a{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 300;
        font-size: 13px;
        line-height: 16px;
        color: #000000;
        text-decoration: none !important;
    }
    .breadcrumb li.active a{
        font-weight: 400 !important;
    }
    .border_bottom{
        border-bottom: 1px solid rgb(33, 33, 33) !important;
    }
    .fa-map-marker-alt{
        color: #F38130 !important;
    }
    .distribuidores{
        background-color: #F8F8F8 !important;
    }
    .distribuidor{
        padding: 12px;
        background-color: #FFF !important;
    }
    .distribuidor .card-body{
        padding: 0px;
    }
    .distribuidor h5{
        font-size: 18px !important;
        color: #F38130 !important;
    }
    .distribuidor ul{
        padding-left: 0;
    }
    .distribuidor li{
        list-style: none !important;
    }
    .distribuidor li a{
        text-decoration: none !important;
    }
</style>

<div class="header">
    <div class="container mb-5">
        <nav class="breadcrumb-menu pb-3" style="--bs-breadcrumb-divider: '|';" aria-label="breadcrumb" style="color: #2B2E39;">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="<?= route('home') ?>">Inicio</a></li>
                <li class="breadcrumb-item active" aria-current="page"><a href="<?= route('distribuidores') ?>">Distribuidores</a></li>
            </ol>
        </nav>
        <h1 class="titulo pb-4">Distribuidores</h1>
    </div>
</div>

<div class="container-fluid">
    <div class="container">
        <div class="row mb-4">
            <ul class="nav nav-tabs">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#argentina">Argentina</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#mundo">Mundo</a>
                </li>
            </ul>
        </div>
    </div>
</div>

<div class="container-fluid distribuidores">
    <div class="container">
        <div class="row" id="argentina">
            <div class="col-12">
                <div class="row">
                    <div class="col-md-6 offset-md-3 col-sm-12">
                        <form method="GET" action="<?= route('buscarDistribuidores') ?>">
                            <div class="row my-4">
                                <div class="col-md-6 col-sm-12">
                                    <select class="form-select" name="provincia" aria-label="Default select example">
                                        <option value="0" selected>Buscar provincia</option>
                                        <option value="Jujuy">Jujuy</option>
                                        <option value="Salta">Salta</option>
                                        <option value="Santiago del estero">Santiago del estero</option>
                                        <option value="Buenos Aires">Buenos Aires</option>
                                        <option value="Catamarca">Catamarca</option>
                                        <option value="La Pampa">La Pampa</option>
                                        <option value="Santa Fe">Santa Fe</option>
                                        <option value="San Luis">San Luis</option>
                                        <option value="San Juan">San Juan</option>
                                        <option value="Formosa">Formosa</option>
                                        <option value="Misiones">Misiones</option>
                                        <option value="Corrientes">Corrientes</option>
                                        <option value="Chaco">Chaco</option>
                                        <option value="La Rioja">La Rioja</option>
                                        <option value="Cordoba">Cordoba</option>
                                        <option value="Ciudad Autonoma de Buenos Aires">Ciudad Autonoma de Buenos Aires</option>
                                        <option value="Chubut">Chubut</option>
                                        <option value="Neuquen">Neuquen</option>
                                        <option value="Santa Cruz">Santa Cruz</option>
                                        <option value="Rio Negro">Rio Negro</option>
                                        <option value="Tierra del Fuego">Tierra del Fuego</option>
                                        <option value="Entre Rios">Entre Rios</option>
                                        <option value="Mendoza">Mendoza</option>
                                        <option value="Tucuman">Tucuman</option>
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <button type="submit" class="btn btn-primary buscar">Buscar</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="row">
                    <?php foreach($distArgentina as $distribuidor){ ?>
                        <div class="col-md-4 mb-4">
                            <div class="distribuidor">
                                <div>
                                    <div class="border_bottom pb-2">
                                        <i class="d-inline-block fas fa-map-marker-alt fa-lg" aria-hidden="true"></i>
                                        <h5 class="d-inline-block mb-0"><?= $distribuidor->nombre ?></h5>
                                    </div>
                                    <div class="py-2">
                                        <ul>
                                            <li>
                                                <span style="color: rgb(153, 153, 153);"><?= 'TEL. ' . $distribuidor->telefono ?></span>
                                            </li>
                                            <li>
                                                <span style="color: rgb(153, 153, 153);"><?= $distribuidor->direccion ?></span>
                                            </li>
                                            <li>
                                                <span style="color: rgb(153, 153, 153);"><?= $distribuidor->correo ?></span>
                                            </li>
                                            <li>
                                                <a target="_blank" href="<?= $distribuidor->sitio ?>">
                                                    <span style="color: #F38130;"><?= $distribuidor->sitio ?></span>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div>
                                    <img src="{{ asset(Storage::url($distribuidor->foto)) }}" class="card-img-top" alt="...">
                                </div>
                            </div>
                        </div>
                    <?php } ?>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row" id="mundo">
                <?php foreach($distMundo as $distribuidor){ ?>
                    <div class="col-md-4 mb-4">
                        <div class="distribuidor">
                            <div>
                                <div class="border_bottom pb-2">
                                    <i class="d-inline-block fas fa-map-marker-alt fa-lg" aria-hidden="true"></i>
                                    <h5 class="d-inline-block mb-0"><?= $distribuidor->nombre ?></h5>
                                </div>
                                <div class="py-2">
                                    <ul>
                                        <li>
                                            <span style="color: rgb(153, 153, 153);"><?= 'TEL. ' . $distribuidor->telefono ?></span>
                                        </li>
                                        <li>
                                            <span style="color: rgb(153, 153, 153);"><?= $distribuidor->direccion ?></span>
                                        </li>
                                        <li>
                                            <span style="color: rgb(153, 153, 153);"><?= $distribuidor->correo ?></span>
                                        </li>
                                        <li>
                                            <a target="_blank" href="<?= $distribuidor->sitio ?>">
                                                <span style="color: #F38130;"><?= $distribuidor->sitio ?></span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div>
                                <img src="{{ asset(Storage::url($distribuidor->foto)) }}" class="card-img-top" alt="...">
                            </div>
                        </div>
                    </div>
                <?php } ?>
            </div>
        </div>
    </div>
</div>

@endsection
