@extends('layouts.plantilla')

@section('cdn')
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous">
    </script>
    <script src="https://kit.fontawesome.com/b1f3d5c1f6.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="./../resources/css/app.css">
@endsection

@section('titulo', 'Patrimonio Natural')

@section('header-image', '1-nM7djG8JAceTvHfnlCmQPR02KYymhzP')

@section('header-titulo', 'Resultados de busqueda')


@section('content')
    <section class="row mb-3">
        <p>
            <a class="btn btn-ternary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false"
                aria-controls="collapseExample">
                <i class="fa-regular fa-eye"></i>
            </a>
        </p>
        <div class="row mb-3">
            <h1>Servicios</h1>
            @foreach ($servicios as $servicio)
                <div class="col-sm-4 mb-2">
                    <a href="{{ route('servicios.show', $servicio) }}" class="nav-link">
                        <div class="card w-100" style="height: 400px;">
                            <img src="{{ $servicio->SER_LINK_IMAGEN }}" alt="{{ $servicio->SER_TITULO }}"
                                class="card-img-top w-100">
                            <div class="card-body">
                                <strong class="text-center">
                                    <p class="fs-7">
                                        {{ $servicio->SER_TITULO }}
                                    </p>
                                </strong>
                                <p style="text-align: justify;" class="fs-7">{{ $servicio->SER_DESCRIPCION }}</p>
                                <p class="fs-6">
                                    <i class="fa-solid fa-user"></i>
                                    {{ $servicio->SER_RESPONSABLE }}
                                </p>
                                <div class="d-flex justify-content-center align-items-center py-4">
                                    @foreach ($servicio->redes as $red)
                                        @if ($red->red->RS_PLATAFORMA == 'FACEBOOK')
                                            <a href="{{ $red->SER_RED_LINK }}" class="w-100 text-center">
                                                <i class="fa-brands fa-facebook"></i>
                                            </a>
                                        @elseif ($red->red->RS_PLATAFORMA == 'INSTAGRAM')
                                            <a href="{{ $red->SER_RED_LINK }}" class="w-100 text-center">
                                                <i class="fa-brands fa-instagram"></i>
                                            </a>
                                        @else
                                            <a href="{{ $red->SER_RED_LINK }}" class="w-100 text-center">
                                                <i class="fa-brands fa-twitter"></i>
                                            </a>
                                        @endif
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            @endforeach
        </div>
        {{ $servicios->links() }}
        <h1>Colaboradores</h1>
        <div class="row d-flex justify-content center align-items-center">
            @foreach ($colaboradores as $colaborador)
                <div class="col-sm-4 my-3">
                    <a href="" class="nav-link">
                        <div class="card" style="height: 150px;">
                            <div class="card-body">
                                <strong>
                                    <p>Nombre: {{ $colaborador->COL_NOMBRE }}</p>
                                </strong>
                                <p>Contacto: {{ $colaborador->COL_EMAIL }}</p>
                                <p>Tipo Organizacion: {{ $colaborador->tipoColaborador->TI_DESCRIPCION }}</p>
                            </div>
                        </div>
                    </a>
                </div>
            @endforeach
        </div>
        {{ $colaboradores->links() }}
        <h1>Contenido</h1>
        <div class="row py-3">
            @foreach ($informacion as $articulo)
                <div class="col-sm-4 mb-2">
                    <a href="{{ route('contenido.show', $articulo) }}" class="nav-link">
                        <div class="card mt-2" style="height: 400px;">
                            <img src="http://drive.google.com/uc?export=view&id={{ $articulo->INF_URL_IMAGEN }}"
                                alt="{{ $articulo->INF_TITULO }}" class="w-100" height="180">
                            <div class="card-body">
                                <strong class="fs-7">
                                    <p>{{ $articulo->INF_TITULO }}</p>
                                </strong>
                                <ul class="list-group">
                                    <li class="fs-7 mt-3 nav-link">
                                        <strong>Tipo informacion:
                                        </strong>{{ $articulo->INF_TIPO }}
                                    </li>
                                    <li class="fs-7 mt-3 nav-link">
                                        <strong>Tema: </strong>{{ $articulo->INF_TEMA }}
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </a>
                </div>
            @endforeach
            {{ $informacion->links() }}
        </div>
    </section>
@endsection