@extends('layouts.app')

@section('css')
    <link rel="stylesheet" href="{{ asset('assets/plugins/VanillaToasts/vanillatoasts.css') }}">
@endsection

@section('content')
    <section id="home" class="text-white text-center p-5 fondo_gradient">
        <div class="container">
            <h1>¡Hola, soy {{ $about->myName }}!</h1>
            <p class="m-0 fs-5">Bienvenido a mi Portafolio</p>
        </div>
    </section>

    <section id="about" class="py-5 shadow">
        <div class="container text-center">
            <h2 class="fw-bold text-uppercase mb-5">Sobre mí</h2>
            <div class="row">
                <div class="col-md-3 my-auto">
                    <img class="w-75 img-thumbnail rounded-circle shadow mb-3 mb-lg-0" src="{{ asset($about->img) }}"
                        alt="FOTO_PERFIL" loading="lazy">
                </div>
                <div class="col-md-9 my-auto">
                    <p class="fs-4 fs-md-6 text-lg-start m-0">{!! $about->text !!}</p>
                </div>
            </div>
        </div>
    </section>

    <section id="projects" class="py-5 bg-body-secondary">
        <div class="container text-center">

            <h2 class="fw-bold text-uppercase mb-5 text-dark-emphasis">Proyectos personales</h2>

            <div class="row row-cols-1 row-cols-md-3 g-4">


                @forelse ($projects as $project)
                    <a class="col" href="https://github.com/{{ $project->repositorio }}" target="_blank">
                        <div class="card h-100 rounded-0 shadow">
                            <img src="{{ asset($project->img) }}" class="img-fluid"
                                alt="PROYECTO_PORTADA_{{ $project->id }}" loading="lazy">
                            <div class="card-body">
                                <h5 class="card-title m-0">{{ $project->title }}</h5>
                            </div>
                        </div>
                    </a>
                @empty
                    <div class="text-center"><span class="fs-4">Sin Proyectos</span></div>
                @endforelse

            </div>
        </div>
    </section>

    <section id="skills" class="py-5">
        <div class="container text-center">

            <h2 class="fw-bold text-uppercase mb-5">Skills</h2>

            <div class="row row-cols-2 row-cols-md-6 g-4">

                @forelse ($skills as $skill)
                    <div class="col">
                        <div class="card h-100 rounded-0 shadow">
                            <img src="{{ asset($skill->img) }}" class="card-img-top"
                                alt="SKILL_PORTADA_{{ $skill->id }}" loading="lazy">
                            <div class="card-body">
                                <h5 class="card-title m-0">{{ $skill->title }}</h5>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="text-center"><span class="fs-4">Sin Skills</span></div>
                @endforelse

            </div>

        </div>
    </section>

    <section id="certificados" class="py-5 bg-body-secondary">
        <div class="container text-center">

            <h2 class="fw-bold text-uppercase mb-5 text-dark-emphasis">Certificados & Insignias</h2>

            <div class="row row-cols-1 row-cols-md-3 g-4">

                @forelse ($certificates as $cer)
                    <a class="col" href="{{ $cer->url }}" target="_blank">
                        <div class="card h-100 rounded-0 shadow">
                            <img src="{{ asset($cer->img) }}" class="card-img-top"
                                alt="CERTIFICATE_PORTADA_{{ $cer->id }}" loading="lazy">
                            <div class="card-body">
                                <h5 class="card-title m-0">{{ $cer->title }}</h5>
                            </div>
                        </div>
                    </a>
                @empty
                    <div class="text-center"><span class="fs-4">Sin Certificados</span></div>
                @endforelse

            </div>

        </div>
    </section>

    <section id="contact" class="py-5">
        <div class="container">
            <h2 class="fw-bold text-center text-uppercase mb-5">Contacto</h2>

            <div class="row d-flex justify-content-center">
                <div class="col-md-6 mb-5 mb-lg-0 p-3 p-lg-2">

                    <!-- Información de contacto -->
                    @forelse ($contacts as $contact)
                        <div class="mb-3">
                            <span class="m-0 fs-4"><i
                                    class="bi {{ $contact->icono }} me-4 icono-redes"></i>{{ $contact->texto }}</span>
                        </div>
                    @empty
                        <span>No hay Información</span>
                    @endforelse

                    <!-- Información de redes -->
                    @forelse ($networks as $network)
                        <div class="mb-3">
                            <a href="{{ $network->url }}" class="m-0 fs-4 redes" target="_blank"><i
                                    class="bi {{ $network->icono }} me-4 icono-redes"></i>{{ $network->texto }}</a>
                        </div>
                    @empty
                        <span>No hay Información</span>
                    @endforelse

                </div>
                
            </div>

        </div>
    </section>
@endsection

@section('scripts')
    <script>
        const URL = "{{ env('APP_URL') }}";
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
        integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="{{ asset('assets/plugins/VanillaToasts/vanillatoasts.js') }}"></script>
    <script src="{{ asset('assets/js/app.js') }}"></script>

    @if ($mensaje = Session::get('contacto-success'))
        <script>
            $(document).ready(function() {
                Swal.fire({
                    title: "Enviado",
                    text: "{{ $mensaje }}",
                    icon: "success"
                });
            });
        </script>
    @endif
@endsection