@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" />
    <meta name="csrf-token" content="{{ csrf_token() }}">
@endsection

@section('content')
    <div class="container-fluid my-3">
        <div id="title mt-3">
            @if ($service->service_name == 'nombre de ejemplo' || session()->has('successMessage'))
                <h2 class="text-center mb-4">Datos de la empresa</h2>
                <p class="text-center">Falta poco, completa estos datos para poder publicar tu empresa en la página</p>
            @else
                <h2 class="text-center mb-4">Datos completos</h2>
            @endif
            @if (session()->has('successMessage'))
                <div class="alert alert-info justify-content-center container">
                    {{ session('successMessage') }}
                </div>
            @endif
            @if (session()->has('publishMessage') && !session()->has('successMessage'))
                <div class="alert alert-success justify-content-center container">
                    {{ session('publishMessage') }}
                </div>
            @endif
        </div>
        @if ($service->service_name == 'nombre de ejemplo' || $service->can_edit == true)
            <form action="{{ route('storeServiceSuscription') }}" method="POST" enctype="multipart/form-data"
                id="makeServiceForm">
                @csrf
                <input type="hidden" name="suscription_id" value="{{ $service->suscription_id }}">
                <input type="hidden" name="serviceId" value="{{ $service->id }}">
                <div class="row justify-content-center">
                    <!-- Service Information -->
                    <div id="serviceInformation" class="col-md-10 mb-4 block" data-target-info="serviceInformation">
                        <div class="card shadow-sm">
                            <div class="card-header custom-bg-color text-white">
                                <h4>Información de la empresa</h4>
                                <small>*Datos Requeridos</small>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Razón social</label>
                                        <input type="text" name="company_type"
                                            class="form-control @error('company_type') is-invalid @enderror" required
                                            maxlength="100" placeholder="Ej. desarrollo de proyectos, Automatización, etc."
                                            value="{{ old('company_type') ?? $service->company_type != 'empresa' ? $service->company_type : '' }}">
                                        @error('company_type')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Nombre comercial</label>
                                        <input type="text" name="service_name" id="service_name"
                                            class="form-control @error('service_name') is-invalid @enderror" required
                                            maxlength="100" placeholder="El nombre de la empresa"
                                            value="{{ old('service_name') ?? $service->service_name != 'nombre de ejemplo' ? $service->service_name : '' }}">
                                        @error('service_name')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Correo Electrónico</label>
                                        <input type="email" name="email"
                                            class="form-control @error('email') is-invalid @enderror" required
                                            maxlength="100" placeholder="{{ Auth::user()->email }}"
                                            value="{{ old('email') ?? $service->email }}">
                                        @error('email')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Número de Contacto</label>
                                        <input type="text" name="contact_number"
                                            class="form-control @error('contact_number') is-invalid @enderror" required
                                            pattern="\d{10}" title="Debe contener solo 10 digitos" maxlength="10"
                                            placeholder="Número de contacto"
                                            value="{{ old('contact_number') ?? $service->contact_number != 'numero de contacto' ? $service->contact_number : '' }}">
                                        @error('contact_number')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-4 mb-3">
                                        <label class="form-label">Año de Inicio</label>
                                        <input type="number" name="start_operations_year"
                                            class="form-control @error('start_operations_year') is-invalid @enderror"
                                            min="1900" max="{{ date('Y') }}"
                                            placeholder="Año en que comenzó operaciones"
                                            value="{{ old('start_operations_year') ?? $service->start_operations_year }}">
                                        @error('start_operations_year')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label class="form-label">País de Origen</label>
                                        <input type="text" name="origin_country"
                                            class="form-control @error('origin_country') is-invalid @enderror"
                                            maxlength="100" placeholder="País de origen de la empresa"
                                            value="{{ old('origin_country') ?? $service->origin_country }}">
                                        @error('origin_country')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label class="form-label">Productos y servicios Principales</label>
                                        <textarea name="main_products" class="form-control @error('main_products') is-invalid @enderror" rows="2"
                                            maxlength="255" placeholder="Lo mas destacado que venden o proveen">{{ old('main_products') ?? $service->main_products != 'productos principales' ? $service->main_products : '' }}</textarea>
                                        @error('main_products')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Contact Information -->
                    <div id="contactInformation" class="col-md-10 mb-4 block" data-target-info="contactInformation">
                        <div class="card shadow-sm">
                            <div class="card-header custom-bg-color text-white">
                                <h4>Domicilio</h4>
                                <small>*Datos necesarios</small>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-4 mb-3">
                                        <label class="form-label">País</label>
                                        <input type="text" name="country"
                                            class="form-control @error('country') is-invalid @enderror" maxlength="100"
                                            placeholder="País donde se encuentra la empresa"
                                            value="{{ old('country') ?? $service->country == 'country' || $service->country == 'por definir' ? '' : $service->country }}"
                                            required>
                                        @error('country')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label class="form-label">Código Postal</label>
                                        <input type="text" name="postal_code"
                                            class="form-control @error('postal_code') is-invalid @enderror"
                                            pattern="\d{4,10}" title="Código postal no válido"
                                            placeholder="Código postal"
                                            value="{{ old('postal_code') ?? $service->postal_code == 'postal_code' || $service->postal_code == '00000' ? '' : $service->postal_code }}"
                                            required>
                                        @error('postal_code')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label class="form-label">Ciudad</label>
                                        <input type="text" name="city"
                                            class="form-control @error('city') is-invalid @enderror" maxlength="100"
                                            placeholder="Ciudad"
                                            value="{{ old('city') ?? $service->city == 'city' ? '' : $service->city }}"
                                            required>
                                        @error('city')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-3 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
                                        <label class="form-label">Estado</label>
                                        <select class="form-control @error('state') is-invalid @enderror" name="state"
                                            required>
                                            <option value="" disabled {{ $service->state ? '' : 'selected' }}>
                                                Selecciona un estado</option>
                                            @foreach ($states as $state)
                                                <option value="{{ $state }}"
                                                    {{ $service->state == $state ? 'selected' : '' }}>{{ $state }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('state')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-3 mb-3">
                                        <label class="form-label">Calle</label>
                                        <input type="text" name="street"
                                            class="form-control @error('street') is-invalid @enderror" maxlength="150"
                                            placeholder="Calle"
                                            value="{{ old('street') ?? $service->street == 'street' || $service->street == 'por definir' ? '' : $service->street }}"
                                            required>
                                        @error('street')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-3 mb-3">
                                        <label class="form-label">Colonia</label>
                                        <input type="text" name="colony"
                                            class="form-control @error('colony') is-invalid @enderror" maxlength="100"
                                            placeholder="Colonia"
                                            value="{{ old('colony') ?? $service->colony == 'colony' || $service->colony == 'por definir' ? '' : $service->colony }}"
                                            required>
                                        @error('colony')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-3 mb-3">
                                        <label class="form-label">Covertura <small>*Opcional</small></label>
                                        <input type="text" name="coverage"
                                            class="form-control @error('coverage') is-invalid @enderror" maxlength="150"
                                            placeholder="Hasta donde cubre tu servicio"
                                            value="{{ old('coverage') ?? $service->coverage != 'coverage' ? $service->coverage : '' }}">
                                        @error('coverage')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Business Details -->
                    <div id="businessDetails" class="col-md-10 mb-4 block" data-target-info="businessDetails">
                        <div class="card shadow-sm">
                            <div class="card-header custom-bg-color text-white">
                                <h4>Detalles del Negocio</h4>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-4 mb-3">
                                        <label class="form-label">Categoría *Requerido</label>
                                        <select name="services_category[]"
                                            class="form-control select2 @error('services_category') is-invalid @enderror"
                                            multiple required>
                                            @foreach ($categories as $category)
                                                <option value="{{ $category->id }}"
                                                    {{ in_array($category->id, old('services_category', $service->categories->pluck('id')->toArray() ?? [])) ? 'selected' : '' }}>
                                                    {{ $category->display_name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('services_category')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label class="form-label">Brochure (PDF) *opcional</label>
                                        <input type="file" name="brochure_pdf"
                                            class="form-control @error('brochure_pdf') is-invalid @enderror"
                                            accept="application/pdf">
                                        <small class="custom-text-color">Es necesario volver a agregar el archivo si se
                                            refresca la página</small>
                                        @error('brochure_pdf')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label class="form-label">Link de su sitio web *opcional</label>
                                        <input type="url" name="redirect_link"
                                            class="form-control @error('redirect_link') is-invalid @enderror"
                                            maxlength="255" placeholder="https://www.tusitio.com"
                                            value="{{ old('redirect_link', $service->redirect_link != 'link de redireccion' ? $service->redirect_link : '') }}">
                                        @error('redirect_link')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Descripción Corta *requerido</label>
                                        <textarea name="short_description" class="form-control @error('short_description') is-invalid @enderror"
                                            rows="2" maxlength="255" placeholder="Una descripción breve de la empresa" required>{{ old('short_description', $service->short_description != 'descripcion corta' ? $service->short_description : '') }}</textarea>
                                        @error('short_description')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Descripción Completa *requerido</label>
                                        <textarea name="description" class="form-control @error('description') is-invalid @enderror" rows="2"
                                            maxlength="1000" placeholder="Descripción en detalle de lo que hace tu empresa" required>{{ old('description', $service->description != 'descripcion larga' ? $service->description : '') }}</textarea>
                                        @error('description')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="row">
                                    <small>Horarios laborales *opcional</small>
                                    <div class="col-md-4 mb-3">
                                        <label for="working_hours">Horario:</label>
                                        <input type="text" class="form-control" name="working_hours"
                                            id="working_hours" placeholder="Ejemplo: de 08:00 a 21:00"
                                            value="{{ old('working_hours', $service->working_hours) }}">
                                        @error('working_hours')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-8 mb-3">
                                        <label for="attention_time">Tiempo promedio de atención:</label>
                                        <input type="text" class="form-control" name="attention_time"
                                            id="attention_time"
                                            placeholder="Ingresa el tiempo promedio de atención para el servicio"
                                            value="{{ old('attention_time', $service->attention_time != 'tiempo de atencion' ? $service->attention_time : '') }}">
                                        @error('attention_time')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- General Information -->
                    <div id="generalInformation" class="col-md-10 mb-4 block" data-target-info="generalInformation">
                        <div class="card shadow-sm">
                            <div class="card-header custom-bg-color text-white">
                                <h4>Informacion general</h4>
                                <small>*Datos opcionales</small>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <h5>Generales</h5>
                                    <div class="mb-4 col-md-4">
                                        <label for="payment_facilities">Facilidades de pago:</label>
                                        <input type="text" class="form-control" name="payment_facilities"
                                            id="payment_facilities"
                                            placeholder="Facilidades con las que cuentan para los clientes"
                                            value="{{ old('payment_facilities', $service->payment_facilities != 'facilidades de pago' ? $service->payment_facilities : '') }}">
                                        @error('payment_facilities')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="mb-4 col-md-4">
                                        <label for="main_processes">Procesos Principales:</label>
                                        <input type="text" class="form-control" name="main_processes"
                                            id="main_processes" placeholder="Procesos principales que hacen"
                                            value="{{ old('main_processes', $service->main_processes) }}">
                                        @error('main_processes')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="mb-4 col-md-4">
                                        <label for="machinery_available">Maquinaria con la que cuenta:</label>
                                        <input type="text" class="form-control" name="machinery_available"
                                            id="machinery_available" placeholder="Maquinaria que esta en su empresa"
                                            value="{{ old('machinery_available', $service->machinery_available) }}">
                                        @error('machinery_available')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="mb-4 col-md-4">
                                        <label for="production_capacity">Capacidad de producción:</label>
                                        <input type="text" class="form-control" name="production_capacity"
                                            id="production_capacity" placeholder="Cuanto hacen por producción"
                                            value="{{ old('production_capacity', $service->production_capacity) }}">
                                        @error('production_capacity')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="mb-4 col-md-4">
                                        <label for="imported_products">Productos importados:</label>
                                        <input type="text" class="form-control" name="imported_products"
                                            id="imported_products" placeholder="Productos que importan"
                                            value="{{ old('imported_products', $service->imported_products) }}">
                                        @error('imported_products')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="mb-4 col-md-4">
                                        <label for="employees_number">Numeros de empleados:</label>
                                        <input type="text" class="form-control" name="employees_number"
                                            id="employees_number" placeholder="Numero de empleados actual"
                                            value="{{ old('employees_number', $service->employees_number) }}">
                                        @error('employees_number')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="mb-4 col-md-4">
                                        <label for="sales_volume">Volumen de ventas:</label>
                                        <input type="text" class="form-control" name="sales_volume" id="sales_volume"
                                            placeholder="Volumen de ventas"
                                            value="{{ old('sales_volume', $service->sales_volume) }}">
                                        @error('sales_volume')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="mb-4 col-md-4">
                                        <label for="industrial_specialties">Especialidad industrial:</label>
                                        <input type="text" class="form-control" name="industrial_specialties"
                                            id="industrial_specialties" placeholder="En lo que se especializan"
                                            value="{{ old('industrial_specialties', $service->industrial_specialties) }}">
                                        @error('industrial_specialties')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="mb-4 col-md-4">
                                        <label for="principal_clients">Clientes principales:</label>
                                        <input type="text" class="form-control" name="principal_clients"
                                            id="principal_clients" placeholder="Clientes prioritarios que tienen"
                                            value="{{ old('principal_clients', $service->principal_clients) }}">
                                        @error('principal_clients')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Capacities and certifications -->
                    <div id="capacitiesCertificacions" class="col-md-10 mb-4 block"
                        data-target-info="capacitiesCertificacions">
                        <div class="card shadow-sm">
                            <div class="card-header custom-bg-color text-white">
                                <h4>Capacidades y certificaciones </h4>
                                <small>*Datos opcionales</small>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <h5>Certificaciones</h5>
                                    <div class="mb-4 col-md-6">
                                        <label for="certifications">Certificaciones:</label>
                                        @php
                                            $selected = old('certifications', $service->certifications ?? '');
                                        @endphp

                                        <select name="certifications" id="certifications"
                                            class="form-control @error('certifications') is-invalid @enderror">
                                            <option value="" disabled {{ $selected == '' ? 'selected' : '' }}>
                                                Selecciona una*</option>
                                            <option value="ISO 9001" {{ $selected == 'ISO 9001' ? 'selected' : '' }}>ISO
                                                9001</option>
                                            <option value="ISO 14001" {{ $selected == 'ISO 14001' ? 'selected' : '' }}>ISO
                                                14001</option>
                                            <option value="ISO/TS 6949 -IATF-16949"
                                                {{ $selected == 'ISO/TS 6949 -IATF-16949' ? 'selected' : '' }}>
                                                ISO/TS 6949 -IATF-16949
                                            </option>
                                            <option value="PAS" {{ $selected == 'PAS' ? 'selected' : '' }}>PAS</option>
                                            <option value="VDA 6" {{ $selected == 'VDA 6' ? 'selected' : '' }}>VDA 6
                                            </option>
                                            <option value="C-TPAT" {{ $selected == 'C-TPAT' ? 'selected' : '' }}>C-TPAT
                                            </option>
                                            <option value="APQP/PPAP" {{ $selected == 'APQP/PPAP' ? 'selected' : '' }}>
                                                APQP/PPAP</option>
                                        </select>
                                        @error('certifications')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="mb-3 col-md-6">
                                        <label for="others_certificacions">Otras certificaciones:</label>
                                        <input type="text" class="form-control" name="others_certificacions"
                                            id="others_certificacions" placeholder="ISO-3008, ISO-9005, ISO-9008"
                                            value="{{ old('others_certificacions', $service->others_certificacions) }}">
                                        <small>Se detalla a escala otras certificaciones que no entren en el campo de
                                            al lado</small>
                                        @error('others_certificacions')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Social Media -->
                    <div id="socialMedia" class="col-md-10 mb-4" data-target-info="socialMedia">
                        <div class="card shadow-sm">
                            <div class="card-header custom-bg-color text-white">
                                <h4>Redes Sociales</h4>
                                <small>* Datos opcionales</small>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-3 mb-3">
                                        <label class="form-label">Facebook</label>
                                        <input type="url" name="facebook"
                                            class="form-control @error('facebook') is-invalid @enderror" maxlength="255"
                                            placeholder="https://www.facebook.com/tuempresa"
                                            value="{{ old('facebook', $service->facebook) }}">
                                        @error('facebook')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-3 mb-3">
                                        <label class="form-label">X (Anteriormente twitter)</label>
                                        <input type="url" name="twitter"
                                            class="form-control @error('twitter') is-invalid @enderror" maxlength="255"
                                            placeholder="https://www.x.com/tuempresa"
                                            value="{{ old('twitter', $service->twitter) }}">
                                        @error('twitter')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-3 mb-3">
                                        <label class="form-label">LinkedIn</label>
                                        <input type="url" name="linkedin"
                                            class="form-control @error('linkedin') is-invalid @enderror" maxlength="255"
                                            placeholder="https://www.linkedin.com/tuempresa"
                                            value="{{ old('linkedin', $service->linkedin) }}">
                                        @error('linkedin')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-3 mb-3">
                                        <label class="form-label">Youtube</label>
                                        <input type="url" name="youtube"
                                            class="form-control @error('youtube') is-invalid @enderror" maxlength="255"
                                            placeholder="https://www.youtube.com/tuempresa"
                                            value="{{ old('youtube', $service->youtube) }}">
                                        @error('youtube')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Extras -->
                    <div id="extras" class="col-md-10 mb-4 block" data-target-info="extras">
                        <div class="card shadow-sm">
                            <div class="card-header custom-bg-color text-white">
                                <h4>Extras</h4>
                                <small>Es necesario volver a agregar el/los archivos si se refresca la página</small>
                            </div>
                            <div class="card-body">
                                <div class="row align-items-start">
                                    <div class="col-md-4 mb-3">
                                        <label for="serviceLogo" class="form-label">Sube el logo de tu empresa</label>
                                        <input type="file" name="serviceLogo" id="serviceLogo" class="form-control">
                                        <small>El logotipo tiene que ser de la mejor calidad, evita que sea de muy baja
                                            resolución porque quedara mal dentro de su recuadro</small>
                                        @isset($service->logo)
                                            <div class="mt-2">
                                                <h5>Logotipo actual:</h5>
                                                <img src="{{ Asset('uploads/services/' . $service->logo) }}"
                                                    alt="Logotipo de empresa" class="img-thumbnail"
                                                    style="width: 100px; height:100px;">
                                            </div>
                                        @endisset
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label class="form-label">Sube aqui las imagenes de la empresa *Requerido</label>
                                        <input type="file" name="images[]" class="form-control" multiple
                                            accept="image/*">
                                        <small>Como dato adicional; La primera imagen que se suba sera la que se muestre al
                                            presentar la empresa y sube imagenes con las mismas dimensiones para evitar
                                            problemas</small>
                                        @if ($service->images->count() > 0)
                                            <div class="mt-2">
                                                <h5>Imágenes actuales:</h5>
                                                @foreach ($service->images as $image)
                                                    <img src="{{ asset('uploads/services/' . $image->image) }}"
                                                        alt="Imagen de la empresa" class="img-thumbnail"
                                                        style="width: 100px; height: 100px;">
                                                @endforeach
                                            </div>
                                            <small class="text-danger">Si subes nuevas imagenes, se sobreescribiran las
                                                imagenes que ya esten</small>
                                        @endif
                                        @error('images')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    @if ($service->suscription_type == 'ultimate')
                                        <div class="mb-3 col-md-4 mt-4">
                                            <label for="video_link">Link de video *requerido:</label>
                                            <input type="text" name="video_link" id="video_link" class="form-control"
                                                placeholder="Ingrese un link de video"
                                                value="{{ old('video_link', $service->video_link) }}" required>
                                            @error('video_link')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    @endif
                                    {{-- <div class="mb-3 col-md-4">
                                        <label for="location_iframe">Localización del servicio (opcional):</label>
                                        <input type="text" name="location_iframe" id="location_iframe"
                                            class="form-control" placeholder="Ingresa la localización"
                                            value="{{ old('location_iframe', $service->location_iframe) }}">
                                        @error('location_iframe')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div> --}}
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Submit Button -->
                    <div class="col-md-10 text-center">
                        <button type="submit" class="btn custom-bg-color w-50">Guardar Información</button>
                    </div>

                </div>
            </form>
        @endif
    </div>
    <div id="autosave-spinner" class="position-fixed bottom-0 end-0 m-3 d-none custom-text-color" style="z-index: 1050;">
        <div class="spinner-border" role="status" style="width: 2rem; height: 2rem;">
            <span class="visually-hidden">Guardando...</span>
        </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>
    @vite('resources/js/services/suscriptions/autosaveSubs.js')
    <script>
        $(document).ready(function() {
            $(".select2").select2({
                placeholder: "Seleccione una opción",
                multiple: true,
                allowClear: true
            });
        });
    </script>
@endsection