@extends('layouts.master-admin')
@section('title', 'Tạo cửa hàng')
@section('content')
@include('components.content-header', [
    'title' => 'Tạo cửa hàng',
    'parents' => [
        'shops.index' => 'Danh sách cửa hàng'
    ]
])
<section class="content">
    <div class="row">
        <div class="col-12">
            <form action="{{ route('shops.store') }}" method="POST" id="form-submit">
                @csrf
                <div class="card">
                    <div class="card-header">
                        <div class="card-tools">
                            <a href="{{ route('shops.index') }}" class="btn btn-secondary">
                                <i class="fa fa-arrow-left mr-2"></i>Quay về
                            </a>
                            <button type="reset" class="btn btn-default">
                                <i class="fa fa-redo mr-2"></i>Làm mới
                            </button>
                            <button type="button" class="btn btn-primary btn-save" data-type="submit">
                                <i class="fa fa-save mr-2"></i>Lưu
                            </button>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="username" class="col-form-label">Tài khoản <span class="text-danger">(*)</span></label>
                                        <input type="text" class="form-control @error('username') is-invalid @enderror"
                                        id="username" name="username" value="{{ old('username') }}" autocomplete="off" required maxlength="250">
                                        @error('username')
                                            <label id="username-error" class="error" for="username">{{ $message }}</label>
                                        @enderror
                                    </div>
                                    <div class="form-group">
                                        <label for="password" class="col-form-label">Mật khẩu <span class="text-danger">(*)</span></label>
                                            <input type="password" class="form-control @error('password') is-invalid @enderror"
                                            id="password" name="password" autocomplete="off" required maxlength="32">
                                            @error('password')
                                                <label id="password-error" class="error" for="password">{{ $message }}</label>
                                            @enderror
                                    </div>
                                    <div class="form-group">
                                        <label for="password_confirmation" class="col-form-label">Xác nhận <span class="text-danger">(*)</span></label>

                                            <input type="password" class="form-control @error('password_confirmation') is-invalid @enderror"
                                            placeholder="Nhập lại mật khẩu" maxlength="32"
                                            id="password_confirmation" name="password_confirmation" autocomplete="off" required>
                                            @error('password_confirmation')
                                                <label id="password_confirmation-error" class="error" for="password_confirmation">{{ $message }}</label>
                                            @enderror
                                    </div>
                                    <div class="form-group">
                                        <label for="name" class="col-form-label">Tên cửa hàng <span class="text-danger">(*)</span></label>

                                        <input type="text" class="form-control @error('name') is-invalid @enderror"
                                               id="name" name="name" value="{{ old('name') }}" autocomplete="off" required>
                                        @error('name')
                                        <label id="name-error" class="error" for="name">{{ $message }}</label>
                                        @enderror
                                    </div>
                                    <div class="form-group">
                                        <label for="name" class="col-form-label">Điện thoại <span class="text-danger">(*)</span></label>

                                        <input type="text" class="form-control @error('phone') is-invalid @enderror"
                                               id="phone" name="phone" value="{{ old('phone') }}" autocomplete="off" required maxlength="20">
                                        @error('phone')
                                        <label id="phone-error" class="error" for="phone">{{ $message }}</label>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-sm-6">

                                    <div class="form-group">
                                        <label for="address" class="col-form-label">Địa chỉ <span class="text-danger">(*)</span></label>

                                            <input type="text" class="form-control @error('address') is-invalid @enderror"
                                            id="address" name="address" value="{{ old('address') }}" autocomplete="off" required>
                                            @error('address')
                                                <label id="address-error" class="error" for="address">{{ $message }}</label>
                                            @enderror
                                    </div>
                                    <div class="form-group">
                                        <label for="province_id" class="col-form-label">Tỉnh / thành phố</label>
                                            <select class="form-control select2" name="province_id" id="province_id">
                                                @if (isset($provinces))
                                                    @foreach ($provinces as $province)
                                                        <option data-link="{{ route('admin.district',['province_id' => $province->id ]) }}" value="{{ $province->id }}">{{ $province->name }}</option>
                                                    @endforeach
                                                @endif
                                            </select>
                                    </div>
                                    <div class="form-group">
                                        <label for="district_id" class="col-form-label">Quận / huyện</label>
                                                <select  data-link="{{ route('admin.ward') }}" class="form-control select2" name="district_id" id="district_id">
                                            </select>
                                    </div>
                                    <div class="form-group">
                                        <label for="ward_id" class="col-form-label">Phường / xã</label>
                                            <select class="form-control select2" name="ward_id" id="ward_id">
                                            </select>
                                    </div>
                                    <div class="form-group row">
                                        <div class="col-sm-6">
                                            <label for="latitude" class="col-form-label">Vĩ độ</label>
                                            <input type="text" value="{{ old('latitude') }}" class="form-control" id="latitude" name="latitude">
                                        </div>
                                        <div class="col-sm-6">
                                            <label for="longitude" class="col-form-label">Kinh độ</label>
                                            <input type="text" value="{{ old('longitude') }}" class="form-control" id="longitude" name="longitude">
                                        </div>
                                    </div>
                                </div>
                            </div>
{{--                            <div class="row">--}}
{{--                                <div class="col-12">--}}
{{--                                    <button type="button" class="btn btn-primary btn-block" id="find_location">--}}
{{--                                        Tìm tọa độ trên map--}}
{{--                                    </button>--}}
{{--                                </div>--}}
{{--                            </div>--}}
                        </div>
                    </div>
                </div>
{{--                <div class="card">--}}
{{--                    <div class="card-header">--}}
{{--                        <h3><i class="fas fa-map-marker-alt mr-2"></i>Google map</h3>--}}
{{--                    </div>--}}
{{--                    <div class="card-body">--}}
{{--                        <div class="row">--}}
{{--                            <div class="col-12" style="height: 600px">--}}
{{--                                <div id="map" style="height: 100%"></div>--}}
{{--                                <input type="hidden" id="address_for_map">--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                </div>--}}
            </form>
        </div>
    </div>
</section>
@endsection
@section('script')
{{--<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>--}}
{{--<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCxaTCEAISbcaU2IZ9zx0ePvH0vwi1LHO0&callback=initMap" async defer></script>--}}
<script src="{{ asset('static/backend/js/shop/shop.js?v='.time()) }}"></script>
<script>
    const shop = new Shop()
    shop.changeLocation()
    shop.save()
</script>
<script>
    // const positionDefault = { lat: 10.807301, lng: 106.647734 };
    // document.getElementById('latitude').value = positionDefault.lat;
    // document.getElementById('longitude').value = positionDefault.lng;
    // (function(exports) {
    //     "use strict";
    //     function initMap() {
    //         var map = new google.maps.Map(document.getElementById("map"), {
    //             zoom: 16,
    //             center: positionDefault
    //         });
    //         var geocoder = new google.maps.Geocoder();
    //         document.getElementById("find_location").addEventListener("click", function() {
    //             geocodeAddress(geocoder, map);
    //         });
    //         exports.marker = new google.maps.Marker({
    //             map: map,
    //             draggable: true,
    //             animation: google.maps.Animation.DROP,
    //             position: positionDefault
    //         });
    //         exports.marker.addListener("drag", function (e) {
    //             document.getElementById('latitude').value = e.latLng.lat();
    //             document.getElementById('longitude').value = e.latLng.lng();
    //         });
    //     }
    //
    //     function geocodeAddress(geocoder, resultsMap) {
    //         var address = document.getElementById("address_for_map").value;
    //         geocoder.geocode({ address: address }, function(results, status) {
    //             if (status === "OK") {
    //                 for (var i = 0; i < exports.markers.length; i++) {
    //                     exports.markers[i].setMap(map);
    //                 }
    //                 exports.markers = [];
    //                 resultsMap.setCenter(results[0].geometry.location);
    //                 var marker = new google.maps.Marker({
    //                     map: resultsMap,
    //                     position: results[0].geometry.location
    //                 });
    //             } else {
    //                 console.log("Geocode was not successful for the following reason: " + status);
    //             }
    //         });
    //     }
    //     exports.geocodeAddress = geocodeAddress;
    //     exports.initMap = initMap;
    // })((this.window = this.window || {}));
</script>
@endsection