@extends('layouts.app')

@php
    $og_image = null;
    $firstImage = null;
    if ($service->images->count() > 0) {
        $og_image = asset('uploads/services/' . $service->images[0]->image);
        $firstImage = $og_image;
    }

    if (isset($service->logo)) {
        $og_image = asset('uploads/services/' . $service->logo);
        if ($service->images->count() == 0) {
            $firstImage = $og_image;
        }
    }
@endphp

@section('og_title', $service->service_name)
@section('og_description', Str::limit(strip_tags($service->short_description), 150))
@section('og_image', isset($og_image) ?: $og_image)
@section('og_type', 'profile')

@section('links')
    <meta name="csrf-token" content="{{ csrf_token() }}">
    @vite('resources/css/productDetails.css')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/elevatezoom/3.0.8/jquery.elevatezoom.min.js"></script>
    <style>
        .blur-container {
            filter: blur(5px);
            pointer-events: none;
            user-select: none;
        }

        .blur-content {
            filter: blur(5px);
            pointer-events: none;
            user-select: none;
        }

        .transition-btn {
            border: 1px;
            transition: color 0.3s ease, transform 0.3s ease;
        }

        .transition-btn:hover,
        .transition-btn:focus {
            transform: scale(1.03);
        }

        #mobileCarousel .carousel-item {
            transition: transform 0.6s ease-in-out;
        }

        .animated-link {
            position: relative;
            transition: color 0.3s;
        }

        .animated-link::after {
            content: "";
            position: absolute;
            width: 0;
            height: 2px;
            bottom: 0;
            left: 0;
            background-color: currentColor;
            transition: width 0.3s ease-in-out;
        }

        .animated-link:hover::after,
        .animated-link:focus::after {
            width: 100%;
        }
    </style>
@endsection

@section('content')
    <div class="container">
        <div class="row mt-4">
            <div class="col-sm-12 col-lg-6">
                <div class="product-gallery">
                    @if ($service->images->count() > 0 || $service->logo)
                        {{-- (Normal) --}}
                        <div class="d-none d-md-block">
                            <div class="main-image-container mb-3">
                                <img id="main-image" src="{{ $firstImage }}" alt="servicio" class="img-fluid zoomable-image"
                                    data-zoom-image="{{ $firstImage }}">
                            </div>
                            <div class="thumbnail-gallery d-flex gap-2 flex-wrap">
                                @forelse ($service->images as $image)
                                    <img src="{{ asset('uploads/services/' . $image->image) }}" alt="Servicio"
                                        class="thumbnail" style="width: 80px; cursor: pointer;"
                                        onclick="changeImage('{{ asset('uploads/services/' . $image->image) }}')">
                                @empty
                                    
                                @endforelse
                            </div>
                        </div>

                        {{--  (móvil) --}}
                        <div class="d-md-none">
                            <div id="mobileCarousel" class="carousel slide" data-bs-touch="true" data-bs-keyboard="true"
                                data-bs-interval="false">
                                <div class="carousel-inner">
                                    @forelse ($service->images as $i => $image)
                                        <div class="carousel-item {{ $i === 0 ? 'active' : '' }}">
                                            <img src="{{ asset('uploads/services/' . $image->image) }}"
                                                class="d-block w-100" alt="Servicio"
                                                style="max-height: 300px; object-fit: contain;">
                                        </div>
                                    @empty
                                        <div class="carousel-item active">
                                            <img src="{{ $firstImage }}" class="d-block w-100" alt="Servicio"
                                                style="max-height: 300px; object-fit: contain;">
                                        </div>
                                    @endforelse
                                </div>
                                @if ($service->images->count() > 1)
                                    <button class="carousel-control-prev" type="button" data-bs-target="#mobileCarousel"
                                        data-bs-slide="prev">
                                        <span class="carousel-control-prev-icon"></span>
                                    </button>
                                    <button class="carousel-control-next" type="button" data-bs-target="#mobileCarousel"
                                        data-bs-slide="next">
                                        <span class="carousel-control-next-icon"></span>
                                    </button>
                                @endif
                            </div>
                        </div>
                    @else
                        <div class="main-image-container p-5">
                            <p>Sin imágenes por mostrar</p>
                        </div>
                    @endif
                    <hr>
                </div>
                <div class="d-block d-lg-none">
                    <div id="titleBisness">
                        <hr>
                        <div class="d-flex align-items-center gap-3 flex-wrap">
                            @if (isset($service->logo) && $service->images->count() > 0)
                                <img src="{{ Asset('uploads/services/' . $service->logo) }}" class="img-thumbnail"
                                    alt="Sin logo" style="width: 100px; heigth:100px;">
                            @endif
                            <h1 class="custom-text-color h2 m-0">{{ $service->service_name }}</h1>
                        </div>

                        @if (!Auth::guard('web')->check() || Auth::guard('admin')->check())
                            <p class="custom-text-color mt-2 transition-btn">Inicia sesión para poder ver todos los datos
                            </p>
                        @endif
                        <a href="{{ route('services') }}" class="text-decoration-none custom-text-color animated-link">
                            Regresar a la página de inicio <span><i class="bi bi-house"></i></span>
                        </a>
                        <hr>
                    </div>
                    <div id="BisnessInformation">
                        <h4 class="custom-text-color">Información de la empresa</h4>
                        <p><span class="fw-bold">Razón social: </span> {{ $service->company_type }}</p>
                        <p><span class="fw-bold">Nombre Comercial: </span> {{ $service->service_name }}</p>
                        <p><span class="fw-bold">Productos y servicios principales: </span> {{ $service->main_products }}
                        </p>
                        @if (Auth::guard('web')->check() || Auth::guard('admin')->check())
                            <p><span class="fw-bold">Correo de la empresa: </span>
                                {{-- <a href="mailto:{{ $service->email }}"
                                    target="_BLANK" class="track-action" data-action-name="click_on_mail"
                                    data-service-id="{{ $service->id }}"></a> --}}
                                <a href=""
                                    class="custom-bg-color text-decoration-none border rounded px-3 py-1 transition-btn make-contact"
                                    target="_blank" rel="noopener noreferrer">
                                    Enviar correo
                                </a>
                            </p>
                            <p>
                                <span class="fw-bold">Telefono de la empresa: </span>
                                <span class="d-none d-md-block">
                                    <a href=""
                                        class="custom-bg-color text-decoration-none border rounded px-3 py-1 transition-btn copy-to-paste track-action"
                                        target="_blank" rel="noopener noreferrer"
                                        data-contact-number="{{ $service->contact_number }}"
                                        data-action-name="click_on_phone" data-service-id="{{ $service->id }}">
                                        Llamar
                                    </a>
                                </span>
                                <span class="d-md-none">
                                    <a href="tel:{{ $service->contact_number }}"
                                        class="custom-bg-color text-decoration-none border rounded px-3 py-1 track-action transition-btn"
                                        data-action-name="click_on_phone">Llamar
                                        empresa</a>
                                </span>
                            </p>
                            <p><span class="fw-bold">Año de inicio de operaciones: </span>
                                {{ $service->start_operations_year }}
                            </p>
                            <p><span class="fw-bold">País de origen de la empresa/Inversión: </span>
                                {{ $service->origin_country }}
                            </p>
                        @else
                            <p><span class="fw-bold">Correo de la empresa: </span> <span
                                    class="blur-content">asdasdasd</span>
                            </p>
                            <p><span class="fw-bold">Telefono de la empresa: </span> <span
                                    class="blur-content">asdasdasd</span>
                            </p>
                            <p><span class="fw-bold">Año de inicio de operaciones: </span> <span
                                    class="blur-content">asdasdasd</span></p>
                            <p><span class="fw-bold">País de origen de la empresa/Inversión: </span> <span
                                    class="blur-content">asdasdasd</span></p>
                        @endif
                        <hr>
                    </div>
                </div>
                <div id="BusinessDetails">
                    <h4 class="custom-text-color">Detalles de la empresa</h4>
                    @if (Auth::guard('web')->check() || Auth::guard('admin')->check())
                        <p><span class="fw-bold">Sitio web: </span><a href="{{ $service->redirect_link }}" target="_BLANK"
                                class="track-action" data-action-name="redirect_link"
                                data-service-id="{{ $service->id }}">Ingresar a su
                                sitio
                                web</a></p>
                    @else
                        <p><span class="fw-bold">Sitio web: </span><span class="blur-content">asdasdasd</span></p>
                    @endif
                    @if ($service->brochure_pdf)
                        @if ((Auth::guard('web')->check() || Auth::guard('admin')->check()) && !empty($service->brochure_pdf))
                            <p>
                                <span class="fw-bold">Catálogo: </span>
                                <a href="{{ asset('uploads/services/brochures/' . $service->brochure_pdf) }}"
                                    target="_blank">
                                    Descargar catálogo
                                </a>
                            </p>
                        @else
                            <p>
                                <span class="fw-bold">Catálogo: </span>
                                @if (!empty($service->brochure_pdf))
                                    Hay catálogo disponible
                                @else
                                    No hay catálogo disponible
                                @endif
                            </p>
                        @endif
                    @endif
                    <p><span class="fw-bold">Descripción de la empresa: </span> {{ $service->description }}</p>
                    <h5 class="custom-text-color">Horarios laborales</h5>
                    <p><span class="fw-bold">Horario:</span> {{ $service->working_hours }}</p>
                    <p><span class="fw-bold">Tiempo promedio de atención:</span> {{ $service->attention_time }}</p>
                    <hr>
                </div>
                <div id="BusinessGeneral">
                    <h4 class="custom-text-color">Datos generales</h4>
                    <p><span class="fw-bold">Facilidades de pago: </span> {{ $service->payment_facilities }}</p>
                    @if (Auth::guard('web')->check() || Auth::guard('admin')->check())
                        <p><span class="fw-bold">Procesos principales de la empresa: </span>
                            {{ $service->main_processes }}
                        </p>
                        <p><span class="fw-bold">Maquinaria con la que cuenta: </span>
                            {{ $service->machinery_available }}
                        </p>
                        <p><span class="fw-bold">Capacidad de producción: </span> {{ $service->production_capacity }}
                        </p>
                        <p><span class="fw-bold">Productos importados: </span> {{ $service->imported_products }}</p>
                        <p><span class="fw-bold">Numero de empleados: </span> {{ $service->employees_number }}</p>
                        <p><span class="fw-bold">Volumen de ventas: </span> {{ $service->sales_volume }}</p>
                        <p><span class="fw-bold">Especialidad industrial: </span>
                            {{ $service->industrial_specialties }}
                        </p>
                        <p><span class="fw-bold">Clientes principales: </span> {{ $service->principal_clients }}</p>
                    @else
                        <p><span class="fw-bold">Procesos principales de la empresa: </span> <span
                                class="blur-content">asdasdasd</span></p>
                        <p><span class="fw-bold">Maquinaria con la que cuenta: </span> <span
                                class="blur-content">asdasdasd</span></p>
                        <p><span class="fw-bold">Capacidad de producción: </span> <span
                                class="blur-content">asdasdasd</span></p>
                        <p><span class="fw-bold">Productos importados: </span> <span class="blur-content">asdasdasd</span>
                        </p>
                        <p><span class="fw-bold">Numero de empleados: </span> <span class="blur-content">asdasdasd</span>
                        </p>
                        <p><span class="fw-bold">Volumen de ventas: </span> <span class="blur-content">asdasdasd</span>
                        </p>
                        <p><span class="fw-bold">Especialidad industrial: </span> <span
                                class="blur-content">asdasdasd</span></p>
                        <p><span class="fw-bold">Clientes principales: </span> <span class="blur-content">asdasdasd</span>
                        </p>
                    @endif
                    <hr>
                </div>
            </div>
            {{-- Left part --}}
            <div class="col-sm-12 col-lg-6">
                <div class="d-none d-lg-block">
                    <div id="titleBisness">
                        <div class="d-flex align-items-center gap-3 flex-wrap">
                            @if (isset($service->logo) && $service->images->count() > 0)
                                <img src="{{ Asset('uploads/services/' . $service->logo) }}" class="img-thumbnail"
                                    alt="Sin logo" style="width: 100px; heigth:100px;">
                            @endif
                            <h1 class="custom-text-color h2 m-0">{{ $service->service_name }}</h1>
                        </div>

                        @if (!Auth::guard('web')->check() || Auth::guard('admin')->check())
                            <p class="custom-text-color mt-2 transition-btn">Inicia sesión para poder ver todos los datos
                            </p>
                        @endif
                        <a href="{{ route('services') }}" class="text-decoration-none custom-text-color animated-link">
                            Regresar a la página de inicio <span><i class="bi bi-house"></i></span>
                        </a>

                        <hr>
                    </div>
                    <div id="BisnessInformation">
                        <h4 class="custom-text-color">Información de la empresa</h4>
                        <p><span class="fw-bold">Razón social: </span> {{ $service->company_type }}</p>
                        <p><span class="fw-bold">Nombre Comercial: </span> {{ $service->service_name }}</p>
                        <p><span class="fw-bold">Productos y servicios principales: </span> {{ $service->main_products }}
                        </p>
                        @if (Auth::guard('web')->check() || Auth::guard('admin')->check())
                            <p><span class="fw-bold">Correo de la empresa: </span>
                                <a href=""
                                    class="custom-bg-color text-decoration-none border rounded px-3 py-1 transition-btn make-contact"
                                    target="_blank" rel="noopener noreferrer">
                                    Enviar correo
                                </a>
                            </p>
                            <p><span class="fw-bold">Telefono de la empresa: </span>
                                <a href=""
                                    class="custom-bg-color text-decoration-none border rounded px-3 py-1 transition-btn copy-to-paste track-action"
                                    target="_blank" rel="noopener noreferrer"
                                    data-contact-number="+521{{ $service->contact_number }}"
                                    data-action-name="click_on_phone" data-service-id="{{ $service->id }}">
                                    Llamar
                                </a>
                            </p>
                            <p><span class="fw-bold">Año de inicio de operaciones: </span>
                                {{ $service->start_operations_year }}
                            </p>
                            <p><span class="fw-bold">País de origen de la empresa/Inversión: </span>
                                {{ $service->origin_country }}
                            </p>
                        @else
                            <p><span class="fw-bold">Correo de la empresa: </span> <span
                                    class="blur-content">asdasdasd</span>
                            </p>
                            <p><span class="fw-bold">Telefono de la empresa: </span> <span
                                    class="blur-content">asdasdasd</span>
                            </p>
                            <p><span class="fw-bold">Año de inicio de operaciones: </span> <span
                                    class="blur-content">asdasdasd</span></p>
                            <p><span class="fw-bold">País de origen de la empresa/Inversión: </span> <span
                                    class="blur-content">asdasdasd</span></p>
                        @endif
                        <hr>
                    </div>
                </div>
                <div id="certifications_and_capacities">
                    <h4 class="custom-text-color">Certificaciones y capacidades</h4>
                    @if (Auth::guard('web')->check() || Auth::guard('admin')->check())
                        <p><span class="fw-bold">Certificaciones: </span> {{ $service->certifications }}</p>
                        <p><span class="fw-bold">Otras certificaciones: </span> {{ $service->others_certificacions }}
                        </p>
                    @else
                        <p><span class="fw-bold">Certificaciones: </span> <span class="blur-content">asdasdasd</span>
                        </p>
                        <p><span class="fw-bold">Otras certificaciones: </span> <span
                                class="blur-content">asdasdasd</span>
                        </p>
                    @endif
                    <hr>
                </div>
                <div id="other_data">
                    <h4 class="custom-text-color">Otros datos:</h4>
                    @if (Auth::guard('web')->check() || Auth::guard('admin')->check())
                        <p>
                            <span class="fw-bold">Redes sociales: </span>
                            @if ($service->facebook)
                                <a href="{{ strpos($service->facebook, 'http') === 0 ? $service->facebook : 'https://' . $service->facebook }}"
                                    class="text-decoration-none custom-text-color track-action" target="_blank"
                                    data-action-name="click_on_social_network" data-subaction-name="facebook"
                                    data-service-id="{{ $service->id }}">
                                    <i class="bi bi-facebook"></i>
                                </a>
                            @endif
                            @if ($service->twitter)
                                <a href="{{ strpos($service->twitter, 'http') === 0 ? $service->twitter : 'https://' . $service->twitter }}"
                                    class="text-decoration-none custom-text-color track-action" target="_blank"
                                    data-action-name="click_on_social_network" data-subaction-name="twitter"
                                    data-service-id="{{ $service->id }}">
                                    <i class="bi bi-twitter-x"></i>
                                </a>
                            @endif
                            @if ($service->linkedin)
                                <a href="{{ strpos($service->linkedin, 'http') === 0 ? $service->linkedin : 'https://' . $service->linkedin }}"
                                    class="text-decoration-none custom-text-color track-action" target="_blank"
                                    data-action-name="click_on_social_network" data-subaction-name="linkedin"
                                    data-service-id="{{ $service->id }}">
                                    <i class="bi bi-linkedin"></i>
                                </a>
                            @endif
                            @if ($service->youtube)
                                <a href="{{ strpos($service->youtube, 'http') === 0 ? $service->youtube : 'https://' . $service->youtube }}"
                                    class="text-decoration-none custom-text-color track-action" target="_blank"
                                    data-action-name="click_on_social_network" data-subaction-name="youtube"
                                    data-service-id="{{ $service->id }}">
                                    <i class="bi bi-youtube"></i>
                                </a>
                            @endif
                        </p>
                    @else
                        <div class="blur-container">
                            <p><span class="fw-bold">Redes sociales: </span> #</p>
                        </div>
                    @endif
                    @if (Auth::guard('admin')->check())
                        <p><span class="fw-bold">Visitas: </span> {{ $service->visits }}</p>
                    @endif
                    <hr>
                </div>
                <div id="categories">
                    <p>Categorías:
                        @if ($service->categories->count() > 0)
                            @foreach ($service->categories as $category)
                                <a
                                    href="{{ Route('showCategoryServices', $category->slug) }}">{{ $category->display_name }}</a>
                            @endforeach
                        @else
                            <p>No enlazada a una categoría</p>
                        @endif
                    </p>
                    <hr>
                </div>
                @if ($service->video_link)
                    <div class="row justify-content-center mt-4">
                        <div class="col-auto text-center ratio ratio-16x9">
                            <iframe class="embed-responsive-item" src="{{ $service->video_link }}"
                                title="YouTube video player" frameborder="0"
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                                referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>

    {{-- Make quote --}}
    <div class="modal fade" id="showContactForm" tabindex="-1" role="dialog" aria-labelledby="notLinkedModal"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable modal-md" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title text-success" id="notLinkedModal">Contactar con el vendedor
                    </h5>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Cerrar">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form autocomplete="off" id="makeQuoteForm" action="{{ Route('makeMailService') }}" method="post">
                        @csrf
                        <input type="hidden" name="serviceId" value="{{ $service->id }}">
                        <h5 class="fw-bold">Necesitamos algunos datos para que puedas contactar con el vendedor</h5><br>
                        <div class="mb-3 form-group">
                            <label for="contact" class="form-label">Nombre del solicitante</label>
                            <input type="text" class="form-control" name="contact" id="contact"
                                placeholder="Ingresa su nombre o de quien solicito la cotización" required>
                        </div>
                        <div class="mb-3 form-group">
                            <label for="bisnessName" class="form-label">Nombre de la empresa</label>
                            <input type="text" class="form-control" name="bisnessName" id="bisnessName"
                                placeholder="Ingresa el nombre de la empresa solicitante">
                        </div>
                        <div class="mb-3 form-group">
                            <label for="phone_number" class="form-label">Teléfono</label>
                            <input type="text" class="form-control" name="phone_number" id="phone_number"
                                placeholder="Ingresa el telefono" required>
                        </div>
                        <div class="mb-3 form-group">
                            <label for="email" class="form-label">Correo Electrónico</label>
                            <input type="email" class="form-control" name="email" id="email"
                                placeholder="Ingresa el correo de contacto" required>
                        </div>
                        <div class="mb-3 form-group">
                            <label for="contactMessage" class="form-label">Mensaje</label>
                            <textarea name="contactMessage" id="contactMessage" class="form-control" rows="5"
                                placeholder="Ingresa el mensaje que quieres dejar"></textarea>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-success" id="submitMakeQuoteForm">Enviar
                                solicitud</button>
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('custom_script')
    @vite('resources/js/services/contactService.js')
    @vite('resources/js/services/trackServices.js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-zoom/1.7.21/jquery.zoom.min.js"></script>
    <script>
        function changeImage(src) {
            document.getElementById('main-image').src = src;
        }
        $(document).ready(function() {
            var isTouchDevice = 'ontouchstart' in document.documentElement || navigator.maxTouchPoints > 0 ||
                navigator.msMaxTouchPoints > 0;
            if (!isTouchDevice) {
                $('.zoom').zoom({
                    on: 'mouseover',
                    touch: true,
                    magnify: 1.5,
                });
            } else {
                $('.zoom').zoom({
                    on: 'click',
                    touch: true,
                    magnify: 1.5,
                });
            }

            $('#main-image').elevateZoom({
                zoomType: "lens",
                lensShape: "round",
                lensSize: 200,
                scrollZoom: true,
                responsive: true
            });


            $(".copy-to-paste").on("click", function(e) {
                e.preventDefault();

                const link = $(this).data("contact-number");
                navigator.clipboard
                    .writeText(link)
                    .then(() => {
                        Toast.fire({
                            icon: "success",
                            title: "Se ha copiado al portapapeles",
                        });
                    })
                    .catch((err) => {
                        Toast.fire({
                            icon: "danger",
                            title: "Hubo un error al pasar los datos, revisa el log",
                        });
                        console.error("Error al copiar:", err);
                    });
            });
        });

        const Toast = Swal.mixin({
            toast: true,
            position: "top-end",
            showConfirmButton: false,
            timer: 2500,
            timerProgressBar: true,
            didOpen: (toast) => {
                toast.onmouseenter = Swal.stopTimer;
                toast.onmouseleave = Swal.resumeTimer;
            },
        });

        function changeImage(imageUrl) {
            var mainImage = $('#main-image');
            mainImage.attr('data-zoom-image', imageUrl);
            mainImage.attr('src', imageUrl);

            $('.zoomContainer').remove();
            //mainImage.removeData('elevateZoom');
            if (mainImage.data('zoomImage')) {
                mainImage.removeData('zoomImage');
            }
            setTimeout(function() {
                mainImage.elevateZoom({
                    zoomType: "lens",
                    lensShape: "round",
                    lensSize: 200,
                    scrollZoom: true,
                    responsive: true
                });
            }, 300);
        }
    </script>
@endsection