@csrf
<div class="form-body">
    <div class="row">
        <div class="col-md-12">
            <ul class="nav nav-tabs">
                <li class="active">
                    <a href="#General" data-toggle="tab"> {{ __('lang.general') }} </a>
                </li>
                <li>
                    <a href="#Address" data-toggle="tab"> {{ __('lang.address') }} </a>
                </li>
                <li>
                    <a href="#StoreTimings" data-toggle="tab"> {{ __('lang.store_timings') }} </a>
                </li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane fade active in" id="General">
                    <div class="col-md-12">
                        <div class="form-group {{ $errors->has('service_id') ? 'has-error' : '' }}">
                            <label for="service_id">{{ __('lang.service') }} <span class="required">*</span></label>
                            <select id="service_id" data-title="{{ __('lang.choose') }} {{ __('lang.service') }}" name="service_id" class="form-control bs-select">
                                @foreach($services as $get)
                                    <option {{ old('service_id', $data->service_id ?? null) == $get->id ? 'selected' : '' }} value="{{ $get->id }}">{{ $get->title }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group {{ $errors->has('name') ? 'has-error' : '' }}">
                            <label for="name">{{ __('lang.store_name') }} <span class="required">*</span></label>
                            <input type="text" id="name" name="name" value="{{ old('name', $data->name ?? null) }}" class="form-control" placeholder="{{ __('lang.enter') }} {{ __('lang.store_name') }}">
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group {{ $errors->has('brief') ? 'has-error' : '' }}">
                            <label for="brief">{{ __('lang.brief') }} <span class="required">*</span> <small><span class="remChars">{{ 600 - mb_strlen(old('brief', $data->brief ?? null)) }}</span> الأحرف المتبقية</small></label>
                            <textarea id="brief" name="brief" maxlength="600" class="form-control max_length" placeholder="{{ __('lang.enter') }} {{ __('lang.brief') }}">{{ old('brief', $data->brief ?? null) }}</textarea>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group {{ $errors->has('logo') ? 'has-error' : '' }}">
                            <label class="display-block" for="logo">{{ __('lang.choose') }} {{ __('lang.logo') }} <span class="required"> * {{ __('lang.best_size') }} ({{ __('lang.width') }}:600 * {{ __('lang.height') }}:600)</span></label>
                            <div class="fileinput fileinput-new" data-provides="fileinput">
                                <div class="fileinput-new thumbnail">
                                    <img src="{{ isset($data->logo) ? asset($data->logo) : asset('images/default.png') }}"/>
                                </div>
                                <div class="fileinput-preview fileinput-exists thumbnail"> </div>
                                <div>
                                    <span class="btn default btn-file">
                                        <span class="fileinput-new"> {{ __('lang.choose') }} {{ __('lang.image') }}</span>
                                        <span class="fileinput-exists">{{ __('lang.change') }} {{ __('lang.image') }} </span>
                                        <input type="file" name="logo" id="logo">
                                    </span>
                                    <a href="javascript:;" class="btn red fileinput-exists" data-dismiss="fileinput"> {{ __('lang.delete') }} {{ __('lang.logo') }} </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group {{ $errors->has('commercial_registration') ? 'has-error' : '' }}">
                            <label class="display-block" for="commercial_registration">{{ __('lang.choose') }} {{ __('lang.commercial_registration') }} <span class="required"> *</span></label>
                            <div class="fileinput fileinput-new" data-provides="fileinput">
                                <div class="fileinput-new thumbnail">
                                    <img src="{{ isset($data->commercial_registration) ? asset($data->commercial_registration) : asset('images/default.png') }}"/>
                                </div>
                                <div class="fileinput-preview fileinput-exists thumbnail"> </div>
                                <div>
                                    <span class="btn default btn-file">
                                        <span class="fileinput-new"> {{ __('lang.choose') }} {{ __('lang.image') }}</span>
                                        <span class="fileinput-exists">{{ __('lang.change') }} {{ __('lang.image') }} </span>
                                        <input type="file" name="commercial_registration" id="commercial_registration">
                                    </span>
                                    <a href="javascript:;" class="btn red fileinput-exists" data-dismiss="fileinput"> {{ __('lang.delete') }} {{ __('lang.commercial_registration') }} </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group {{ $errors->has('national_id') ? 'has-error' : '' }}">
                            <label class="display-block" for="national_id">{{ __('lang.choose') }} {{ __('lang.national_id') }} <span class="required"> *</span></label>
                            <div class="fileinput fileinput-new" data-provides="fileinput">
                                <div class="fileinput-new thumbnail">
                                    <img src="{{ isset($data->national_id) ? asset($data->national_id) : asset('images/default.png') }}"/>
                                </div>
                                <div class="fileinput-preview fileinput-exists thumbnail"> </div>
                                <div>
                                    <span class="btn default btn-file">
                                        <span class="fileinput-new"> {{ __('lang.choose') }} {{ __('lang.image') }}</span>
                                        <span class="fileinput-exists">{{ __('lang.change') }} {{ __('lang.image') }} </span>
                                        <input type="file" name="national_id" id="national_id">
                                    </span>
                                    <a href="javascript:;" class="btn red fileinput-exists" data-dismiss="fileinput"> {{ __('lang.delete') }} {{ __('lang.national_id') }} </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="Address">
                    <div class="col-md-4">
                        <div class="form-group {{ $errors->has('region_id') ? 'has-error' : '' }}">
                            <label for="region_id">{{ __('lang.region') }} <span class="required">*</span></label>
                            <select id="region_id" data-title="{{ __('lang.choose') }} {{ __('lang.region') }}" name="region_id" class="form-control bs-select">
                                @foreach($regions as $get)
                                    <option {{ old('region_id', $data->region_id ?? null) == $get->id ? 'selected' : '' }} value="{{ $get->id }}">{{ $get->title }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group {{ $errors->has('city_id') ? 'has-error' : '' }}">
                            <label for="city_id">{{ __('lang.city') }} <span class="required">*</span></label>
                            <select id="city_id" {{ !isset($cities) ? 'disabled' : '' }} data-title="{{ __('lang.choose') }} {{ __('lang.city') }}" name="city_id" class="form-control bs-select">
                                @isset($cities)
                                    @foreach($cities as $get)
                                        <option {{ old('city_id', $data->city_id ?? null) == $get->id ? 'selected' : '' }} value="{{ $get->id }}">{{ $get->title }}</option>
                                    @endforeach
                                @endisset
                            </select>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group {{ $errors->has('district_id') ? 'has-error' : '' }}">
                            <label for="district_id">{{ __('lang.district') }} <span class="required">*</span></label>
                            <select id="district_id" {{ !isset($districts) ? 'disabled' : '' }} data-title="{{ __('lang.choose') }} {{ __('lang.district') }}" name="district_id" class="form-control bs-select">
                                @isset($districts)
                                    @foreach($districts as $get)
                                        <option {{ old('district_id', $data->district_id ?? null) == $get->id ? 'selected' : '' }} value="{{ $get->id }}">{{ $get->title }}</option>
                                    @endforeach
                                @endisset
                            </select>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group {{ $errors->has('lat') ? 'has-error' : '' }} {{ $errors->has('lng') ? 'has-error' : '' }}">
                            <label for="location">{{ __('lang.address') }} <span class="required">*</span></label>
                            <div class="preview_map">
                                <input type="hidden" readonly name="lat" value="{{ old('lat', $data->lat ?? null) }}" id="lat">
                                <input type="hidden" readonly name="lng" value="{{ old('lng', $data->lng ?? null) }}" id="lng">
                                <div id="map"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="StoreTimings">
                    <div class="table-responsive">
                        <table style="margin-top: 10px;" class="table table-bordered table-striped table-condensed flip-content">
                            <thead class="flip-content">
                            <tr>
                                <th style="width: 100px"> {{ __('lang.days') }} </th>
                                <th> {{ __('lang.times') }} </th>
                                <th style="width: 250px;"> {{ __('lang.closed') }} </th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($days ?? $data->hours as $get)
                                    <tr @error('days.' . $loop->index . '.day') class="has-error" @enderror @error('days.' . $loop->index . '.open_time') class="has-error" @enderror @error('days.' . $loop->index . '.close_time') class="has-error" @enderror>
                                        <td>
                                            {{ __('lang.' . (request()->routeIs('dashboard.stores.create') ? $get : $get->day)) }}
                                            <input type="hidden" name="days[{{ $loop->index }}][day]" value="{{ request()->routeIs('dashboard.stores.create') ? $get : $get->day }}">
                                        </td>
                                        <td>
                                            <div class="col-md-6">
                                                <div class="form-group" style="text-align: {{ app()->getLocale() == 'ar' ? 'right' : 'left' }}">
                                                    <label>{{ __('lang.from') }} <span class="required">*</span></label>
                                                    <input type="time" name="days[{{ $loop->index }}][open_time]" required {{ old('days.' . $loop->index . '.closed', $data->hours[$loop->index]->closed ?? null) == '1' ? 'disabled' : '' }} class="form-control timeClock" value="{{ old('days.' . $loop->index . '.open_time', $data->hours[$loop->index]->open_time ?? null) }}">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group" style="text-align: {{ app()->getLocale() == 'ar' ? 'right' : 'left' }}">
                                                    <label>{{ __('lang.to') }} <span class="required">*</span></label>
                                                    <input type="time" name="days[{{ $loop->index }}][close_time]" required {{ old('days.' . $loop->index . '.closed', $data->hours[$loop->index]->closed ?? null) == '1' ? 'disabled' : '' }} class="form-control timeClock" value="{{ old('days.' . $loop->index . '.close_time', $data->hours[$loop->index]->close_time ?? null) }}">
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <input type="hidden" name="days[{{ $loop->index }}][closed]" value="0" />
                                            <input style="width:20px;height: 20px;" type="checkbox" class="closedDay" name="days[{{ $loop->index }}][closed]" {{ old('days.' . $loop->index . '.closed', $data->hours[$loop->index]->closed ?? null) == '1' ? 'checked' : '' }} value="1">
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="form-actions">
    <div class="row">
        <div class="col-md-6">
            <div class="row">
                <div class="col-md-9">
                    <button type="submit" id="submit" class="btn green">{{ __('lang.submit') }}</button>
                    <a href="{{ route('dashboard.stores') }}" class="btn default">{{ __('lang.cancel') }}</a>
                </div>
            </div>
        </div>
    </div>
</div>

@section('css')
    <style>
        .pac-target-input{
            height: 45px;
            outline: 0 !important;
            width: 70%;
            padding: 6px 12px;
            background-color: #fff;
            border: 1px solid #c2cad8;
            border-radius: 4px;
            -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
            box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
            -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
            -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
            top: 9px !important;
            right: 10%;

        }
    </style>
@stop
@section('js')
    <script>
        $(document).on('keyup bind change', '.max_length', function () {
            var length = $(this).attr('maxlength') - $(this).val().length;
            $(this).parent().find('.remChars').text(length);
        });
    </script>
    @include('dashboard.setting.map-key')
    <script>
        "use strict";
        let map;
        let lat = parseFloat('{{ old('lat', $data->lat ?? null) ?? 24.717215612 }}');
        let lng = parseFloat('{{ old('lng', $data->lng ?? null) ?? 46.667152321576 }}');
        function initMap() {
            var map = new google.maps.Map(document.getElementById('map'), {
                center: {lat: 37.7749, lng: -122.4194},
                zoom: 13
            });

            // Add search box
            var input = document.createElement('input');
            input.id = "pac-input";
            input.class = "form-control";
            input.type = "text";
            input.placeholder = "ادخل موقع المتجر";
            map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
            var searchBox = new google.maps.places.SearchBox(input);
            map.addListener('bounds_changed', function() {
                searchBox.setBounds(map.getBounds());
            });
            var markers = [];
            searchBox.addListener('places_changed', function() {
                var places = searchBox.getPlaces();
                if (places.length == 0) {
                    return;
                }
                markers.forEach(function(marker) {
                    marker.setMap(null);
                });
                markers = [];
                var bounds = new google.maps.LatLngBounds();
                places.forEach(function(place) {
                    if (!place.geometry) {
                        console.log("Returned place contains no geometry");
                        return;
                    }
                    var icon = {
                        url: place.icon,
                        size: new google.maps.Size(71, 71),
                        origin: new google.maps.Point(0, 0),
                        anchor: new google.maps.Point(17, 34),
                        scaledSize: new google.maps.Size(25, 25)
                    };
                    markers.push(new google.maps.Marker({
                        map: map,
                        icon: icon,
                        title: place.name,
                        position: place.geometry.location
                    }));
                    if (place.geometry.viewport) {
                        bounds.union(place.geometry.viewport);
                    } else {
                        bounds.extend(place.geometry.location);
                    }
                });
                map.fitBounds(bounds);
            });

            // Add current location button
            var locationButton = document.createElement('button');
            locationButton.id = "location-button";
            locationButton.textContent = "My Location";
            locationButton.classList.add('custom-map-control-button');
            map.controls[google.maps.ControlPosition.TOP_RIGHT].push(locationButton);
            locationButton.addEventListener('click', function() {
                // Try HTML5 geolocation
                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(function(position) {
                        var pos = {
                            lat: position.coords.latitude,
                            lng: position.coords.longitude
                        };

                        var infowindow = new google.maps.InfoWindow({
                            content: 'Current location'
                        });

                        var marker = new google.maps.Marker({
                            position: pos,
                            map: map,
                            title: 'Current location'
                        });

                        marker.addListener('click', function() {
                            infowindow.open(map, marker);
                        });

                        map.setCenter(pos);
                        map.setZoom(15);
                    }, function() {
                        handleLocationError(true, infoWindow, map.getCenter());
                    });
                } else {
                    // Browser doesn't support Geolocation
                    handleLocationError(false, infoWindow, map.getCenter());
                }
            });

            // Add marker with draggable property
            var marker = new google.maps.Marker({
                map: map,
                position: map.getCenter(),
                draggable: true
            });

            // Update lat and lng value when marker is moved
            google.maps.event.addListener(marker, 'dragend', function() {
                document.getElementById('lat').value = marker.getPosition().lat();
                document.getElementById('lng').value = marker.getPosition().lng();
            });
        }

        function handleLocationError(browserHasGeolocation, infoWindow, pos) {
            infoWindow.setPosition(pos);
            infoWindow.setContent(browserHasGeolocation ?
                'Error: The Geolocation service failed.' :
                'Error: Your browser doesn\'t support geolocation.');
            infoWindow.open(map);
        }
        initMap();
    </script>
@stop