@extends('layouts.app')

@section('title', 'Manage Outlet')
@section('breadcrumb', 'Manage Outlet')
@section('sub-breadcrumb')
    <a class="kt-subheader__breadcrumbs-link">
        Edit Outlet
    </a>
@endsection
@section('franchisee', 'kt-menu__item--open kt-menu__item--here')
@section('list-franchisee', 'kt-menu__item--active')
@section('content')
    <div class="kt-portlet">
        <div class="kt-portlet__body">
            @include('layouts.notification')
           {{-- begin: datatable --}}
            <form action="{{route('franchisee.update', [$franchisee['id'],$franchisee['id_brand']])}}" method="POST">
                @csrf
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Outlet Name<span style="color:red;">*</span> :</label>
                            <div class="input-group">
                                <div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-store"></i></span></div>
                            <input type="text" id="name" name="name" class="form-control m-input" placeholder="E.g: Janji Jiwa Jilid 500" data-col-index="0" value="{{$franchisee['name']}}">
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Outlet Number<span style="color:red;">*</span> :</label>
                            <div class="input-group">
                                <div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-store-alt"></i></span></div>
                            <input type="text" id="outlet_number" name="outlet_number" class="form-control m-input" placeholder="E.g: Janji Jiwa Jilid 500" data-col-index="0" value="{{$franchisee['outlet_number']}}">
                            </div>
                        </div>
                        <div class="form-group">
                            <div id="map" style="width:900;height:300px;"></div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Outlet Address<span style="color:red;">*</span> :</label>
                            <div class="input-group">
                                <textarea id="pac-input" class="form-control" name="address" type="text" placeholder="E.g: Jl. Mayor Suryotomo .." onkeydown="if (event.keyCode == 13) return false;" required cols="30" rows="5" placeholder="E.g: Jalan Janji Jiwa Blok. H No. 28">{{$franchisee['address']}}
                                </textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="">Latitude <span style="color:red;">*</span> :</label>
                            <div class="input-group">
                                <div class="input-group-prepend"><span class="input-group-text"><i class="flaticon-placeholder-3"></i></span></div>
                                <input type="text" name="latitude" id="latitude" class="form-control kelas-read" placeholder="Latitude . ." required value="{{$franchisee['lang']}}">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="">Longitude <span style="color:red;">*</span> :</label>
                            <div class="input-group">
                                <div class="input-group-prepend"><span class="input-group-text"><i class="flaticon-placeholder-3"></i></span></div>
                                <input type="text" name="longitude" id="longitude" class="form-control kelas-read" placeholder="Longitude . ." required value="{{$franchisee['long']}}">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="">City <span style="color:red;">*</span> :</label>
                            <br>
                            <select name="city" class="js-example-basic-single" style="width:100%!important;">
                                <option value="">-- Choose City --</option>
                                @foreach ($city['result'] as $item)
                                    <option value="{{$item['id']}}" {{($item['id'] == $franchisee['id_city']) ? 'selected' : ''}}>{{$item['city_name']}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Status <span style="color:red;">*</span> :</label>
                            <div class="input-group">
                                <select name="status" class="form-control">
                                    <option value="">-- Choose Status --</option>
                                    <option value="Active" {{($franchisee['status'] == 'Active') ? 'selected' : ''}}>Active</option>
                                    <option value="Inactive" {{($franchisee['status'] == 'Inactive') ? 'selected' : ''}}>Inactive</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Admin Outlet <span style="color:red;">*</span> :</label>
                            <div class="input-group">
                                <select name="admin_franchisee" class="admin_franchisee" class="form-control" style="width:100%!important;">
                                    <option value="">-- Choose Admin Outlet --</option>
                                    @foreach ($adminFranchisee['result'] as $item)
                                        <option value="{{$item['id']}}" {{($item['id'] == $franchisee['id_franchisee']) ? 'selected' : ''}}>{{$item['name']}} ({{$item['email']}})</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Kemitraan Status <span style="color:red;">*</span> :</label>
                            <div class="input-group">
                                <select name="status_franchise" id="status_franchise" class="form-control">
                                    <option value="">-- Choose Status --</option>
                                    <option value="1" {{($franchisee['status_franchise'] == '1') ? 'selected' : ''}}>Mitra</option>
                                    <option value="0" {{($franchisee['status_franchise'] == '0') ? 'selected' : ''}}>Dikelola Sendiri</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <label>Brands <span style="color:red;">*</span> :</label>
                            <div class="input-group">
                                <select name="brands" id="brands" class="form-control">
                                    @foreach ($brand1['result'] as $item)
                                        <option value="{{$item['id']}}"  {{($item['id'] == $franchisee['id_brand']) ? 'selected' : ''}}>{{$item['name']}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6">
                        {{-- begin: night stock --}}
                        <div class="form-group">
                            <label>Night Stock Start Time :</label>
                            <div class="input-group">
                                <div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-clock"></i></span></div>
                                <input type="time" name="night_stock_start_time" class="form-control m-input" value="{{$franchisee['night_stock_start_time']}}">
                            </div>
                        </div>

                        <div class="form-group">
                            <label>Night Stock Additional Hour :</label><br>
                            <small class="text-muted mb-2"><i>Tambahan jam dari waktu mulai stok untuk setting akhir waktu stok</i></small>
                            <div class="input-group">
                                <div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-clock"></i></span></div>
                                <input type="text" name="night_stock_addition_hour" class="form-control m-input number" value="{{$franchisee['night_stock_addition_hour']}}">
                            </div>
                        </div>
                        <div class="form-group">
                            <label>PO Limit :</label><br>
                            <small class="text-muted mb-2"><i>jumlah maksimal order pada outlet, jika kosong maka akan mengikuti global setting</i></small>
                            <div class="input-group">
                                <div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-truck-loading"></i></span></div>
                                <input type="text" name="po_limit" class="form-control" placeholder="E.g: 3"  value="{{$franchisee['po_limit']}}">
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Mokapos Outlet <span style="color:red;">*</span> :</label>
                            <div class="input-group">

                                <select name="moka_outlet" id="moka_outlet" class="form-control moka" style="width:100%!important;">
                                    <option value="">-- Choose Mokapos Outlet --</option>
                                    @foreach ($mokaOutlet['result'] as $item)
                                        <option value="{{$item['id']}}" {{($item['id'] == $franchisee['id_moka_outlet']) ? 'selected' : ''}}>{{$item['name']}}</option>

                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Accurate Customer <span style="color:red;">*</span> :</label>
                            <div class="input-group">

                                <select name="accurate_customer" id="accurate_customer" class="form-control moka" style="width:100%!important;">
                                    <option value="">-- Choose Accurate Customer --</option>
                                    @foreach ($accurateOutlet['result'] as $item)
                                        <option value="{{$item['id']}}"  {{($item['id'] == $franchisee['id_accurate_customer']) ? 'selected' : ''}}>{{$item['name']}} ({{$item['accurate_setting']['name']}})</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="form-group warehouse" style="display:{{($franchisee['status_franchise'] == '0') ? 'block' : 'none'}};">
                            <label>Accurate Warehouse <span style="color:red;">*</span>:</label>
                            <div class="input-group">
                                <select name="warehouse" id="warehouse" class="form-control moka" style="width:100%!important;">
                                    <option value="">-- Choose Accurate Warehouse --</option>
                                    @foreach ($warehouse['result'] as $item)
                                        <option value="{{$item['id']}}"  {{($item['id'] == $franchisee['id_accurate_warehouse']) ? 'selected' : ''}}>{{$item['name']}} ({{$item['accurate_setting']['name']}})</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <label>Accurate Branch <span style="color:red;">*</span>:</label>
                            <div class="input-group">
                                <select name="branch" class="form-control moka" style="width:100%!important;">
                                    <option value="">-- Choose Accurate Branch --</option>
                                    @foreach ($branch['result'] as $item)
                                        <option value="{{$item['id']}}"  {{($item['id'] == $franchisee['id_accurate_branch']) ? 'selected' : ''}}>{{$item['name']}} ({{$item['accurate_setting']['name']}})</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>


                            </div>


                        {{-- end: night stock --}}



                    </div>
                    </div>
                </div>

                <div class="form-group pull-right">
                    <button type="reset" class="btn btn-warning"><i class="fa fa-undo"></i> Reset</button>
                    <button type="submit" class="btn btn-primary"><i class="fa fa-edit"></i>Update</button>
                </div>
            </form>
           {{-- begin: datatable --}}

        </div>
    </div>
@endsection
@section('custom-script')
<script>
    $(document).ready(function() {
        $('#status_franchise').change(function(){
            // $('#warehouse').hide();
            if ($(this).val() == "0") {
                console.log('1')
                $('.warehouse').show()
            }
            if ($(this).val() == "1") {
                console.log('0');
                $('.warehouse').hide()
            }
        });
    });
</script>
<script>
    // In your Javascript (external .js resource or <script> tag)
    $(document).ready(function() {
        $('.js-example-basic-single').select2();
        $('.moka').select2();
        $('.admin_franchisee').select2();
    });



$('#brands').change(function(){
    $('#loading').show().delay(2000).fadeOut();
    $('.moka').val('').trigger('change');
})


// $('#brands').change(function() {
//    var selected_option = $(this).val();
//         if (selected_option) {
//             $('#loading').show().delay(2000).fadeOut();
//         } else {
//             $('#loading').hide();
//         }


//     // console.log(selected_option);

//     var url = '{{ route("franchisee.getmoka", ":val") }}';
//     url = url.replace(':val', selected_option),


//    $.ajax({
//       url: url,
//       type: 'get',
//       cache: false,
//       success: function(return_data) {



//          $("#moka_outlet").html('');
//          $('#accurate_customer').html('');
//          $('#warehouse').html('');

//          var optionWarehouse = '<option value="">--Choose Accurate Warehouse--</option>'
//          $("#warehouse").append(optionWarehouse);



//         //  var optionMoka = '<option value="">--Choose Moka Outlet --</option>'
//         //  $("#warehouse").append(optionMoka);

//          var optionMoka = '<option value="">--Choose Moka Outlet --</option>'
//          $("#moka_outlet").append(optionMoka);

//          var optionCustomer = '<option value="">--Select Accurate Customer--</option>'
//          $("#accurate_customer").append(optionCustomer);

//         jQuery.each(return_data.mokaOutlet.result, function(i, val) {
//             var option = '<option value="'+val.id+'">'+val.name+'</option>'
//             $("#moka_outlet").append(option);

//             // $("#").append(document.createTextNode(val.count));
//         });

//         jQuery.each(return_data.accurateOutlet.result, function(i, value){
//             var option = '<option value="'+value.id+'">'+value.name+'</option>'
//             $("#accurate_customer").append(option);
//         });

//         jQuery.each(return_data.warehouse.result, function(i, key){

//             var option = '<option value="'+key.id+'">'+key.name+'</option>'
//             $("#warehouse").append(option)
//         });




//       }
//    });
// });


    // validate number for hour
    $('.number').on('keypress input change', function(e) {
        if (e.which < 48 || e.which > 57)
        {
            e.preventDefault();
        }
        var value = $(this).val();
        if (value && value.length > 2) {
            value = value.substring(0, 2);
            $(this).val(value);
        }
        else if (value > 24) {
            value = 24;
            $(this).val(value);
        }
    });

</script>
<script>
    var map;
    var markers = [];
    var infoWindow;
    var geocoder;
    function initAutocomplete() {
        latNow = parseFloat("{{$franchisee['lang']}}");
        longNow = parseFloat("{{$franchisee['long']}}");

        var infowindow = new google.maps.InfoWindow({
            content: '<p>Marker Location:</p>'
        });

        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                latNow = parseFloat(position.coords.latitude);
                longNow = parseFloat(position.coords.longitude);

            }, function() {
                latNow = parseFloat("{{$franchisee['lang']}}");
                longNow = parseFloat("{{$franchisee['long']}}");
            });
        }

        var haightAshbury = new google.maps.LatLng(latNow,longNow);
        var marker        = new google.maps.Marker({
            position:new google.maps.LatLng(latNow,longNow),
            map: map,
            anchorPoint: new google.maps.Point(0, -29)
        });

        var mapOptions = {
            zoom: 12,
            center: haightAshbury,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map(document.getElementById('map'), mapOptions);
        geocoder = new google.maps.Geocoder;
        var input = /** @type  {HTMLInputElement} */(
        document.getElementById('pac-input'));

        var types = document.getElementById('type-selector');
        // map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(types);

        var autocomplete = new google.maps.places.Autocomplete(input);

        autocomplete.bindTo('bounds', map);

        var infowindow = new google.maps.InfoWindow();

        google.maps.event.addListener(autocomplete, 'place_changed', function() {
            deleteMarkers();
            infowindow.close();
            marker.setVisible(true);
            var place = autocomplete.getPlace();
            if (!place.geometry) {
                return;
            }

            // If the place has a geometry, then present it on a map.
            if (place.geometry.viewport) {
                map.fitBounds(place.geometry.viewport);
            } else {
                map.setCenter(place.geometry.location);
                map.setZoom(17);  // Why 17? Because it looks good.
            }
            addMarker(place.geometry.location);
        });

        google.maps.event.addListener(map, 'click', function(event) {

            deleteMarkers();
            addMarker(event.latLng);
            // marker.openInfoWindowHtml(latLng);
            // infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
            infowindow.open(map, marker);
        });
        // Adds a marker at the center of the map.
        addMarker(haightAshbury);
    }

    function placeMarker(location) {
        marker = new google.maps.Marker({
            position: location,
            map: map,
        });

        markers.push(marker);

        infowindow = new google.maps.InfoWindow({
            content: 'Latitude: ' + location.lat() + '<br>Longitude: ' + location.lng()
        });
        infowindow.open(map,marker);
    }

    // Add a marker to the map and push to the array.
    function geocodePosition(location) {
        geocoder.geocode({
            latLng: location
        }, function(responses) {
        // console.log(responses[0].formatted_address)

            if (responses && responses.length > 0) {
                // $('#pac-input').val(responses[0].formatted_address);
            } else {
                $('#pac-input').val("");
            }
        });
    }

    function addMarker(location) {
        var marker = new google.maps.Marker({
            position: location,
            map: map
        });
        // console.log(marker.getPosition())

        $('#latitude').val(location.lat());
        $('#longitude').val(location.lng());
        geocodePosition(marker.getPosition());
        markers.push(marker);
    }

    // Sets the map on all markers in the array.

    function setAllMap(map) {
        for (var i = 0; i < markers.length; i++) {
            markers[i].setMap(map);
        }
    }

    // Removes the markers from the map, but keeps them in the array.
    function clearMarkers() {
        setAllMap(null);
    }

    // Shows any markers currently in the array.
    function showMarkers() {
        setAllMap(map);
    }

    // Deletes all markers in the array by removing references to them.
    function deleteMarkers() {
        clearMarkers();
        markers = [];
    }

   </script>
<script src="https://maps.googleapis.com/maps/api/js?key={{env('GOOGLE_MAP_API_KEY')}}&libraries=places&callback=initAutocomplete" async defer></script>

@endsection