@extends('web.sections.profile.layout')
@section('content')
    <section id="create_business">
        <div class="container-xl relative pb-20">
            <header>
                <h2 class="text-2xl font-medium text-gray-900 dark:text-gray-100">
                    {{ request()->routeIs('business.create') ? 'Crear Negocio' : 'Editar Negocio' }}
                </h2>
                <!--Breadcrumb-->
                <nav class="w-full rounded-md">
                    <ol class="list-reset flex">
                        <li>
                            <x-link href="#" class="text-neutral-500">Inicio</x-link>
                        </li>
                        <li>
                            <span class="mx-2 text-neutral-500 dark:text-neutral-400">/</span>
                        </li>
                        <li>
                            <x-link href="#" class="text-neutral-500">Mis negocios</x-link>
                        </li>
                        <li>
                            <span class="mx-2 text-neutral-500 dark:text-neutral-400">/</span>
                        </li>
                        <li>
                            <x-link href="#" class="text-rose-700"> {{ request()->routeIs('business.create') ? 'Crear negocio' : 'Editar negocio' }}</x-link>
                        </li>
                    </ol>
                </nav>
                <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                    Asegurese de que su informacion sea precisa, agrega detalles adicionales, descripción, horario de atención, y fotografías.
                </p>
            </header>

            <div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mt-5 {{ $qty_business >= 3 && request()->routeIs('business.create') ? null: 'hidden' }}" role="alert">
                <p class="font-bold"><i class="fas fa-exclamation"></i> Alerta</p>
                <p>Usted ya posee 3 negocios, no es posible crear más.</p>
            </div>

            <form id="business_edit_form" method="post" enctype="multipart/form-data" action="#" class="mt-6 space-y-6">
                <div id="business_create_information" class="block rounded-lg bg-white p-6 mt-5 shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700">
                    <h5 class="mb-2 pb-1 font-medium leading-tight text-neutral-800 dark:text-neutral-50">
                        <i class="fa-solid fa-circle-info text-rose-500"></i> Información negocio
                    </h5>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div class="col-span-2">
                            <x-input-large id="input_business-name" name="name" type="text" class="mt-1 block w-full" :value="old('name', $business->name ?? null)" placeholder="Nombre Negocio" required />
                            <span id="name_error" class="text-rose-500 text-xs ml-3 hidden">Campo obligatorio</span>
                        </div>
                        <div class="md:col-span-1 col-span-2 mt-1">
                            <select data-te-select-init data-te-select-size="lg" data-te-select-init data-te-select-filter="true" id="categories_id" name="categories_id" required>
                                {{ category_list( old('categories_id', $business->categories_id ?? null) ) }}
                            </select>
                            <label data-te-select-label-ref>Categoría</label>
                            <span id="categories_id_error" class="text-rose-500 text-xs ml-3 hidden">Campo obligatorio</span>
                        </div>
                        <div class="md:col-md-2 col-span-1">
                            <x-input-large id="input_business-keywords" name="keywords" type="text" class="mt-1 block w-full" :value="old('keywords', $business->keywords ?? null)" placeholder="Palabras clave*" required/>
                            <div class="text-neutral-400 text-xs leading-normal ml-2">*Ingresa palabras separadas por coma (,) que describan tu negocio. Así ayudarán al motor de búsqueda a encontrar información relevante más fácilmente.</div>
                            <span id="keywords_error" class="text-rose-500 text-xs ml-3 hidden">Campo obligatorio</span>
                        </div>
                        <div class="col-span-2 mb-3">
                            <div id="wysiwyg">{!! old('description', $business->description ?? null) !!}</div>
                            <textarea maxlength="2000" id="textarea_business-description" name="description" class="hidden"></textarea>
                            <span id="description_error" class="text-rose-500 text-xs ml-3 hidden">Campo obligatorio</span>
                        </div>
                    </div>
                </div>

                <div id="business_create_social" class="block rounded-lg bg-white p-6 mt-5 shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700">
                    <h5 class="mb-2 pb-1 font-medium leading-tight text-neutral-800 dark:text-neutral-50">
                        <i class="fa-solid fa-share-nodes text-rose-500"></i> Redes sociales
                    </h5>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <x-input-large id="input_business-facebook" name="facebook" type="url"
                                class="mt-1 block w-full" :value="old('facebook', $business->facebook ?? null)" placeholder="Facebook" />
                        </div>
                        <div>
                            <x-input-large id="input_business-twitter" name="x" type="url"
                                class="mt-1 block w-full" :value="old('x', $business->twitter ?? null)" placeholder="X" />
                        </div>
                        <div>
                            <x-input-large id="input_business-instagram" name="instagram" type="url"
                                class="mt-1 block w-full" :value="old('instagram', $business->instagram ?? null)" placeholder="Instagram" />
                        </div>
                        <div>
                            <x-input-large id="input_business-tiktok" name="tiktok" type="url"
                                class="mt-1 block w-full" :value="old('tiktok', $business->tiktok ?? null)" placeholder="Tiktok" />
                        </div>
                        <div>
                            <x-input-large id="input_business-mercadolibre" name="mercadolibre" type="url"
                                class="mt-1 block w-full" :value="old('mercadolibre', $business->mercadolibre ?? null)" placeholder="Mercado Libre" />
                        </div>
                        <div>
                            <x-input-large id="input_business-yapo" name="yapo" type="url"
                                class="mt-1 block w-full" :value="old('yapo', $business->yapo ?? null)" placeholder="Yapo" />
                        </div>
                        <div>
                            <x-input-large id="input_business-aliexpress" name="aliexpress" type="url"
                                class="mt-1 block w-full" :value="old('aliexpress', $business->aliexpress ?? null)" placeholder="Aliexpress" />
                        </div>
                    </div>

                </div>

                <div id="business_create_ubication" class="block rounded-lg bg-white p-6 mt-5 shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700">
                    <h5 class="mb-2 pb-1 font-medium leading-tight text-neutral-800 dark:text-neutral-50">
                        <i class="fa-solid fa-map-location text-rose-500"></i> Ubicación
                    </h5>
                    <div class="grid grid-cols-12 md:grid-cols-12 gap-4">

                        <!-- MAP -->
                        <div class="col-span-8 relative">
                            <x-input-large id="input_address" name="address" type="text" class="mt-1 block w-full" :value="old('address', $business->address ?? null)" placeholder="Calle"/>
                            <span id="address_loading" class="absolute right-[10px] top-[60%] -translate-y-1/2 hidden">
                                <i class="fas fa-spinner fa-spin"></i>
                            </span>
                            <div id="suggestions_container" class="absolute bg-white w-full z-[9999]"></div>
                        </div>
                        <div class="col-span-4">
                            <x-input-large id="input_number" name="number" type="text" class="mt-1 block w-full" :value="old('number', $business->number ?? null)" placeholder="Número"/>
                        </div>
                        <div class="col-span-12 relative">
                            <h5 class="mb-2 pb-1 font-medium leading-tight text-neutral-800 dark:text-neutral-50">
                                <i class="fas fa-map-marker-alt text-rose-500"></i> Coordenadas
                            </h5>
                            <div id="map" class="h-96 mt-3"></div>
                            <div id="coordinates">
                                <input id="input_latitude" name="latitude" type="text" class="" value="