@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">

    <style>
        .file_background_image img {
            max-width: 350px;
            max-height: 150px;
            width: 100%;
            height: 150px;
            object-fit: cover;
        }

        .uploaded_images img {
            max-width: 250px;
            max-height: 250px;
            width: 100%;
            height: 150px;
            object-fit: cover;
        }

        .choices {
            margin-bottom: 0;
        }

        .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.add_product') }}</h1>
    </div>
    <!-- PAGE-HEADER END -->

    <!-- CONTAINER -->
    <div class="main-container container-fluid">
        <form action="{{ route('superadmin.add.products') }}" method="POST" enctype="multipart/form-data" id="product-add-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>

                                        <button type="button" class="btn btn-secondary-light clear-image" style="display: none;">Clear</button>
                                    </div>
                                    <div class="card-body">
                                        <div class="form-group mb-4">
                                            <label for="product_image" class="">{{ __('global.main_image') }}</label>
                                            <input type="file" class="form-control filepond" name="product_image" id="product_image">
                                        </div>

                                        <div class="file_background_image mt-4 mb-4 d-flex justify-content-center">
                                            <img src="{{ asset('assets/images/products/default.png') }}" alt="Default Product" id="default_image">
                                        </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-333" tabindex="-1" aria-hidden="true" id="category">
                                                <option value="">{{ __('global.select_category') }}</option>

                                                @foreach($categories as $category)
                                                    <option value="{{ $category->id }}" {{ old('category') == $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="district" 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 }}" {{ old('district') == $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 }}" {{ old('venue') == $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="{{ old('zones') ?? 0 }}" 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" {{ old('partner') == 'on' ? '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" {{ old('popular') == 'on' ? '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-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="{{ old('title_' . $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') }}">{{ old('description_' . $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="{{ old('address_' . $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-body">
                                                        <div class="form-group mb-0">
                                                            <div class="col-xl-12 col-md-12">
                                                                <div class="form-group mb-4">
                                                                    <label for="multiple_images" class="form-label">{{ __('global.media') }}</label>
                                                                    <input type="file" class="form-control" name="multiple_images[]" id="multiple_images" multiple>
                                                                </div>

                                                                <div class="uploaded_images row">

                                                                </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">
                                                                    @foreach($weekArray as $key => $day)
                                                                        <div class="{{ $day }}-container">
                                                                            <div class="{{ $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" class="custom-switch-input" id="{{ $day }}-open">
                                                                                                <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 {{ $day }}-start" 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" name="{{ $day }}Start[]" data-select2-id="select2-data-1-3dA{{ $key }}" tabindex="-1" aria-hidden="true" id="{{ $day }}_start">
                                                                                                <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 {{ $day }}-end" 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" name="{{ $day }}End[]" data-select2-id="select2-data-1-3dB{{ $key }}" tabindex="-1" aria-hidden="true" id="{{ $day }}_end">
                                                                                                <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 {{ $day }}-add" 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>
                                                                    @endforeach
                                                                </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">
                                                                        <div class="col-md-6 col-12">
                                                                            <div class="form-group">
                                                                                <label for="attribute" class="form-label">{{ __('global.attribute') }}</label>
                                                                                <select class="js-example-basic-single select2-hidden-accessible attribute" name="attribute[0]" data-select2-id="select2-data-1-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 }}" 
                                                                                                {{ old('attribute') == $attribute->id ? 'selected' : '' }}>
                                                                                            {{ unserialize($attribute->title)[app()->getLocale()] }}
                                                                                        </option>
                                                                                    @endforeach
                                                                                </select>
                                                                            </div>
                                                                        </div>                                        

                                                                        <div class="col-md-6 col-12" id="dynamicField_0">
                                                                            <div class="form-group mb-4">
                                                                                <label for="" 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>

                                                                    <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="form-group mx-2 row d-flex additional-container" id="additional-container">
                                                                        <div class="col-11">
                                                                            <div class="form-group">
                                                                                <label for="additional" class="form-label">{{ __('global.product') }}</label>
                                                                                <select class="js-example-basic-single select2-hidden-accessible additional" name="additional[]" data-select2-id="select2-data-1-gii4" tabindex="-1" aria-hidden="true" id="additional">
                                                                                    <option value="" selected>{{ __('global.select_product') }}</option>
                                                                                    @foreach($additionals as $key => $additional)
                                                                                        <option value="{{ $additional->id }}">
                                                                                            {{ unserialize($additional->title)[app()->getLocale()] }}
                                                                                        </option>
                                                                                    @endforeach
                                                                                </select>
                                                                            </div>
                                                                        </div>
                                                                    </div>

                                                                    <div class="row mt-4">
                                                                        <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 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-cordinates" >
                                                                        <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="{{ old('coordinates') }}">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="modal fade" id="how-cordinates" 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_cordinates') }}</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="{{ old('meta_title_'.$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') }}">{{ old('meta_description_'.$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="{{ old('meta_keyword_'.$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 mx-2">{{ __('global.go_back') }}</a>
                                                <input type="submit" class="btn btn-primary" value="{{ __('global.create') }}">
                                            </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>

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

    <script>
        
        // Start Attribute
        var inputValue = 0;

        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="att_${randomStringID}" class="form-label">{{ __('global.value') }}</label>
                    <input type="text" class="form-control mb-3 p-2" id="att_${randomStringID}" placeholder="{{ __('global.enter') }} ${title}" name="value[${inputValue}]" value="">
                    </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="${i}">${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++;
        }

        $('#attribute').change(function() {
            var dynamicField = $('#dynamicField_0');
            var selectedType = $(this).find(':selected');
            var title = selectedType.data('title');
            handleFieldChange(selectedType, dynamicField, title);
        });

        var count = 1; // Counter for dynamic field IDs
        $('#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="" 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++;
        });

        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);
            $('.additional-container').last().after(newContainer);
            $(newContainer).last().after(newContainer);

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

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

            k++;
        });
        // END Additional

    </script>

    <!-- Add JS -->
    <script src="{{ asset('assets/js/products/add.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>
@endsection