@extends('layouts.super_admin.app')

@section('styles')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('assets/css/products/edit.css') }}">
    
    <style>
        .cursor-pointer {
            cursor: pointer;
        }
    </style>
    
    @error('category')
        <style>
            .form-category .choices__inner {
                border: 1px solid #e23e3d !important;
            }
            
        </style>
    @enderror

    @error('district')
        <style>
            .form-district .choices__inner {
                border: 1px solid #e23e3d !important;
            }
        </style>
    @enderror
@endsection

@section('content')
    <!-- PAGE-HEADER -->
    <div class="page-header d-flex align-items-center justify-content-between border-bottom mb-4">
        <h1 class="page-title">{{ __('global.edit_product') }}</h1>
        <div>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('superadmin.get.products') }}">{{ __('global.products') }}</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{ __('global.product') }}</li>
            </ol>
        </div> 
    </div>
    <!-- PAGE-HEADER END -->

    <!-- CONTAINER -->
    <div class="main-container container-fluid">
        <form action="{{ route('superadmin.update.products', $product->id) }}" method="POST" enctype="multipart/form-data" id="product-edit-form">
            @csrf
            <div class="row card-body">
                <div class="col-xl-5 col-md-12">
                    <div class="card">
                        <div class=" card-body row">
                            <div class="col-12">
                                <div class="card">
                                    <div class="card-header d-flex justify-content-between">
                                        <h3 class="card-title my-2">{{ __('global.details') }}</h3>
                                    </div>
                                    <div class="card-body">
                                        <div class="form-group mb-4">
                                            <label for="product_image" class="">{{ __('global.main_image') }}</label>


                                            @if($product->image && File::exists(public_path('assets/images/products/' . $product->image)))
                                                <div class="row">
                                                    <div class="col-8">
                                                        <input type="file" class="form-control filepond" name="product_image" id="product_image">
                                                    </div>

                                                    <div class="col-4">
                                                        <div class="d-flex justify-content-center">
                                                            <a href="{{ route('superadmin.delete.single-image.products', $product->id) }}" class="btn btn-secondary-light clear-image" style="">{{ __('global.clear') }}</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            @else
                                                <input type="file" class="form-control filepond" name="product_image" id="product_image">
                                            @endif
                                        </div>

                                        <div class="file_background_image mt-4 mb-4 d-flex justify-content-center">
                                            @if($product->image && File::exists(public_path('assets/images/products/' . $product->image)))
                                                <img src="{{ asset('assets/images/products/'.$product->image) }}" alt="Uploaded File" id="default_image">
                                            @else
                                                <img src="{{ asset('assets/images/products/default.png') }}" alt="Default Product" id="default_image">
                                            @endif
                                        </div>

                                        <div class="form-group form-category mb-4">
                                            <label for="category" class="form-label">{{ __('global.category') }} <span class="text-secondary">*</span></label>
                                            
                                            <select class="js-example-basic-single select2-hidden-accessible @error('category') is-select2-invalid @enderror" name="category" data-select2-id="select2-data-1-23f" tabindex="-1" aria-hidden="true" id="category">
                                                <option value="">{{ __('global.select_category') }}</option>
                                                @foreach($categories as $category)
                                                    <option value="{{ $category->id }}" {{ $product->category->id == $category->id ? 'selected' : '' }}>{{ unserialize($category->title)[app()->getLocale()] }}</option>
                                                @endforeach
                                            </select>

                                            @error('category')
                                                <span class="invalid-feedback d-block" role="alert">
                                                    {{ $message }}
                                                </span>
                                            @enderror
                                        </div>

                                        <div class="form-group form-district mb-4">
                                            <label for="distrcit" class="form-label">{{ __('global.district') }} <span class="text-secondary">*</span></label>
                                            <select class="js-example-basic-single select2-hidden-accessible @error('district') is-select2-invalid @enderror" name="district" data-select2-id="select2-data-1-54f" tabindex="-1" aria-hidden="true" id="district">
                                                <option value="">{{ __('global.select_district') }}</option>

                                                @foreach($districts as $district)
                                                    <option value="{{ $district->id }}" {{ $product->district->id == $district->id ? 'selected' : '' }}>{{ unserialize($district->title)[app()->getLocale()] }}</option>
                                                @endforeach
                                            </select>

                                            @error('district')
                                                <span class="invalid-feedback d-block" role="alert">
                                                    {{ $message }}
                                                </span>
                                            @enderror
                                        </div>

                                        <div class="form-group mb-4">
                                            <label for="venue" class="form-label">{{ __('global.venue') }}</label>

                                            <select class="js-example-basic-single select2-hidden-accessible" name="venue" data-select2-id="select2-data-1-54544f" tabindex="-1" aria-hidden="true" id="venue">
                                                <option value="">{{ __('global.none') }}</option>

                                                @foreach($venues as $venue)
                                                    <option value="{{ $venue->id }}" {{ $product->venue_id == $venue->id ? 'selected' : '' }}>{{ $venue->venue_name }}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="form-group mb-4">
                                            <div class="">
                                                <label for="zones" class="form-label">{{ __('global.zones') }}</label>
                                                <input id="zones" class="form-control" name="zones" type="number" value="{{ $product->zones }}" placeholder="" min="1">
                                            </div>
                                        </div>

                                        <div class="form-group mb-4 mx-2">
                                            <div class="custom-toggle-switch d-flex align-items-center">
                                                <input id="partner" name="partner" type="checkbox" {{ $product->is_partner ? 'checked' : '' }}>
                                                <label for="partner" class="label-primary"></label>
                                                <span class="fs-13 ms-3 mb-2">{{ __('global.partner') }}</span>
                                            </div>
                                        </div>
                                        
                                        <div class="form-group mb-0 mx-2">
                                            <div class="custom-toggle-switch d-flex align-items-center">
                                                <input id="popular" name="popular" type="checkbox" {{ $product->is_popular ? 'checked' : '' }}>
                                                <label for="popular" class="label-primary"></label>
                                                <span class="fs-13 ms-3 mb-2">{{ __('global.popular') }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-7 col-md-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-xl-12">
                                    <div class="">
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="tab-menu-heading">
                                                    <div class="tabs-menu1">
                                                        <!-- Tabs -->
                                                        <ul class="nav panel-tabs">
                                                            <li>
                                                                <a href="#general" class="d-flex align-items-center active" data-bs-toggle="tab">
                                                                    {{ __('global.general') }}

                                                                    <span class="text-secondary px-2 general-validation" style="display: none;">*</span>
                                                                </a>
                                                            </li>
                                                            <li>
                                                                <a href="#advanced" class="d-flex align-items-center" data-bs-toggle="tab">
                                                                    {{ __('global.advanced') }}
                                                                </a>
                                                            </li>
                                                            <li>
                                                                <a href="#seo" class="d-flex align-items-center" data-bs-toggle="tab">
                                                                    {{ __('global.seo') }}
                                                                </a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>

                                                <div class="panel-body tabs-menu-body px-0">
                                                    <div class="tab-content">
                                                        <div class="tab-pane active" id="general">
                                                            <div class="card">
                                                                <div class="card-header">
                                                                    <h3 class="card-title">{{ __('global.information') }}</h3>
                                                                </div> 
                                                                <div class="card-body">
                                                                    <div class="panel panel-primary">
                                                                        <div class="tab-menu-heading">
                                                                            <div class="tabs-menu1">
                                                                                <!-- Tabs -->
                                                                                <ul class="nav panel-tabs">
                                                                                    @foreach($languages as $language)
                                                                                        <li>
                                                                                            <a href="#{{ $language->code }}" class="d-flex align-items-center {{ $loop->first ? 'active' : '' }}" data-bs-toggle="tab">
                                                                                                <img src="{{ asset('/build/assets/images/flags-svg/' . $language->code . '.svg') }}" alt="{{ $language->code }}" style="width: 27px;" class="me-2">
                                                                                                {{ $language->name }}
                                                                                                @error('title_' . $language->code)
                                                                                                    <span class="text-secondary px-2">*</span>
                                                                                                @enderror
                                                                                            </a>
                                                                                        </li>
                                                                                    @endforeach
                                                                                </ul>
                                                                            </div>
                                                                        </div>
                                                                        
                                                                        <div class="panel-body tabs-menu-body px-0">
                                                                            <div class="tab-content">
                                                                                @foreach($languages as $language)
                                                                                    <div class="tab-pane {{ $loop->first ? 'active' : '' }}" id="{{ $language->code }}">
                                                                                        <div class="col-xl-12 mb-4">
                                                                                            <label for="title_{{ $language->code }}" class="form-label">{{ __('global.name') }} <span class="text-secondary">*</span></label>
                                                                                            <input type="text" class="form-control @error('title_' . $language->code) is-invalid is-text-invalid @enderror" id="title_{{ $language->code }}" 
                                                                                                placeholder="{{ __('global.enter_name') }}" name="title_{{ $language->code }}" value="{{ json_decode($product->title, true)[$language->code] ?? '' }}">

                                                                                            @error('title_' . $language->code)
                                                                                                <span class="invalid-feedback d-block" role="alert">{{ $message }}</span>
                                                                                            @enderror
                                                                                        </div>

                                                                                        <div class="col-xl-12 mb-4">
                                                                                            <label for="description_{{ $language->code }}" class="form-label">{{ __('global.description') }}</label>
                                                                                            <textarea class="form-control" id="description_{{ $language->code }}" rows="7" name="description_{{ $language->code }}" 
                                                                                                placeholder="{{ __('global.enter_description') }}">{{ json_decode($product->description, true)[$language->code] ?? '' }}</textarea>
                                                                                        </div>

                                                                                        <div class="col-xl-12 form-group">
                                                                                            <label for="address_{{ $language->code }}" class="form-label">{{ __('global.address') }} <span class="text-secondary">*</span></label>
                                                                                            <input type="text" class="form-control @error('address_' . $language->code) is-invalid is-text-invalid @enderror" id="address_{{ $language->code }}"
                                                                                                name="address_{{ $language->code }}" placeholder="{{ __('global.enter_address') }}" value="{{ json_decode($product->address, true)[$language->code] ?? '' }}">

                                                                                            @error('address_' . $language->code)
                                                                                                <span class="invalid-feedback d-block" role="alert">{{ $message }}</span>
                                                                                            @enderror
                                                                                        </div>
                                                                                    </div>
                                                                                @endforeach
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                            <div class="card">
                                                                <div class="card-header">
                                                                    <div class="card-title">
                                                                        {{ __('global.media') }}
                                                                    </div>
                                                                </div>

                                                                <div class="card-body">
                                                                    <div class="form-group mb-0">
                                                                        <div class="col-xl-12 col-md-12">
                                                                            <div class="uploaded_images">
                                                                                <form></form>

                                                                                <form action="{{ route('superadmin.add.products') }}" class="dropzone" id="myDropzone">
                                                                                    @csrf
                                                                                    <div class="fallback">
                                                                                        <input type="file" name="multiple_images[]" multiple />
                                                                                    </div>
                                                                                </form>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="tab-pane" id="advanced">
                                                            <div class="tab-menu-heading">
                                                                <div class="tabs-menu1">
                                                                    <!-- Tabs -->
                                                                    <ul class="nav panel-tabs">
                                                                        <li>
                                                                            <a href="#hours" class="d-flex align-items-center fs-14 py-2 active" data-bs-toggle="tab">
                                                                                {{ __('global.hours') }}
                                                                            </a>
                                                                        </li>

                                                                        <li>
                                                                            <a href="#attributes" class="d-flex align-items-center fs-14 py-2" data-bs-toggle="tab">
                                                                                {{ __('global.attributes') }}
                                                                            </a>
                                                                        </li>

                                                                        <li>
                                                                            <a href="#additional" class="d-flex align-items-center fs-14 py-2" data-bs-toggle="tab">
                                                                                {{ __('global.additional_products') }}
                                                                            </a>
                                                                        </li>

                                                                        <li>
                                                                            <a href="#location" class="d-flex align-items-center fs-14 py-2" data-bs-toggle="tab">
                                                                                {{ __('global.location') }}
                                                                            </a>
                                                                        </li>
                                                                    </ul>
                                                                </div>
                                                            </div>

                                                            <div class="panel-body tabs-menu-body px-0">
                                                                <div class="tab-content">
                                                                    <div class="tab-pane active show" id="hours">
                                                                        <div class="card">
                                                                            <div class="card-header">
                                                                                <h3 class="card-title">{{ __('global.active_hours') }}</h3>
                                                                            </div> 

                                                                            <div class="card-body">

                                                                                @if($product->zones > 1)
                                                                                    <div class="mb-4">
                                                                                        <div class="form-group">
                                                                                            <label class="custom-switch form-switch mb-0 cursor-pointer">
                                                                                                <input type="checkbox" name="same_working_hours" class="custom-switch-input">
                                                                                                <span class="custom-switch-indicator custom-switch-indicator-md"></span> 
                                                                                                <span class="custom-switch-description">{{ __('global.same_working_hours_for_all_zones') }}</span> 
                                                                                            </label>
                                                                                        </div>
                                                                                    </div>

                                                                                    <div class="mb-4">
                                                                                        <label for="zone-select">{{ __('Select Zone') }}</label>
                                                                                        <select id="zone-select" class="form-select w-100">
                                                                                            @for($i = 1; $i <= $product->zones; $i++)
                                                                                                <option value="{{ $i }}">{{ __('Zone') }} {{ $i }}</option>
                                                                                            @endfor
                                                                                        </select>
                                                                                    </div>
                                                                                @endif

                                                                                @for($zoneIndex = 1; $zoneIndex <= $product->zones; $zoneIndex++)
                                                                                    <div class="zone-wrapper zone-{{ $zoneIndex }} mb-5 p-3" style="{{ $zoneIndex === 1 ? '' : 'display: none;' }}">
                                                                                        @foreach($weekArray as $key => $day)
                                                                                            @if(!empty($product->activeHours($zoneIndex)->first()))
                                                                                                <div class="{{ $day }}-container-{{ $zoneIndex }}">
                                                                                                    @if($product->activeHours($zoneIndex)->first()->{$day . '_start'} == null || $product->activeHours($zoneIndex)->first()->{$day . '_start'} == 'full')
                                                                                                        <div class="{{ $day }}-container-body-{{ $zoneIndex }} {{ $day }}-container-body">
                                                                                                            <div class="row">
                                                                                                                <div class="col-3">
                                                                                                                    <h6 class="mb-3">{{ __('global.'.$day) }}</h6>
                            
                                                                                                                    <div class="form-group">
                                                                                                                        <label class="custom-switch form-switch mb-0 cursor-pointer">
                                                                                                                            <input type="checkbox" name="{{ $day }}_open_{{ $zoneIndex }}" class="custom-switch-input" id="{{ $day }}-open-{{ $zoneIndex }}" {{ $product->activeHours($zoneIndex)->first()->{$day . '_start'} != null ? 'checked' : '' }}>
                                                                                                                            <span class="custom-switch-indicator custom-switch-indicator-md"></span> 
                                                                                                                            <span class="custom-switch-description">{{ __('global.open') }}</span> 
                                                                                                                        </label>
                                                                                                                    </div>
                                                                                                                </div>
                            
                                                                                                                <div class="col-4 {{ $day }}-group-{{ $zoneIndex }} {{ $day }}-start-{{ $zoneIndex }}" {!! $product->activeHours($zoneIndex)->first()->{$day . '_start'} == null ? 'style="display: none;"' : '' !!}>
                                                                                                                    <div class="form-group">
                                                                                                                        <label for="{{ $day }}_start" class="form-label mt-0">{{ __('global.opens_at') }}</label>
                                                                                                                        <select class="js-example-basic-single select2-hidden-accessible {{ $day }}_start_select_{{ $zoneIndex }}" name="{{ $day }}_{{ $zoneIndex }}_Start[]" 
                                                                                                                            data-select2-id="select2-data-1-3dA{{ $key.'_'.$zoneIndex }}" tabindex="-1" aria-hidden="true" id="{{ $day }}_start_{{ $zoneIndex }}">
                                                                                                                            <option value="" selected disabled>{{ __('global.select_time') }}</option>
                                                                                                                            <option value="full" {{ $product->activeHours($zoneIndex)->first()->{$day . '_start'} == 'full' || $product->activeHours($zoneIndex)->first()->{$day . '_end'} == 'full' ? 'selected' : '' }}>{{ __('global.24_hours') }}</option>
                                                                                                                            
                                                                                                                            @foreach($timeArray as $time)
                                                                                                                                <option value="{{ $time }}">{{ $time }}</option>
                                                                                                                            @endforeach
                            
                                                                                                                            <option value="full">{{ __('global.24_hours') }}</option>
                                                                                                                        </select>
                                                                                                                    </div>
                                                                                                                </div>
                            
                                                                                                                <div class="col-4 {{ $day }}-group-{{ $zoneIndex }} {{ $day }}-end-{{ $zoneIndex }}" {!! $product->activeHours($zoneIndex)->first()->{$day . '_end'} == null || $product->activeHours($zoneIndex)->first()->{$day . '_end'} == 'full' ? 'style="display: none;"' : '' !!}>
                                                                                                                    <div class="form-group">
                                                                                                                        <label for="{{ $day }}_end" class="form-label mt-0">{{ __('global.closes_at') }}</label>
                                                                                                                        <select class="js-example-basic-single select2-hidden-accessible {{ $day }}_end_select_{{ $zoneIndex }}" name="{{ $day }}_{{ $zoneIndex }}_End[]" 
                                                                                                                            data-select2-id="select2-data-1-3dB{{ $key.'_'.$zoneIndex }}" tabindex="-1" aria-hidden="true" id="{{ $day }}_end_{{ $zoneIndex }}">
                                                                                                                            <option value="" selected disabled>{{ __('global.select_time') }}</option>
                                                                                                                            <option value="full">{{ __('global.24_hours') }}</option>
                                                                                                                            
                                                                                                                            @foreach($timeArray as $time)
                                                                                                                                <option value="{{ $time }}">{{ $time }}</option>
                                                                                                                            @endforeach
                            
                                                                                                                            <option value="full">{{ __('global.24_hours') }}</option>
                                                                                                                        </select>
                                                                                                                    </div>
                                                                                                                </div>
                            
                                                                                                                <div class="col-1 {{ $day }}-group-{{ $zoneIndex }} {{ $day }}-add-{{ $zoneIndex }}" {!! $product->activeHours($zoneIndex)->first()->{$day . '_start'} == null || $product->activeHours($zoneIndex)->first()->{$day . '_start'} == 'full' ? 'style="display: none;"' : '' !!}>
                                                                                                                    <div class="d-flex align-items-center justify-content-center h-100 cursor-pointer text-gray">
                                                                                                                        <i class="fa fa-plus fs-4 mt-3" ></i>
                                                                                                                    </div>
                                                                                                                </div>
                                                                                                            </div>
                                                                                                        </div>
                                                                                                    @else
                                                                                                        @foreach(unserialize($product->activeHours($zoneIndex)->first()->{$day . '_start'}) as $timeKey => $timeData)
                                                                                                            <div class="{{ $day }}-container-body-{{ $zoneIndex }} {{ $day }}-container-body">
                                                                                                                <div class="row">
                                                                                                                    <div class="col-3">
                                                                                                                        @if($timeKey == 0)
                                                                                                                            <h6 class="mb-3">{{ __('global.'.$day) }}</h6>
                                    
                                                                                                                            <div class="form-group">
                                                                                                                                <label class="custom-switch form-switch mb-0 cursor-pointer">
                                                                                                                                    <input type="checkbox" name="{{ $day }}_open_{{ $zoneIndex }}" class="custom-switch-input" id="{{ $day }}-open" {{ $product->activeHours($zoneIndex)->first()->{$day . '_start'} != null ? 'checked' : '' }}>
                                                                                                                                    <span class="custom-switch-indicator custom-switch-indicator-md"></span> 
                                                                                                                                    <span class="custom-switch-description">{{ __('global.open') }}</span> 
                                                                                                                                </label>
                                                                                                                            </div>
                                                                                                                        @endif
                                                                                                                    </div>
                                
                                                                                                                    <div class="col-4 {{ $day }}-group-{{ $zoneIndex }} {{ $day }}-start-{{ $zoneIndex }}" {!! $product->activeHours($zoneIndex)->first()->{$day . '_start'} == null ? 'style="display: none;"' : '' !!}>
                                                                                                                        <div class="form-group">
                                                                                                                            <label for="{{ $day }}_start" class="form-label mt-0">{{ __('global.opens_at') }}</label>
                                                                                                                            <select class="js-example-basic-single select2-hidden-accessible {{ $day }}_start_select_{{ $zoneIndex }}" name="{{ $day }}_{{ $zoneIndex }}_Start[]" 
                                                                                                                                data-select2-id="select2-data-1-3dA{{ $key.'_'.$zoneIndex.$timeKey }}" tabindex="-1" aria-hidden="true" id="{{ $day }}_start">
                                                                                                                                <option value="" selected disabled>{{ __('global.select_time') }}</option>
                                                                                                                                
                                                                                                                                @if($timeKey == 0)
                                                                                                                                    <option value="full" {{ $product->activeHours($zoneIndex)->first()->{$day . '_start'} == 'full' || $product->activeHours($zoneIndex)->first()->{$day . '_end'} == 'full' ? 'selected' : '' }}>{{ __('global.24_hours') }}</option>
                                                                                                                                @endif

                                                                                                                                @foreach($timeArray as $time)
                                                                                                                                    <option value="{{ $time }}" {{ $timeData == $time ? 'selected' : '' }}>{{ $time }}</option>
                                                                                                                                @endforeach
                                                                                                                                
                                                                                                                                @if($timeKey == 0)
                                                                                                                                    <option value="full">{{ __('global.24_hours') }}</option>
                                                                                                                                @endif
                                                                                                                            </select>
                                                                                                                        </div>
                                                                                                                    </div>
                                
                                                                                                                    <div class="col-4 {{ $day }}-group-{{ $zoneIndex }} {{ $day }}-end-{{ $zoneIndex }}" {!! $product->activeHours($zoneIndex)->first()->{$day . '_end'} == null || $product->activeHours($zoneIndex)->first()->{$day . '_end'} == 'full' ? 'style="display: none;"' : '' !!}>
                                                                                                                        <div class="form-group">
                                                                                                                            <label for="{{ $day }}_end" class="form-label mt-0">{{ __('global.closes_at') }}</label>
                                                                                                                            <select class="js-example-basic-single select2-hidden-accessible {{ $day }}_end_select_{{ $zoneIndex }}" name="{{ $day }}_{{ $zoneIndex }}_End[]" 
                                                                                                                                data-select2-id="select2-data-1-3dB{{ $key.'_'.$zoneIndex.$timeKey }}" tabindex="-1" aria-hidden="true" id="{{ $day }}_end">
                                                                                                                                <option value="" selected disabled>{{ __('global.select_time') }}</option>

                                                                                                                                @if($timeKey == 0)
                                                                                                                                    <option value="full">{{ __('global.24_hours') }}</option>
                                                                                                                                @endif
                                                                                                                                
                                                                                                                                @foreach($timeArray as $time)
                                                                                                                                    <option value="{{ $time }}" {{ unserialize($product->activeHours($zoneIndex)->first()->{$day . '_end'})[$timeKey] == $time ? 'selected' : '' }}>{{ $time }}</option>
                                                                                                                                @endforeach

                                                                                                                                @if($timeKey == 0)
                                                                                                                                    <option value="full">{{ __('global.24_hours') }}</option>
                                                                                                                                @endif
                                                                                                                            </select>
                                                                                                                        </div>
                                                                                                                    </div>
                                
                                                                                                                    @if($timeKey == 0)
                                                                                                                        <div class="col-1 {{ $day }}-group-{{ $zoneIndex }} {{ $day }}-add-{{ $zoneIndex }}" {!! $product->activeHours($zoneIndex)->first()->{$day . '_start'} == null || $product->activeHours($zoneIndex)->first()->{$day . '_start'} == 'full' ? 'style="display: none;"' : '' !!}>
                                                                                                                            <div class="d-flex align-items-center justify-content-center h-100 cursor-pointer text-gray">
                                                                                                                                <i class="fa fa-plus fs-4 mt-3" ></i>
                                                                                                                            </div>
                                                                                                                        </div>
                                                                                                                    @else
                                                                                                                        <div class="col-1 {{ $day }}-group-{{ $zoneIndex }} {{ $day }}-delete-{{ $zoneIndex }}">
                                                                                                                            <div class="d-flex align-items-center justify-content-center h-100 cursor-pointer text-gray">
                                                                                                                                <i class="fa fa-trash fs-4 mt-2"></i>
                                                                                                                            </div>
                                                                                                                        </div>
                                                                                                                    @endif
                                                                                                                </div>
                                                                                                            </div>
                                                                                                        @endforeach
                                                                                                    @endif
                                                                                                </div>
                                                                                            @else
                                                                                                <div class="{{ $day }}-container-{{ $zoneIndex }}">
                                                                                                    <div class="{{ $day }}-container-body-{{ $zoneIndex }} {{ $day }}-container-body">
                                                                                                        <div class="row">
                                                                                                            <div class="col-3">
                                                                                                                <h6 class="mb-3">{{ __('global.'.$day) }}</h6>
                        
                                                                                                                <div class="form-group">
                                                                                                                    <label class="custom-switch form-switch mb-0 cursor-pointer">
                                                                                                                        <input type="checkbox" name="{{ $day }}_open_{{ $zoneIndex }}" class="custom-switch-input" id="{{ $day }}-open-{{ $zoneIndex }}">
                                                                                                                        <span class="custom-switch-indicator custom-switch-indicator-md"></span> 
                                                                                                                        <span class="custom-switch-description">{{ __('global.open') }}</span> 
                                                                                                                    </label>
                                                                                                                </div>
                                                                                                            </div>
                        
                                                                                                            <div class="col-4 {{ $day }}-group-{{ $zoneIndex }} {{ $day }}-start-{{ $zoneIndex }}" style="display: none;">
                                                                                                                <div class="form-group">
                                                                                                                    <label for="{{ $day }}_start" class="form-label mt-0">{{ __('global.opens_at') }}</label>
                                                                                                                    <select class="js-example-basic-single select2-hidden-accessible {{ $day }}_start_select_{{ $zoneIndex }}" name="{{ $day }}_{{ $zoneIndex }}_Start[]"
                                                                                                                         data-select2-id="select2-data-1-3dA{{ $key.'_'.$zoneIndex }}s" tabindex="-1" aria-hidden="true" id="{{ $day }}_start_{{ $zoneIndex }}">
                                                                                                                        <option value="" selected disabled>{{ __('global.select_time') }}</option>
                                                                                                                        <option value="full">{{ __('global.24_hours') }}</option>
                                                                                                                        
                                                                                                                        @foreach($timeArray as $time)
                                                                                                                            <option value="{{ $time }}">{{ $time }}</option>
                                                                                                                        @endforeach
                        
                                                                                                                        <option value="full">{{ __('global.24_hours') }}</option>
                                                                                                                    </select>
                                                                                                                </div>
                                                                                                            </div>
                        
                                                                                                            <div class="col-4 {{ $day }}-group-{{ $zoneIndex }} {{ $day }}-end-{{ $zoneIndex }}" style="display: none;">
                                                                                                                <div class="form-group">
                                                                                                                    <label for="{{ $day }}_end" class="form-label mt-0">{{ __('global.closes_at') }}</label>
                                                                                                                    <select class="js-example-basic-single select2-hidden-accessible {{ $day }}_end_select_{{ $zoneIndex }}" name="{{ $day }}_{{ $zoneIndex }}_End[]" 
                                                                                                                        data-select2-id="select2-data-1-3dA{{ $key.'_'.$zoneIndex }}e" tabindex="-1" aria-hidden="true" id="{{ $day }}_end_{{ $zoneIndex }}">
                                                                                                                        <option value="" selected disabled>{{ __('global.select_time') }}</option>
                                                                                                                        <option value="full">{{ __('global.24_hours') }}</option>
                                                                                                                        
                                                                                                                        @foreach($timeArray as $time)
                                                                                                                            <option value="{{ $time }}">{{ $time }}</option>
                                                                                                                        @endforeach
                        
                                                                                                                        <option value="full">{{ __('global.24_hours') }}</option>
                                                                                                                    </select>
                                                                                                                </div>
                                                                                                            </div>
                        
                                                                                                            <div class="col-1 {{ $day }}-group-{{ $zoneIndex }} {{ $day }}-add-{{ $zoneIndex }}" style="display: none;">
                                                                                                                <div class="d-flex align-items-center justify-content-center h-100 cursor-pointer text-gray">
                                                                                                                    <i class="fa fa-plus fs-4 mt-3" ></i>
                                                                                                                </div>
                                                                                                            </div>
                                                                                                        </div>
                                                                                                    </div>
                                                                                                </div>
                                                                                            @endif
                                                                                        @endforeach
                                                                                    </div>
                                                                                @endfor
                                                                            </div>
                                                                        </div>
                                                                    </div> 

                                                                    <div class="tab-pane" id="attributes">
                                                                        <div class="card">
                                                                            <div class="card-header">
                                                                                <h3 class="card-title">{{ __('global.attributes') }}</h3>
                                                                            </div> 

                                                                            <div class="card-body">
                                                                                <div class="form-group mx-2 row d-flex attribute-container" data-sum="{{ count($product->productAttributes) }}">
                                                                                    @foreach($product->productAttributes as $keyId => $productAttribute)
                                                                                        <div class="col-md-6 col-12">
                                                                                            <div class="form-group">
                                                                                                <label for="attribute" class="form-label">Attribute</label>
                                                                                                <select class="js-example-basic-single select2-hidden-accessible attribute" name="attribute[{{ $keyId }}]" data-select2-id="select2-data-{{ $keyId }}-x2dd" tabindex="-1" aria-hidden="true" id="attribute">
                                                                                                    <option value="" selected>{{ __('global.select_attribute') }}</option>
                                                                                                    @foreach($attributes as $key => $attribute)
                                                                                                        <option data-type="{{ $attribute->type }}"
                                                                                                                data-title="{{ unserialize($attribute->title)[app()->getLocale()] }}"
                                                                                                                
                                                                                                                @if($attribute->type == 'select')
                                                                                                                    @foreach(unserialize($attribute->value) as $K => $data)
                                                                                                                        data-option-{{ $K }}="{{ $data }}"
                                                                                                                    @endforeach

                                                                                                                    data-options-count="{{ count(unserialize($attribute->value)) }}"
                                                                                                                @endif

                                                                                                                value="{{ $attribute->id }}" 
                                                                                                                {{ $productAttribute->attribute_id == $attribute->id ? 'selected' : '' }}>
                                                                                                            {{ unserialize($attribute->title)[app()->getLocale()] }}
                                                                                                        </option>
                                                                                                    @endforeach
                                                                                                </select>
                                                                                            </div>
                                                                                        </div>                                        

                                                                                        <div class="col-md-5 col-12" id="dynamicField_{{ $keyId }}">
                                                                                            @if($productAttribute->attribute->type == 'select')
                                                                                                <div class="form-group mb-4">
                                                                                                    <label for="selectField" class="form-label">{{ __('global.select') }}</label>
                                                                                                    <select class="form-control selectField" name="value[{{ $keyId }}]">
                                                                                                        @foreach(unserialize($productAttribute->attribute->value) as $option)
                                                                                                            <option value="{{ $option }}" {{ $productAttribute->value == $option ? 'selected' : '' }}>
                                                                                                                {{ $option }}
                                                                                                            </option>
                                                                                                        @endforeach
                                                                                                    </select>
                                                                                                </div>
                                                                                            @elseif($productAttribute->attribute->type == 'checkbox')
                                                                                                <div class="custom-toggle-switch d-flex align-items-center justify-content-center mt-5">
                                                                                                    <input type="hidden" name="value[{{ $keyId }}]" value="off">
                                                                                                    <input id="checkbox_{{ $keyId }}" name="value[{{ $keyId }}]" type="checkbox" {{ $productAttribute->value == 'on' ? 'checked' : '' }}>
                                                                                                    <label for="checkbox_{{ $keyId }}" class="label-primary"></label><span class="fs-13 ms-3 mb-2">{{ __('global.yes_no') }}</span>
                                                                                                </div>
                                                                                            @else
                                                                                                <div class="form-group mb-4">
                                                                                                    <label for="meta_title_ge" class="form-label">{{ __('global.value') }}</label>
                                                                                                    <input type="text" class="form-control mb-3 p-2" id="meta_title_ge" placeholder="Enter ${title}" name="value[{{ $keyId }}]" value="{{ $productAttribute->value }}">
                                                                                                </div>
                                                                                            @endif
                                                                                        </div>

                                                                                        <div class="col-1 d-flex align-items-center py-2 mt-2" id="deleteBtn_dynamicField_{{ $keyId }}" data-options-count="0">
                                                                                            <a class="btn btn-secondary-light delete-row" data-target="dynamicField_{{ $keyId }}">
                                                                                                <i class="bi bi-trash"></i>
                                                                                            </a>
                                                                                        </div>
                                                                                    @endforeach
                                                                                </div>

                                                                                <div class="row">
                                                                                    <div class="col-xl-6 col-md-6 col-12 mx-4">
                                                                                        <a id="addSelectButton" class="btn btn-primary">{{ __('global.add_another_attribute') }}</a>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div> 

                                                                    <div class="tab-pane" id="additional">
                                                                        <div class="card">
                                                                            <div class="card-header">
                                                                                <h3 class="card-title">{{ __('global.additional_products') }}</h3>
                                                                            </div> 

                                                                            <div class="card-body">
                                                                                <div class="additional-body">
                                                                                    @foreach($product->productAdditional as $keyId => $productAdditional)
                                                                                        <div class="form-group mx-2 row d-flex additional-container" id="additional-container-{{ $keyId }}">
                                                                                            <div class="col-11">
                                                                                                <div class="form-group">
                                                                                                    <label for="additional" class="form-label">Product</label>
                                                                                                    <select class="js-example-basic-single select2-hidden-accessible additional" name="additional[]" data-select2-id="select2-data-1-gii{{ $keyId }}" tabindex="-1" aria-hidden="true" id="additional">
                                                                                                        <option value="" selected>{{ __('global.select_product') }}</option>
                                                                                                        @foreach($additionals as $key => $additional)
                                                                                                            <option value="{{ $additional->id }}" {{ $productAdditional->additional_id == $additional->id ? 'selected' : '' }}>
                                                                                                                {{ unserialize($additional->title)[app()->getLocale()] }}
                                                                                                            </option>
                                                                                                        @endforeach
                                                                                                    </select>
                                                                                                </div>
                                                                                            </div>
                
                                                                                            <div class="col-1 d-flex align-items-center py-2 mt-4">
                                                                                                <a class="btn btn-secondary-light delete-additional" data-target="additional-container-{{ $keyId }}">
                                                                                                    <i class="bi bi-trash"></i>
                                                                                                </a>
                                                                                            </div>
                                                                                        </div>
                                                                                    @endforeach
                
                                                                                    <div class="row mt-4" id="additionalButton">
                                                                                        <div class="col-xl-6 col-md-6 col-12 mx-4">
                                                                                            <a id="addAdditionalButton" class="btn btn-primary">{{ __('global.add_another_product') }}</a>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div> 

                                                                    <div class="tab-pane" id="location">
                                                                        <div class="card">
                                                                            <div class="card-header justify-content-between">
                                                                                <h3 class="card-title">
                                                                                    {{ __('global.location') }}
                                                                                </h3>

                                                                                <a href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#how-coordinates" >
                                                                                    <i class="fa fa-question-circle text-warning fs-4" data-bs-toggle="tooltip" aria-label="fa fa-question" data-bs-original-title="{{ __('global.how') }}"></i>
                                                                                </a>
                                                                            </div> 

                                                                            <div class="card-body">
                                                                                <div id="google-map"></div>

                                                                                <div class="form-group mt-4">
                                                                                    <label for="coordinates" class="form-label">{{ __('global.enter_coordinates') }}</label>
                                                                                    <input type="text" class="form-control" id="coordinates" name="coordinates" placeholder="Enter Coordinates" value="{{ $product->coordinates }}">
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div> 
                                                                </div> 
                                                            </div> 
                                                        </div>

                                                        <div class="modal fade" id="how-coordinates" tabindex="-1" aria-labelledby="add-userLabel" aria-hidden="true">
                                                            <div class="modal-dialog modal-dialog-centered modal-xl">
                                                                <div class="modal-content">
                                                                    <div class="modal-header">
                                                                        <h6 class="modal-title" id="add-userLabel">{{ __('global.how_to_get_cordinatesw') }}</h6>
                                                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                                    </div>
                                                                    <div class="modal-body px-4">
                                                                        <img src="{{ asset('build/assets/images/guide/map.gif') }}" alt="Map Gif Guide">
                                                                    </div>
                                                                    <div class="modal-footer">
                                                                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">{{ __('global.cancel') }}</button>
                                                                        <button type="button" class="btn btn-primary" data-bs-dismiss="modal">{{ __('global.got_it') }}</button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="tab-pane" id="seo">
                                                            <div class="card">
                                                                <div class="card-header">
                                                                    <h3 class="card-title">{{ __('global.meta_data') }}</h3>
                                                                </div> 

                                                                <div class="card-body">
                                                                    <div class="panel panel-primary">
                                                                        <div class="tab-menu-heading">
                                                                            <div class="tabs-menu1">
                                                                                <!-- Tabs -->
                                                                                <ul class="nav panel-tabs">
                                                                                    @foreach($languages as $language)
                                                                                        <li>
                                                                                            <a href="#meta_{{ $language->code }}" class="d-flex align-items-center {{ $loop->first ? 'active' : '' }}" data-bs-toggle="tab">
                                                                                                <img src="{{ asset('/build/assets/images/flags-svg/' . $language->code . '.svg') }}" alt="{{ $language->code }}" style="width: 27px;" class="me-2">
                                                                                                {{ $language->name }}

                                                                                                @error('meta_title_' . $language->code)
                                                                                                    <span class="text-secondary px-2">*</span>
                                                                                                @enderror
                                                                                            </a>
                                                                                        </li>
                                                                                    @endforeach
                                                                                </ul>
                                                                            </div>
                                                                        </div>
                                                                        
                                                                        <div class="panel-body tabs-menu-body px-0">
                                                                            <div class="tab-content">
                                                                                @foreach($languages as $language)
                                                                                    <div class="tab-pane {{ $loop->first ? 'active' : '' }}" id="meta_{{ $language->code }}">
                                                                                        <div class="col-xl-12 mb-4">
                                                                                            <label for="meta_title_{{ $language->code }}" class="form-label">{{ __('global.meta_tag_title') }}</label>
                                                                                            <input type="text" class="form-control @error('meta_title_' . $language->code) is-invalid is-text-invalid @enderror" id="meta_title_{{ $language->code }}" 
                                                                                                placeholder="{{ __('global.enter_meta_tag_title') }}" name="meta_title_{{ $language->code }}" value="{{ json_decode($product->meta_title, true)[$language->code] ?? '' }}">
                                                                                        </div>

                                                                                        <div class="col-xl-12 mb-4">
                                                                                            <label for="meta_description_{{ $language->code }}" class="form-label">{{ __('global.meta_tag_description') }}</label>
                                                                                            <textarea class="form-control" id="meta_description_{{ $language->code }}" rows="7" name="meta_description_{{ $language->code }}" 
                                                                                                placeholder="{{ __('global.enter_meta_tag_description') }}">{{ json_decode($product->meta_description, true)[$language->code] ?? '' }}</textarea>
                                                                                        </div>

                                                                                        <div class="col-xl-12 mb-2">
                                                                                            <label for="meta_keyword_{{ $language->code }}" class="form-label">{{ __('global.meta_tag_keywords') }}</label>
                                                                                            <input type="text" class="form-control" id="meta_keyword_{{ $language->code }}" placeholder="{{ __('global.enter_meta_tag_keywords') }}" 
                                                                                                name="meta_keyword_{{ $language->code }}" value="{{ json_decode($product->meta_keyword, true)[$language->code] ?? '' }}">
                                                                                        </div>

                                                                                        <div class="col-xl-12">
                                                                                            <div class="text-muted fs-12">{{ __('global.keywords_info_1') }} <code>,</code>{{ __('global.keywords_info_2') }}</div>
                                                                                        </div>
                                                                                    </div>
                                                                                @endforeach
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="d-flex justify-content-end m-2 mx-3">
                                                            <a href="{{ route('superadmin.get.products') }}" class="btn btn-default">{{ __('global.go_back') }}</a>
                                                            <a href="{{ route('superadmin.details.products', $product->id) }}" class="btn btn-primary-light mx-2">{{ __('global.go_to_details') }}</a>
                                                            <input type="submit" class="btn btn-primary" value="{{ __('global.update') }}">
                                                        </div>  
                                                    </div>  
                                                </div>  
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
        <!-- ROW-2 END -->
    </div>
    <!-- CONTAINER CLOSED -->

@endsection

@section('scripts')
    <!-- Select2 Cdn -->
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    
    <!-- Dropzone JS -->
    <script src="{{asset('build/assets/libs/dropzone/dropzone-min.js')}}"></script>


    <!-- Internal Select-2.js -->
    @vite('resources/assets/js/select2.js')

    <script>
        $(document).ready(function() {
            // Start Attribute

            var inputValue = $('.attribute-container').data('sum');

            function handleFieldChange(selectedType, dynamicField, title) {
                dynamicField.empty();
                var randomStringID = generateRandomString(10);

                if (selectedType.data('type') === 'custom') {
                    dynamicField.append(`<div class="form-group mb-4">
                        <label for="meta_title_ge" class="form-label">{{ __('global.value') }}</label>
                        <input type="text" class="form-control mb-3 p-2" id="meta_title_ge" placeholder="{{ __('global.enter') }} ${title}" name="value[${inputValue}]">
                        </div>`);
                } else if (selectedType.data('type') === 'checkbox') {
                    dynamicField.append('<div class="custom-toggle-switch d-flex align-items-center justify-content-center mt-5">' +
                    '<input type="hidden" name="value[' + inputValue + ']" value="off">' +
                    '<input id="' + randomStringID + '" name="value[' + inputValue + ']" type="checkbox">' +
                    '<label for="' + randomStringID + '" class="label-primary"></label><span class="fs-13 ms-3 mb-2">{{ __("global.yes_no") }}</span></div>');
                } else if (selectedType.data('type') === 'select') {
                    var optionsCount = parseInt(selectedType.data('options-count'));
                    var selectOptions = '';

                    for (var i = 0; i < optionsCount; i++) {
                        var optionData = selectedType.data(`option-${i}`);
                        selectOptions += `<option value="${optionData}">${optionData}</option>`;
                    }

                    dynamicField.append(`<div class="form-group mb-4">
                        <label for="selectField" class="form-label">{{ __('global.select') }}</label>
                        <select class="form-control selectField" name="value[${inputValue}]">${selectOptions}</select>
                        </div>`);
                }

                inputValue++;
            }

            var count = $('.attribute-container').data('sum');

            $('#addSelectButton').on('click', function() {
                var newSelectId = `attribute_${count}`;
                var newDynamicFieldId = `dynamicField_${count}`;
                var newSelect = $(`<div class="col-md-6 col-12">
                    <div class="form-group mb-4">
                    <label for="${newSelectId}" class="form-label">{{ __('global.attribute') }}</label>
                    <select class="js-example-basic-single attribute" name="attribute[${count}]" id="${newSelectId}">
                    <option value="">{{ __('global.select_attribute') }}</option>
                    @foreach($attributes as $attribute)
                        <option value="{{ $attribute->id }}" data-type="{{ $attribute->type }}" data-title="{{ unserialize($attribute->title)[app()->getLocale()] }}"
                        @if($attribute->type == 'select')
                            @foreach(unserialize($attribute->value) as $K => $data)
                                data-option-{{ $K }}="{{ $data }}"
                            @endforeach

                            data-options-count="{{ count(unserialize($attribute->value)) }}"
                        @endif

                        value="{{ $attribute->id }}" 
                        >{{ unserialize($attribute->title)[app()->getLocale()] }}
                        </option>
                    @endforeach
                    </select>
                    </div>
                    </div>
                    <div class="col-md-5 col-12" id="${newDynamicFieldId}" data-options-count="0">
                        <div class="form-group mb-4">
                            <label for="meta_title_ge" class="form-label">{{ __('global.value') }}</label>
                            <input type="text" class="form-control mb-3 p-2" value="{{ __('global.select_type_first') }}" disabled>
                        </div>
                    </div>
                    <div class="col-1 d-flex align-items-center py-2 mt-2" id="deleteBtn_${newDynamicFieldId}" data-options-count="0">
                        <a class="btn btn-secondary-light delete-row" data-target="${newDynamicFieldId}">
                            <i class="bi bi-trash"></i>
                        </a>
                    </div>`);

                $('.attribute-container').on('click', '.delete-row', function() {
                    var targetId = $(this).data('target');
                    $('#' + targetId).prev().remove();
                    $('#' + targetId).next().remove();
                    $('#' + targetId).remove();
                });

                $('.attribute-container').append(newSelect);
                $(`#${newSelectId}`).select2().change(function() {
                    var dynamicField = $(`#${newDynamicFieldId}`);
                    var selectedType = $(this).find(':selected');
                    var title = selectedType.data('title');
                    handleFieldChange(selectedType, dynamicField, title);
                });

                count++;
            });

            $('.attribute-container').on('click', '.delete-row', function() {
                var targetId = $(this).data('target');
                $('#' + targetId).prev().remove();
                $('#' + targetId).next().remove();
                $('#' + targetId).remove();
            });

            function generateRandomString(length) {
                const charset = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
                let randomString = '';

                for (let i = 0; i < length; i++) {
                    const randomIndex = Math.floor(Math.random() * charset.length);
                    randomString += charset.charAt(randomIndex);
                }

                return randomString;
            }

            // END Attribute


            // Start Additional

            var k = 1;
            $(document).on('click', '#addAdditionalButton', function() {
                var newAdditionalId = `additional_${k}`;
                var originalOptions = '';

                var newContainer = $(`<div class="form-group mx-2 row d-flex additional-container">
                    <div class="col-11">
                    <div class="form-group">
                    <label for="${newAdditionalId}" class="form-label">{{ __('global.product') }}</label>
                    <select class="js-example-basic-single additional" name="additional[]" id="${newAdditionalId}">
                    <option value="">{{ __('global.select_product') }}</option>
                    @foreach($additionals as $additional)
                        <option value="{{ $additional->id }}" data-type="{{ $additional->type }}" data-title="{{ unserialize($additional->title)[app()->getLocale()] }}"
                        @if($additional->type == 'select')
                            @foreach(unserialize($additional->value) as $K => $data)
                                data-option-{{ $K }}="{{ $data }}"
                            @endforeach

                            data-options-count="{{ count(unserialize($additional->value)) }}"
                        @endif

                        value="{{ $additional->id }}" 
                        >{{ unserialize($additional->title)[app()->getLocale()] }}
                        </option>
                    @endforeach
                    </select>
                    </div>
                    </div>
                    </div>`);

                var deleteButton = '<div class="col-1 d-flex align-items-center py-2 mt-4">' +
                    '<a class="btn btn-secondary-light delete-additional">' +
                    '<i class="bi bi-trash"></i>' +
                    '</a>' +
                    '</div>';

                $(newContainer).append(deleteButton);

                if($('.additional-container').last().after(newContainer).length == 1) {
                    $('.additional-container').last().after(newContainer);
                } else {
                    $(newContainer).insertBefore('#additionalButton');
                }

                $(newContainer).last().after(newContainer);

                $(document).on('click', '.delete-additional', function() {
                    $(this).closest('.additional-container').remove();
                });

                $(`#${newAdditionalId}`).select2();

                k++;
            });

            $('.delete-additional').on('click', function() {
                var targetId = $(this).data('target');
                $('#' + targetId).remove();
            });
        });

        // END Additional

        
        // Start Map Details

        @if($product->coordinates != null)
            generateMap({{$product->coordinates}});
        @else
            generateMap(41.72677156842184, 44.74348686735054);
        @endif

        $('#coordinates').on('input', function() {
            var coordinates = $('#coordinates').val().trim();

            if (coordinates.indexOf(',') !== -1) {
                var [latitude, longitude] = coordinates.split(',').map(coord => parseFloat(coord.trim()));

                if (!isNaN(latitude) && !isNaN(longitude)) {
                    generateMap(latitude, longitude);
                }
            }
        });

        function generateMap(latitude, longitude) {
            var mapOptions = {
                center: { lat: latitude, lng: longitude },
                zoom: 15
            };

            var map = new google.maps.Map(document.getElementById('google-map'), mapOptions);

            var marker = new google.maps.Marker({
                position: { lat: latitude, lng: longitude },
                map: map,
                title: 'Location'
            });
        }

        // END Map Details


        // START Dropzone

        Dropzone.autoDiscover = false;
        const uploadedImages = @json($product->productImages);

        var myDropzone = new Dropzone("#myDropzone", {
            url: "{{ route('superadmin.update.image.products', $product->id) }}",
            addRemoveLinks: true,
            dictDefaultMessage: "",
            init: function() {
                this.on("addedfile", function(file) {
                    const imageUrl = "{{ asset('assets/images/products/multi/'.$product->id.'/') }}/" + file.name;
                    const mockFile = { name: file.name, size: file.size, type: 'image/jpeg' };

                    myDropzone.emit('thumbnail', mockFile, imageUrl);
                    myDropzone.emit('complete', mockFile);

                    const removeButton = Dropzone.createElement(
                        '<button class="btn btn-sm btn-danger dz-remove-btn">X</button>'
                    );
                    const _this = this;
                    removeButton.addEventListener("click", function() {
                        _this.removeFile(file);
                    });

                    file.previewElement.appendChild(removeButton);
                });

                this.on("removedfile", function(file) {
                    $.ajax({
                        type: 'get',
                        url: "{{ url('super-admin/products/delete/product-images') }}/" + file.name.split('.')[0],
                        success: function(data) {
                            console.log('File deleted successfully');
                        },
                        error: function(xhr, status, error) {
                            console.error('Error deleting file:', error);
                        }
                    });
                });
            },
            success: function (file, response) {
                console.log(response);
            },
            error: function (file, response) {
                console.error(response);
            }
        });

        uploadedImages.forEach(image => {
            const imageUrl = "{{ asset('assets/images/products/multi/'.$product->id.'/') }}/" + image.image;
            const mockFile = { name: image.image, size: image.size, type: 'image/jpeg' };

            myDropzone.emit('addedfile', mockFile);
            myDropzone.emit('thumbnail', mockFile, imageUrl);
            myDropzone.emit('complete', mockFile);
        });

        // END Dropzone
    </script>

    <!-- Edit JS -->
    <script src="{{ asset('assets/js/products/edit.js') }}"></script>

    <script>
        var translations = {
            opensAt: "{{ trans('global.js_strings.opens_at') }}",
            closesAt: "{{ trans('global.js_strings.closes_at') }}",
            selectTime: "{{ trans('global.js_strings.select_time') }}",
        };
    </script>

    <script>
        $('#zone-select').on('change', function () {
            var selectedZone = $(this).val();

            $('.zone-wrapper').hide();
            $('.zone-' + selectedZone).show();
        });
    </script>
@endsection