




<?php $__env->startSection('content'); ?>
<div id="main-wrapper"
  class="p-10">

  <div x-data="restaurantComponent()" x-init="init()" class="flex flex-col gap-8 relative">

    
    <div x-show="dataTableProcessing"
      class="fixed inset-0 bg-black bg-opacity-80 z-50 flex items-center justify-center">
      <div class="text-white text-lg flex flex-col items-center gap-2">
        <i class="fa-solid fa-spinner fa-spin text-4xl"></i>
        <span class="text-base"><?php echo e(trans('lang.processing')); ?></span>
      </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">

      
      <div class="rounded-lg border !border-slate-300 shadow-[1px_1px_4px_0px_#e2e8f0] overflow-hidden flex flex-col">
        <div class="bg-slate-900 px-6 py-4">
          <h3 class="text-xl font-bold text-white m-0"><?php echo e(trans('lang.resutrant_informations')); ?></h3>
          <p class="text-sm text-slate-300 m-0"><?php echo e(trans('lang.resutrant_informations_desc')); ?></p>
          
          <div class="mt-3">
            <div class="flex justify-between text-xs text-slate-400 mb-1">
              <span><?php echo e(trans('lang.completion')); ?></span>
              <span x-text="getRestaurantInfoCompleteness() + '%'"></span>
            </div>
            <div class="w-full bg-slate-700 rounded-full h-2">
              <div class="h-2 rounded-full transition-all duration-300"
                   :class="getRestaurantInfoCompleteness() === 100 ? 'bg-green-500' : 'bg-blue-500'"
                   :style="'width: ' + getRestaurantInfoCompleteness() + '%'"></div>
            </div>
          </div>
        </div>
        <div class="p-6 bg-white flex flex-col flex-grow">
          <div class="flex-grow flex flex-col gap-5">
            
          <div class="w-full">
            <label class="block text-sm text-slate-500 font-medium mb-1">
              <?php echo e(trans('lang.restaurant_name')); ?> <span class="text-red-500">*</span>
            </label>
            <input type="text" x-model="restaurantDetails.title" @blur="validateField('title')"
              class="border !border-slate-300 rounded-lg py-2 px-3 w-full transition duration-150 focus:outline-none focus:ring-0 focus:border-slate-300 focus:bg-blue-50 text-slate-700"
              :class="{ '!border-red-500': errors.title }" />
            <span x-show="errors.title" x-text="errors.title" class="text-red-500 text-sm mt-1" x-transition></span>
          </div>
          
          <div class="w-full" x-data="{ categoryTooltipVisible: false }">
            <label class="block text-sm text-slate-500 font-medium mb-1">
              <?php echo e(trans('lang.restaurant_main_category')); ?> <span class="text-red-500">*</span>
              <span class="relative inline-block ml-1">
                <button type="button" @mouseenter="categoryTooltipVisible = true" @mouseleave="categoryTooltipVisible = false"
                        class="text-slate-400 hover:text-slate-600">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-question-mark-icon lucide-circle-question-mark">
                    <circle cx="12" cy="12" r="10"/>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/>
                    <path d="M12 17h.01"/>
                  </svg>
                </button>
                <div x-show="categoryTooltipVisible"
                     x-cloak
                     x-transition:enter="transition ease-out duration-200"
                     x-transition:enter-start="opacity-0 transform scale-95"
                     x-transition:enter-end="opacity-100 transform scale-100"
                     class="absolute z-10 w-72 p-3 mt-1 text-xs bg-slate-800 rounded-lg shadow-lg -left-2 top-full">
                  <p class="text-white font-medium mb-2"><?php echo e(trans('lang.category_map_impact_title')); ?></p>
                  <p class="text-slate-300 mb-3"><?php echo e(trans('lang.category_map_impact_desc')); ?></p>
                  <div class="flex items-center justify-around bg-slate-700/50 rounded p-3">
                    <div class="flex flex-col items-center gap-2">
                      <img src="<?php echo e(asset('images/marker-restaurant.svg')); ?>" alt="Restaurant marker" class="w-8 h-8">
                      <span class="text-slate-300 text-xs"><?php echo e(trans('lang.restaurant_marker')); ?></span>
                    </div>
                    <div class="flex flex-col items-center gap-2">
                      <img src="<?php echo e(asset('images/marker-bar.svg')); ?>" alt="Pub marker" class="w-8 h-8">
                      <span class="text-slate-300 text-xs"><?php echo e(trans('lang.pub_marker')); ?></span>
                    </div>
                  </div>
                  <div class="absolute w-2 h-2 bg-slate-800 transform rotate-45 -top-1 left-4"></div>
                </div>
              </span>
            </label>
            <div class="relative">
              <button type="button"
                @click="openDropdown = (openDropdown === 'mainCategory' ? null : 'mainCategory')"
                class="relative w-full text-left cursor-pointer rounded-lg border !border-slate-300 py-2 px-3 transition duration-150 focus:outline-none focus:ring-0 focus:border-slate-300"
                :class="{ '!border-red-500': errors.categoryID, 'bg-blue-50': openDropdown === 'mainCategory', 'bg-white': openDropdown !== 'mainCategory' }">
                <span class="block truncate" :class="selectedCategoryTitle === '<?php echo e(trans('lang.select_main_restaurant_category')); ?>' ? 'text-slate-400' : 'text-slate-700'" x-text="selectedCategoryTitle || '<?php echo e(trans('lang.select_restaurant_type_placeholder')); ?>'"></span>
                <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
                  <i class="fa-solid fa-chevron-down text-xs text-gray-400 transition-transform" :class="{'rotate-180': openDropdown === 'mainCategory'}"></i>
                </span>
              </button>
              <ul x-show="openDropdown === 'mainCategory'"
                @click.away="openDropdown = null; validateField('categoryID')" x-transition
                class="absolute z-20 mt-1 w-full max-h-60 overflow-y-auto rounded-lg bg-white shadow-lg border !border-slate-300 overflow-hidden"
                style="display: none;">
                <li class="flex items-center gap-2 px-3 py-2 text-base text-slate-500 whitespace-nowrap italic cursor-default">
                  <i class="fa-solid fa-check text-transparent"></i>
                  <span><?php echo trans('lang.select_main_restaurant_category'); ?></span>
                </li>
                <template x-for="cat in categories" :key="cat.id">
                  <li @click="restaurantDetails.categoryID = cat.id; openDropdown = null; validateField('categoryID'); $nextTick(() => updateMapMarkerIcon())"
                    class="flex items-center gap-2 cursor-pointer px-3 py-2 hover:bg-blue-100 text-base text-slate-700 whitespace-nowrap">
                    <i class="fa-solid fa-check text-blue-500 transition-opacity" :class="restaurantDetails.categoryID === cat.id ? 'opacity-100' : 'opacity-0'"></i>
                    <span x-text="cat.title" class="text-slate-700"></span>
                  </li>
                </template>
              </ul>
            </div>
            <span x-show="errors.categoryID" x-text="errors.categoryID" class="text-red-500 text-sm mt-1"
              x-transition></span>
          </div>
          
          <div class="w-full">
            <label class="block text-sm text-slate-500 font-medium mb-1">
              <?php echo e(trans('lang.restaurant_phone')); ?> <span class="text-red-500">*</span>
            </label>
            <div class="flex items-center">
              <div
                class="flex items-center justify-center px-4 py-2 border border-slate-300 rounded-l-lg bg-blue-50 text-slate-600">
                <span>+49</span>
              </div>
              <input type="text" x-model="restaurantDetails.phone_number"
                @input="formatPhoneNumber()"
                @blur="validateField('phone_number')"
                placeholder="<?php echo e(trans('lang.restaurant_phone_placeholder')); ?>"
                class="border border-slate-300 rounded-r-lg py-2 px-3 flex-1 transition duration-150 focus:outline-none focus:ring-0 focus:border-slate-300 focus:bg-blue-50 -ml-px text-slate-700"
                :class="{ '!border-red-500': errors.phone_number }" />
            </div>
            <span x-show="errors.phonenumber" x-text="errors.phonenumber" class="text-red-500 text-sm mt-1"
              x-transition></span>
          </div>
          
          <div class="w-full" x-data="{ showEmailSuggestions: false, emailSuggestions: [] }">
            <label class="block text-sm text-slate-500 font-medium mb-1">
              <?php echo e(trans('lang.restaurant_email')); ?> <span class="text-red-500">*</span>
            </label>
            <div class="relative">
              <input type="email" x-model="restaurantDetails.email"
                @input="generateEmailSuggestions()"
                @blur="validateField('email'); setTimeout(() => showEmailSuggestions = false, 200)"
                placeholder="<?php echo e(trans('lang.restaurant_email_placeholder')); ?>"
                class="border !border-slate-300 rounded-lg py-2 px-3 w-full transition duration-150 focus:outline-none focus:ring-0 focus:border-slate-300 focus:bg-blue-50 text-slate-700"
                :class="{ '!border-red-500': errors.email }" />
              
              
              <div x-show="showEmailSuggestions && emailSuggestions.length > 0" 
                   x-transition
                   class="absolute z-10 w-full mt-1 bg-white border border-slate-300 rounded-lg shadow-lg">
                <template x-for="suggestion in emailSuggestions" :key="suggestion">
                  <div @click="restaurantDetails.email = suggestion; showEmailSuggestions = false"
                       class="px-3 py-2 hover:bg-blue-50 cursor-pointer text-sm text-slate-700">
                    <span x-text="suggestion"></span>
                  </div>
                </template>
              </div>
            </div>
            <span x-show="errors.email" x-text="errors.email" class="text-red-500 text-sm mt-1"
              x-transition></span>
          </div>
          
          <div class="w-full mb-2 p-4 bg-gradient-to-r from-blue-50/50 via-blue-50 to-blue-50/50 border border-slate-300 rounded-lg">
            <div class="flex items-start gap-3">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-alert-icon lucide-book-alert text-blue-500 flex-shrink-0">
                <path d="M12 13h.01"/>
                <path d="M12 6v3"/>
                <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20"/>
              </svg>
              <div class="flex-1">
                <p class="text-sm font-semibold text-slate-700">
                  <?php echo e(trans('lang.address_from_map_info_title')); ?>

                </p>
                <p class="text-xs text-slate-700 mt-1">
                  <?php echo e(trans('lang.address_from_map_info_desc')); ?>

                </p>
              </div>
            </div>
          </div>
          
          
          <div class="w-full">
            <label class="block text-sm mb-1 text-slate-500 font-medium"><?php echo e(trans('lang.street_address')); ?></label>
            <input type="text" x-model="restaurantDetails.street_address" @blur="validateField('street_address')" readonly
              placeholder="<?php echo e(trans('lang.address_placeholder_click_map')); ?>"
              class="border !border-slate-300 rounded-lg py-2 px-3 w-full bg-blue-50 cursor-not-allowed focus:outline-none focus:ring-0 text-slate-700"
              :class="{ '!border-red-500': errors.street_address }" />
            <span x-show="errors.street_address" x-text="errors.street_address" class="text-red-500 text-sm mt-1" x-transition></span>
          </div>
          
          <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
            <div>
              <label class="block text-sm mb-1 text-slate-500 font-medium"><?php echo e(trans('lang.postal_code')); ?></label>
              <input type="text" x-model="restaurantDetails.postal_code" @input="restaurantDetails.postal_code = restaurantDetails.postal_code.replace(/\D/g, '').substring(0, 5)" @blur="validateField('postal_code')" readonly 
                placeholder="<?php echo e(trans('lang.address_placeholder_click_map')); ?>"
                class="border !border-slate-300 rounded-lg py-2 px-3 w-full bg-blue-50 cursor-not-allowed focus:outline-none focus:ring-0 text-slate-700" :class="{ '!border-red-500': errors.postal_code }" />
              <span x-show="errors.postal_code" x-text="errors.postal_code" class="text-red-500 text-sm mt-1" x-transition></span>
            </div>
            <div class="sm:col-span-2">
              <label class="block text-sm mb-1 text-slate-500 font-medium"><?php echo e(trans('lang.city')); ?></label>
              <input type="text" x-model="restaurantDetails.city" @input="restaurantDetails.city = restaurantDetails.city.replace(/[^\p{L}\s-]/gu, '')" @blur="validateField('city')" readonly 
                placeholder="<?php echo e(trans('lang.address_placeholder_click_map')); ?>"
                class="border !border-slate-300 rounded-lg py-2 px-3 w-full bg-blue-50 cursor-not-allowed focus:outline-none focus:ring-0 text-slate-700" :class="{ '!border-red-500': errors.city }" />
              <span x-show="errors.city" x-text="errors.city" class="text-red-500 text-sm mt-1" x-transition></span>
            </div>
          </div>
          
          <div class="w-full">
            <label class="block text-sm mb-1 text-slate-500 font-medium"><?php echo e(trans('lang.country')); ?></label>
            <input type="text" x-model="restaurantDetails.country" readonly 
              placeholder="<?php echo e(trans('lang.address_placeholder_click_map')); ?>"
              class="border !border-slate-300 rounded-lg py-2 px-3 w-full bg-blue-50 cursor-not-allowed focus:outline-none focus:ring-0 text-slate-700" />
          </div>
          
          <div class="w-full pt-2">
            <button type="button" @click="openMapModal"
              :class="!restaurantDetails.street_address ? 'animate-pulse' : ''"
              class="uppercase w-full flex items-center justify-center gap-2 px-4 py-2 border border-transparent rounded-md bg-blue-500 text-white hover:bg-blue-600 transition-colors duration-200 focus:outline-none focus:ring-0">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-map-pinned-icon lucide-map-pinned">
                <path d="M18 8c0 3.613-3.869 7.429-5.393 8.795a1 1 0 0 1-1.214 0C9.87 15.429 6 11.613 6 8a6 6 0 0 1 12 0"/>
                <circle cx="12" cy="8" r="2"/>
                <path d="M8.714 14h-3.71a1 1 0 0 0-.948.683l-2.004 6A1 1 0 0 0 3 22h18a1 1 0 0 0 .948-1.316l-2-6a1 1 0 0 0-.949-.684h-3.712"/>
              </svg>
              <span><?php echo e(trans('lang.find_on_map')); ?></span>
              <span x-show="!restaurantDetails.street_address" 
                    class="ml-2 bg-red-500 text-white text-xs px-2 py-0.5 rounded-full">
                <?php echo e(trans('lang.required')); ?>

              </span>
            </button>
          </div>
          
          <div class="w-full">
            <label class="text-sm mb-1 text-slate-500 font-medium"><?php echo e(trans('lang.restaurant_description')); ?></label>
            <textarea rows="7" x-model="restaurantDetails.description" 
              @input="if(restaurantDetails.description.length > descriptionCharLimit) restaurantDetails.description = restaurantDetails.description.substring(0, descriptionCharLimit)"
              placeholder="<?php echo e(trans('lang.restaurant_description_placeholder')); ?>"
              class="border !border-slate-300 rounded-lg px-3 py-2 w-full transition duration-150 focus:outline-none focus:ring-0 focus:border-slate-300 focus:bg-blue-50 text-slate-700"
              :class="{ '!border-red-500': errors.description }"></textarea>
            <div class="flex justify-between items-start mt-1">
                <span x-show="errors.description" x-text="errors.description" class="text-red-500 text-sm" x-transition></span>
                <div class="text-right text-xs text-slate-500 ml-auto" :class="{'!text-red-600 font-semibold': restaurantDetails.description && restaurantDetails.description.length >= descriptionCharLimit}">
                    <span x-text="restaurantDetails.description ? restaurantDetails.description.length : 0"></span> / <span x-text="descriptionCharLimit"></span>
                </div>
            </div>
          </div>

          
          <div class="w-full">
            <label class="block text-sm mb-1 text-slate-500 font-medium"><?php echo e(trans('lang.restaurant_image')); ?></label>
            <p class="text-xs text-slate-400 mb-2"><?php echo e(trans('lang.restaurant_image_info')); ?></p>
            <div class="mt-2">
              <input type="file" @change="selectFile($event.target.files[0])" id="restaurantImage" class="hidden"
                accept="image/png, image/jpeg, image/webp">
              
              <template x-if="!isUploading && restaurantDetails.photo">
                <div class="flex items-center gap-4">
                  <img :src="imagePreview" alt="Podgląd restauracji"
                    class="w-32 h-32 rounded-lg object-cover border-2 border-slate-200">
                  <div class="flex flex-col gap-3">
                    <button @click="triggerFileInput()" type="button"
                      class="group flex items-center gap-2 px-3 py-2 text-sm text-slate-700 rounded-md hover:bg-blue-50 hover:text-blue-600 border border-slate-300 hover:!border-blue-400 transition">
                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-pen-icon lucide-pen group-hover:text-blue-600 transition-colors">
                        <path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/>
                      </svg>
                      <span><?php echo e(trans('lang.change_photo')); ?></span>
                    </button>
                    <button @click="removeImage()" type="button"
                      class="group flex items-center gap-2 px-3 py-2 text-sm text-slate-700 rounded-md hover:bg-red-50 hover:text-red-600 border border-slate-300 hover:!border-red-300 transition">
                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash2-icon lucide-trash-2 group-hover:text-red-600 transition-colors">
                        <path d="M10 11v6"/>
                        <path d="M14 11v6"/>
                        <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
                        <path d="M3 6h18"/>
                        <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
                      </svg>
                      <span><?php echo e(trans('lang.remove_photo')); ?></span>
                    </button>
                  </div>
                </div>
              </template>
              
              <template x-if="isUploading">
                <div class="w-full">
                  <div class="w-full bg-slate-200 rounded-full h-8 p-1 relative overflow-hidden">
                    <div
                      class="bg-blue-500 h-full rounded-full flex items-center justify-end px-2 text-white text-xs font-bold transition-all duration-300"
                      :style="`width: ${uploadProgress}%`">
                      <span x-text="`${Math.round(uploadProgress)}%`"></span>
                    </div>
                  </div>
                  <button @click="cancelUpload()" title="<?php echo e(trans('lang.cancel_upload')); ?>"
                    class="w-full text-center mt-2 text-sm text-slate-600 hover:text-black">
                    <?php echo e(trans('lang.cancel')); ?>

                  </button>
                </div>
              </template>
              
              <template x-if="!isUploading && !restaurantDetails.photo">
                <div @click="triggerFileInput()" @dragover.prevent="isDragging = true"
                  @dragleave.prevent="isDragging = false" @drop.prevent="selectFile($event.dataTransfer.files[0])"
                  class="w-full p-6 border-2 border-dashed border-slate-300 rounded-lg text-center cursor-pointer transition-colors"
                  :class="{'bg-blue-50 border-blue-400': isDragging}">
                  <div class="flex flex-col items-center justify-center gap-2 text-slate-500">
                    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-hard-drive-upload-icon lucide-hard-drive-upload text-slate-400">
                      <path d="m16 6-4-4-4 4"/>
                      <path d="M12 2v8"/>
                      <rect width="20" height="8" x="2" y="14" rx="2"/>
                      <path d="M6 18h.01"/>
                      <path d="M10 18h.01"/>
                    </svg>
                    <p class="font-semibold"><?php echo e(trans('lang.drag_and_drop_file_here')); ?></p>
                    <p class="text-sm"><?php echo e(trans('lang.or')); ?></p>
                    <p class="font-semibold text-blue-500"><?php echo e(trans('lang.click_to_select_from_disk')); ?></p>
                    <p class="text-xs text-slate-400 mt-2"><?php echo e(trans('lang.uploader_file_types_info')); ?></p>
                  </div>
                </div>
              </template>

              <p x-show="uploadError" x-text="uploadError" class="text-sm text-red-600 mt-2"></p>
            </div>
          </div>

          </div>
        </div>
        <div class="p-4 bg-slate-50 border-t border-slate-200 text-right">
            <button type="button" @click="saveRestaurantDetails" :disabled="!isRestaurantDetailsDirty"
              class="uppercase w-full bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-0">
              <?php echo e(trans('lang.submit')); ?>

            </button>
        </div>
      </div>


      
      
      <div class="rounded-lg border !border-slate-300 shadow-[1px_1px_4px_0px_#e2e8f0] overflow-hidden flex flex-col">
        <div class="bg-slate-900 px-6 py-4">
        <h3 class="text-xl font-bold text-white m-0"><?php echo e(trans('lang.tags_heading')); ?></h3>
          <p class="text-sm text-slate-300 m-0"><?php echo e(trans('lang.resutrant_informations_desc')); ?></p>
        </div>
        
        <div class="p-6 bg-white flex-grow">
          <div class="flex flex-col gap-4">
            
            <div class="p-4 bg-gradient-to-r from-blue-50/50 via-blue-50 to-blue-50/50 border border-slate-300 rounded-lg">
              <div class="flex items-start gap-3">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-alert-icon lucide-book-alert text-blue-500 flex-shrink-0">
                  <path d="M12 13h.01"/>
                  <path d="M12 6v3"/>
                  <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20"/>
                </svg>
                <div class="flex-1">
                  <p class="text-sm font-semibold text-slate-700"><?php echo e(trans('lang.tags_info_title')); ?></p>
                  <p class="text-xs text-slate-700 mt-1"><?php echo e(trans('lang.tags_info_desc')); ?></p>
                </div>
              </div>
            </div>
            
            
            <template x-for="(groupTags, groupName) in allTagsConfig" :key="groupName">
              <div class="rounded-lg border border-slate-300 bg-white p-4">
                
                <div class="flex items-center justify-between mb-3">
                  <div class="flex items-center gap-2">
                    <p class="font-semibold text-slate-700" x-text="groupName"></p>
                    <span class="text-xs bg-blue-50/50 text-slate-700 px-2 py-1 rounded border border-slate-300">
                      <?php echo e(trans('lang.select_one_option')); ?>

                    </span>
                  </div>
                  
                  <button type="button" 
                          @click="clearGroupSelection(groupName)"
                          x-show="hasSelectionInGroup(groupName)"
                          class="text-xs text-slate-500 hover:text-red-600 transition-colors flex items-center gap-1">
                    <i class="fa-solid fa-xmark"></i>
                    <span><?php echo e(trans('lang.clear_selection')); ?></span>
                  </button>
                </div>
                
                
                <div class="flex flex-wrap gap-2">
                  <template x-for="tagItem in groupTags" :key="tagItem.id">
                    <button type="button"
                            @click="selectTagInGroup(groupName, tagItem.id)"
                            class="px-4 py-2 border rounded-lg transition-all duration-200"
                            :class="filters[tagItem.id] ? 
                                    'border-blue-500 bg-blue-500 text-white shadow-sm' : 
                                    'border-slate-300 bg-white text-slate-600 hover:bg-blue-50/50'">
                      <span x-text="tagItem.label"></span>
                    </button>
                  </template>
                </div>
              </div>
            </template>
            
            
            <div x-show="getSelectedTagsPreview()" 
                 class="p-4 bg-gradient-to-r from-blue-50/50 via-blue-50 to-blue-50/50 border border-slate-300 rounded-lg">
              <div class="flex items-start gap-3">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-smartphone text-blue-500 flex-shrink-0">
                  <rect width="14" height="20" x="5" y="2" rx="2" ry="2"/>
                  <path d="M12 18h.01"/>
                </svg>
                <div class="flex-1">
                  <p class="text-sm font-semibold text-slate-700"><?php echo e(trans('lang.profile_preview')); ?></p>
                  <p class="text-sm text-slate-700 mt-1">
                    <span class="font-medium" x-text="getSelectedTagsPreview()"></span>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="p-4 bg-slate-50 border-t border-slate-200 text-right">
            <button type="button" @click="saveTags" :disabled="areTagsUnchanged"
                class="uppercase w-full bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-0">
                <?php echo e(trans('lang.submit')); ?>

            </button>
        </div>
      </div>

      
      <div class="rounded-lg border !border-slate-300 shadow-[1px_1px_4px_0px_#e2e8f0] overflow-hidden flex flex-col">
        <div class="bg-slate-900 px-6 py-4">
          <h3 class="text-xl font-bold text-white m-0"><?php echo e(trans('lang.company_registration_data')); ?></h3>
          <p class="text-sm text-slate-300 m-0"><?php echo e(trans('lang.company_registration_data_desc')); ?></p>
          
          <div class="mt-3">
            <div class="flex justify-between text-xs text-slate-400 mb-1">
              <span><?php echo e(trans('lang.completion')); ?></span>
              <span x-text="getCompanyDataCompleteness() + '%'"></span>
            </div>
            <div class="w-full bg-slate-700 rounded-full h-2">
              <div class="h-2 rounded-full transition-all duration-300"
                   :class="getCompanyDataCompleteness() === 100 ? 'bg-green-500' : 'bg-blue-500'"
                   :style="'width: ' + getCompanyDataCompleteness() + '%'"></div>
            </div>
          </div>
        </div>
        <div class="p-6 bg-white flex flex-col gap-5 flex-grow">
          
          <div class="w-full p-4 bg-gradient-to-r from-blue-50/50 via-blue-50 to-blue-50/50 border border-slate-300 rounded-lg">
            <div class="flex items-start gap-3">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-alert-icon lucide-book-alert text-blue-500 flex-shrink-0">
                <path d="M12 13h.01"/>
                <path d="M12 6v3"/>
                <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20"/>
              </svg>
              <div class="flex-1">
                <p class="text-sm font-semibold text-slate-700">
                  <?php echo e(trans('lang.company_data_info_title')); ?>

                </p>
                <p class="text-xs text-slate-700 mt-1">
                  <?php echo e(trans('lang.company_data_info_desc')); ?>

                </p>
                <p class="text-xs text-slate-600 mt-2">
                  <span class="text-red-500">*</span> <?php echo e(trans('lang.required_fields_note')); ?>

                </p>
              </div>
            </div>
          </div>
          
          
          <div class="w-full">
            <label class="block text-sm mb-1 text-slate-500 font-medium">
              <?php echo e(trans('lang.legal_company_name')); ?> <span class="text-red-500">*</span>
            </label>
            <input type="text" x-model="companyData.legal_company_name" @blur="validateField('legal_company_name')"
              placeholder="<?php echo e(trans('lang.placeholder_company_name')); ?>"
              class="border !border-slate-300 rounded-lg py-2 px-3 w-full transition duration-150 focus:outline-none focus:ring-0 focus:border-slate-300 focus:bg-blue-50 text-slate-700"
              :class="{ '!border-red-500': errors.legal_company_name }" />
            <span x-show="errors.legal_company_name" x-text="errors.legal_company_name"
              class="text-red-500 text-sm mt-1" x-transition></span>
          </div>
          
          <div class="w-full" x-data="{ tooltipVisible: false }">
            <label class="block text-sm mb-1 text-slate-500 font-medium">
              <?php echo e(trans('lang.vat_number')); ?> <span class="text-red-500">*</span>
              <span class="relative inline-block ml-1">
                <button type="button" @mouseenter="tooltipVisible = true" @mouseleave="tooltipVisible = false"
                        class="text-slate-400 hover:text-slate-600">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-question-mark-icon lucide-circle-question-mark">
                    <circle cx="12" cy="12" r="10"/>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/>
                    <path d="M12 17h.01"/>
                  </svg>
                </button>
                <div x-show="tooltipVisible"
                     x-cloak
                     x-transition:enter="transition ease-out duration-200"
                     x-transition:enter-start="opacity-0 transform scale-95"
                     x-transition:enter-end="opacity-100 transform scale-100"
                     class="absolute z-10 w-64 p-2 mt-1 text-xs text-white bg-slate-800 rounded-lg shadow-lg -left-2 top-full">
                  <?php echo e(trans('lang.vat_number_tooltip')); ?>

                  <div class="absolute w-2 h-2 bg-slate-800 transform rotate-45 -top-1 left-4"></div>
                </div>
              </span>
            </label>
            <div class="relative">
              <input type="text" x-model="companyData.vat_number" 
                @input="formatVATNumber()"
                @blur="validateField('vat_number')"
                placeholder="DE123456789"
                class="border !border-slate-300 rounded-lg py-2 px-3 w-full transition duration-150 focus:outline-none focus:ring-0 focus:border-slate-300 focus:bg-blue-50 text-slate-700"
                :class="{ '!border-red-500': errors.vat_number }" />
            </div>
            <span x-show="errors.vat_number" x-text="errors.vat_number" class="text-red-500 text-sm mt-1"
              x-transition></span>
          </div>
          
          <div class="w-full">
            <label class="block text-sm mb-1 text-slate-500 font-medium">
              <?php echo e(trans('lang.company_street_address')); ?> <span class="text-red-500">*</span>
            </label>
            <div class="relative">
              <input type="text" x-model="companyData.street_address" @blur="validateField('street_address')"
                placeholder="<?php echo e(trans('lang.placeholder_street')); ?>"
                class="border !border-slate-300 rounded-lg py-2 px-3 w-full transition duration-150 focus:outline-none focus:ring-0 focus:border-slate-300 focus:bg-blue-50 text-slate-700"
                :class="{ '!border-red-500': errors.street_address }" />
              <button type="button" @click="copyRestaurantAddress()"
                      x-show="restaurantDetails.street_address"
                      class="absolute right-2 top-1/2 -translate-y-1/2 text-xs text-blue-500 hover:text-blue-600 font-medium">
                <?php echo e(trans('lang.use_restaurant_address')); ?>

              </button>
            </div>
            <span x-show="errors.street_address" x-text="errors.street_address" class="text-red-500 text-sm mt-1" x-transition></span>
          </div>

          
          <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
            <div class="sm:col-span-1">
              <label class="block text-sm mb-1 text-slate-500 font-medium">
                <?php echo e(trans('lang.company_postal_code')); ?> <span class="text-red-500">*</span>
              </label>
              <input type="text" x-model="companyData.postal_code" 
                @input="companyData.postal_code = companyData.postal_code.replace(/\D/g, '').substring(0, 5); fetchCityByPostalCode(); validateField('postal_code', 'company')"
                @blur="validateField('postal_code', 'company')"
                placeholder="12345"
                class="border !border-slate-300 rounded-lg py-2 px-3 w-full transition duration-150 focus:outline-none focus:ring-0 focus:border-slate-300 focus:bg-blue-50 text-slate-700"
                :class="{ '!border-red-500': errors.postal_code }" />
              <span x-show="errors.postal_code" x-text="errors.postal_code" class="text-red-500 text-sm mt-1" x-transition></span>
            </div>
            <div class="sm:col-span-2">
              <label class="block text-sm mb-1 text-slate-500 font-medium">
                <?php echo e(trans('lang.company_city')); ?> <span class="text-red-500">*</span>
              </label>
              <div class="relative">
                <input type="text" x-model="companyData.city"
                  @input="companyData.city = companyData.city.replace(/[^\p{L}\s-]/gu, ''); validateField('city', 'company')"
                  @blur="validateField('city', 'company')"
                  placeholder="Berlin"
                  class="border !border-slate-300 rounded-lg py-2 px-3 w-full transition duration-150 focus:outline-none focus:ring-0 focus:border-slate-300 focus:bg-blue-50 text-slate-700"
                  :class="{ '!border-red-500': errors.city }" />
                <div x-show="cityLoading" class="absolute right-2 top-1/2 -translate-y-1/2">
                  <svg class="animate-spin h-4 w-4 text-slate-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                  </svg>
                </div>
              </div>
              <span x-show="errors.city" x-text="errors.city" class="text-red-500 text-sm mt-1" x-transition></span>
            </div>
          </div>

          
          <div class="w-full">
            <label class="block text-sm mb-1 text-slate-500 font-medium"><?php echo e(trans('lang.company_country')); ?></label>
            <input type="text" x-model="companyData.country"
              class="border !border-slate-300 rounded-lg py-2 px-3 w-full transition duration-150 focus:outline-none focus:ring-0 focus:border-slate-300 bg-blue-50 cursor-not-allowed text-slate-700"
              disabled />
          </div>

          
          <div class="relative my-2">
            <div class="absolute inset-0 flex items-center" aria-hidden="true">
              <div class="w-full border-t border-slate-300"></div>
            </div>
            <div class="relative flex justify-start">
              <span class="bg-white pr-3 text-sm font-normal text-slate-500"><?php echo e(trans('lang.optional_data')); ?></span>
            </div>
          </div>

          
          <div class="w-full" x-data="{ tooltipVisible: false }">
            <label class="block text-sm mb-1 text-slate-500 font-medium">
              <?php echo e(trans('lang.tax_number')); ?>

              <span class="relative inline-block ml-1">
                <button type="button" @mouseenter="tooltipVisible = true" @mouseleave="tooltipVisible = false"
                        class="text-slate-400 hover:text-slate-600">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-question-mark-icon lucide-circle-question-mark">
                    <circle cx="12" cy="12" r="10"/>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/>
                    <path d="M12 17h.01"/>
                  </svg>
                </button>
                <div x-show="tooltipVisible"
                     x-cloak
                     x-transition:enter="transition ease-out duration-200"
                     x-transition:enter-start="opacity-0 transform scale-95"
                     x-transition:enter-end="opacity-100 transform scale-100"
                     class="absolute z-10 w-64 p-2 mt-1 text-xs text-white bg-slate-800 rounded-lg shadow-lg -left-2 top-full">
                  <?php echo e(trans('lang.tax_number_tooltip')); ?>

                  <div class="absolute w-2 h-2 bg-slate-800 transform rotate-45 -top-1 left-4"></div>
                </div>
              </span>
            </label>
            <input type="text" x-model="companyData.tax_number" 
              @input="companyData.tax_number = companyData.tax_number.replace(/\D/g, '')" 
              @blur="validateField('tax_number')"
              placeholder="12/345/67890"
              class="border !border-slate-300 rounded-lg py-2 px-3 w-full transition duration-150 focus:outline-none focus:ring-0 focus:border-slate-300 focus:bg-blue-50 text-slate-700"
              :class="{ '!border-red-500': errors.tax_number }" />
            <span x-show="errors.tax_number" x-text="errors.tax_number" class="text-red-500 text-sm mt-1" x-transition></span>
          </div>
          
          <div class="w-full" x-data="{ tooltipVisible: false }">
            <label class="block text-sm mb-1 text-slate-500 font-medium">
              <?php echo e(trans('lang.commercial_register_number')); ?>

              <span class="relative inline-block ml-1">
                <button type="button" @mouseenter="tooltipVisible = true" @mouseleave="tooltipVisible = false"
                        class="text-slate-400 hover:text-slate-600">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-question-mark-icon lucide-circle-question-mark">
                    <circle cx="12" cy="12" r="10"/>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/>
                    <path d="M12 17h.01"/>
                  </svg>
                </button>
                <div x-show="tooltipVisible"
                     x-cloak
                     x-transition:enter="transition ease-out duration-200"
                     x-transition:enter-start="opacity-0 transform scale-95"
                     x-transition:enter-end="opacity-100 transform scale-100"
                     class="absolute z-10 w-64 p-2 mt-1 text-xs text-white bg-slate-800 rounded-lg shadow-lg -left-2 top-full">
                  <?php echo e(trans('lang.commercial_register_tooltip')); ?>

                  <div class="absolute w-2 h-2 bg-slate-800 transform rotate-45 -top-1 left-4"></div>
                </div>
              </span>
            </label>
            <input type="text" x-model="companyData.commercial_register_number" 
              @input="companyData.commercial_register_number = companyData.commercial_register_number.toUpperCase().replace(/[^A-Z0-9\s]/g, '')" 
              @blur="validateField('commercial_register_number')"
              placeholder="HRB 12345"
              class="border !border-slate-300 rounded-lg py-2 px-3 w-full transition duration-150 focus:outline-none focus:ring-0 focus:border-slate-300 focus:bg-blue-50 text-slate-700"
              :class="{ '!border-red-500': errors.commercial_register_number }" />
            <span x-show="errors.commercial_register_number" x-text="errors.commercial_register_number" class="text-red-500 text-sm mt-1" x-transition></span>
          </div>
          
          <div class="w-full">
            <label class="block text-sm mb-1 text-slate-500 font-medium"><?php echo e(trans('lang.legal_representative')); ?></label>
            <input type="text" x-model="companyData.legal_representative" @input="companyData.legal_representative = companyData.legal_representative.replace(/[^\p{L}\s-]/gu, '')" @blur="validateField('legal_representative')"
              class="border !border-slate-300 rounded-lg py-2 px-3 w-full transition duration-150 focus:outline-none focus:ring-0 focus:border-slate-300 focus:bg-blue-50 text-slate-700"
              :class="{ '!border-red-500': errors.legal_representative }" />
            <span x-show="errors.legal_representative" x-text="errors.legal_representative" class="text-red-500 text-sm mt-1" x-transition></span>
          </div>
          
          <div class="w-full">
            <label class="block text-sm mb-1 text-slate-500 font-medium"><?php echo e(trans('lang.legal_form')); ?></label>
            <input type="text" x-model="companyData.legal_form" @input="companyData.legal_form = companyData.legal_form.replace(/[^\p{L}\s.&-]/gu, '')" @blur="validateField('legal_form')"
              class="border !border-slate-300 rounded-lg py-2 px-3 w-full transition duration-150 focus:outline-none focus:ring-0 focus:border-slate-300 focus:bg-blue-50 text-slate-700"
              :class="{ '!border-red-500': errors.legal_form }" />
            <span x-show="errors.legal_form" x-text="errors.legal_form" class="text-red-500 text-sm mt-1" x-transition></span>
          </div>
        </div>
        
        <div class="p-4 bg-slate-50 border-t border-slate-200 text-right">
            <button type="button" @click="saveCompanyData" :disabled="!isCompanyDataDirty"
                class="uppercase w-full bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-0">
              <?php echo e(trans('lang.submit')); ?>

            </button>
        </div>
      </div>

      
      <div class="rounded-lg border !border-slate-300 shadow-[1px_1px_4px_0px_#e2e8f0] flex flex-col">
        
        <div class="bg-slate-900 px-6 py-4 rounded-t-lg">
           <h3 class="text-xl font-bold text-white m-0"><?php echo e(trans('lang.working_hours')); ?></h3>
          <p class="text-sm text-slate-300 m-0"><?php echo trans('lang.resturant_working_hours_desc'); ?></p>
        </div>
        <div class="p-6 bg-white flex flex-col flex-grow">
          <div class="flex flex-col flex-grow">
            
            <div class="mb-4 p-4 bg-gradient-to-r from-blue-50/50 via-blue-50 to-blue-50/50 border border-slate-300 rounded-lg">
              <div class="flex items-start gap-3">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-alert-icon lucide-book-alert text-blue-500 flex-shrink-0">
                  <path d="M12 13h.01"/>
                  <path d="M12 6v3"/>
                  <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20"/>
                </svg>
                <div class="flex-1">
                  <p class="text-sm font-semibold text-slate-700"><?php echo e(trans('lang.working_hours_info_title')); ?></p>
                  <ul class="text-xs text-slate-700 mt-1 space-y-1">
                    <li>• <?php echo e(trans('lang.working_hours_info_1')); ?></li>
                    <li>• <?php echo e(trans('lang.working_hours_info_2')); ?></li>
                    <li>• <?php echo e(trans('lang.working_hours_info_3')); ?></li>
                  </ul>
                </div>
              </div>
            </div>
            
            
            <div class="mb-4">
              <p class="text-sm font-medium text-slate-600 mb-2"><?php echo e(trans('lang.quick_templates')); ?></p>
              <div class="grid grid-cols-3 gap-2">
                <button type="button" @click="applyPreset('restaurant')"
                        :class="isPresetActive('restaurant') ? 'bg-blue-50/50 border-blue-500 border-2' : 'border border-slate-300 hover:bg-blue-50/50'"
                        class="p-3 rounded-lg transition-colors group">
                  <div class="text-center">
                    <div class="flex justify-center mb-1">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" 
                           :class="isPresetActive('restaurant') ? 'text-blue-600' : 'text-blue-500'"
                           class="lucide lucide-utensils-icon lucide-utensils">
                        <path d="M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2"/>
                        <path d="M7 2v20"/>
                        <path d="M21 15V2a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7"/>
                      </svg>
                    </div>
                    <p class="text-xs font-medium text-slate-700 mt-1"><?php echo e(trans('lang.preset_restaurant')); ?></p>
                    <p class="text-xs text-slate-500">11:00 - 23:00</p>
                  </div>
                </button>
                <button type="button" @click="applyPreset('cafe')"
                        :class="isPresetActive('cafe') ? 'bg-blue-50/50 border-blue-500 border-2' : 'border border-slate-300 hover:bg-blue-50/50'"
                        class="p-3 rounded-lg transition-colors group">
                  <div class="text-center">
                    <div class="flex justify-center mb-1">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" 
                           :class="isPresetActive('cafe') ? 'text-blue-600' : 'text-blue-500'"
                           class="lucide lucide-coffee">
                        <path d="M10 2v2"/>
                        <path d="M14 2v2"/>
                        <path d="M16 8a1 1 0 0 1 1 1v8a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1h14a4 4 0 1 1 0 8h-1"/>
                        <path d="M6 2v2"/>
                      </svg>
                    </div>
                    <p class="text-xs font-medium text-slate-700 mt-1"><?php echo e(trans('lang.preset_cafe')); ?></p>
                    <p class="text-xs text-slate-500">07:00 - 19:00</p>
                  </div>
                </button>
                <button type="button" @click="applyPreset('bar')"
                        :class="isPresetActive('bar') ? 'bg-blue-50/50 border-blue-500 border-2' : 'border border-slate-300 hover:bg-blue-50/50'"
                        class="p-3 rounded-lg transition-colors group">
                  <div class="text-center">
                    <div class="flex justify-center mb-1">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" 
                           :class="isPresetActive('bar') ? 'text-blue-600' : 'text-blue-500'"
                           class="lucide lucide-wine">
                        <path d="M8 22h8"/>
                        <path d="M7 10h10"/>
                        <path d="M12 15v7"/>
                        <path d="M12 15a5 5 0 0 0 5-5c0-2-.5-4-2-8H9c-1.5 4-2 6-2 8a5 5 0 0 0 5 5Z"/>
                      </svg>
                    </div>
                    <p class="text-xs font-medium text-slate-700 mt-1"><?php echo e(trans('lang.preset_bar')); ?></p>
                    <p class="text-xs text-slate-500">16:00 - 02:00*</p>
                  </div>
                </button>
              </div>
            </div>
            
            
            <div class="flex flex-wrap gap-2 mb-4 pb-4 border-b border-slate-200">
              <button type="button" @click="copyMondayToAll()"
                      :disabled="!workingHours.Monday || !workingHours.Monday.active || workingHours.Monday.slots.length === 0"
                      class="group flex items-center gap-2 px-3 py-1.5 text-sm text-slate-600 border border-slate-300 rounded-lg hover:bg-blue-50 hover:text-blue-600 hover:border-blue-400 disabled:opacity-50 disabled:cursor-not-allowed transition-colors">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy-icon lucide-copy group-hover:text-blue-600 transition-colors">
                  <rect width="14" height="14" x="8" y="8" rx="2" ry="2"/>
                  <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>
                </svg>
                <span><?php echo e(trans('lang.copy_monday_to_all')); ?></span>
              </button>
              <button type="button" @click="setStandardHours()"
                      class="group flex items-center gap-2 px-3 py-1.5 text-sm text-slate-600 border border-slate-300 rounded-lg hover:bg-blue-50 hover:text-blue-600 hover:border-blue-400 transition-colors">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-zap-icon lucide-zap group-hover:text-blue-600 transition-colors">
                  <path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"/>
                </svg>
                <span><?php echo e(trans('lang.set_standard_hours')); ?></span>
              </button>
              <button type="button" @click="clearAllHours()"
                      class="flex items-center gap-2 px-3 py-1.5 text-sm text-slate-600 border border-slate-300 rounded-lg hover:bg-red-50 hover:border-red-300 hover:text-red-600 transition-colors">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash2-icon lucide-trash-2">
                  <path d="M10 11v6"/>
                  <path d="M14 11v6"/>
                  <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
                  <path d="M3 6h18"/>
                  <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
                </svg>
                <span><?php echo e(trans('lang.clear_all')); ?></span>
              </button>
            </div>
            
            
            <template x-for="(day, dayIndex) in daysOfWeek" :key="day.key">
              <div class="flex items-center gap-4 border-b !border-slate-200 py-4 last:border-b-0">
                <div class="w-1/3">
                  <label class="inline-flex items-center cursor-pointer">
                    
                    <input type="checkbox" class="sr-only peer" @change="toggleDay(day.key)"
                      :checked="workingHours[day.key] && workingHours[day.key].active">
                    <div class="relative h-6 w-11 rounded-full bg-slate-400 peer-checked:bg-blue-500 transition-colors">
                      <div class="absolute left-0.5 top-0.5 h-5 w-5 rounded-full bg-white transition-transform"
                        :class="{ 'translate-x-5 border-white': workingHours[day.key] && workingHours[day.key].active }">
                      </div>
                    </div>
                    
                    <span class="ml-4 text-base font-semibold text-slate-700" x-text="day.label"></span>
                  </label>
                </div>
                <div class="w-2/3">
                  
                  <template x-if="!workingHours[day.key] || !workingHours[day.key].active">
                    <div
                      class="flex h-full items-center gap-3 rounded-lg border border-slate-400 bg-slate-400 px-4 py-2">
                      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-moon-icon lucide-moon text-white">
                        <path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"/>
                      </svg>
                      <span class="text-base text-white"><?php echo e(trans('lang.closed')); ?></span>
                    </div>
                  </template>
                  
                  <template x-if="workingHours[day.key] && workingHours[day.key].active">
                    <div class="flex flex-col gap-2">
                      <template x-for="(slot, slotIndex) in workingHours[day.key].slots" :key="slotIndex">
                        <div class="flex flex-col">
                          <div class="flex items-center gap-2">
                            <div class="relative flex-grow" x-data="{ id: `from-${day.key}-${slotIndex}` }">
                              
                              <label class="block text-xs text-slate-500 font-medium mb-1"><?php echo e(trans('lang.working_hours_from')); ?></label>
                              
                              <button type="button" @click="openDropdown = (openDropdown === id ? null : id)"
                                class="relative w-full text-left cursor-pointer rounded-lg border !border-slate-300 py-2 px-3 transition duration-150 focus:outline-none focus:ring-0 focus:border-slate-300 focus:bg-blue-50">
                                <span class="block truncate text-slate-700" x-text="slot.from || '<?php echo e(trans('lang.select_time')); ?>'"></span>
                              </button>
                              
                              <div x-show="openDropdown === id" @click.away="openDropdown = null" x-transition
                                class="absolute z-20 mt-1 w-52 rounded-lg bg-white shadow-lg border !border-slate-300 overflow-hidden"
                                style="display: none;">
                                <div class="flex">
                                  
                                  <ul class="flex-1 max-h-60 overflow-y-auto border-r border-slate-200"><template
                                      x-for="hour in hourSlots" :key="`from-h-${hour}`">
                                      <li @click="updateTime(slot, 'from', 'hour', hour)"
                                        class="cursor-pointer py-2 px-3 hover:bg-blue-100 text-base text-slate-700 whitespace-nowrap text-center"
                                        :class="{'!bg-blue-500 !text-white font-semibold': getHour(slot.from) === hour}">
                                        <span x-text="hour"></span></li>
                                    </template>
                                  </ul>
                                  
                                  <ul class="flex-1 max-h-60 overflow-y-auto"><template x-for="minute in minuteSlots"
                                      :key="`from-m-${minute}`">
                                      <li @click="updateTime(slot, 'from', 'minute', minute)"
                                        class="cursor-pointer py-2 px-3 hover:bg-blue-100 text-base text-slate-700 whitespace-nowrap text-center"
                                        :class="{'!bg-blue-500 !text-white font-semibold': getMinute(slot.from) === minute}">
                                        <span x-text="minute"></span></li>
                                    </template>
                                  </ul>
                                </div>
                              </div>
                            </div>
                            <div class="relative flex-grow" x-data="{ id: `to-${day.key}-${slotIndex}` }">
                              
                              <label class="block text-xs text-slate-500 font-medium mb-1"><?php echo e(trans('lang.working_hours_to')); ?></label>
                              
                              <button type="button" @click="openDropdown = (openDropdown === id ? null : id)"
                                class="relative w-full text-left cursor-pointer rounded-lg border !border-slate-300 py-2 px-3 transition duration-150 focus:outline-none focus:ring-0 focus:border-slate-300 focus:bg-blue-50">
                                <span class="block truncate text-slate-700" x-text="slot.to || '<?php echo e(trans('lang.select_time')); ?>'"></span>
                              </button>
                              
                              <div x-show="openDropdown === id" @click.away="openDropdown = null" x-transition
                                class="absolute z-20 mt-1 w-52 rounded-lg bg-white shadow-lg border !border-slate-300 overflow-hidden"
                                style="display: none;">
                                <div class="flex">
                                  
                                  <ul class="flex-1 max-h-60 overflow-y-auto border-r border-slate-200"><template
                                      x-for="hour in hourSlots" :key="`to-h-${hour}`">
                                      <li @click="updateTime(slot, 'to', 'hour', hour)"
                                        class="cursor-pointer py-2 px-3 hover:bg-blue-100 text-base text-slate-700 whitespace-nowrap text-center"
                                        :class="{'!bg-blue-500 !text-white font-semibold': getHour(slot.to) === hour}">
                                        <span x-text="hour"></span></li>
                                    </template>
                                  </ul>
                                  
                                  <ul class="flex-1 max-h-60 overflow-y-auto"><template x-for="minute in minuteSlots"
                                      :key="`to-m-${minute}`">
                                      <li @click="updateTime(slot, 'to', 'minute', minute)"
                                        class="cursor-pointer py-2 px-3 hover:bg-blue-100 text-base text-slate-700 whitespace-nowrap text-center"
                                        :class="{'!bg-blue-500 !text-white font-semibold': getMinute(slot.to) === minute}">
                                        <span x-text="minute"></span></li>
                                    </template>
                                  </ul>
                                </div>
                              </div>
                            </div>
                            <template x-if="workingHours[day.key].slots.length > 1">
                              <div x-data="{ tooltipVisible: false }" class="relative" style="margin-top: 22px;">
                                <button type="button" @click="removeTimeSlot(day.key, slotIndex)"
                                  @mouseenter="tooltipVisible = true" @mouseleave="tooltipVisible = false"
                                  class="flex h-10 w-10 items-center justify-center rounded-lg text-slate-400 hover:bg-red-100 hover:text-red-600">
                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash2-icon lucide-trash-2">
                                    <path d="M10 11v6"/>
                                    <path d="M14 11v6"/>
                                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
                                    <path d="M3 6h18"/>
                                    <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
                                  </svg>
                                </button>
                                <div x-show="tooltipVisible"
                                  x-cloak
                                  x-transition:enter="transition ease-out duration-300"
                                  x-transition:enter-start="opacity-0 translate-y-2"
                                  x-transition:enter-end="opacity-100 translate-y-0"
                                  x-transition:leave="transition ease-in duration-200"
                                  x-transition:leave-start="opacity-100 translate-y-0"
                                  x-transition:leave-end="opacity-0 translate-y-2"
                                  class="absolute top-full right-0 mt-2 w-max max-w-xs bg-slate-800 text-white text-center text-xs rounded py-2 px-3 z-10 pointer-events-none"
                                  style="display: none;">
                                  <?php echo e(trans('lang.remove_time_slot')); ?>

                                  <div
                                    class="absolute right-3 bottom-full w-0 h-0 border-x-8 border-x-transparent border-b-8 border-b-slate-800">
                                  </div>
                                </div>
                              </div>
                            </template>
                            <template x-if="slotIndex === workingHours[day.key].slots.length - 1">
                              <div x-data="{ tooltipVisible: false }" class="relative" style="margin-top: 22px;">
                                <button type="button" @click="addTimeSlot(day.key)" @mouseenter="tooltipVisible = true"
                                  @mouseleave="tooltipVisible = false"
                                  class="flex h-10 w-10 items-center justify-center rounded-lg text-slate-400 hover:bg-blue-100 hover:text-blue-600">
                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus-icon lucide-plus">
                                    <path d="M5 12h14"/>
                                    <path d="M12 5v14"/>
                                  </svg>
                                </button>
                                <div x-show="tooltipVisible"
                                  x-cloak
                                  x-transition:enter="transition ease-out duration-300"
                                  x-transition:enter-start="opacity-0 translate-y-2"
                                  x-transition:enter-end="opacity-100 translate-y-0"
                                  x-transition:leave="transition ease-in duration-200"
                                  x-transition:leave-start="opacity-100 translate-y-0"
                                  x-transition:leave-end="opacity-0 translate-y-2"
                                  class="absolute top-full right-0 mt-2 w-max max-w-xs bg-slate-800 text-white text-center text-xs rounded py-2 px-3 z-10 pointer-events-none"
                                  style="display: none;">
                                  <?php echo e(trans('lang.add_time_slot')); ?>

                                  <div
                                    class="absolute right-3 bottom-full w-0 h-0 border-x-8 border-x-transparent border-b-8 border-b-slate-800">
                                  </div>
                                </div>
                              </div>
                            </template>
                          </div>
                          <div x-show="!isTimeSlotValid(slot) && slot.from && slot.to"
                            class="text-red-500 text-sm mt-1 pl-1" x-transition>
                            <?php echo e(trans('lang.error_time_slot_invalid')); ?>

                          </div>
                          
                          <div x-show="isSlotOverlapping(day.key, slotIndex)"
                            class="text-red-500 text-sm mt-1 pl-1" x-transition>
                            <?php echo e(trans('lang.error_time_slot_overlap')); ?>

                          </div>
                        </div>
                      </template>
                    </div>
                  </template>
                </div>
              </div>
            </template>
            
            
            <div x-show="getWeeklySummary().totalDays > 0" 
                 class="mt-4 p-4 bg-gradient-to-r from-blue-50/50 via-blue-50 to-blue-50/50 border border-slate-300 rounded-lg">
              <div class="flex items-start gap-3">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chart-column-increasing-icon lucide-chart-column-increasing text-blue-500 flex-shrink-0">
                  <path d="M13 17V9"/>
                  <path d="M18 17V5"/>
                  <path d="M3 3v16a2 2 0 0 0 2 2h16"/>
                  <path d="M8 17v-3"/>
                </svg>
                <div class="flex-1">
                  <p class="text-sm font-semibold text-slate-700"><?php echo e(trans('lang.weekly_summary')); ?></p>
                  <div class="grid grid-cols-2 gap-2 mt-2">
                    <div class="text-xs text-slate-600">
                      <span class="font-medium"><?php echo e(trans('lang.open_days')); ?>:</span>
                      <span x-text="getWeeklySummary().totalDays + '/7'"></span>
                    </div>
                    <div class="text-xs text-slate-600">
                      <span class="font-medium"><?php echo e(trans('lang.total_hours')); ?>:</span>
                      <span x-text="getWeeklySummary().totalHours + 'h'"></span>
                    </div>
                    <div class="text-xs text-slate-600" x-show="getWeeklySummary().longestDay">
                      <span class="font-medium"><?php echo e(trans('lang.longest_day')); ?>:</span>
                      <span x-text="getWeeklySummary().longestDay"></span>
                    </div>
                    <div class="text-xs text-slate-600" x-show="getWeeklySummary().hasBreaks">
                      <span class="font-medium"><?php echo e(trans('lang.days_with_breaks')); ?>:</span>
                      <span x-text="getWeeklySummary().breaksCount"></span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="p-4 bg-slate-50 border-t border-slate-200 text-right rounded-b-lg">
          <button type="button" @click="saveWorkingHours" :disabled="areWorkingHoursUnchanged || areWorkingHoursInvalid"
            class="uppercase w-full bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-0">
            <?php echo e(trans('lang.save')); ?>

          </button>
        </div>
      </div>

      
    </div>


    

    
    <div x-show="showMapModal" x-transition:enter="transition ease-out duration-300"
      x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
      x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100"
      x-transition:leave-end="opacity-0"
      class="fixed inset-0 z-[1010] flex items-center justify-center p-4 bg-black bg-opacity-80" style="display: none;"
      x-cloak>
      <div @click.away="showMapModal = false" x-transition:enter="transition ease-out duration-300"
        x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100"
        x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100 scale-100"
        x-transition:leave-end="opacity-0 scale-95"
        class="bg-white rounded-lg text-left overflow-hidden shadow-xl w-full max-w-4xl flex flex-col">

        <div class="bg-slate-50 px-6 py-4 flex items-center justify-between border-b border-slate-200">
          <h3 class="text-lg font-bold text-slate-700"><?php echo e(trans('lang.latitude_logitude_finder')); ?></h3>
          <button type="button" @click="showMapModal = false"
            class="text-slate-400 hover:text-slate-600 transition-colors focus:outline-none">
            <span class="sr-only"><?php echo e(trans('lang.close')); ?></span>
            <i class="fa-solid fa-times text-xl"></i>
          </button>
        </div>
        <div class="relative">
          <div x-ref="mapContainer" class="w-full h-[70vh]" :class="{'opacity-50': isGeocoding}"></div>
        </div>
        <div
          class="bg-gray-50 px-4 py-3 border-t border-gray-200 flex flex-col sm:flex-row items-center justify-between gap-4">
          <div class="text-sm">
            <div class="font-semibold"><?php echo e(trans('lang.detected_address')); ?></div>
            <div class="text-slate-600 mt-1 flex items-center gap-2">
                <span x-text="geocodedAddress || '...'"></span>
                <i x-show="isGeocoding" class="fa-solid fa-spinner fa-spin" x-transition></i>
            </div>
          </div>
          <div class="flex items-center gap-3 w-full sm:w-auto">
            <button @click="showMapModal = false" type="button"
              class="uppercase w-full px-8 py-2 bg-white text-gray-700 border border-gray-300 rounded-md hover:bg-gray-50 transition focus:outline-none focus:ring-0 font-normal">
              <?php echo e(trans('lang.cancel')); ?>

            </button>
            <button @click="useCoordinates()" type="button" :disabled="isGeocoding || !isGeocodedAddressValid"
              class="uppercase w-full bg-blue-500 text-white px-8 py-2 rounded-md hover:bg-blue-600 transition disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-0 font-normal">
              <?php echo e(trans('lang.submit')); ?>

            </button>
          </div>
        </div>
      </div>
    </div>

    
    <div x-show="notification.show" x-transition
      class="fixed top-5 right-5 z-50 w-full max-w-lg rounded-lg shadow-lg pointer-events-auto"
      :class="{ 'bg-green-100 border-l-4 border-green-500': notification.type === 'success', 'bg-red-100 border-l-4 border-red-500': notification.type === 'error' }"
      style="display: none;">
      <div class="p-4">
        <div class="grid grid-cols-[auto,1fr,auto] items-center gap-x-3">
          
          <div class="flex-shrink-0">
            <i x-show="notification.type === 'success'" class="fa-solid fa-check-circle text-green-500 text-xl"></i>
            <i x-show="notification.type === 'error'" class="fa-solid fa-times-circle text-red-500 text-xl"></i>
          </div>
          
          <div>
            <p class="text-sm font-medium break-words"
              :class="{ 'text-green-800': notification.type === 'success', 'text-red-800': notification.type === 'error' }"
              x-text="notification.message"></p>
          </div>
          
          <div class="flex-shrink-0">
            <button @click="notification.show = false"
              class="inline-flex text-slate-500 hover:text-slate-600 focus:outline-none">
              <span class="sr-only"><?php echo e(trans('lang.close')); ?></span>
              <i class="fa-solid fa-times"></i>
            </button>
          </div>
        </div>
      </div>
    </div>

    
    <div x-show="showUnsavedChangesModal" 
         class="fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center z-50"
         style="display: none;" 
         tabindex="-1"
         @click.outside="showUnsavedChangesModal = false; pendingNavigation = null">
      <div class="bg-white rounded-lg shadow-xl w-full max-w-lg overflow-hidden">
        
        
        <div class="p-6 text-center">
          <div class="mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-red-100">
            <i class="fa-solid fa-triangle-exclamation text-3xl text-red-600"></i>
          </div>
          <h4 class="text-xl font-semibold text-gray-900 mt-4">
            <?php echo e(trans('lang.unsaved_changes_title')); ?>

          </h4>
          <p class="mt-2 text-sm text-gray-600">
            <?php echo e(trans('lang.unsaved_changes_message')); ?>

          </p>
        </div>
        
        
        <div class="bg-gray-50 px-4 py-4 border-t border-gray-200 flex flex-col gap-3">
          
          <button type="button"
                  @click="showUnsavedChangesModal = false; pendingNavigation = null"
                  class="w-full h-12 flex items-center justify-center bg-blue-600 text-white text-base font-semibold rounded-md shadow-md uppercase transition-colors hover:bg-blue-700 focus:outline-none focus:ring-0 active:outline-none active:ring-0"
                  style="box-shadow: 1px 1px 2px rgba(0,0,0,0.2);">
            <?php echo e(trans('lang.stay_on_page')); ?>

          </button>
          
          <button type="button"
                  @click="confirmNavigation()"
                  class="w-full h-12 flex items-center justify-center bg-white text-gray-700 border border-gray-300 text-base font-semibold rounded-md shadow-sm uppercase transition-colors hover:bg-gray-50 focus:outline-none focus:ring-0 active:outline-none active:ring-0">
            <?php echo e(trans('lang.leave_without_saving')); ?>

          </button>
        </div>
      </div>
    </div>

  </div>
</div>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('scripts'); ?>
<style>
    /* Ukrywa elementy Alpine.js przed inicjalizacją */
    [x-cloak] { 
        display: none !important; 
    }
    
    /* Ukrywa linki "Warunki", "Zgłoś błąd" oraz logo Google w Google Maps */
    .gm-style-cc,
    .gmnoprint,
    a[href*="maps.google.com/maps"] {
        display: none !important;
    }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/compressorjs/1.1.1/compressor.min.js"></script>
<script>
  /**
   * Blade must inject vendor owner id before this script:
   *   <script> const vendorOwnerId = <?php echo e(auth()->id()); ?>; <\/script>
   */
  function restaurantComponent() {
    return {
      dataTableProcessing: false,
      notification: { show: false, type: 'success', message: '' },
      openDropdown: null,
      showMapModal: false,
      showUnsavedChangesModal: false,
      pendingNavigation: null,
      allowNavigation: false,
      map: null,
      marker: null,
      mapLatitude: 0,
      mapLongitude: 0,
      geocodedAddress: '',
      isGeocoding: false,
      isGeocodedAddressValid: false,
      tempAddress: { street_address: '', city: '', postal_code: '', country: '' },
      hourSlots: [],
      minuteSlots: [],
      restaurantMarkerIcon: '<?php echo e(asset("images/marker-restaurant.svg")); ?>',
      barMarkerIcon:        '<?php echo e(asset("images/marker-bar.svg")); ?>',

      // No longer a Firebase userId — just the Laravel auth user id
      // vendorOwnerId: typeof vendorOwnerId !== 'undefined' ? vendorOwnerId : null,

      // id: '',   // vendor DB id (bigint)
      placeholderImage: '/images/placeholder-restaurant.jpg',
      imagePreview: '',
      isDragging: false,
      isUploading: false,
      uploadProgress: 0,
      uploadError: '',
      uploadXhr: null,   // replaces firebase uploadTask
      descriptionCharLimit: 300,

      originalRestaurantDetails: {},
      originalCompanyData: {},
      originalFilters: {},
      originalWorkingHours: {},

      restaurantDetails: {
        title: '', category_id: '', phone_number: '', phone_number_prefix: '+49',
        email: '', latitude: '', longitude: '', description: '', photo: '',
        street_address: '', city: '', postal_code: '', country: 'Deutschland',
      },
      cityLoading: false,

      companyData: {
        legal_company_name: '', tax_number: '', street_address: '',
        postal_code: '', city: '', country: 'Deutschland', vat_number: '',
        commercial_register_number: '', legal_representative: '', legal_form: '',
      },

      errors: {},
      filters: {},

      allTagsConfig: {
        "<?php echo e(trans('lang.tags_group_price')); ?>": [
          { id: 'price_budget',    label: "<?php echo e(trans('lang.price_budget')); ?>" },
          { id: 'price_moderate',  label: "<?php echo e(trans('lang.price_moderate')); ?>" },
          { id: 'price_expensive', label: "<?php echo e(trans('lang.price_expensive')); ?>" },
        ],
        "<?php echo e(trans('lang.tags_group_cuisine')); ?>": [
          { id: 'cuisine_german',          label: "<?php echo e(trans('lang.cuisine_german')); ?>" },
          { id: 'cuisine_gutbuergerlich',  label: "<?php echo e(trans('lang.cuisine_gutbuergerlich')); ?>" },
          { id: 'cuisine_bavarian',        label: "<?php echo e(trans('lang.cuisine_bavarian')); ?>" },
          { id: 'cuisine_italian',         label: "<?php echo e(trans('lang.cuisine_italian')); ?>" },
          { id: 'cuisine_greek',           label: "<?php echo e(trans('lang.cuisine_greek')); ?>" },
          { id: 'cuisine_turkish',         label: "<?php echo e(trans('lang.cuisine_turkish')); ?>" },
          { id: 'cuisine_asian',           label: "<?php echo e(trans('lang.cuisine_asian')); ?>" },
          { id: 'cuisine_french',          label: "<?php echo e(trans('lang.cuisine_french')); ?>" },
          { id: 'cuisine_imbiss',          label: "<?php echo e(trans('lang.cuisine_imbiss')); ?>" },
          { id: 'cuisine_brauhaus',        label: "<?php echo e(trans('lang.cuisine_brauhaus')); ?>" },
          { id: 'cuisine_cafe_konditorei', label: "<?php echo e(trans('lang.cuisine_cafe_konditorei')); ?>" },
        ],
        "<?php echo e(trans('lang.tags_group_venue_type')); ?>": [
          { id: 'venue_restaurant',  label: "<?php echo e(trans('lang.venue_restaurant')); ?>" },
          { id: 'venue_bar',         label: "<?php echo e(trans('lang.venue_bar')); ?>" },
          { id: 'venue_pub',         label: "<?php echo e(trans('lang.venue_pub')); ?>" },
          { id: 'venue_cafe',        label: "<?php echo e(trans('lang.venue_cafe')); ?>" },
          { id: 'venue_beer_garden', label: "<?php echo e(trans('lang.venue_beer_garden')); ?>" },
          { id: 'venue_fast_food',   label: "<?php echo e(trans('lang.venue_fast_food')); ?>" },
          { id: 'venue_club',        label: "<?php echo e(trans('lang.venue_club')); ?>" },
        ],
      },

      categories: [],

      daysOfWeek: [
        { key: 'Monday',    label: "<?php echo e(trans('lang.day_monday')); ?>" },
        { key: 'Tuesday',   label: "<?php echo e(trans('lang.day_tuesday')); ?>" },
        { key: 'Wednesday', label: "<?php echo e(trans('lang.day_wednesday')); ?>" },
        { key: 'Thursday',  label: "<?php echo e(trans('lang.day_thursday')); ?>" },
        { key: 'Friday',    label: "<?php echo e(trans('lang.day_friday')); ?>" },
        { key: 'Saturday',  label: "<?php echo e(trans('lang.day_saturday')); ?>" },
        { key: 'Sunday',    label: "<?php echo e(trans('lang.day_sunday')); ?>" },
      ],
      workingHours: {},

      // ── Computed getters (unchanged logic) ────────────────────────────────────

      get isRestaurantDetailsDirty() {
        if (!this.originalRestaurantDetails) return false;
        return JSON.stringify(this.restaurantDetails) !== JSON.stringify(this.originalRestaurantDetails);
      },
      get isCompanyDataDirty() {
        if (!this.originalCompanyData) return false;
        return JSON.stringify(this.companyData) !== JSON.stringify(this.originalCompanyData);
      },
      get areTagsUnchanged() {
        const pick = (src) => {
          const out = {};
          Object.values(this.allTagsConfig).forEach(g =>
            g.forEach(t => { if (t.id in src) out[t.id] = src[t.id]; })
          );
          return out;
        };
        return JSON.stringify(pick(this.filters)) === JSON.stringify(pick(this.originalFilters));
      },
      get areWorkingHoursUnchanged() {
        if (Object.keys(this.workingHours).length === 0) return true;
        return JSON.stringify(this.workingHours) === JSON.stringify(this.originalWorkingHours);
      },
      get areWorkingHoursInvalid() {
        for (const day of this.daysOfWeek) {
          const d = this.workingHours[day.key];
          if (!d?.active) continue;
          if (d.slots.length === 0) return true;
          for (let i = 0; i < d.slots.length; i++) {
            const s = d.slots[i];
            if (!s.from || !s.to) return true;
            if (!this.isTimeSlotValid(s)) return true;
            if (this.isSlotOverlapping(day.key, i)) return true;
          }
        }
        return false;
      },
      get selectedCategoryTitle() {
        if (!this.restaurantDetails.category_id || !this.categories.length)
          return "<?php echo trans('lang.select_main_restaurant_category'); ?>";
        return this.categories.find(c => c.id == this.restaurantDetails.category_id)?.title
          ?? "<?php echo trans('lang.select_main_restaurant_category'); ?>";
      },
      get activeMarkerIconUrl() {
        const cat = this.categories.find(c => c.id == this.restaurantDetails.category_id);
        return cat?.title?.trim().toLowerCase() === 'pub' ? this.barMarkerIcon : this.restaurantMarkerIcon;
      },
      get hasUnsavedChanges() {
        return this.isRestaurantDetailsDirty || this.isCompanyDataDirty
            || !this.areTagsUnchanged || !this.areWorkingHoursUnchanged;
      },

      // ── CSRF helper ───────────────────────────────────────────────────────────

      _csrf() {
        return document.cookie
          .split('; ')
          .find(r => r.startsWith('XSRF-TOKEN='))
          ?.split('=')[1]
          ?.replace(/%3D/g, '=') ?? '';
      },

      // ── Core API helper ───────────────────────────────────────────────────────

      async _api(method, path, body = null) {
        const headers = { 'Accept': 'application/json', 'X-XSRF-TOKEN': this._csrf() };
        if (body) headers['Content-Type'] = 'application/json';

        const res = await fetch(`/api/vendor${path}`, {
          method,
          credentials: 'same-origin',
          headers,
          body: body ? JSON.stringify(body) : null,
        });

        if (!res.ok) {
          const err = await res.json().catch(() => ({}));
          if (res.status === 422 && err.errors) {
            Object.entries(err.errors).forEach(([field, msgs]) => {
              this.errors[field.split('.').pop()] = msgs[0];
            });
            throw new Error('<?php echo e(trans("lang.form_errors_correct_them")); ?>');
          }
          throw new Error(err.message || res.statusText);
        }
        return res.json();
      },

      // ── INIT — replaces all Firebase collection reads ──────────────────────
      // GET /api/vendor returns { vendor, categories }

      async init() {
        this.dataTableProcessing = true;
        this.setupNavigationGuards();
        try {
          this.hourSlots   = Array.from({ length: 24 }, (_, i) => String(i).padStart(2, '0'));
          this.minuteSlots = Array.from({ length: 60 }, (_, i) => String(i).padStart(2, '0'));

          const { vendor, categories } = await this._api('GET', '/');

          this.categories = categories;

          if (!vendor) {
            this.showNotification("<?php echo e(trans('lang.error_restaurant_not_found')); ?>", 'error');
            this._initWorkingHours([]);
            return;
          }

          this.id = vendor.id;

          // Map DB columns → local state
          // Note: DB uses phone_number / category_id, original Firebase used phonenumber / categoryID
          this.restaurantDetails = {
            title:               vendor.title               ?? '',
            category_id:         vendor.category_id         ?? '',
            phone_number:        vendor.phone_number         ?? '',
            phone_number_prefix: vendor.phone_number_prefix  ?? '+49',
            email:               vendor.email               ?? '',
            latitude:            vendor.latitude             ?? '',
            longitude:           vendor.longitude            ?? '',
            description:         vendor.description          ?? '',
            photo:               vendor.photo               ?? '',
            street_address:      vendor.address       ?? '',
            city:                vendor.city                ?? '',
            postal_code:         vendor.postal_code          ?? '',
            country:             vendor.country              ?? 'Deutschland',
          };

          const cd = vendor.company_data ?? {};
          this.companyData = {
            legal_company_name:         cd.legal_company_name         ?? '',
            tax_number:                 cd.tax_number                 ?? '',
            street_address:             cd.street_address             ?? '',
            postal_code:                cd.postal_code                ?? '',
            city:                       cd.city                       ?? '',
            country:                    cd.country                    ?? 'Deutschland',
            vat_number:                 cd.vat_number                 ?? '',
            commercial_register_number: cd.commercial_register_number ?? '',
            legal_representative:       cd.legal_representative       ?? '',
            legal_form:                 cd.legal_form                 ?? '',
          };

          // filters stored in filters_ids column
          this.filters = vendor.filters_ids ?? {};

          // Working hours come from vendor_working_hours rows
          // API returns them as [{ day_of_week, open_time, close_time, is_closed }]
          this._initWorkingHours(vendor.working_hours ?? []);

          this.imagePreview = this.restaurantDetails.photo || this.placeholderImage;

          // Snapshot originals for dirty-checking
          this.originalRestaurantDetails = JSON.parse(JSON.stringify(this.restaurantDetails));
          this.originalCompanyData       = JSON.parse(JSON.stringify(this.companyData));
          this.originalFilters           = JSON.parse(JSON.stringify(this.filters));
          this.originalWorkingHours      = JSON.parse(JSON.stringify(this.workingHours));

        } catch (err) {
          this.showNotification("<?php echo e(trans('lang.error_loading_data')); ?>: " + err.message, 'error');
          console.error('init error:', err);
        } finally {
          this.dataTableProcessing = false;
        }
      },

      // Converts flat vendor_working_hours rows → { Monday: { active, slots }, … }
      _initWorkingHours(rows) {
        this.daysOfWeek.forEach(d => { this.workingHours[d.key] = { active: false, slots: [] }; });

        // API can return rows from vendor_working_hours table:
        // [{ day_of_week: "Monday", open_time: "09:00", close_time: "17:00", is_closed: false }]
        // OR the old array format: [{ day: "Monday", timeslot: [{from, to}] }]
        rows.forEach(row => {
          const day = row.day_of_week ?? row.day ?? null;
          if (!day || !this.workingHours.hasOwnProperty(day)) return;

          if (row.timeslot !== undefined) {
            // Old array format
            this.workingHours[day] = {
              active: row.timeslot?.length > 0,
              slots:  (row.timeslot ?? []).map(s => ({ from: s.from ?? '', to: s.to ?? '' })),
            };
          } else if (!row.is_closed && row.open_time && row.close_time) {
            // vendor_working_hours row format — group multiple rows per day
            if (!this.workingHours[day].active) {
              this.workingHours[day].active = true;
            }
            this.workingHours[day].slots.push({ from: row.open_time, to: row.close_time });
          }
        });
      },

      // ── _handleSave — replaces firebase.collection.update ────────────────────
      // Routes each section to its dedicated PUT endpoint

      async _handleSave(section, payload, successMessage, originalKey, currentKey) {
        this.dataTableProcessing = true;
        try {
          await this._api('PUT', `/${section}`, payload);
          this.showNotification(successMessage, 'success');
          this[originalKey] = JSON.parse(JSON.stringify(this[currentKey]));
          this.allowNavigation = false;
        } catch (err) {
          this.showNotification("<?php echo e(trans('lang.error_saving_data')); ?>: " + err.message, 'error');
        } finally {
          this.dataTableProcessing = false;
        }
      },

      // ── Save methods ──────────────────────────────────────────────────────────

      async saveRestaurantDetails() {
        if (!this.validateRestaurantDetailsForm()) {
          this.showNotification('<?php echo e(trans("lang.form_errors_correct_them")); ?>', 'error'); return;
        }
        if (!this.isRestaurantDetailsDirty) return;

        // No firebase.firestore.GeoPoint — plain lat/lng sent to server
        await this._handleSave(
          'details',
          this.restaurantDetails,
          '<?php echo e(trans("lang.restaurant_details_saved_success")); ?>',
          'originalRestaurantDetails', 'restaurantDetails'
        );
      },

      async saveCompanyData() {
        if (!this.validateCompanyDataForm()) {
          this.showNotification('<?php echo e(trans("lang.form_errors_correct_them")); ?>', 'error'); return;
        }
        if (!this.isCompanyDataDirty) return;

        await this._handleSave(
          'company',
          this.companyData,
          '<?php echo e(trans("lang.company_data_saved_success")); ?>',
          'originalCompanyData', 'companyData'
        );
      },

      async saveTags() {
        if (this.areTagsUnchanged) return;

        // Build compatibility map for mobile client
        const tags = { ...this.filters };
        const legacyMap = {
          price_budget: 'Budget', price_moderate: 'Moderate', price_expensive: 'Expensive',
          venue_restaurant: 'Restaurant', venue_bar: 'Bar', venue_cafe: 'Cafe',
          cuisine_german: 'German', cuisine_italian: 'Italian', cuisine_asian: 'Asian',
        };
        Object.entries(legacyMap).forEach(([k, v]) => { if (tags[k]) tags[v] = true; });

        await this._handleSave(
          'filters',
          { filters: tags },
          '<?php echo e(trans("lang.tags_saved_success")); ?>',
          'originalFilters', 'filters'
        );
      },

      async saveWorkingHours() {
        if (this.areWorkingHoursUnchanged || this.areWorkingHoursInvalid) return;

        const working_hours = Object.keys(this.workingHours).map(day => ({
          day,
          timeslot: this.workingHours[day].active
            ? this.workingHours[day].slots.filter(s => s.from && s.to)
            : [],
        }));

        await this._handleSave(
          'working-hours',
          { working_hours },
          '<?php echo e(trans("lang.hours_saved_success")); ?>',
          'originalWorkingHours', 'workingHours'
        );
      },

      // ── Photo upload — replaces Firebase Storage ──────────────────────────────
      // Uses XHR (not fetch) to keep the progress bar working

      triggerFileInput() {
        this.uploadError = '';
        document.getElementById('restaurantImage').click();
      },

      selectFile(file) {
        if (!file) return;
        this.uploadError = '';
        if (!['image/jpeg','image/png','image/webp'].includes(file.type)) {
          this.uploadError = '<?php echo e(trans("lang.errors.invalid_file_format")); ?>'; return;
        }
        if (file.size > 5 * 1024 * 1024) {
          this.uploadError = '<?php echo e(trans("lang.errors.file_too_large")); ?>'; return;
        }
        this.imagePreview = URL.createObjectURL(file);
        this.uploadAndTrackProgress(file);
      },

      uploadAndTrackProgress(file) {
        this.isUploading    = true;
        this.uploadProgress = 0;

        const form = new FormData();
        form.append('photo', file);

        const xhr = new XMLHttpRequest();
        this.uploadXhr = xhr;

        xhr.upload.addEventListener('progress', e => {
          if (e.lengthComputable) this.uploadProgress = (e.loaded / e.total) * 100;
        });

        xhr.addEventListener('load', () => {
          this.isUploading = false;
          this.uploadXhr   = null;
          if (xhr.status === 200) {
            const data = JSON.parse(xhr.responseText);
            this.restaurantDetails.photo = data.url;
            this.imagePreview            = data.url;
            this.showNotification('<?php echo e(trans("lang.notifications.photo_upload_success")); ?>', 'success');
          } else {
            const err = JSON.parse(xhr.responseText ?? '{}');
            this.uploadError  = err.message ?? '<?php echo e(trans("lang.errors.file_upload_error")); ?>';
            this.imagePreview = this.originalRestaurantDetails.photo || this.placeholderImage;
          }
        });

        xhr.addEventListener('error', () => {
          this.isUploading  = false;
          this.uploadXhr    = null;
          this.uploadError  = '<?php echo e(trans("lang.errors.file_upload_error")); ?>';
          this.imagePreview = this.originalRestaurantDetails.photo || this.placeholderImage;
        });

        xhr.open('POST', '/api/vendor/photo');
        xhr.setRequestHeader('Accept', 'application/json');
        xhr.setRequestHeader('X-XSRF-TOKEN', this._csrf());
        xhr.withCredentials = true;
        xhr.send(form);
      },

      cancelUpload() {
        this.uploadXhr?.abort();
        this.isUploading    = false;
        this.uploadProgress = 0;
        this.uploadXhr      = null;
        this.imagePreview   = this.originalRestaurantDetails.photo || this.placeholderImage;
      },

      async removeImage() {
        try {
          await this._api('DELETE', '/photo');
          this.restaurantDetails.photo = '';
          this.imagePreview            = this.placeholderImage;
          this.uploadError             = '';
        } catch (err) {
          this.showNotification(err.message, 'error');
        }
      },

      // ── Validation (field names updated to match DB columns) ─────────────────

      validateField(field, context = null) {
        const isRest = context === 'company' ? false : field in this.restaurantDetails;
        const isCo   = context === 'restaurant' ? false : field in this.companyData;
        const value  = isRest ? this.restaurantDetails[field] : (isCo ? this.companyData[field] : undefined);
        let message  = '';

        if (isRest) {
          switch (field) {
            case 'title':         if (!String(value).trim()) message = '<?php echo e(trans("lang.restaurant_name_error")); ?>'; break;
            case 'category_id':   if (!value) message = '<?php echo e(trans("lang.restaurant_category_error")); ?>'; break;
            case 'phone_number': {
              const c = String(value).replace(/\s/g, '');
              if (!c) message = '<?php echo e(trans("lang.restaurant_phone_error")); ?>';
              else if (!/^\d{7,15}$/.test(c)) message = '<?php echo e(trans("lang.restaurant_phone_invalid_error")); ?>';
              break;
            }
            case 'email': {
              const e = String(value).trim();
              if (!e) message = '<?php echo e(trans("lang.restaurant_email_error")); ?>';
              else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e)) message = '<?php echo e(trans("lang.restaurant_email_invalid_error")); ?>';
              break;
            }
            case 'description':    if (!String(value).trim()) message = '<?php echo e(trans("lang.restaurant_description_error")); ?>'; break;
            case 'photo':          if (!value) message = '<?php echo e(trans("lang.restaurant_image_error")); ?>'; break;
            case 'street_address': if (!String(value).trim()) message = '<?php echo e(trans("lang.street_address_error")); ?>'; break;
            case 'city':
              if (!String(value).trim()) message = '<?php echo e(trans("lang.city_error")); ?>';
              else if (/[^\p{L}\s-]/u.test(String(value).trim())) message = '<?php echo e(trans("lang.restaurant_city_error_invalid")); ?>';
              break;
            case 'postal_code':
              if (!String(value).trim()) message = '<?php echo e(trans("lang.postal_code_error")); ?>';
              else if (!/^\d{5}$/.test(String(value).trim())) message = '<?php echo e(trans("lang.company_postal_code_error_invalid")); ?>';
              break;
            case 'country':
              if (!['deutschland','germany'].includes(String(value).trim().toLowerCase()))
                message = '<?php echo e(trans("lang.country_error_not_germany")); ?>';
              break;
          }
        } else if (isCo) {
          switch (field) {
            case 'legal_company_name': if (!String(value).trim()) message = '<?php echo e(trans("lang.legal_company_name_error")); ?>'; break;
            case 'vat_number': {
              const v = String(value).trim().toUpperCase();
              if (!v) message = '<?php echo e(trans("lang.vat_number_error")); ?>';
              else if (!/^DE\d{9}$/i.test(v)) message = '<?php echo e(trans("lang.vat_number_invalid_format_error")); ?>';
              break;
            }
            case 'tax_number': {
              const t = String(value).replace(/\D/g, '');
              this.companyData.tax_number = t;
              if (t && !/^\d{10,11}$/.test(t)) message = '<?php echo e(trans("lang.tax_number_invalid_format_error")); ?>';
              break;
            }
            case 'street_address':
              if (!String(value).trim()) message = '<?php echo e(trans("lang.company_street_address_error_required")); ?>';
              else if (!/^(?=.*[a-zA-ZäöüÄÖÜß])(?=.*[0-9]).+$/.test(String(value))) message = '<?php echo e(trans("lang.company_street_address_error_invalid")); ?>';
              break;
            case 'postal_code':
              if (!String(value).trim()) message = '<?php echo e(trans("lang.company_postal_code_error_required")); ?>';
              else if (!/^\d{5}$/.test(String(value))) message = '<?php echo e(trans("lang.company_postal_code_error_invalid")); ?>';
              break;
            case 'city':
              if (!String(value).trim()) message = '<?php echo e(trans("lang.company_city_error_required")); ?>';
              else if (/[^\p{L}\s-]/u.test(String(value))) message = '<?php echo e(trans("lang.company_city_error_invalid")); ?>';
              break;
            case 'commercial_register_number':
              if (String(value).trim() && !/^(HRA|HRB)\s*\d+$/i.test(String(value)))
                message = '<?php echo e(trans("lang.commercial_register_number_invalid_format_error")); ?>';
              break;
            case 'legal_representative':
              if (String(value).trim().length > 0 && String(value).trim().length < 3)
                message = '<?php echo e(trans("lang.legal_representative_invalid_format_error")); ?>';
              break;
            case 'legal_form':
              if (String(value).trim().length > 0 && String(value).trim().length < 2)
                message = '<?php echo e(trans("lang.legal_form_invalid_format_error")); ?>';
              break;
          }
        }

        if (message) this.errors[field] = message;
        else          delete this.errors[field];
      },

      validateRestaurantDetailsForm() {
        const fields = ['title','category_id','phone_number','email',
                        'street_address','city','postal_code','country','description','photo'];
        fields.forEach(f => this.validateField(f));
        return fields.every(f => !this.errors[f]);
      },

      validateCompanyDataForm() {
        const required = ['legal_company_name','street_address','postal_code','city','country','vat_number'];
        const optional = ['tax_number','commercial_register_number','legal_representative','legal_form'];
        [...required, ...optional].forEach(f => this.validateField(f, 'company'));
        return required.every(f => !this.errors[f]);
      },

      // ── Map (Google Maps — unchanged) ─────────────────────────────────────────

      showNotification(message, type = 'success', duration = 4000) {
        this.notification = { show: true, type, message };
        setTimeout(() => { this.notification.show = false; }, duration);
      },
      openMapModal() {
        this.showMapModal = true;
        const { street_address, postal_code, city } = this.restaurantDetails;
        this.geocodedAddress = (street_address && city && postal_code)
          ? `${street_address}, ${postal_code} ${city}`
          : '<?php echo e(trans("lang.address_not_set")); ?>';
        this.isGeocodedAddressValid = false;
        this.$nextTick(() => {
          if (!this.map) this.initMap();
          else {
            const lat = parseFloat(this.restaurantDetails.latitude) || 52.5200;
            const lng = parseFloat(this.restaurantDetails.longitude) || 13.4050;
            const ll  = new google.maps.LatLng(lat, lng);
            this.map.setCenter(ll); this.marker.setPosition(ll);
            this.mapLatitude = lat.toFixed(6); this.mapLongitude = lng.toFixed(6);
            this.updateMapMarkerIcon(); this.geocodeLatLng(ll);
          }
        });
      },
      initMap() {
        const lat = parseFloat(this.restaurantDetails.latitude) || 52.5200;
        const lng = parseFloat(this.restaurantDetails.longitude) || 13.4050;
        this.mapLatitude = lat.toFixed(6); this.mapLongitude = lng.toFixed(6);
        this.map = new google.maps.Map(this.$refs.mapContainer, {
          center: { lat, lng }, zoom: 15, disableDefaultUI: true, zoomControl: true,
          keyboardShortcuts: false, clickableIcons: false,
          restriction: { latLngBounds: { north:55.1, south:47.2, west:5.8, east:15.1 }, strictBounds: false },
        });
        this.marker = new google.maps.Marker({
          position: { lat, lng }, map: this.map, draggable: true,
          icon: { url: this.activeMarkerIconUrl, scaledSize: new google.maps.Size(40,40), anchor: new google.maps.Point(20,40) },
        });
        this.marker.addListener('dragend', e => {
          this.mapLatitude  = e.latLng.lat().toFixed(6);
          this.mapLongitude = e.latLng.lng().toFixed(6);
          this.geocodeLatLng(e.latLng);
        });
        this.geocodeLatLng(new google.maps.LatLng(lat, lng));
      },
      useCoordinates() {
        if (!this.isGeocodedAddressValid) {
          this.showNotification('<?php echo e(trans("lang.address_not_precise_enough_error")); ?>', 'error'); return;
        }
        Object.assign(this.restaurantDetails, {
          latitude: this.mapLatitude, longitude: this.mapLongitude, ...this.tempAddress,
        });
        this.showMapModal = false;
        ['street_address','city','postal_code','country'].forEach(f => this.validateField(f));
      },
      geocodeLatLng(latLng) {
        this.isGeocoding = true; this.isGeocodedAddressValid = false;
        new google.maps.Geocoder().geocode({ location: latLng, language: 'de' }, (results, status) => {
          if (status === 'OK' && results[0]) {
            const get = type => results[0].address_components.find(c => c.types.includes(type))?.long_name ?? '';
            if (get('country') === 'Deutschland') {
              const street = get('route'), num = get('street_number'),
                    city   = get('locality') || get('postal_town'), postal = get('postal_code');
              if (street && city && postal) {
                this.tempAddress = { street_address: `${street} ${num}`.trim(), city, postal_code: postal, country: 'Deutschland' };
                this.geocodedAddress = results[0].formatted_address;
                this.isGeocodedAddressValid = true;
              } else { this.geocodedAddress = '<?php echo e(trans("lang.address_not_precise_enough")); ?>'; }
            } else {
              this.showNotification('<?php echo e(trans("lang.address_not_in_germany_error")); ?>', 'error');
              this.geocodedAddress = '<?php echo e(trans("lang.address_not_in_germany_error")); ?>';
            }
          } else {
            this.geocodedAddress = status === 'ZERO_RESULTS'
              ? '<?php echo e(trans("lang.address_not_found")); ?>'
              : '<?php echo e(trans("lang.geocode_failed")); ?>' + status;
          }
          this.isGeocoding = false;
        });
      },
      updateMapMarkerIcon() {
        this.marker?.setIcon({ url: this.activeMarkerIconUrl, scaledSize: new google.maps.Size(40,40), anchor: new google.maps.Point(20,40) });
      },

      // ── Working hours helpers (unchanged) ─────────────────────────────────────

      getHour(t)  { return t?.includes(':') ? t.split(':')[0] : '00'; },
      getMinute(t){ return t?.includes(':') ? t.split(':')[1] : '00'; },
      updateTime(slot, type, part, value) {
        const [h, m] = (slot[type] || '00:00').split(':');
        slot[type] = part === 'hour' ? `${value}:${m}` : `${h}:${value}`;
      },
      isTimeSlotValid(slot) {
        if (!slot.from || !slot.to) return true;
        const fh = parseInt(slot.from), th = parseInt(slot.to);
        return (th < 6 && fh > 12) || slot.from <= slot.to;
      },
      isSlotOverlapping(dayKey, i) {
        if (i === 0) return false;
        const s = this.workingHours[dayKey].slots;
        return s[i].from && s[i-1].to ? s[i].from <= s[i-1].to : false;
      },
      addTimeSlot(dayKey)       { this.workingHours[dayKey]?.slots.push({ from: '', to: '' }); },
      removeTimeSlot(dayKey, i) { this.workingHours[dayKey]?.slots.splice(i, 1); },
      toggleDay(dayKey) {
        const d = this.workingHours[dayKey]; if (!d) return;
        d.active = !d.active;
        if (d.active && !d.slots.length) d.slots.push({ from: '09:00', to: '17:00' });
      },
      copyMondayToAll() {
        if (!this.workingHours.Monday?.active) return;
        const mon = JSON.parse(JSON.stringify(this.workingHours.Monday));
        this.daysOfWeek.forEach(d => { if (d.key !== 'Monday') this.workingHours[d.key] = JSON.parse(JSON.stringify(mon)); });
        this.showNotification('<?php echo e(trans("lang.monday_copied_to_all")); ?>', 'success');
      },
      clearAllHours() {
        this.daysOfWeek.forEach(d => { this.workingHours[d.key] = { active: false, slots: [] }; });
        this.showNotification('<?php echo e(trans("lang.hours_cleared")); ?>', 'success');
      },
      getPresets() {
        return {
          restaurant: {
            Monday:    { active: true, slots: [{ from: '11:00', to: '15:00' }, { from: '18:00', to: '23:00' }] },
            Tuesday:   { active: true, slots: [{ from: '11:00', to: '15:00' }, { from: '18:00', to: '23:00' }] },
            Wednesday: { active: true, slots: [{ from: '11:00', to: '15:00' }, { from: '18:00', to: '23:00' }] },
            Thursday:  { active: true, slots: [{ from: '11:00', to: '15:00' }, { from: '18:00', to: '23:00' }] },
            Friday:    { active: true, slots: [{ from: '11:00', to: '15:00' }, { from: '18:00', to: '24:00' }] },
            Saturday:  { active: true, slots: [{ from: '11:00', to: '24:00' }] },
            Sunday:    { active: true, slots: [{ from: '11:00', to: '22:00' }] },
          },
          cafe: {
            Monday:    { active: true, slots: [{ from: '07:00', to: '19:00' }] },
            Tuesday:   { active: true, slots: [{ from: '07:00', to: '19:00' }] },
            Wednesday: { active: true, slots: [{ from: '07:00', to: '19:00' }] },
            Thursday:  { active: true, slots: [{ from: '07:00', to: '19:00' }] },
            Friday:    { active: true, slots: [{ from: '07:00', to: '20:00' }] },
            Saturday:  { active: true, slots: [{ from: '08:00', to: '20:00' }] },
            Sunday:    { active: true, slots: [{ from: '09:00', to: '18:00' }] },
          },
          bar: {
            Monday:    { active: true, slots: [{ from: '00:00', to: '01:00' }, { from: '16:00', to: '23:59' }] },
            Tuesday:   { active: true, slots: [{ from: '00:00', to: '01:00' }, { from: '16:00', to: '23:59' }] },
            Wednesday: { active: true, slots: [{ from: '00:00', to: '01:00' }, { from: '16:00', to: '23:59' }] },
            Thursday:  { active: true, slots: [{ from: '00:00', to: '01:00' }, { from: '16:00', to: '23:59' }] },
            Friday:    { active: true, slots: [{ from: '00:00', to: '02:00' }, { from: '16:00', to: '23:59' }] },
            Saturday:  { active: true, slots: [{ from: '00:00', to: '03:00' }, { from: '14:00', to: '23:59' }] },
            Sunday:    { active: true, slots: [{ from: '00:00', to: '03:00' }, { from: '14:00', to: '23:59' }] },
          },
        };
      },
      applyPreset(type) {
        const p = this.getPresets()[type];
        if (p) { this.workingHours = JSON.parse(JSON.stringify(p)); this.showNotification('<?php echo e(trans("lang.preset_applied")); ?>', 'success'); }
      },
      isPresetActive(type) {
        const preset = this.getPresets()[type];
        if (!preset) return false;
        for (const day of Object.keys(preset)) {
          const p = preset[day], c = this.workingHours[day];
          if (p.active !== c?.active) return false;
          if (!p.active) continue;
          if (p.slots.length !== c?.slots?.length) return false;
          for (let i = 0; i < p.slots.length; i++) {
            if (!c.slots[i] || p.slots[i].from !== c.slots[i].from || p.slots[i].to !== c.slots[i].to) return false;
          }
        }
        return true;
      },

      // ── Tag helpers (unchanged) ───────────────────────────────────────────────

      selectTagInGroup(groupName, id) {
        const was = !!this.filters[id];
        this.allTagsConfig[groupName].forEach(t => { this.filters[t.id] = false; });
        if (!was) this.filters[id] = true;
        this.$nextTick(() => { this.filters = { ...this.filters }; });
      },
      clearGroupSelection(groupName) {
        this.allTagsConfig[groupName].forEach(t => { this.filters[t.id] = false; });
        this.filters = { ...this.filters };
      },
      hasSelectionInGroup(groupName) {
        return this.allTagsConfig[groupName].some(t => this.filters[t.id]);
      },
      getSelectedTagsPreview() {
        const selected = [];
        Object.values(this.allTagsConfig).forEach(group => {
          const tag = group.find(t => this.filters[t.id]);
          if (tag) selected.push(tag.label);
        });
        return selected.join(' · ');
      },

      // ── Misc helpers (unchanged) ──────────────────────────────────────────────

      formatVATNumber() {
        let v = (this.companyData.vat_number ?? '').replace(/[^A-Z0-9]/gi, '').toUpperCase();
        if (v && !/^[A-Z]{2}/.test(v)) v = 'DE' + v;
        this.companyData.vat_number = v;
      },
      copyRestaurantAddress() {
        const r = this.restaurantDetails;
        Object.assign(this.companyData, { street_address: r.street_address, postal_code: r.postal_code, city: r.city, country: r.country });
        this.showNotification('<?php echo e(trans("lang.address_copied")); ?>', 'success');
      },
      fetchCityByPostalCode() {
        if (this.companyData.postal_code?.length !== 5) return;
        this.cityLoading = true;
        const map = {
          '10115':'Berlin','10117':'Berlin','20095':'Hamburg','80331':'München',
          '50667':'Köln','60311':'Frankfurt am Main','70173':'Stuttgart',
          '40210':'Düsseldorf','44135':'Dortmund','04109':'Leipzig',
        };
        setTimeout(() => {
          const city = map[this.companyData.postal_code];
          if (city && !this.companyData.city) this.companyData.city = city;
          this.cityLoading = false;
        }, 300);
      },
      formatPhoneNumber() {
        let v = (this.restaurantDetails.phone_number ?? '').replace(/\D/g, '');
        if      (v.length <= 3)  this.restaurantDetails.phone_number = v;
        else if (v.length <= 6)  this.restaurantDetails.phone_number = `${v.slice(0,3)} ${v.slice(3)}`;
        else if (v.length <= 10) this.restaurantDetails.phone_number = `${v.slice(0,3)} ${v.slice(3,6)} ${v.slice(6)}`;
        else                     this.restaurantDetails.phone_number = `${v.slice(0,3)} ${v.slice(3,6)} ${v.slice(6,10)}`;
      },
      getRestaurantInfoCompleteness() {
        const r = this.restaurantDetails;
        let req = 0, opt = 0;
        if (r.title?.trim())                               req++;
        if (r.category_id)                                 req++;
        if (r.phone_number?.replace(/\D/g,'').length >= 9) req++;
        if (r.email?.includes('@'))                        req++;
        if (r.street_address?.trim())                      req++;
        if (r.description?.trim())                         opt++;
        if (r.photo)                                       opt++;
        return Math.round((req / 5) * 80 + (opt / 2) * 20);
      },
      getCompanyDataCompleteness() {
        const req = ['legal_company_name','vat_number','street_address','postal_code','city'];
        const opt = ['tax_number','commercial_register_number'];
        const filled = k => this.companyData[k]?.trim?.() !== '';
        return Math.round((req.filter(filled).length / req.length) * 80
                        + (opt.filter(filled).length / opt.length) * 20);
      },
      getWeeklySummary() {
        let totalDays = 0, totalHours = 0, longestDay = '', longestHours = 0, breaksCount = 0;
        this.daysOfWeek.forEach(day => {
          const d = this.workingHours[day.key];
          if (!d?.active) return;
          totalDays++;
          if (d.slots.length > 1) breaksCount++;
          let dayH = 0;
          d.slots.forEach(s => {
            if (!s.from || !s.to) return;
            let h = parseInt(s.to) - parseInt(s.from);
            let m = parseInt(s.to.split(':')[1]) - parseInt(s.from.split(':')[1]);
            if (m < 0) { h--; m += 60; }
            if (parseInt(s.to) < parseInt(s.from)) h += 24;
            dayH += h + m / 60;
          });
          totalHours += dayH;
          if (dayH > longestHours) { longestHours = dayH; longestDay = day.label; }
        });
        return { totalDays, totalHours: Math.round(totalHours), longestDay, hasBreaks: breaksCount > 0, breaksCount };
      },

      // ── Navigation guards (unchanged) ─────────────────────────────────────────

      checkForUnsavedChanges(callback) {
        if (this.hasUnsavedChanges && !this.allowNavigation) {
          this.pendingNavigation = callback; this.showUnsavedChangesModal = true; return false;
        }
        callback?.(); return true;
      },
      confirmNavigation() {
        this.showUnsavedChangesModal = false;
        if (this.pendingNavigation) {
          const cb = this.pendingNavigation; this.pendingNavigation = null; this.allowNavigation = true; cb();
        }
      },
      setupNavigationGuards() {
        const self = this;
        document.addEventListener('click', e => {
          const link = e.target.closest('a');
          if (!link) return;
          const href = link.getAttribute('href');
          if (!href || href === '#' || href.startsWith('javascript:') || href === '') return;
          if (link.closest('[x-show="showMapModal"]') || link.closest('[x-show="showUnsavedChangesModal"]')) return;
          if (self.hasUnsavedChanges && !self.allowNavigation) {
            e.preventDefault(); e.stopPropagation(); e.stopImmediatePropagation();
            self.pendingNavigation = () => { self.allowNavigation = true; window.location.href = href; };
            self.showUnsavedChangesModal = true;
          }
        }, true);
        let navBack = false;
        window.addEventListener('popstate', () => {
          if (self.hasUnsavedChanges && !self.allowNavigation && !navBack) {
            navBack = true;
            history.pushState(null, '', window.location.href);
            self.pendingNavigation = () => { self.allowNavigation = true; navBack = false; history.back(); };
            self.showUnsavedChangesModal = true;
            setTimeout(() => { navBack = false; }, 100);
          }
        });
        history.pushState(null, '', window.location.href);
        window.addEventListener('beforeunload', e => {
          if (self.hasUnsavedChanges && !self.allowNavigation) {
            e.preventDefault(); e.returnValue = '<?php echo e(trans("lang.unsaved_changes_warning")); ?>';
          }
        });
      },
    };
  }
</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\xampp\htdocs\pub-and-go-merchant-np\resources\views/users/restaurant.blade.php ENDPATH**/ ?>