@extends('header.header')
@section('content')
    <script>
        var cookies = document.cookie.split(";");

        for (var i = 0; i < cookies.length; i++) {
            var cookie = cookies[i];
            var eqPos = cookie.indexOf("=");
            var name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
            document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT";
        }
    </script>

    <div class="header pb-6 d-flex align-items-center"
        style="min-height: 200px; background-image: url(../assets/img/theme/profile-cover.jpg); background-size: cover; background-position: center top;">
        <!-- Mask -->
        <span class="mask bg-gradient-default opacity-8"></span>
        <!-- Header container -->

    </div>





    <div class="container-fluid mt--6  ">
        <div class="row">
            <div class="offset-xl-2 col-xl-8 order-xl-1 ">
                <div class="card">
                    <div class="card-header">
                        <div class="row align-items-center">
                            <div class="col-8">
                                <h3 class="mb-0">{{ __('Add Store') }} </h3>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <form method="post" action="{{ route('stores.store') }}" enctype="multipart/form-data">
                            @csrf
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label class="form-control-label"
                                            for="input-classification">{{ __('Classifications') }}</label>
                                        <select name="class" id="classification" class="form-control">
                                            @foreach ($classifications as $classification)
                                                <option value="{{ $classification->id }}">{{ $classification->name_en }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    @error('class')
                                        <div class="input-error">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label class="form-control-label"
                                            for="input-classification">{{ __('Category') }}</label>
                                        <select name="category" id="category" class="form-control">
                                        </select>
                                    </div>
                                    @error('category')
                                        <div class="input-error">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label class="form-control-label"
                                            for="input-classification">{{ __('Cuisines') }}</label>
                                        <select class="js-example-basic-multiple form-control" name="cuisines[]"
                                            multiple="multiple">
                                            @foreach ($cuisines as $cuisine)
                                                <option value="{{ $cuisine->id }}">{{ $cuisine->getNameAttribute() }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    @error('cuisines')
                                        <div class="input-error">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label class="form-control-label" for="input-phone_number">{{ __('phone Number') }}
                                        </label>
                                        <input type="text" id="input-phone_number" name="phone_number"
                                            class="form-control" placeholder="Enter phone_number" required>
                                    </div>
                                    @error('phone_number')
                                        <div class="input-error">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label class="form-control-label"
                                            for="input-username">{{ __('EN Store  Name') }}</label>
                                        <input type="text" id="input-RestaurantName" name="RestaurantName"
                                            class="form-control" placeholder="" required>
                                    </div>
                                    @error('RestaurantName')
                                        <div class="input-error">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label class="form-control-label"
                                            for="input-username">{{ __('AR Store Name') }}</label>
                                        <input type="text" id="input-RestaurantName" name="RestaurantName_ar"
                                            class="form-control" placeholder="" required>
                                    </div>
                                    @error('RestaurantName_ar')
                                        <div class="input-error">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-12 mb-3">
                                    <div class="form-group">
                                        <label class="control-label">{{ __('Location') }}</label>
                                        <div id="map1" class="col-lg-12"
                                            style="width: 500px;height: 226px;border: 2px solid #ccc;"></div>
                                    </div>
                                    @error('lat')
                                        <div class="input-error">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="row" style="display: none" id="latLng">
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label class="control-label">{{ __('lat') }}</label>
                                            <input readonly="readonly" class="form-control" type="text" name="lat"
                                                id="lat1" placeholder="{{ __('Enter lat') }}"
                                                value="{{ inputValue('lat') }}">
                                            <div class="invalid-feedback" style="display: none"></div>
                                            @error('lat')
                                                <div class="input-error">{{ $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="lng1" placeholder="{{ __('Enter Lng') }}"
                                                value="{{ inputValue('lng') }}">
                                            <div class="invalid-feedback" style="display: none"></div>
                                            @error('lng')
                                                <div class="input-error">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label class="form-control-label"
                                                for="input-city">{{ __('Address') }}</label>
                                            <input type="text" id="input-city" name="city" class="form-control"
                                                placeholder="" required>
                                        </div>
                                        @error('city')
                                            <div class="input-error">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label class="form-control-label" for="input-Tax">{{ __('Tax') }}</label>
                                            <input type="number" id="input-Tax" name="tax" class="form-control"
                                                placeholder="{{ __('Enter Tax') }}" required>
                                        </div>
                                        @error('tax')
                                            <div class="input-error">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label class="form-control-label"
                                                for="input-phone_number">{{ __('Store Image') }} </label>
                                            <input type="file" id="input-phone_number" name="Restaurant_Image"
                                                class="form-control" placeholder="" value="Jesse"
                                                accept="image/x-png,image/gif,image/jpeg,image/png,image/jpg,image/svg">
                                        </div>
                                        @error('Restaurant_Image')
                                            <div class="input-error">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <button type='submit' class="btn btn-primary"
                                            name="addRestaurant">{{ __('Submit') }}</button>
                                        <a href="/Restaurants" class="btn btn-danger">{{ __('cancel') }}</a>
                                    </div>
                                </div>
                                <hr class="my-4 ">
                                <!-- Address -->
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    @endsection
    @section('js-scripts')
        <script type="text/javascript">
            $(document).ready(function() {
                $('#classification').on('change', function() {
                    $('#category').empty();
                    let classifications = $('#classification').val();
                    $.ajax({
                        method: "GET",
                        url: "getClassificationDetails",
                        data: {
                            'classifications': classifications
                        }
                    }).done(function(result) {
                        let options = $.parseHTML(result);
                        $('#category').append(options);
                    });
                });
            });
        </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