@extends('header.headerlogin')

@section('titleLogin', __('vendor-registration'))

@section('contentLogin')
    <style>
        .alert {
            padding: 15px;
            margin-bottom: 20px;
            border: 1px solid transparent;
            border-radius: 4px;
        }

        .alert-success {
            color: #3c763d;
            background-color: #dff0d8;
            border-color: #d6e9c6;
        }
    </style>

    <div class="header bg-gradient-primary py-7 py-lg-8">
        <div class="container">
            <div class="header-body text-center mb-5">
                <div class="row justify-content-center">
                    <div class="col-lg-5 col-md-6">
                        <h1 class="text-white"></h1>
                    </div>
                </div>
            </div>
        </div>
        <div class="separator separator-bottom separator-skew zindex-100">
            <svg x="0" y="0" viewBox="0 0 2560 100" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg">
                <polygon class="fill-default" points="2560 0 2560 100 0 100"></polygon>
            </svg>
        </div>
    </div>

    <div class="container mt--8 pb-5">
        <div class="row justify-content-center">
            <div class="col-lg-12">
                <div class="card bg-secondary shadow border-0">
                    <div class="card-header bg-transparent pb-5">
                        <div class="card-body px-lg-5 py-lg-5">
                            <div class="text-center text-muted mb-4">
                                <div class="d-flex justify-content-between align-items-center">
                                    <h3 class="flex-grow-1 text-center">{{ __('vendor-registration') }}</h3>
                                    @if (session('success'))
                                        <div class="alert alert-success flex-grow-1 text-center">
                                            {{ session('success') }}
                                        </div>
                                    @endif
                                    <div class="dropdown lang">
                                        <a class="app-nav__item dropdown-toggle" href="#" data-toggle="dropdown" aria-label="Open Profile Menu">
                                            <i class="fas fa-globe" style="color:#ca6620"></i>
                                            <span class="lang-name" style="color:#ca6620">
                                                {{ __(\Illuminate\Support\Facades\App::getLocale()) }}
                                            </span>
                                        </a>
                                        <ul class="dropdown-menu settings-menu">
                                            @foreach (config()->get('app.languages') as $langKey => $langText)
                                                @if (app()->getLocale() !== $langKey)
                                                    <li>
                                                        <a class="dropdown-item @if (isArabic($langText)) arabic-font @endif" href="{{ getSameWithNewLanguage($langKey) }}">
                                                            <img src="{{ asset('assets/img/flags/download.jpg') }}" style="width: 20px" alt="">
                                                            {{ $langText }}
                                                        </a>
                                                    </li>
                                                @endif
                                            @endforeach
                                        </ul>
                                    </div>
                                </div>
                                <hr>
                            </div>
                            <form method="post" action="{{ route('vendor.store') }}" enctype="multipart/form-data">
                                @csrf

                                <div class="row">
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label class="form-control-label" for="classification">{{ __('Classifications') }} <span class="text-danger">*</span></label>
                                            <select name="class" id="classification" class="form-control">
                                                <option value="">{{ __('Choose Classification') }}</option>
                                                @foreach ($classifications as $classification)
                                                    <option value="{{ $classification->id }}">
                                                        {{ \Illuminate\Support\Facades\App::getLocale() == 'en' ? $classification->name_en : $classification->name_ar }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                        @error('class')
                                            <div class="input-error text-danger" style="text-align:{{ \Illuminate\Support\Facades\App::getLocale() == 'en' ? '' : 'end' }} ">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label class="form-control-label" for="category">{{ __('Categories') }} <span class="text-danger">*</span></label>
                                            <select name="category" id="category" class="form-control">
                                                <option value="">{{ __('Choose Category') }}</option>
                                            </select>
                                        </div>
                                        @error('category')
                                            <div class="input-error text-danger" style="text-align:{{ \Illuminate\Support\Facades\App::getLocale() == 'en' ? '' : 'end' }} ">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label class="form-control-label" for="input-phone_number">{{ __('phone Number') }} <span class="text-danger">*</span></label>
                                            <input type="text" id="input-phone_number" name="phone_number" class="form-control" placeholder="{{ __('Enter phone_number') }}" value="{{ old('phone_number') }}">
                                        </div>
                                        @error('phone_number')
                                            <div class="input-error text-danger" style="text-align:{{ \Illuminate\Support\Facades\App::getLocale() == 'en' ? '' : 'end' }} ">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label class="form-control-label" for="email">{{ __('Email') }} <span class="text-danger">*</span></label>
                                            <input type="email" name="email" id="email" class="form-control" placeholder="{{ __('Enter-Email') }}" value="{{ old('email') }}">
                                        </div>
                                        @error('email')
                                            <div class="input-error text-danger" style="text-align:{{ \Illuminate\Support\Facades\App::getLocale() == 'en' ? '' : 'end' }} ">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label class="form-control-label" for="password">{{ __('Password') }} <span class="text-danger">*</span></label>
                                            <input type="password" name="password" id="password" class="form-control" placeholder="{{ __('Enter-Password') }}" value="{{ old('password') }}">
                                        </div>
                                        @error('password')
                                            <div class="input-error text-danger" style="text-align:{{ \Illuminate\Support\Facades\App::getLocale() == 'en' ? '' : 'end' }} ">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label class="form-control-label" for="input-RestaurantName">{{ __('EN Store  Name') }} <span class="text-danger">*</span></label>
                                            <input type="text" id="input-RestaurantName" name="RestaurantName" class="form-control" placeholder="{{ __('enter-store-name-en') }}" value="{{ old('RestaurantName') }}">
                                        </div>
                                        @error('RestaurantName')
                                            <div class="input-error text-danger" style="text-align:{{ \Illuminate\Support\Facades\App::getLocale() == 'en' ? '' : 'end' }} ">{{ $message }}</div>
                                        @enderror
                                    </div>
                           
                                    {{-- <div class="col-lg-4">
                                        <div class="form-group">
                                            <label class="form-control-label" for="input-RestaurantNameAr">{{ __('AR Store Name') }} <span class="text-danger">*</span></label>
                                            <input type="text" id="input-RestaurantNameAr" name="RestaurantName_ar" class="form-control" placeholder="{{ __('enter-store-name-ar') }}" value="{{ old('RestaurantName_ar') }}">
                                        </div>
                                        @error('RestaurantName_ar')
                                            <div class="input-error text-danger" style="text-align:{{ \Illuminate\Support\Facades\App::getLocale() == 'en' ? '' : 'end' }} ">{{ $message }}</div>
                                        @enderror
                                    </div> --}}
                                </div>

                                <div class="row">
                                    {{-- <div class="col-lg-4">
                                        <div class="form-group">
                                            <label class="form-control-label" for="input-Tax">{{ __('Tax') }} <span class="text-danger">*</span></label>
                                            <input type="number" id="input-Tax" name="tax" class="form-control" placeholder="{{ __('Enter Tax') }}" value="{{ old('tax') }}">
                                        </div>
                                        @error('tax')
                                            <div class="input-error text-danger" style="text-align:{{ \Illuminate\Support\Facades\App::getLocale() == 'en' ? '' : 'end' }} ">{{ $message }}</div>
                                        @enderror
                                    </div> --}}

                                    {{-- <div class="col-lg-4">
                                        <div class="form-group">
                                            <label class="form-control-label" for="id-number">{{ __('id-number') }} <span class="text-danger">*</span></label>
                                            <input type="text" name="id_number" id="id-number" class="form-control" placeholder="{{ __('Enter-id-number') }}" value="{{ old('id_number') }}">
                                        </div>
                                        @error('id_number')
                                            <div class="input-error text-danger" style="text-align:{{ \Illuminate\Support\Facades\App::getLocale() == 'en' ? '' : 'end' }} ">{{ $message }}</div>
                                        @enderror
                                    </div> --}}

                                    {{-- <div class="col-lg-4">
                                        <div class="form-group">
                                            <label class="form-control-label" for="input-sock">{{ __('sock_number') }} <span class="text-danger">*</span></label>
                                            <input type="text" name="sock_number" id="input-sock" class="form-control" placeholder="{{ __('Enter-sock-number') }}" value="{{ old('sock_number') }}">
                                        </div>
                                        @error('sock_number')
                                            <div class="input-error text-danger" style="text-align:{{ \Illuminate\Support\Facades\App::getLocale() == 'en' ? '' : 'end' }} ">{{ $message }}</div>
                                        @enderror
                                    </div> --}}
                                </div>

                                <div class="row">
                                    {{-- <div class="col-lg-4">
                                        <div class="form-group">
                                            <label class="form-control-label" for="input-gate">{{ __('gate-number') }} <span class="text-danger">*</span></label>
                                            <input type="text" name="gate_number" id="input-gate" class="form-control" placeholder="{{ __('Enter-gate-number') }}" value="{{ old('gate_number') }}">
                                        </div>
                                        @error('gate_number')
                                            <div class="input-error text-danger" style="text-align:{{ \Illuminate\Support\Facades\App::getLocale() == 'en' ? '' : 'end' }} ">{{ $message }}</div>
                                        @enderror
                                    </div> --}}
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label class="form-control-label" for="id-number">{{ __('id-number') }} <span class="text-danger">*</span></label>
                                            <input type="text" name="id_number" id="id-number" class="form-control" placeholder="{{ __('Enter-id-number') }}" value="{{ old('id_number') }}">
                                        </div>
                                        @error('id_number')
                                            <div class="input-error text-danger" style="text-align:{{ \Illuminate\Support\Facades\App::getLocale() == 'en' ? '' : 'end' }} ">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label class="form-control-label" for="input-city">{{ __('Address') }} <span class="text-danger">*</span></label>
                                            <input type="text" id="input-city" name="city" class="form-control" placeholder="{{ __('Enter-Address') }}" value="{{ old('city') }}">
                                        </div>
                                        @error('city')
                                            <div class="input-error text-danger" style="text-align:{{ \Illuminate\Support\Facades\App::getLocale() == 'en' ? '' : 'end' }} ">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label class="form-control-label" for="input-store">{{ __('store-number') }} <span class="text-danger">*</span></label>
                                            <input type="text" name="store_number" id="input-store" class="form-control" placeholder="{{ __('Enter-store-number') }}" value="{{ old('store_number') }}">
                                        </div>
                                        @error('store_number')
                                            <div class="input-error text-danger" style="text-align:{{ \Illuminate\Support\Facades\App::getLocale() == 'en' ? '' : 'end' }} ">{{ $message }}</div>
                                        @enderror
                                    </div>

                              
                                    {{-- <div class="col-lg-4">
                                        <div class="form-group">
                                            <label class="form-control-label" for="input-street">{{ __('street-number') }} <span class="text-danger">*</span></label>
                                            <input type="text" name="street_number" id="input-street" class="form-control" placeholder="{{ __('Enter-street-number') }}" value="{{ old('street_number') }}">
                                        </div>
                                        @error('street_number')
                                            <div class="input-error text-danger" style="text-align:{{ \Illuminate\Support\Facades\App::getLocale() == 'en' ? '' : 'end' }} ">{{ $message }}</div>
                                        @enderror
                                    </div> --}}

                                </div>

                                {{-- <div class="row">
                            

                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label class="form-control-label" for="input-image">{{ __('Store Image') }} <span class="text-danger">*</span></label>
                                            <input type="file" id="input-image" name="Restaurant_Image" class="form-control" accept="image/x-png,image/gif,image/jpeg,image/png,image/jpg,image/svg" onchange="previewImage(event)">
                                        </div>
                                        @error('Restaurant_Image')
                                            <div class="input-error text-danger" style="text-align:{{ \Illuminate\Support\Facades\App::getLocale() == 'en' ? '' : 'end' }}">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div> --}}

                                <div class="row">
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label class="form-control-label" for="bank-account">{{ __('bank-account-number') }} <span class="text-danger">*</span></label>
                                            <input type="text" name="bank_account" id="bank-account" class="form-control" placeholder="{{ __('Enter-bank-account-number') }}" value="{{ old('bank_account') }}">
                                        </div>
                                        @error('bank_account')
                                            <div class="input-error text-danger" style="text-align:{{ \Illuminate\Support\Facades\App::getLocale() == 'en' ? '' : 'end' }} ">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label class="form-control-label" for="input-image">{{ __('Store Image') }} <span class="text-danger">*</span></label>
                                            <input type="file" id="input-image" name="Restaurant_Image" class="form-control" accept="image/x-png,image/gif,image/jpeg,image/png,image/jpg,image/svg" onchange="previewImage(event)">
                                        </div>
                                        @error('Restaurant_Image')
                                            <div class="input-error text-danger" style="text-align:{{ \Illuminate\Support\Facades\App::getLocale() == 'en' ? '' : 'end' }}">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label class="form-control-label" for="input-shop_certificate">{{ __('shop-certificate') }} <span class="text-danger">*</span></label>
                                            <input type="file" id="input-shop_certificate" name="shop_certificate" class="form-control" accept="application/pdf">
                                        </div>
                                        @error('shop_certificate')
                                            <div class="input-error text-danger" style="text-align:{{ \Illuminate\Support\Facades\App::getLocale() == 'en' ? '' : 'end' }} ">{{ $message }}</div>
                                        @enderror
                                    </div>
                            
                                </div>

                                <div class="row">
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label class="form-control-label" for="input-store-images-gallery">{{ __('store-images-gallery') }} <span class="text-danger">*</span></label>
                                            <input type="file" id="input-store-images-gallery" name="gallery[]" class="form-control" accept="image/x-png,image/gif,image/jpeg,image/png,image/jpg,image/svg" multiple onchange="previewImages(event)">
                                        </div>
                                        @error('gallery')
                                            <div class="input-error text-danger" style="text-align:{{ \Illuminate\Support\Facades\App::getLocale() == 'en' ? '' : 'end' }}">{{ $message }}</div>
                                        @enderror
                                        @foreach ($errors->get('gallery.*') as $key => $error)
                                            <div class="alert alert-danger">
                                                {{ $error[0] }}
                                            </div>
                                        @endforeach

                                    </div>
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <div id="image-preview" style="margin-top: 10px;">
                                                <img id="preview" src="" alt="Image Preview" style="max-width: 100px; height: 70px; display: none;">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                        </div>
                                    </div>
                                    <div class="col-lg-8">
                                        <div class="form-group">
                                            <div id="gallery-preview" style="margin-top: 10px; display: flex; flex-wrap: wrap; gap: 10px;"></div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-lg-12 mb-3">
                                        <div class="form-group">
                                            <label class="control-label">{{ __('Location') }} <span class="text-danger">*</span></label>
                                            <div id="map" class="col-lg-12" style="width:100%; height:226px; border: 2px solid #ccc;"></div>
                                        </div>
                                        @if ($errors->has('lat') || $errors->has('long'))
                                            <div class="input-error text-danger" style="text-align:{{ \Illuminate\Support\Facades\App::getLocale() == 'en' ? '' : 'end' }} ">
                                                {{ __('Please enter a valid location.') }}
                                            </div>
                                        @endif
                                    </div>
                                </div>

                                <div class="row" style="display: none" id="latLng">
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <label class="control-label">{{ __('lat') }}</label>
                                            <input readonly="readonly" class="form-control" type="text" name="lat" id="lat" placeholder="{{ __('Enter lat') }}" value="{{ inputValue('lat') }}">
                                            <div class="invalid-feedback" style="display: none"></div>
                                            @error('lat')
                                                <div class="input-error text-danger" style="text-align:{{ \Illuminate\Support\Facades\App::getLocale() == 'en' ? '' : 'end' }} ">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label class="control-label">{{ __('Lng') }}</label>
                                            <input readonly="readonly" class="form-control" type="text" name="long" id="lng" placeholder="{{ __('Enter Lng') }}" value="{{ inputValue('long') }}">
                                            <div class="invalid-feedback" style="display: none"></div>
                                            @error('long')
                                                <div class="input-error text-danger" style="text-align:{{ \Illuminate\Support\Facades\App::getLocale() == 'en' ? '' : 'end' }} ">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

                                <hr class="my-4 ">
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <button type='submit' class="btn btn-primary" name="addRestaurant" style="text-align: end;">{{ __('Submit') }}</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js-scripts-login')
    <script>
        $(document).ready(function() {
            $('#classification').on('change', function() {
                $('#category').html('');
                let classifications = $('#classification').val();
                $.ajax({
                    method: "GET",
                    url: "{{ route('vendor.getCategoriesAjax') }}",
                    data: {
                        'classifications': classifications
                    }
                }).done(function(result) {
                    $('#category').append(result);
                })
            });
        });
    </script>
    <script>
        function previewImage(event) {
            var input = event.target;
            var preview = document.getElementById('preview');
            var previewContainer = document.getElementById('image-preview');

            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function(e) {
                    preview.src = e.target.result;
                    preview.style.display = 'block';
                }

                reader.readAsDataURL(input.files[0]);
            } else {
                preview.src = '';
                preview.style.display = 'none';
            }
        }

        function previewImages(event) {
            var input = event.target;
            var previewContainer = document.getElementById('gallery-preview');

            // Clear previous previews
            previewContainer.innerHTML = '';

            if (input.files) {
                Array.from(input.files).forEach(file => {
                    if (file.type.match('image.*')) {
                        var reader = new FileReader();

                        reader.onload = function(e) {
                            var img = document.createElement('img');
                            img.src = e.target.result;
                            img.style.maxWidth = '100px';
                            img.style.maxHeight = '100px';
                            img.style.objectFit = 'cover';
                            img.style.marginRight = '10px';
                            previewContainer.appendChild(img);
                        }

                        reader.readAsDataURL(file);
                    }
                });
            }
        }
    </script>
    <script src="{{ asset('assets/js/maps.js') }}"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_API_KEY') }}&callback=initMap&libraries=&v=weekly" async></script>
@endsection