@extends('layouts.app')

@section('title', 'Create Outlet')
@section('breadcrumb', 'Manage Outlet')
@section('sub-breadcrumb')
    <a class="kt-subheader__breadcrumbs-link">
        Create Outlet
    </a>
@endsection

@section('franchisee', 'kt-menu__item--open kt-menu__item--here')
@section('create-franchisee', 'kt-menu__item--active')


@section('custom-style')
    <style type="text/css">
        .modal .select2-selection{
            width: 140px;
            min-height: 38px;
        }
    </style>
@endsection
@section('content')
    <div class="kt-portlet">
        <div class="kt-portlet__body">
            @include('layouts.notification')
           {{-- begin: datatable --}}
            <form action="{{route('franchisee.store')}}" 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">
                        </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: Jilid 500" data-col-index="0">
                        </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"></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>
                        </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>
                        </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['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">Active</option>
                                <option value="Inactive">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['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">Mitra</option>
                                <option value="0">Dikelola Sendiri</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Brands <span style="color:red;">*</span> :</label>
                        <div class="input-group">
                            <select name="id_brand" id="brands" class="form-control">
                                <option value="">--Choose Brand--</option>
                                @foreach ($brand1['result'] as $item)
                                    <option value="{{$item['id']}}">{{$item['name']}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Task :</label>
                        <div>
                            <button type="button" class="btn btn-info" data-toggle="modal" data-target="#exampleModal">
                                <i class="fa fa-tasks"></i> Task
                            </button>
                        </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">
                        </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">
                        </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">
                        </div>
                    </div>
                    {{-- end: night stock --}}

                    <div class="form-group">
                        <label>Mokapos Outlet :</label>
                        <div class="input-group">
                            <select name="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['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" class="form-control moka" style="width:100%!important;">
                                <option value="">-- Choose Accurate Customer --</option>
                                @foreach ($accurateOutlet['result'] as $item)
                                    <option value="{{$item['id']}}">{{$item['name']}} ({{$item['accurate_setting']['name']}})</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="form-group" id="warehouse" style="display:none">
                        <label>Accurate Warehouse <span style="color:red;">*</span>:</label>
                        <div class="input-group">
                            <select name="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['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['name']}} ({{$item['accurate_setting']['name']}})</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <!-- begin: Task Modal -->
            <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">List of Task</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="kt-checkbox">
                                <input type="checkbox" class="outlet-assign-all"> Assign to all Task
                                <span></span>
                            </label>
                            <div class="row">
                                <div class="col-md-4">
                                    <input type="time" class="form-control time-all" placeholder="E.g: Pasang Banner . .">
                                    <span class="form-text text-muted">Waktu completion task nya. Jika null maka jam berapapun</span>
                                </div>
                                <div class="col-md-4">
                                    <input type="number" class="form-control tresh-all">
                                    <span class="form-text text-muted">+- waktu dari time dalam satuan menit</span>
                                </div>
                                <div class="col-md-4">
                                    <select class="form-control user-group-all multi-select" multiple="multiple">
                                        <option value="">-</option>
                                        <option value="all user">All User</option>
                                        @foreach ($userGroups as $key_ug => $value_ug)
                                            <option value="{{$value_ug['id']}}">{{$value_ug['name']}}</option>
                                        @endforeach
                                    </select>
                                    <span class="form-text text-muted">User group yang ditunjuk untuk mengerjakan task</span>
                                </div>
                            </div>
                            <div class="row mt-2">
                                <div class="col-md-4">
                                    <input name="visibility_time" type="time" class="form-control vis-time-all">
                                    <span class="form-text text-muted">Waktu mulai task tampil di aplikasi.</span>
                                </div>
                                <div class="col-md-4">
                                    <input name="visibility_time_end" type="time" class="form-control vis-time-end-all">
                                    <span class="form-text text-muted">Waktu akhir task tampil di aplikasi.</span>
                                </div>
                            </div>
                        </div>
                        @if (isset($task['result']))
                            @foreach ($task['result'] as $key => $value)
                                <div class="form-group">
                                    <label class="kt-checkbox">
                                        <input type="checkbox" class="outlet-assign outlet-belum-assign" data-idoutlet="{{ $value['id'] }}" name="task[]" value="{{ $value['id'] }}"> {{ $value['title'] }}
                                        <span></span>
                                        <br> Task : {{$value['description']}}
                                    </label>
                                    <div class="row kelas{{ $value['id'] }}" style="display: none">
                                        <div class="col-md-4">
                                            <input name="time[]" type="time" class="form-control time{{ $value['id'] }} time-outlet-belum-assign" placeholder="E.g: Pasang Banner . .">
                                            <span class="form-text text-muted">Waktu completion task nya. Jika null maka jam berapapun</span>
                                        </div>
                                        <div class="col-md-4">
                                            <input name="tresh[]" type="number" class="form-control tresh{{ $value['id'] }} tresh-outlet-belum-assign">
                                            <span class="form-text text-muted">+- waktu dari time dalam satuan menit</span>
                                        </div>
                                        <div class="col-md-4">
                                            <select name="user_group[{{ $key }}][]" class="form-control user-group-{{ $value['id'] }} user-group-belum-assign multi-select" multiple="multiple">
                                                <option value="">-</option>
                                                <option value="all user">All User</option>
                                                @foreach ($userGroups as $key_ug => $value_ug)
                                                    <option value="{{$value_ug['id']}}">{{$value_ug['name']}}</option>
                                                @endforeach
                                            </select>
                                            <span class="form-text text-muted">User group yang ditunjuk untuk mengerjakan task</span>
                                        </div>
                                    </div>
                                    <div class="row mt-2 kelas{{ $value['id'] }}" style="display: none">
                                        <div class="col-md-4">
                                            <input name="visibility_time[]" type="time" class="form-control vis-time-{{ $value['id'] }} vis-time-belum-assign">
                                            <span class="form-text text-muted">Waktu mulai task tampil di aplikasi.</span>
                                        </div>
                                        <div class="col-md-4">
                                            <input name="visibility_time_end[]" type="time" class="form-control vis-time-end-{{ $value['id'] }} vis-time-end-belum-assign">
                                            <span class="form-text text-muted">Waktu akhir task tampil di aplikasi.</span>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        @endif
                    </div>
                    <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                </div>
                </div>
            </div>
            <!-- end: Task Modal -->

            <div class="form-group pull-right">
                <button type="reset" class="btn btn-secondary"><i class="fa fa-undo"></i> Reset</button>
                <button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i> Save</button>
            </div>

            </form>
           {{-- begin: datatable --}}

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

    // prevent multiple select if "all user"/ "-" is selected
    $('.multi-select').on('select2:select', function (e) {
        var data = $(this).val();

        if(jQuery.inArray("all user", data) !== -1)
        {
            $(this).val(["all user"]);
            $(this).trigger('change');
        }

        if(jQuery.inArray("", data) !== -1)
        {
            $(this).val([""]);
            $(this).trigger('change');
        }
    });

    $(document).on('click', '.outlet-assign-all', function() {
        $('.outlet-belum-assign').trigger('click');
    });

    $(document).on('keyup change', '.time-all', function() {
        if ($('.outlet-assign-all').is(':checked')) {
            var time = $('.time-all').val();
            $('.time-outlet-belum-assign').val(time);
        }
    });

    $(document).on('keyup change', '.tresh-all', function() {
        if ($('.outlet-assign-all').is(':checked')) {
            var tresh = $('.tresh-all').val();
            $('.tresh-outlet-belum-assign').val(tresh);
        }
    });
    $(document).on('change', '.user-group-all', function() {
        if ($('.outlet-assign-all').is(':checked')) {
            var user_group = $('.user-group-all').val();
            // console.log('user_group', user_group)
            $('.user-group-belum-assign').val(user_group);
            $('.user-group-belum-assign').trigger('change');
        }
    });
    $(document).on('keyup change', '.vis-time-all', function() {
        if ($('.outlet-assign-all').is(':checked')) {
            var vis_time = $('.vis-time-all').val();
            $('.vis-time-belum-assign').val(vis_time);
        }
    });
    $(document).on('keyup change', '.vis-time-end-all', function() {
        if ($('.outlet-assign-all').is(':checked')) {
            var vis_time_end = $('.vis-time-end-all').val();
            $('.vis-time-end-belum-assign').val(vis_time_end);
        }
    });

    $(document).on('click', '.outlet-assign', function() {
        var outlet = $(this).data('idoutlet');
        if ($(this).is(':checked')) {
            $('.kelas'+outlet).show();
            $(".time"+outlet).prop('disabled', false);
            $(".tresh"+outlet).prop('disabled', false);
            $(".vis-time-"+outlet).prop('disabled', false);
            $(".vis-time-end"+outlet).prop('disabled', false);
            $(".outlet"+outlet).prop('disabled', false);
            $(".outlet_brand"+outlet).prop('disabled', false);
        } else {
            $('.kelas'+outlet).hide();
            $(".time"+outlet).prop('disabled', true);
            $(".tresh"+outlet).prop('disabled', true);
            $(".vis-time-"+outlet).prop('disabled', true);
            $(".vis-time-end"+outlet).prop('disabled', true);
            $(".outlet"+outlet).prop('disabled', true);
            $(".outlet_brand"+outlet).prop('disabled', true);
        }
    });
</script>
<script>
    var map;
    var markers = [];
    var infoWindow;
    var geocoder;
    function initAutocomplete() {
        latNow = parseFloat("-7.7972");
        longNow = parseFloat("110.3688");

        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("-7.7972");
                longNow = parseFloat("110.3688");
            });
        }

        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