@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('name') ? 'has-error' : '' }}">
                            <label for="name">{{ __('lang.store_name') }} <span class="required">*</span></label>
                            <input type="text" id="name" name="name" value="{{ old('name', $item->name ?? null) }}" class="form-control" placeholder="{{ __('lang.enter') }} {{ __('lang.store_name') }}">
                        </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($item->commercial_registration) ? asset($item->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>
                <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', $item->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', $item->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', $item->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', $item->lat ?? null) }}" id="lat">--}}
{{--                                <input type="hidden" readonly name="lng" value="{{ old('lng', $item->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 ?? $item->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.branches.create') ? $get : $get->day)) }}
                                            <input type="hidden" name="days[{{ $loop->index }}][day]" value="{{ request()->routeIs('dashboard.stores.branches.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', $item->hours[$loop->index]->closed ?? null) == '1' ? 'disabled' : '' }} class="form-control timeClock" value="{{ old('days.' . $loop->index . '.open_time', $item->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', $item->hours[$loop->index]->closed ?? null) == '1' ? 'disabled' : '' }} class="form-control timeClock" value="{{ old('days.' . $loop->index . '.close_time', $item->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', $item->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.branches', $data->id) }}" class="btn default">{{ __('lang.cancel') }}</a>
                </div>
            </div>
        </div>
    </div>
</div>

@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', $item->lat ?? null) ?? 24.717215612 }}');
        let lng = parseFloat('{{ old('lng', $item->lng ?? null) ?? 46.667152321576 }}');
        function initMap() {
            map = new google.maps.Map(document.getElementById("map"), {
                center: {
                    lat: lat,
                    lng: lng
                },
                zoom: 10
            });
            setTimeout(function(){
                if($('#map').find('.dismissButton').length == 1){
                    $('#map').children('div:nth-of-type(2)').remove();
                }
            },1000);
            var marker = new google.maps.Marker({
                position: {
                    lat: lat,
                    lng: lng
                },
                map: map,
                draggable: true
            });
            google.maps.event.addListener(marker, 'dragend', function () {
                $('#lat').val(marker.getPosition().lat());
                $('#lng').val(marker.getPosition().lng());
            });
        }
        initMap();
    </script>
@stop