@extends('layouts.app', ['title' => __('Restaurant Management')])

@section('content')
@include('restorants.partials.header', ['title' => $title])
<div class="container-fluid mt--7">
    <div class="row">
        <div class="col-xl-12 order-xl-1">
            <div class="card bg-secondary shadow">
                <div class="card-header bg-white border-0">
                    <div class="row align-items-center">
                        <div class="col-8">
                            <h3 class="mb-0">{{ __('Restaurant Management') }}</h3>
                        </div>
                        <div class="col-4 text-right">
                            <a href="{{ route('superadmin.restaurants.index') }}" class="btn btn-sm btn-primary">{{ __('Back to list') }}</a>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <h6 class="heading-small text-muted mb-4">{{ __('Restaurant information') }}</h6>
                    <div class="pl-lg-4">
                        <form method="post" action="{{ route('superadmin.restaurants.store') }}"   enctype="multipart/form-data"  >
                            @csrf
                            <div class="form-group{{ $errors->has('name') ? ' has-danger' : '' }}">
                                <label class="form-control-label" for="name">{{ __('Restaurant Name') }}</label>
                                <input type="text" name="name" id="name" class="form-control form-control-alternative{{ $errors->has('name') ? ' is-invalid' : '' }}" placeholder="{{ __('Restaurant Name here') }} ..." value="" required autofocus>
                                @if ($errors->has('name'))
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $errors->first('name') }}</strong>
                                </span>
                                @endif
                            </div>

                            <hr />
                            <h6 class="heading-small text-muted mb-4">{{ __('Owner information') }}</h6>

                            <div class="form-group{{ $errors->has('name_owner') ? ' has-danger' : '' }}">
                                <label class="form-control-label" for="name_owner">{{ __('Owner Name') }}</label>
                                <input type="text" name="name_owner" id="name_owner" class="form-control form-control-alternative{{ $errors->has('name_owner') ? ' is-invalid' : '' }}" placeholder="{{ __('Owner Name here') }} ..." value="" required autofocus>
                                @if ($errors->has('name_owner'))
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $errors->first('name_owner') }}</strong>
                                </span>
                                @endif
                            </div>
                            <div class="form-group{{ $errors->has('email_owner') ? ' has-danger' : '' }}">
                                <label class="form-control-label" for="email_owner">{{ __('Email Address') }}</label>
                                <input type="email" name="email_owner" id="email_owner" class="form-control form-control-alternative{{ $errors->has('email_owner') ? ' is-invalid' : '' }}" placeholder="{{ __('Email here') }} ..." value="" required autofocus>
                                @if ($errors->has('email_owner'))
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $errors->first('email_owner') }}</strong>
                                </span>
                                @endif
                            </div>
                            @include('partials.input',['type'=>"text", 'name'=>'Mobile Number','id'=>"mobile_number",'placeholder'=>"Mobile Number here",'required'=>true,'value'=>""])
                            @include('partials.input',['type'=>"text", 'name'=>'Restaurant Phone','id'=>"phone_owner",'placeholder'=>"Phone here",'required'=>true,'value'=>""])

                            @if (isset($_GET['cloneWith']))
                            <input type="hidden" id="cloneWith" name="cloneWith" value="{{ $_GET['cloneWith'] }}" />
                            @endif
                            <div class="form-group{{ $errors->has('address') ? ' has-danger' : '' }}">
                                <label class="form-control-label" for="address">{{ __('Address') }}</label>
                                <input type="text" name="address" id="address" class="form-control form-control-alternative{{ $errors->has('address') ? ' is-invalid' : '' }}" placeholder="{{ __('Address here') }} ..." value="" required autofocus>
                                @if ($errors->has('address'))
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $errors->first('address') }}</strong>
                                </span>
                                @endif
                            </div>
                            <div class="form-group{{ $errors->has('zip_code') ? ' has-danger' : '' }}">
                                <label class="form-control-label" for="zip_code">{{ __('Zip code') }}</label>
                                <input type="text" name="zip_code" id="zip_code" class="form-control form-control-alternative{{ $errors->has('zip_code') ? ' is-invalid' : '' }}" placeholder="{{ __('zip code') }} ..." value="" required autofocus>
                                @if ($errors->has('zip_code'))
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $errors->first('zip_code') }}</strong>
                                </span>
                                @endif
                            </div>
                            <div class="form-group{{ $errors->has('city') ? ' has-danger' : '' }}">
                                <label class="form-control-label" for="city">{{ __('City') }}</label>
                                <input type="text" name="city" id="city" class="form-control form-control-alternative{{ $errors->has('city') ? ' is-invalid' : '' }}" placeholder="{{ __('City') }} ..." value="" required autofocus>
                                @if ($errors->has('city'))
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $errors->first('city') }}</strong>
                                </span>
                                @endif
                            </div>
                            <div class="form-group{{ $errors->has('state') ? ' has-danger' : '' }}">
                                <label class="form-control-label" for="state">{{ __('State') }}</label>
                                <input type="text" name="state" id="state" class="form-control form-control-alternative{{ $errors->has('state') ? ' is-invalid' : '' }}" placeholder="{{ __('State') }} ..." value="" required autofocus>
                                @if ($errors->has('state'))
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $errors->first('state') }}</strong>
                                </span>
                                @endif
                            </div>

                            <div class="form-group{{ $errors->has('commission_rate') ? ' has-danger' : '' }}">
                                <label class="form-control-label" for="commission_rate">{{ __('Commission Rate') }}</label>
                                <input type="text" name="commission_rate" id="commission_rate" class="form-control form-control-alternative{{ $errors->has('commission_rate') ? ' is-invalid' : '' }}" placeholder="{{ __('Commission Rate') }} ..." value="" required autofocus>
                                @if ($errors->has('zip_code'))
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $errors->first('zip_code') }}</strong>
                                </span>
                                @endif
                            </div>
                            <div class="form-group{{ $errors->has('active') ? ' has-danger' : '' }}">
                                <label class="form-control-label" for="active">{{ __('Status') }}</label>
                                <select name="active" id="active" class="form-control form-control-alternative{{ $errors->has('active') ? ' is-invalid' : '' }}" required>
                                    <option value="" disabled selected>{{ __('Select Status') }}</option>
                                    <option value="1" {{ old('active') == 'active' ? 'selected' : '' }}>{{ __('Active') }}</option>
                                    <option value="0" {{ old('active') == 'inactive' ? 'selected' : '' }}>{{ __('Inactive') }}</option>
                                </select>
                                @if ($errors->has('active'))
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $errors->first('active') }}</strong>
                                </span>
                                @endif
                            </div>
                            <div class="form-group{{ $errors->has('image') ? ' has-danger' : '' }}">
                                <label class="form-control-label" for="image">{{ __('Upload Image') }}</label>
                                <input type="file" name="image" id="image"
                                    class="form-control form-control-alternative{{ $errors->has('image') ? ' is-invalid' : '' }}"
                                    accept="image/*" required>

                                @if ($errors->has('image'))
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $errors->first('image') }}</strong>
                                </span>
                                @endif

                                <!-- Image preview -->
                                <div id="imagePreview" class="mt-2"></div>
                            </div>

                            <!-- Script to show preview -->
                            <script>
                                document.getElementById('image').addEventListener('change', function(event) {
                                    let preview = document.getElementById('imagePreview');
                                    preview.innerHTML = ""; // Clear old preview

                                    let file = event.target.files[0];
                                    if (file) {
                                        let reader = new FileReader();
                                        reader.onload = function(e) {
                                            let img = document.createElement('img');
                                            img.src = e.target.result;
                                            img.classList.add('img-thumbnail', 'mt-2');
                                            img.style.maxWidth = "200px";
                                            preview.appendChild(img);
                                        }
                                        reader.readAsDataURL(file);
                                    }
                                });
                            </script>


                            <div style="text-align: end;">
                                <button type="submit" class="btn btn-primary mt-4">{{ __('Save') }}</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@include('layouts.footers.auth')
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCf6Yo-qHPI1dj22xCPsEI6QzkYj5vS5vI&libraries=places"></script>

<script>
    function initAutocomplete() {
        // Attach autocomplete to the address input
        var autocomplete = new google.maps.places.Autocomplete(
            document.getElementById('address'),
            { types: ['geocode'] }
        );

        // Listen for selection
        autocomplete.addListener('place_changed', function () {
            var place = autocomplete.getPlace();

            // Clear previous values
            document.getElementById('city').value = '';
            document.getElementById('state').value = '';
            document.getElementById('zip_code').value = '';

            if (place.address_components) {
                place.address_components.forEach(function (component) {
                    var types = component.types;

                    if (types.includes("locality")) {
                        // City
                        document.getElementById('city').value = component.long_name;
                    }

                    if (types.includes("administrative_area_level_1")) {
                        // State
                        document.getElementById('state').value = component.long_name;
                    }

                    if (types.includes("postal_code")) {
                        // Zip
                        document.getElementById('zip_code').value = component.long_name;
                    }
                });
            }
        });
    }

    // Initialize after page load
    google.maps.event.addDomListener(window, 'load', initAutocomplete);
</script>

@endsection