@extends('layouts.app')

@section('links')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
@endsection

@section('custom_style')
    <style>
        .card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        .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%;
        }

        .limit-text {
            display: -webkit-box;
            -webkit-line-clamp: 3;
            /* lines */
            -webkit-box-orient: vertical;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .text-container {
            max-width: 400px;
        }

        .toggle-btn {
            background: none;
            border: none;
            color: #007bff;
            padding: 0;
            cursor: pointer;
            font-weight: bold;
        }
    </style>
@endsection

@section('content')
    <div class="container py-5">
        {{-- Header --}}
        <div class="text-center mb-5">
            <h1 class="custom-text-color h2">{{ $title }}</h1>
            @if ($services->count() > 0)
                <p class="text-muted">
                    @if (isset($search))
                        <a href="{{ route('services') }}" class="text-decoration-none text-secondary animated-link h4">
                            Regresar a la página de inicio <span><i class="bi bi-house"></i></span>
                        </a>
                    @else
                        Descubre lo que tenemos para ti
                    @endif
                </p>
            @else
                <a href="{{ route('services') }}" class="text-decoration-none text-secondary animated-link h4">
                    Regresar a la página de inicio <span><i class="bi bi-house"></i></span>
                </a>
            @endif
        </div>

        <div class="row">
            <div class="d-md-none">
                <form method="GET" action="{{ route('searchServiceByCategory') }}" class="mb-4">
                    <h5 class="mb-3 custom-text-color">Buscar por Categoría/Estado</h5>
                    <div class="mb-3">
                        <select name="categorias[]" class="form-control select2" multiple>
                            @foreach ($allCategories as $category)
                                <option value="{{ $category->id }}"
                                    {{ in_array($category->id, request('categorias', [])) ? 'selected' : '' }}>
                                    {{ $category->display_name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-3">
                        @php
                            $states = [
                                'Aguascalientes',
                                'Baja California',
                                'Baja California Sur',
                                'Campeche',
                                'Chiapas',
                                'Chihuahua',
                                'Ciudad de México',
                                'Coahuila',
                                'Colima',
                                'Durango',
                                'Guanajuato',
                                'Guerrero',
                                'Hidalgo',
                                'Jalisco',
                                'Estado de México',
                                'Michoacán',
                                'Morelos',
                                'Nayarit',
                                'Nuevo León',
                                'Oaxaca',
                                'Puebla',
                                'Querétaro',
                                'Quintana Roo',
                                'San Luis Potosí',
                                'Sinaloa',
                                'Sonora',
                                'Tabasco',
                                'Tamaulipas',
                                'Tlaxcala',
                                'Veracruz',
                                'Yucatán',
                                'Zacatecas',
                            ];
                        @endphp
                        <select class="form-control @error('state') is-invalid @enderror" name="state">
                            <option value="" disabled {{ request('state') ? '' : 'selected' }}>Selecciona un
                                estado
                            </option>
                            @foreach ($states as $state)
                                <option value="{{ $state }}" {{ request('state') == $state ? 'selected' : '' }}>
                                    {{ $state }}</option>
                            @endforeach
                        </select>
                    </div>

                    <button type="submit" class="btn custom-bg-color w-100">Buscar</button>
                </form>
            </div>
            {{-- Categories section --}}
            <aside class="col-lg-3 mb-4 order-2 order-lg-1">
                <div class="d-none d-md-block">
                    <form method="GET" action="{{ route('searchServiceByCategory') }}" class="mb-4">
                        <h5 class="mb-3 custom-text-color">Buscar por Categoría/Estado</h5>
                        <div class="mb-3">
                            <select name="categorias[]" class="form-control select2" multiple>
                                @foreach ($allCategories as $category)
                                    <option value="{{ $category->id }}"
                                        {{ in_array($category->id, request('categorias', [])) ? 'selected' : '' }}>
                                        {{ $category->display_name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="mb-3">
                            @php
                                $states = [
                                    'Aguascalientes',
                                    'Baja California',
                                    'Baja California Sur',
                                    'Campeche',
                                    'Chiapas',
                                    'Chihuahua',
                                    'Ciudad de México',
                                    'Coahuila',
                                    'Colima',
                                    'Durango',
                                    'Guanajuato',
                                    'Guerrero',
                                    'Hidalgo',
                                    'Jalisco',
                                    'Estado de México',
                                    'Michoacán',
                                    'Morelos',
                                    'Nayarit',
                                    'Nuevo León',
                                    'Oaxaca',
                                    'Puebla',
                                    'Querétaro',
                                    'Quintana Roo',
                                    'San Luis Potosí',
                                    'Sinaloa',
                                    'Sonora',
                                    'Tabasco',
                                    'Tamaulipas',
                                    'Tlaxcala',
                                    'Veracruz',
                                    'Yucatán',
                                    'Zacatecas',
                                ];
                            @endphp
                            <select class="form-control @error('state') is-invalid @enderror" name="state">
                                <option value="" disabled {{ request('state') ? '' : 'selected' }}>Selecciona un
                                    estado
                                </option>
                                @foreach ($states as $state)
                                    <option value="{{ $state }}"
                                        {{ request('state') == $state ? 'selected' : '' }}>
                                        {{ $state }}</option>
                                @endforeach
                            </select>
                        </div>

                        <button type="submit" class="btn custom-bg-color w-100">Buscar</button>
                    </form>
                </div>
                <hr>
                <div class="bg-light p-4 rounded shadow-sm">
                    <h5 class="mb-3 custom-text-color fw-semibold">Categorías</h5>
                    <div class="list-group">
                        @if ($categories->isEmpty())
                            <p class="text-muted">No hay categorías disponibles.</p>
                        @else
                            @foreach ($categories as $category)
                                <a href="{{ route('showCategoryServices', $category->slug) }}"
                                    class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                                    {{ $category->display_name }}
                                    <span
                                        class="badge bg-secondary">{{ $category->services()->where('draft', false)->count() }}</span>
                                </a>
                            @endforeach
                            <a href="{{ route('servicesCategories') }}"
                                class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                                Ver mas...
                            </a>
                        @endif
                    </div>
                </div>
            </aside>

            {{-- Services section --}}
            <section class="col-lg-9 order-1 order-lg-2">
                @if ($services->isEmpty())
                    <div class="alert alert-secondary text-center">
                        <strong>No hay servicios disponibles actualmente.</strong>
                    </div>
                @else
                    <div class="row g-4">
                        @isset($pinService)
                            <div class="col-6 col-sm-6 col-md-6 col-xl-4">
                                <div class="card h-100 shadow-sm border-0 rounded-4 overflow-hidden">
                                    <a href="{{ route('showService', $pinService->slug) }}">
                                        <div class="bg-light d-flex align-items-center justify-content-center"
                                            style="height: 200px;">
                                            @if ($pinService->logo)
                                                <img src="{{ Asset('uploads/services/' . $pinService->logo) }}"
                                                    alt="Sin imagen" class="img-fluid"
                                                    style="max-height: 200px; object-fit:contain;">
                                            @else
                                                @isset($pinService->images->first()->image)
                                                    <img src="{{ asset('uploads/services/' . $pinService->images->first()->image) }}"
                                                        alt="{{ $pinService->service_name }}" class="img-fluid"
                                                        style="max-height: 200px; object-fit: contain;">
                                                @else
                                                    <span class="text-muted">Sin imagen</span>
                                                @endisset
                                            @endif
                                        </div>
                                    </a>
                                    <div class="card-body">
                                        <a href="{{ route('showService', $pinService->slug) }}"
                                            class="text-decoration-none text-dark">
                                            <div
                                                class="d-flex flex-column flex-sm-row align-items-start justify-content-between mb-2">
                                                <h5 class="fw-bold mb-1 text-break">{{ $pinService->service_name }}</h5>
                                                <span class="badge bg-secondary text-uppercase">{{ $pinService->state }}</span>
                                            </div>
                                            {{-- <p class="text-muted mb-0">{{ $service->short_description }}</p> --}}
                                            <div class="text-container">
                                                <p class="text limit-text">
                                                    {{ $pinService->short_description }}
                                                </p>
                                                <button class="toggle-btn text-secondary" style="display:none;">Ver más</button>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        @endisset
                        @foreach ($services as $service)
                            <div class="col-6 col-sm-6 col-md-6 col-xl-4">
                                <div class="card h-100 shadow-sm border-0 rounded-4 overflow-hidden">
                                    <a href="{{ route('showService', $service->slug) }}">
                                        <div class="bg-light d-flex align-items-center justify-content-center"
                                            style="height: 200px;">
                                            @if ($service->logo)
                                                <img src="{{ Asset('uploads/services/' . $service->logo) }}"
                                                    alt="Sin imagen" class="img-fluid"
                                                    style="max-height: 200px; object-fit: contain;">
                                            @else
                                                @isset($service->images->first()->image)
                                                    <img src="{{ asset('uploads/services/' . $service->images->first()->image) }}"
                                                        alt="{{ $service->service_name }}" class="img-fluid"
                                                        style="max-height: 200px; object-fit: contain;">
                                                @else
                                                    <span class="text-muted">Sin imagen</span>
                                                @endisset
                                            @endif
                                        </div>
                                    </a>
                                    <div class="card-body">
                                        <a href="{{ route('showService', $service->slug) }}"
                                            class="text-decoration-none text-dark">
                                            <div
                                                class="d-flex flex-column flex-sm-row align-items-start justify-content-between mb-2">
                                                <h5 class="fw-bold mb-1 text-break">{{ $service->service_name }}</h5>
                                                <span
                                                    class="badge bg-secondary text-uppercase">{{ $service->state }}</span>
                                            </div>
                                            {{-- <p class="text-muted mb-0">{{ $service->short_description }}</p> --}}
                                            <div class="text-container">
                                                <p class="text limit-text">
                                                    {{ $service->short_description }}
                                                </p>
                                                <button class="toggle-btn text-secondary" style="display:none;">Ver
                                                    más</button>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif

                @php
                    $user = Auth::guard('web')->user();

                @endphp

                @if (!isset($user->service))
                    <div class="alert custom-bg-color text-center rounded-4 shadow-sm p-4 mt-5">
                        <h5 class="mb-3">¿Te gustaría promocionar tus servicios con nosotros?</h5>
                        <a href="{{ route('showSuscriptions') }}" class="btn btn-outline-light px-4 py-2 rounded-pill">
                            ¡Haz clic aquí!
                        </a>
                    </div>
                @endif
            </section>
        </div>
    </div>
@endsection
@section('custom_script')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(document).ready(function() {
            $(".select2").select2({
                placeholder: "Seleccione una categoría",
                multiple: true,
                allowClear: true
            });
        });
        document.querySelectorAll('.text-container').forEach(container => {
            const text = container.querySelector('.text');
            const button = container.querySelector('.toggle-btn');

            // Mostrar el botón solo si el texto se desborda
            if (text.scrollHeight > text.clientHeight + 5) {
                button.style.display = 'inline';
            }

            button.addEventListener('click', event => {
                event.preventDefault();
                event.stopPropagation();

                text.classList.toggle('limit-text');
                button.textContent = text.classList.contains('limit-text') ? 'Ver más' : 'Ver menos';
            });
        });
    </script>
@endsection