@extends('layouts.admin')
@section('content')

<form method="POST" action="{{ route("admin.store-audits.update", $storeAudit->id) }}" id="storeAuditForm" enctype="multipart/form-data">
    @method('PUT')
    @csrf
    <div class="card">
        <div class="card-header">
            {{ trans('global.create') }} {{ trans('cruds.storeAudit.title_singular') }}
        </div>

        <div class="card-body">
            <div class="row">
                <div class="col-12 col-md-6">
                   <div id="map" style="width: 100%; height: 500px;"></div>
                   <input type="hidden" name="lat" id="lat" value="{{ old('lat', $storeAudit->lat) }}" />
                   <input type="hidden" name="lng" id="lng" value="{{ old('lng', $storeAudit->lng) }}" />
                </div>
                <div class="col-12 col-md-6">
                    <div class="form-group">
                        <label for="state_id">{{ trans('cruds.storeAudit.fields.state') }}</label>
                        <select class="form-control select2 {{ $errors->has('state_id') ? 'is-invalid' : '' }}" name="state_id" id="state_id" required>
                            <option value=""></option>
                            @foreach($states as $id => $entry)
                                <option value="{{ $id }}" {{ (old('state_id') ? old('state_id') : $storeAudit->state_id ?? '') == $id ? 'selected' : '' }}>{{ $entry }}</option>
                            @endforeach
                        </select>
                        @if($errors->has('state_id'))
                            <div class="invalid-feedback">
                                {{ $errors->first('state_id') }}
                            </div>
                        @endif
                        <span class="help-block">{{ trans('cruds.storeAudit.fields.state_helper') }}</span>
                    </div>
                    <div class="form-group">
                        <label for="city_id">{{ trans('cruds.storeAudit.fields.city') }}</label>
                        <select class="form-control select2 {{ $errors->has('city_id') ? 'is-invalid' : '' }}" name="city_id" id="city_id">
                            <option value=""></option>
                            @foreach($cities as $id => $entry)
                                <option value="{{ $id }}" {{ (old('city_id') ? old('city_id') : $storeAudit->city_id ?? '') == $id ? 'selected' : '' }}>{{ $entry }}</option>
                            @endforeach
                        </select>
                        @if($errors->has('city_id'))
                            <div class="invalid-feedback">
                                {{ $errors->first('city_id') }}
                            </div>
                        @endif
                        <span class="help-block">{{ trans('cruds.storeAudit.fields.city_helper') }}</span>
                    </div>
                    <div class="form-group">
                        <label class="required" for="available_store_id">{{ trans('cruds.storeAudit.fields.available_store') }}</label>
                        <select class="form-control select2 {{ $errors->has('available_store_id') ? 'is-invalid' : '' }}" name="available_store_id" id="available_store_id" required>
                            @foreach($available_stores as $id => $entry)
                                <option value="{{ $id }}" {{ (old('available_store_id') ? old('available_store_id') : $storeAudit->available_store_id ?? '') == $id ? 'selected' : '' }}>{{ $entry }}</option>
                            @endforeach
                        </select>
                        @if($errors->has('available_store_id'))
                            <div class="invalid-feedback">
                                {{ $errors->first('available_store_id') }}
                            </div>
                        @endif
                        <span class="help-block">{{ trans('cruds.storeAudit.fields.available_store_helper') }}</span>
                    </div>
                    <div class="form-group">
                        <div class="form-group">
                            <label class="required" for="date">{{ trans('cruds.storeAudit.fields.date') }}</label>
                            <input class="form-control date {{ $errors->has('date') ? 'is-invalid' : '' }}" type="text" name="date" id="date" value="{{ old('date', $storeAudit->date) }}" required>
                            @if($errors->has('date'))
                                <div class="invalid-feedback">
                                    {{ $errors->first('date') }}
                                </div>
                            @endif
                            <span class="help-block">{{ trans('cruds.storeAudit.fields.date_helper') }}</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="required" for="time">{{ trans('cruds.storeAudit.fields.time') }}</label>
                        <input class="form-control timepicker {{ $errors->has('time') ? 'is-invalid' : '' }}" type="text" name="time" id="time" value="{{ old('time', $storeAudit->time) }}" required>
                        @if($errors->has('time'))
                            <div class="invalid-feedback">
                                {{ $errors->first('time') }}
                            </div>
                        @endif
                        <span class="help-block">{{ trans('cruds.storeAudit.fields.time_helper') }}</span>
                    </div>
                </div>
            </div>
            <div class="form-group row">
                {{-- <div class="col-12 col-md-4">
                    <label class="required" for="state_id">{{ trans('cruds.storeAudit.fields.state') }}</label>
                    <select class="form-control select2 {{ $errors->has('state_id') ? 'is-invalid' : '' }}" name="state_id" id="state_id" required>
                        @foreach($states as $id => $entry)
                            <option value="{{ $id }}" {{ (old('state_id') ? old('state_id') : $storeAudit->state_id ?? '') == $id ? 'selected' : '' }}>{{ $entry }}</option>
                        @endforeach
                    </select>
                    @if($errors->has('state_id'))
                        <div class="invalid-feedback">
                            {{ $errors->first('state_id') }}
                        </div>
                    @endif
                    <span class="help-block">{{ trans('cruds.storeAudit.fields.state_helper') }}</span>
                </div>
                <div class="col-12 col-md-4">
                    <label for="city_id">{{ trans('cruds.storeAudit.fields.city') }}</label>
                    <select class="form-control select2 {{ $errors->has('city_id') ? 'is-invalid' : '' }}" name="city_id" id="city_id">
                        @foreach($cities as $id => $entry)
                            <option value="{{ $id }}" {{ (old('city_id') ? old('city_id') : $storeAudit->city_id ?? '') == $id ? 'selected' : '' }}>{{ $entry }}</option>
                        @endforeach
                    </select>
                    @if($errors->has('city_id'))
                        <div class="invalid-feedback">
                            {{ $errors->first('city_id') }}
                        </div>
                    @endif
                    <span class="help-block">{{ trans('cruds.storeAudit.fields.city_helper') }}</span>
                </div> --}}
                <div class="col-12 col-md-4">
                    
                </div>
            </div>
            
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            Audit Store Product List
        </div>
        <div class="card-body">
            <div class="form-group">
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            {{-- <th>Code</th> --}}
                            <th>Name</th>
                            <th>Qty</th>
                            <th>Remark</th>
                         </thead>    
                        <tbody>
                            @foreach ($storeAudit->storeAuditData as $key => $storeAuditData)
                                <tr>
                                    {{-- <td>{{ $storeAuditData->product->product_code }}</td> --}}
                                    <td>{{ $storeAuditData->product->product_name }}</td>
                                    <td>
                                        <input class="form-control {{ $errors->has('storeAudits.'.$storeAuditData->product->id.'.audit_qty') ? 'is-invalid' : '' }}" type="number" step="1" name="storeAudits[{{ $storeAuditData->id }}][audit_qty]" id="storeAudits.{{ $key }}.audit_qty" value="{{ old('storeAudits.'.$storeAuditData->product->id.'.audit_qty', $storeAuditData->quantity) }}">
                                        @error('storeAudits.'.$key.'.audit_qty')
                                            <div class="invalid-feedback">
                                                {{ $message }}
                                            </div>
                                        @enderror
                                    </td>
                                    <td>
                                        <input class="form-control" type="text" name="storeAudits[{{ $storeAuditData->id }}][remark]" id="storeAudits.{{ $key }}.remark" value="{{ old('storeAuditData.'.$storeAuditData->product->id.'.remark', $storeAuditData->remark) }}">
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            Upload Images
        </div>
        <div class="card-body">
            <div class="form-group">
                <label for="upload_images">{{ trans('cruds.storeAudit.fields.upload_images') }}</label>
                <div class="needsclick dropzone {{ $errors->has('upload_images') ? 'is-invalid' : '' }}" id="upload-images-dropzone">
                </div>
                @if($errors->has('upload_images'))
                    <div class="invalid-feedback">
                        {{ $errors->first('upload_images') }}
                    </div>
                @endif
                <span class="help-block">{{ trans('cruds.storeAudit.fields.upload_images_helper') }}</span>
                <div id="remove-dropzone-images"></div>
            </div>
            <div class="form-group">
                <button class="btn btn-danger" type="submit">
                    {{ trans('global.save') }}
                </button>
            </div>
        </div>
    </div>
</form>



@endsection

@section('scripts')
<script>
    let pos, map, marker, infoWindow;
    var stateCircle, cityCircle;

    function initMap() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(
                (position) => {
                let initLat = parseFloat({!! $storeAudit->lat !!});
                let initLng = parseFloat({!! $storeAudit->lng !!});

                if(initLat && initLng)
                {
                    pos = {
                        lat: initLat,
                        lng: initLng,
                    };

                }
                else
                {
                    pos = {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude,
                    };
                }
                
                map = new google.maps.Map(document.getElementById("map"), {
                    center: pos,
                    zoom: 16,
                });

                marker = new google.maps.Marker({
                    position: pos,
                    animation: google.maps.Animation.DROP,
                    map,
                });

                const defaultBounds = {
                    north: pos.lat + 0.1,
                    south: pos.lat - 0.1,
                    east: pos.lng + 0.1,
                    west: pos.lng - 0.1,
                };

                const options = {
                    componentRestrictions: { country: "my" },
                    fields: ["address_components", "formatted_address", "geometry", "icon", "name"],
                };
            },
            () => {
                handleLocationError(true, infoWindow, map.getCenter());
            }
            );
        } else {
            // Browser doesn't support Geolocation
            handleLocationError(false, infoWindow, map.getCenter());
        }
    }

    function callback(results, status) {
      if (status == google.maps.places.PlacesServiceStatus.OK) {
        var marker = new google.maps.Marker({
          map: map,
          place: {
            placeId: results[0].place_id,
            location: results[0].geometry.location
          }
        });
      }
    }

    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);
    }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_MAPS_API_KEY') }}&libraries=places&callback=initMap"></script>
<script>
var acceptedFileLength = 0;

Dropzone.options.uploadImagesDropzone = {
    url: '{{ route('admin.store-audit-pictures.uploadImages') }}',
    maxFilesize: 2, // MB
    acceptedFiles: '.jpeg,.jpg,.png,.gif',
    addRemoveLinks: true,
    maxFiles: 100,
    parallelUploads: 100,
    uploadMultiple: true,
    autoProcessQueue: false,
    headers: {
      'X-CSRF-TOKEN': "{{ csrf_token() }}"
    },
    init: function () {
        myDropzone = this;

        @if(isset($storeAudit) && $storeAudit->storeAuditPictures)
            $.ajax({
                url: '{{ route('admin.store-audit-pictures.getDropZoneImage', $storeAudit) }}',
                type: 'GET',
                data: {request: 'fetch'},
                dataType: 'json',
                success: function(response){
                    $.each(response, function(key,value) {
                        var mockFile = { name: value.name, size: value.size, id: value.id};

                        myDropzone.emit("addedfile", mockFile);
                        myDropzone.emit("thumbnail", mockFile, value.path)
                        {
                            $('[data-dz-thumbnail]').css('height', '120');
                            $('[data-dz-thumbnail]').css('width', '120');
                            $('[data-dz-thumbnail]').css('object-fit', 'cover');
                        };
                        myDropzone.emit("complete", mockFile);
                        myDropzone.emit("success", mockFile);
                        $(mockFile.previewElement).attr('data-id', value.id); //add data-id to preview div
                        myDropzone.options.maxFiles = myDropzone.options.maxFiles + 1;
                        myDropzone.files.push(mockFile);
                        acceptedFileLength++;
                    });
                }
            });
        @endif

        this.on("addedfile", function (file) {
        });

        this.on("addedfiles", function (file) {
        });

        document.querySelector("button[type=submit]").addEventListener("click", function(e) {
            // Make sure that the form isn't actually being sent.
            e.preventDefault();
            e.stopPropagation();
            if(myDropzone.getQueuedFiles().length === 0)
            {
                $('#storeAuditForm').submit();
            }
            else
            {
                myDropzone.processQueue();
            }
        });

        this.on("successmultiple", function (file, response) {
            $(response).each(function(key, item){
                $('form').append('<input type="hidden" name="upload_picture[' + acceptedFileLength + ']" value="' + item.name + '">')
                acceptedFileLength++;
            });

            $('#storeAuditForm').submit();
        });

        this.on("removedfile", function(file){
            let id = $(file.previewElement).data('id');
            $("#remove-dropzone-images").append('<input type="hidden" name="remove_picture[]" value="' + id + '">');
            file.previewElement.remove();
            if (file.status !== 'error') {
            }
            acceptedFileLength--;
            this.options.maxFiles = this.options.maxFiles - 1
        });
      
        this.on("errormultiple", function(file, message){
            console.log(message);
        })
    },        
}
    $(function(){
        // Select Dependent Dropdowns
        $("#state_id").change(function(){
            $.ajax({
                url: "{{ route('admin.store-audits.getStateGoogleLocation') }}?geo_state_id=" + $(this).val(),
                method: 'GET',
                success: function(data) {
                    $('#city_id').html(data.html);

                    let lat = parseFloat(data.state.lat);
                    let lng = parseFloat(data.state.long);

                    let newPos = { lat: lat, lng: lng };

                    map.panTo(new google.maps.LatLng(
                        lat,
                        lng
                    ));

                    marker.setPosition(newPos);

                    if(stateCircle && stateCircle.setMap)
                        stateCircle.setMap(null);

                    stateCircle = new google.maps.Circle({
                      strokeColor: "#FF0000",
                      strokeOpacity: 0.8,
                      strokeWeight: 2,
                      fillColor: "#FF0000",
                      fillOpacity: 0.35,
                      map,
                      center: newPos,
                      radius: Math.sqrt(data.state.population) * 100,
                    });
                }
            });
        });

        $("#city_id").change(function(){
            $.ajax({
                url: "{{ route('admin.store-audits.getCityGoogleLocation') }}?geo_city_id=" + $(this).val(),
                method: 'GET',
                success: function(data) {
                    let lat = parseFloat(data.city.lat);
                    let lng = parseFloat(data.city.long);

                    let newPos = { lat: lat, lng: lng };

                    map.panTo(new google.maps.LatLng(
                        lat,
                        lng
                    ));

                    marker.setPosition(newPos);

                    if(cityCircle && cityCircle.setMap)
                        cityCircle.setMap(null);

                    $('#available_store_id').html(data.html);
                }
            });
        });

        $("#available_store_id").change(function(e){
            if(!$(this).val())
            {
                $("#lat").val('');
                $("#lng").val('');
            }
            else
            {
                $.ajax({
                    url: "{{ route('admin.store-audits.getAvailableStoreGoogleLocation') }}?available_store_id=" + $(this).val(),
                    method: 'GET',
                    success: function(data) {
                        if (map) {
                            map.panTo(new google.maps.LatLng(
                                data.latitude,
                                data.longitude
                            ));
                        }

                        $("#lat").val(data.latitude);
                        $("#lng").val(data.longitude);

                        let newPos = { lat: data.latitude, lng: data.longitude };
                        marker.setPosition(newPos);

                        var request = {
                            location: map.getCenter(),
                            radius: '500',
                            query: 'Sans Wellness Taman Sutera'
                        };

                        var service = new google.maps.places.PlacesService(map);
                        service.textSearch(request, callback);
                    }
                });
            }
        });
    });
</script>

@endsection