@extends('layouts.app')

@section('styles')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
   integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
   crossorigin=""/>

   <style>
       #map { 
            height: 180px; 
            margin-bottom: 10px; 
        }
   </style>
@endsection

@section('content')
<div class="row justify-content-center">
    <div class="col-md-6">

        <div class="card mx-4">
            <div class="card-body p-4">

                <form method="POST" action="{{ route('frontend.register-team') }}">
                    {{ csrf_field() }}

                    <h3>Register Business</h3>
                    <p class="text-muted">{{ Auth::user()->name }} - {{ Auth::user()->email }}</p>

                    <p>Main Office / Store</p>

                    <div class="form-group">
                        <label class="required" for="logo">{{ trans('cruds.team.fields.logo') }}</label>
                        <div class="needsclick dropzone" id="logo-dropzone">
                        </div>
                        @if($errors->has('logo'))
                            <div class="invalid-feedback">
                                {{ $errors->first('logo') }}
                            </div>
                        @endif
                        <span class="help-block">{{ trans('cruds.team.fields.logo_helper') }}</span>
                    </div>
                                        
                    <div class="form-group">
                        <label for="name">{{ trans('cruds.branch.fields.name') }}</label>
                        <input class="form-control" type="text" name="name" id="name" value="{{ old('name', '') }}">
                        @if($errors->has('name'))
                            <div class="invalid-feedback">
                                {{ $errors->first('name') }}
                            </div>
                        @endif
                        <span class="help-block">{{ trans('cruds.branch.fields.name_helper') }}</span>
                    </div>

                    <div class="form-group">
                        <label class="required" for="address">Address</label>
                        <input class="form-control" type="text" name="address" id="address" value="{{ old('address', '') }}">
                        <!-- <textarea name="address" class="form-control{{ $errors->has('address') ? ' is-invalid' : '' }}" required rows="2">{{ old('address', null) }}</textarea> -->
                        @if($errors->has('city'))
                        <div class="invalid-referencedback">
                            {{ $errors->first('city') }}
                        </div>
                        @endif
                        <span class="help-block">{{ trans('cruds.branch.fields.address_helper') }}</span>
                    </div>
                    
                    <div class="form-group">
                        <label for="province_id">{{ trans('cruds.branch.fields.province') }}</label>
                        <select onchange="onSelectProvince(event)" class="form-control select2 {{ $errors->has('province') ? 'is-invalid' : '' }}" name="province_id" id="province_id">
                            @foreach($provinces as $id => $entry)
                            <option value="{{ $id }}" {{ (old('province_id') ? old('province_id') : $branch->province->id ?? '') == $id ? 'selected' : '' }}>{{ $entry }}</option>
                            @endforeach
                        </select>
                        @if($errors->has('province'))
                        <div class="invalid-feedback">
                            {{ $errors->first('province') }}
                        </div>
                        @endif
                        <span class="help-block">{{ trans('cruds.branch.fields.province_helper') }}</span>
                    </div>
                    <div class="form-group">
                        <label for="city_id">{{ trans('cruds.branch.fields.city') }}</label>
                        <select onchange="onSelectCity(event)" class="form-control select2 {{ $errors->has('city') ? 'is-invalid' : '' }}" name="city_id" id="city_id">
                            <option value disabled>Pilih Kota/Kabutapen</option>
                        </select>
                        @if($errors->has('city'))
                        <div class="invalid-feedback">
                            {{ $errors->first('city') }}
                        </div>
                        @endif
                        <span class="help-block">{{ trans('cruds.branch.fields.city_helper') }}</span>
                    </div>
                    <div class="form-group">
                        <label for="district_id">{{ trans('cruds.branch.fields.district') }}</label>
                        <select class="form-control select2 {{ $errors->has('district') ? 'is-invalid' : '' }}" name="district_id" id="district_id">
                            <option value disabled>Pilih Kecamatan</option>
                        </select>
                        @if($errors->has('district'))
                        <div class="invalid-feedback">
                            {{ $errors->first('district') }}
                        </div>
                        @endif
                        <span class="help-block">{{ trans('cruds.branch.fields.district_helper') }}</span>
                    </div>                            

                    <div class="form-group">
                        <label for="postal_code">{{ trans('cruds.branch.fields.postal_code') }}</label>
                        <input class="form-control" type="text" name="postal_code" id="postal_code" value="{{ old('postal_code', '') }}">
                        @if($errors->has('postal_code'))
                            <div class="invalid-feedback">
                                {{ $errors->first('postal_code') }}
                            </div>
                        @endif
                        <span class="help-block">{{ trans('cruds.branch.fields.postal_code_helper') }}</span>
                    </div>                  

                    <div class="form-group">
                        <label for="phone_number">{{ trans('cruds.branch.fields.phone_number') }}</label>
                        <input class="form-control" type="text" name="phone_number" id="phone_number" value="{{ old('phone_number', '') }}">
                        @if($errors->has('phone_number'))
                            <div class="invalid-feedback">
                                {{ $errors->first('phone_number') }}
                            </div>
                        @endif
                        <span class="help-block">{{ trans('cruds.branch.fields.phone_number_helper') }}</span>
                    </div>                  

                    <div class="form-group">
                        <label for="email">{{ trans('cruds.branch.fields.email') }}</label>
                        <input class="form-control" type="text" name="email" id="email" value="{{ old('email', '') }}">
                        @if($errors->has('email'))
                            <div class="invalid-feedback">
                                {{ $errors->first('email') }}
                            </div>
                        @endif
                        <span class="help-block">{{ trans('cruds.branch.fields.email_helper') }}</span>
                    </div>        
                    
                    <div class="form-group">
                        <label for="website">{{ trans('cruds.branch.fields.website') }}</label>
                        <input class="form-control" type="text" name="website" id="website" value="{{ old('website', '') }}">
                        @if($errors->has('website'))
                            <div class="invalid-feedback">
                                {{ $errors->first('website') }}
                            </div>
                        @endif
                        <span class="help-block">{{ trans('cruds.branch.fields.website_helper') }}</span>
                    </div>                       

                    <div id="map"></div>

                    <button class="btn btn-block btn-primary">
                        Submit
                    </button>
                </form>

            </div>
        </div>

    </div>
</div>
@endsection

@section('scripts')
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
   integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
   crossorigin=""></script>

<script>
    var mymap = L.map('map').setView([51.505, -0.09], 13);

    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        maxZoom: 18,
        id: 'mapbox/streets-v11',
        tileSize: 512,
        zoomOffset: -1,
        accessToken: 'pk.eyJ1IjoieWFuc3lhZiIsImEiOiJjMzVkYTY5MDVhMWFhOGY3ODBkZjdiNTAyYzZlZjZmMyJ9.SbqZCRXhTUWf3loLAXMFRg'
    }).addTo(mymap);    

    Dropzone.options.logoDropzone = {
        url: '{{ route('frontend.teams.storeMedia') }}',
        maxFilesize: 4, // MB
        acceptedFiles: '.jpeg,.jpg,.png,.gif',
        maxFiles: 1,
        addRemoveLinks: true,
        headers: {
        'X-CSRF-TOKEN': "{{ csrf_token() }}"
        },
        params: {
        size: 4,
        width: 4096,
        height: 4096
        },
        success: function (file, response) {
        $('form').find('input[name="logo"]').remove()
        $('form').append('<input type="hidden" name="logo" value="' + response.name + '">')
        },
        removedfile: function (file) {
        file.previewElement.remove()
        if (file.status !== 'error') {
            $('form').find('input[name="logo"]').remove()
            this.options.maxFiles = this.options.maxFiles + 1
        }
        },
        init: function () {
    @if(isset($team) && $team->logo)
        var file = {!! json_encode($team->logo) !!}
            this.options.addedfile.call(this, file)
        this.options.thumbnail.call(this, file, file.preview)
        file.previewElement.classList.add('dz-complete')
        $('form').append('<input type="hidden" name="logo" value="' + file.file_name + '">')
        this.options.maxFiles = this.options.maxFiles - 1
    @endif
        },
        error: function (file, response) {
            if ($.type(response) === 'string') {
                var message = response //dropzone sends it's own error messages in string
            } else {
                var message = response.errors.file
            }
            file.previewElement.classList.add('dz-error')
            _ref = file.previewElement.querySelectorAll('[data-dz-errormessage]')
            _results = []
            for (_i = 0, _len = _ref.length; _i < _len; _i++) {
                node = _ref[_i]
                _results.push(node.textContent = message)
            }

            return _results
        }
    }

    base_url = "https://app.muktamar.wahdah.or.id/api/v1";
    token = "1|taSj646aawfM6fVhfffulKGot13Wd1V1CvUsS1aT";

    function onSelectProvince(e) {
        console.log('load city');
        $("#city_id").empty();
        loadCity(e.target.value)
    }

    function onSelectCity(e) {
        $("#district_id").empty();
        loadDistrict(e.target.value)
    }

    function loadProvince() {
        $.ajax({
            type: "GET",
            headers: {
                "Accept": "application/json",
                "Content-Type": "application/json",
                "Authorization": "Bearer " + token
            },
            url: base_url + "/provinces",
            success: function(resp) {
                items = resp.data;
                $('#province_id').append($('<option>', {
                    value: "",
                    text: "Silakan Pilih"
                }));
                $.each(items, function(i, item) {
                    $('#province_id').append($('<option>', {
                        value: item.id,
                        text: item.name
                    }));
                });
            },
            error: function(e) {
                console.log(e)
            }
        });
    }

    function loadCity(province_id) {
        $.ajax({
            type: "GET",
            headers: {
                "Accept": "application/json",
                "Content-Type": "application/json",
                "Authorization": "Bearer " + token
            },
            url: base_url + "/cities?province_id=" + province_id,
            success: function(resp) {
                console.log(resp.data)
                items = resp.data;
                $('#city_id').append($('<option>', {
                    value: "",
                    text: "Silakan Pilih"
                }));
                $.each(items, function(i, item) {
                    $('#city_id').append($('<option>', {
                        value: item.id,
                        text: item.name
                    }));
                });
            },
            error: function(e) {
                console.log(e)
            }
        });
    }

    function loadDistrict(city_id) {
        $.ajax({
            type: "GET",
            headers: {
                "Accept": "application/json",
                "Content-Type": "application/json",
                "Authorization": "Bearer " + token
            },
            url: base_url + "/districts?city_id=" + city_id,
            success: function(resp) {
                items = resp.data;
                $('#district_id').append($('<option>', {
                    value: "",
                    text: "Silakan Pilih"
                }));
                $.each(items, function(i, item) {
                    $('#district_id').append($('<option>', {
                        value: item.id,
                        text: item.name
                    }));
                });
            },
            error: function(e) {
                console.log(e)
            }
        });
    }    
</script>
@endsection