@extends('layouts.pruebaplantilla')
<!--Titulo de página-->
@section('titulo', 'SERVICIOS')
<!--Barra de navegación-->
@section('barra')
    <div class="collapse navbar-collapse" id="navbar">
        <ul class="navbar-nav d-flex justify-content-between align-item-center w-100">
            <div class="d-flex justify-conten-evenly align-items-center">
                <span class="h2">
                    <a href="{{ route('home') }}" class="navbar-brand">
                        <img src="https://i.postimg.cc/x19ch1vw/logo.png" alt="logo-CEI" width="50" height="50"
                            class="bg-light roundend rounded-pill">
                    </a>
                </span>
                <a href="{{ route('habitat.index') }}" class="nav-link">
                    HÁBITAT
                </a>

            </div>
            <div class="d-flex align-items-center">
                <li class="nav-item mx-3">
                    <a href="{{ route('calendario') }}" class="nav-link">CALENDARIO</a>
                </li>
            </div>
            <div class="d-flex align-items-center">
                <li class="nav-item mx-3">
                    <a href="{{ route('contacto') }}" class="nav-link">CONTÁCTANOS</a>
                </li>
            </div>
            <div class="dropdown d-flex align-items-center">
                <li class="nav-item mx-3 border border-0 fs-6" type="button" data-bs-toggle="dropdown"
                    aria-expanded="false">IDIOMAS</li>
                <ul class="dropdown-menu mt-2">
                    <li class="mb-2 d-flex">
                        <img src="{{ Vite::asset('resources/svg/mexico.svg') }}" alt="" width="30">
                        <a class="dropdown-item fs-6 h6" href="">ESPAÑOL</a>
                    </li>
                    <li class="mb-2 d-flex">
                        <img src="{{ Vite::asset('resources/svg/usa.svg') }}" alt="" width="30">
                        <a class="dropdown-item fs-6 h6" href="">
                            INGLÉS
                        </a>
                    </li>
                    <li class="mb-2 d-flex">
                        <img src="{{ Vite::asset('resources/svg/indigena.svg') }}" alt="" width="30">
                        <a class="dropdown-item fs-6 h6" href="{{ route('contacto') }}">
                            HÑÄHÑU
                        </a>
                    </li>
                </ul>
            </div>
            <div class="dropdown nav-item  d-flex align-items-center">
                @if (Auth::check())
                    <button class="border border-0 fs-6 h6 btn btn-primary" type="button" data-bs-toggle="dropdown"
                        aria-expanded="false">
                        {{ Auth::user()->US_NOMBRE }}
                    </button>
                    <div class="dropdown-menu mt-2">
                        <a class="dropdown-item " href="{{ route('myprofile') }}">Mi perfil</a>
                        <a class="dropdown-item " href="{{ route('join.logout') }}">Cerrar
                            sesión</a>
                        @if (Auth::user()->US_ROL == 'INVESTIGADOR')
                            <a class="dropdown-item " href="{{ route('Admin.index') }}">Administración</a>
                        @endif
                    @else
                        <li class="border border-0 nav-item mx-3 nav-link" type="button" data-bs-toggle="dropdown"
                            aria-expanded="false">INICIA SESIÓN</li>
                        <div class="dropdown-menu mt-2">
                            <form class="px-4 py-3" action="{{ route('join.login') }}" method="POST">
                                @csrf
                                <div class="mb-3">
                                    <label for="text_user" class="form-label">Correo electrónico</label>
                                    <input type="email" class="form-control  form-control-sm" id="text_user"
                                        name="text_user" placeholder="Ingrese aquí" required>
                                </div>
                                <div class="mb-3">
                                    <label for="login_password" class="form-label">Contraseña</label>
                                    <input type="password" class="form-control form-control-sm" id="login_password"
                                        name="login_password" placeholder="Contraseña" required>
                                </div>
                                <div class="mb-3">
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" id="remember" name="remember">
                                        <label class="form-check-label" for="remember">
                                            Recuerdame
                                        </label>
                                    </div>
                                </div>
                                <button type="submit" class="btn btn-primary w-100">INICIAR SESIÓN</button>
                            </form>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="{{ route('join.index') }}">
                                ¿Eres nuevo? Registrate aquí.
                            </a>
                            <a class="dropdown-item " href="{{ route('join.recovery') }}">¿Olvidaste la
                                Contraseña?
                            </a>
                        </div>
                    </div>
                @endif
            </div>
        </ul>
    </div>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar"
        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="fa-solid fa-bars"></span>
    </button>
    <!--Contenedor de logos-->
    <div class="d-flex justify-content-end align-items-center w-80">
        <div>
            <img src="https://i.postimg.cc/QNR74DnD/conacyt.png" alt="" width="80" id="conacyt-logo">
        </div>
        <div>
            <img src="https://i.postimg.cc/zGNgNjrP/TecNM.png" alt="" width="80" id="tecnm-logo">
        </div>
        <div>

        </div>
    </div>

@endsection
<!--Contenido de pagina-->
@section('contenido')
    <div class="header-img">
        <img src="/centrodeinformacion/resources/images/Inicidencia2.jpg"
            alt="" class="img-fluid">
    </div>
    <h4 class="text-center">SERVICIOS</h4>
    <div class="container" style="display: flex; justify-content: center; align-items: center;">
        <div class="tam" style="width: 400px;">
            <div class="mb-3">
                <label for="form-size-slider" class="form-label">Tamaño Texto:</label>
                <input type="range" class="form-range" id="form-size-slider" min="12" max="24"
                    value="5" step="1" oninput="adjustFormSize(this.value)">
            </div>
        </div>
    </div>
    <!--Filtrado de busqueda-->
    <div class="d-flex justify-content-between row mx-1">
        <div class="col-md">
            <a href="{{ route('habitat.servicio.filtrar', '1') }}" class="btn btn-primary btn-sm w-100">Talleres</a>
        </div>
        <div class="col-md">
            <a href="{{ route('habitat.servicio.filtrar', '2') }}" class="btn btn-primary btn-sm w-100">Conferencias</a>
        </div>
        <div class="col-md">
            <a href="{{ route('habitat.servicio.filtrar', '3') }}" class="btn btn-primary btn-sm w-100">Pláticas</a>
        </div>
        <div class="col-md">
            <a href="{{ route('habitat.servicio.filtrar', '4') }}" class="btn btn-primary btn-sm w-100">Foros</a>
        </div>
        <div class="col-md">
            <a href="{{ route('habitat.servicio.filtrar', '5') }}" class="btn btn-primary btn-sm w-100">Seminarios</a>
        </div>
        <div class="col-md">
            <a href="{{ route('habitat.servicio.filtrar', '6') }}" class="btn btn-primary btn-sm w-100">Congresos</a>
        </div>
        <div class="col-md">
            <a href="{{ route('habitat.servicio.filtrar', '7') }}" class="btn btn-primary btn-sm w-100">Simposio</a>
        </div>
        <div class="col-md">
            <a href="{{ route('habitat.servicio.filtrar', '8') }}" class="btn btn-primary btn-sm w-100">Convención</a>
        </div>
        <div class="col-md">
            <a href="{{ route('habitat.servicio.filtrar', '9') }}" class="btn btn-primary btn-sm w-100">Coloquio</a>
        </div>
    </div>
    <div class="row py-3" id="tamanio">
        @foreach ($data as $contenido)

<div class="card mb-3 col-md-4" style="max-width: 540px;">
    <div class="row g-0">

        <div class="col-md-4">
    @php
        $driveId = null;
        if ($contenido->SER_LINK_IMAGEN) {
            preg_match('/\/d\/([a-zA-Z0-9_-]+)/', $contenido->SER_LINK_IMAGEN, $matches);
            $driveId = $matches[1] ?? null;
        }
    @endphp
    @if($driveId)
        <img src="https://drive.google.com/thumbnail?id={{ $driveId }}"
            class="img-fluid rounded-start"
            alt="{{ $contenido->SER_TITULO }}">
    @else
        <img src="https://via.placeholder.com/400x300?text=Sin+imagen"
            class="img-fluid rounded-start"
            alt="Sin imagen">
    @endif
</div>

        <div class="col-md-8">
            <div class="card-body">

                <h5 class="card-title">
                    {{ $contenido->SER_TITULO }}
                </h5>

                <p class="card-text card-text-overflow" style="height:auto;">
                    {{ $contenido->SER_DESCRIPCION }}
                </p>

                <p class="card-text">
                    <small class="text-body-secondary">
                        Publicado el {{ $contenido->created_at }}
                    </small>
                </p>

                <button type="button"
                    class="btn btn-primary"
                    data-bs-toggle="modal"
                    data-bs-target="#modalServicio{{ $contenido->SER_ID }}">
                    Ver más
                </button>

            </div>
        </div>

    </div>
</div>

<!-- MODAL -->
<div class="modal fade"
    id="modalServicio{{ $contenido->SER_ID }}"
    tabindex="-1">

    <div class="modal-dialog modal-xl modal-dialog-centered">

        <div class="modal-content modal-servicio">

            <div class="modal-header modal-header-servicio">

                <h4 class="modal-title">
                    {{ $contenido->SER_TITULO }}
                </h4>

                <button type="button"
                    class="btn-close"
                    data-bs-dismiss="modal">
                </button>

            </div>

            <div class="modal-body">

                <div class="row">

                   <div class="col-md-4">
    @php
        $driveId = null;
        if ($contenido->SER_LINK_IMAGEN) {
            preg_match('/\/d\/([a-zA-Z0-9_-]+)/', $contenido->SER_LINK_IMAGEN, $matches);
            $driveId = $matches[1] ?? null;
        }
    @endphp
    @if($driveId)
        <img src="https://drive.google.com/thumbnail?id={{ $driveId }}"
            class="img-fluid rounded-start"
            alt="{{ $contenido->SER_TITULO }}">
    @else
        <img src="https://via.placeholder.com/400x300?text=Sin+imagen"
            class="img-fluid rounded-start"
            alt="Sin imagen">
    @endif
</div>

                    <div class="col-md-7">

                        <div class="info-card">

                            <h5>Descripción</h5>

                            <p>
                                {{ $contenido->SER_DESCRIPCION }}
                            </p>

                        </div>

                        {{--<div class="row mt-3">

                            <div class="col-md-6">

                                <div class="info-card">

                                    <p>
                                        <strong>Responsable:</strong><br>
                                        {{ $contenido->SER_RESPONSABLE }}
                                    </p>

                                    <p>
                                        <strong>Contacto:</strong><br>
                                        {{ $contenido->SER_TELEFONO }}
                                    </p>

                                    <p>
                                        <strong>Dirección:</strong><br>
                                        {{ $contenido->SER_DIRECCION }}
                                    </p>

                                </div>--}}

                            </div>

                            <div class="col-md-6">

                                <div class="info-card">

                                   {{-- <p>
                                        <strong>Correo:</strong><br>
                                        {{ $contenido->SER_EMAIL }}
                                    </p>--}}

                                    <p>
                                        <strong>Categoría:</strong><br>
                                        {{ $contenido->categoria->CAT_DESCRIPCION ?? $contenido->SER_CAT }}
                                    </p>

                                    <p>
                                        <strong>Publicado:</strong><br>
                                        {{ $contenido->created_at }}
                                    </p>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

            <div class="modal-footer">

                <button class="btn btn-primary"
                    data-bs-dismiss="modal">
                    Cerrar
                </button>

            </div>

        </div>

    </div>

</div>

@endforeach
    </div>
    {{ $data->links() }}
    <script>
        function adjustFormSize(size) {
            document.getElementById('tamanio').style.fontSize = size + 'px';
        }
    </script>
    
    <style>
        .imagen-modal-servicio{
       width: 100%;
       height: auto;
       max-height: 350px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
    </style>
    
@endsection