@extends('layouts.adminLayouts')

@section('head')
    <!-- Select2 -->
    <link rel="stylesheet" href="{{url('/assets/admin/bower_components/select2/dist/css/select2.min.css')}}">
    <meta name="_token" content="{{csrf_token()}}">

    <link href="{{url('/assets/cedarmap/cedarmaps.css')}}" rel='stylesheet'/>
@stop

@section('content-header')
    <section class="content-header">
        <h1>
            ویرایش کاربر
        </h1>

        {{ Breadcrumbs::render('users.edit',['title'=> $user->mobile]) }}


    </section>
@stop

@section('content')

    <div class="row">
        <div class="col-lg-12">
            <div class="box">
                <div class="row">
                    <div class="col-lg-3 col-md-4 col-sm-3 col-xs-3">
                        <div class="box aside-create-user-page mr-1">
                            <div class="box-header">
                                <h4 class="box-header-title">
                                    اطلاعات کاربر
                                </h4>
                            </div>
                            <div class="box-body pl-0">
                                <ul class="nav nav-tabs" id="myTabs" role="tablist">
                                    <li role="presentation" class="active"><a href="#information" id="information-tab"
                                                                              role="tab" data-toggle="tab"
                                                                              aria-controls="information"
                                                                              aria-expanded="true">حساب</a></li>
                                    <li role="presentation"><a href="#permissions" role="tab" id="permissions-tab"
                                                               data-toggle="tab" aria-controls="permissions">نقش ها</a>
                                    </li>
                                    <li role="presentation"><a href="#addresses" role="tab" id="addresses-tab"
                                                               data-toggle="tab" aria-controls="addresses">آدرس ها</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-9 col-md-8 col-sm-9 col-xs-9">
                        <div class="tab-content content-user-page" id="myTabContent">
                            <div class="tab-pane fade in active" role="tabpanel" id="information"
                                 aria-labelledby="information-tab">
                                <div class="col-md-12">
                                    <form action="" onsubmit="return false" id="userForm">
                                        <div class="form-group">
                                            <label>نام</label>
                                            <input type="text" name="fname" value="{{$user->fname}}"
                                                   class="form-control" autocomplete="off">
                                        </div>
                                        <div class="form-group">
                                            <label>نام خانوادگی</label>
                                            <input type="text" name="lname" value="{{$user->lname}}"
                                                   class="form-control" autocomplete="off">
                                        </div>
                                        <div class="form-group">
                                            <label>ایمیل</label>
                                            <input type="email" name="email" value="{{$user->email}}"
                                                   class="form-control dir-ltr" autocomplete="off">
                                        </div>
                                        <div class="form-group">
                                            <label>موبایل</label>
                                            <input type="text" name="mobile" value="{{$user->mobile}}"
                                                   class="form-control dir-ltr" autocomplete="off">
                                        </div>
                                        <div class="form-group">
                                            <label>کاربری</label>
                                            <select name="role" class="form-control select2 float-right">
                                                @foreach ($accounts as $key=>$account)
                                                    <option value="{{$key}}"
                                                            @if($user->role == $key) selected @endif>{{$account}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label>وضعیت حساب</label>
                                            <select name="status" class="form-control select2 float-right">
                                                <option value="1" @if($user->status == 1) selected @endif>فعال</option>
                                                <option value="0" @if($user->status == 0) selected @endif>بلاک شده
                                                </option>
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label>کلمه عبور</label>
                                            <input type="password" name="password" class="form-control dir-ltr"
                                                   autocomplete="off">
                                        </div>
                                        <div class="form-group">
                                            <label>تایید کلمه عبور</label>
                                            <input type="password" name="password_confirmation"
                                                   class="form-control dir-ltr" autocomplete="off">
                                        </div>
                                        <div class="form-group">
                                            <button onclick="user('{{$user->id}}');" class="btn btn-primary">ذخیره
                                                کردن
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            <div class="tab-pane fade" role="tabpanel" id="permissions"
                                 aria-labelledby="permissions-tab">
                                <div class="title-section-permissions">
                                    <h4 class="mb-0 font-weight-bold">نقش ها</h4>
                                    <hr>
                                </div>
                                <div class="row">
                                    <div class="col-md-12 text-center">
                                        <div class="btn-group permission-parent-actions">
                                            <button type="button" class="btn btn-info allow-all">دسترسی به همه</button>
                                            <button type="button" class="btn btn-info deny-all">عدم دسترسی به همه
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="col-md-12">
                                            <div class="row">
                                                <div class="permission-parent-head clearfix">
                                                    <h4 class="font-weight-bold">دسترسی ها</h4>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="clearfix"></div>

                                        <div class="permission-group">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <form action="" onsubmit="return false" id="rolesChoiceForm">
                                                        <div class="col-md-12">
                                                            @foreach ($roles as $role)
                                                                <div class="permission-row">
                                                                    <div class="row">
                                                                        <div class="col-sm-4">
                                                                <span class="permission-label">{{$role->label}}
                                                                </span></div>

                                                                        <div class="col-md-7 col-sm-8">
                                                                            <div class="row">
                                                                                <div class="radio-btn clearfix">
                                                                                    <div class="radio">
                                                                                        <input type="radio" value="1"
                                                                                               id="admin.{{$role->name}}-allow"
                                                                                               name="roles[{{$role->id}}]"
                                                                                               @if($user->roles->contains($role->id)) checked
                                                                                               @endif class="permission-allow">

                                                                                        <label
                                                                                            for="admin.{{$role->name}}-allow">دسترسی
                                                                                            دادن</label>
                                                                                    </div>
                                                                                    <div class="radio">
                                                                                        <input type="radio" value="-1"
                                                                                               id="admin.{{$role->name}}-deny"
                                                                                               name="roles[{{$role->id}}]"
                                                                                               @if(!$user->roles->contains($role->id)) checked
                                                                                               @endif class="permission-deny">

                                                                                        <label
                                                                                            for="admin.{{$role->name}}-deny">رد
                                                                                            دسترسی</label>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            @endforeach
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <hr>
                                <div class="form-group">
                                    <button onclick="user('{{$user->id}}');" class="btn btn-primary">ذخیره کردن</button>
                                </div>
                            </div>

                            <div class="tab-pane fade" role="tabpanel" id="addresses" aria-labelledby="addresses-tab">
                                <div class="title-section-permissions">
                                    <h4 class="mb-0 font-weight-bold">آدرس ها</h4>
                                    <hr>
                                </div>

                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="box">
                                            <!-- /.box-header -->
                                            <div class="box-body no-padding">
                                                <table class="table table-striped">
                                                    <tr>
                                                        <th>#</th>
                                                        <th>نام گیرنده</th>
                                                        <th>شماره تماس</th>
                                                        <th>آدرس</th>
                                                        <th>نقشه</th>
                                                    </tr>
                                                    @foreach($addresses as $key=>$address)
                                                        <tr>
                                                            <td>{{$key+1}}</td>
                                                            <td>{{$address->transferee}}</td>
                                                            <td>{{$address->mobile}}</td>
                                                            <td>
                                                                استان {{$address->city->state['name']}}،
                                                                شهر {{$address->city['name']}}
                                                                ، {{$address->address}}
                                                            </td>
                                                            <td>
                                                                @if($address->lat_long == null)
                                                                    تعیین نشده
                                                                @else
                                                                    <button class="btn btn-danger"
                                                                            onclick="edit_location('{{$address->id}}')">
                                                                        <i class="fa fa-map"></i></button>
                                                                @endif
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                </table>
                                            </div>
                                            <!-- /.box-body -->
                                        </div>
                                        <!-- /.box -->
                                    </div>
                                </div>

                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.col -->
    </div>

    <!-- Start Modal Edit location -->
    <div id="modal-edit">
        @include('admin.user.map',['address' => null])
    </div>
    <!-- End Modal location -->
@stop

@section('footer')
    <!-- Select2 -->
    <script src="{{url('/assets/admin/bower_components/select2/dist/js/select2.full.min.js')}}"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $('.select2').select2();
            $(".permission-parent-actions > .allow-all, .permission-parent-actions > .deny-all, .permission-parent-actions > .inherit-all").on("click", function (n) {
                var t = n.currentTarget.className.split(/\s+/)[2].split(/-/)[0];
                $(".permission-" + t).prop("checked", !0)
            }), $(".permission-group-actions > .allow-all, .permission-group-actions > .deny-all, .permission-group-actions > .inherit-all").on("click", function (n) {
                var t = n.currentTarget.className.split(/\s+/)[2].split(/-/)[0];
                $(n.currentTarget).closest(".permission-group").find(".permission-" + t).each(function (n, t) {
                    $(t).prop("checked", !0)
                })
            })
        });
    </script>

    <script type="text/javascript">
        user = function (id) {
            $("#loading").show();
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                }
            });
            var data = $("#rolesChoiceForm, #userForm").serialize();
            $.ajax({
                url: '{{ url('/admin/users') }}/' + id,
                type: 'PUT',
                data: data,
                success: function (response) {
                    $("#loading").hide();
                    toastr.success(response.message);
                    setTimeout(function () {
                        window.location.replace('{{url('/admin/users')}}');
                    }, 2000);
                },
                error: function (xhr) {
                    $("#loading").hide();
                    if (xhr.status === 422) {
                        jQuery.each(xhr.responseJSON.errors, function (key, value) {
                            toastr.error(value);
                        });
                    }
                    if (xhr.status !== 422) {
                        toastr.warning('خطایی در سامانه رخ داد!');
                    }
                }
            });
        }
    </script>

    <script src="{{url('/assets/cedarmap/cedarmaps.js')}}"></script>

    <script>
        edit_location = function (id) {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                }
            });
            $.ajax({
                url: '{{ url('/admin/userMap') }}',
                method: "POST",
                data: {address_id: id},
                success: function (data) {
                    $('#modal-edit').html(data);
                    $('#modal-edit-location').modal('show');
                    initiate2();
                    $('.selectpicker').select2();
                }
            });
        }
    </script>
    <script type="text/javascript">
        // map 1

        var defaultMarkerPosition = [35.703219, 51.373055];

        L.cedarmaps.accessToken = "{{config('app.cedarmap')}}";

        var LeafIcon = L.Icon.extend({
            options: {
                iconSize: [37, 55],
                iconAnchor: [18, 55],
                popupAnchor: [0, -24]
            }
        });

        var icon = new LeafIcon({iconUrl: '{{url('/assets/map/img/icon3.png')}}'});

        var marker = new L.marker(defaultMarkerPosition, {
            icon: icon
        });

        var tileJSONUrl = "https://api.cedarmaps.com/v1/tiles/cedarmaps.streets.json?access_token=" + L.cedarmaps.accessToken;
        console.log({tileJSONUrl});
        // alert('initiate !')
        var mapPositionContainer = document.getElementById("billing_map_lat_long"),
            map;


        function initiate() {
            setTimeout(function () {
                mapPositionContainer = document.getElementById("billing_map_lat_long");
                try {
                    defaultMarkerPosition1 = JSON.parse(mapPositionContainer.value);
                } catch (e) {
                    defaultMarkerPosition1 = defaultMarkerPosition;
                }


                try {
                    map = L.cedarmaps.map("map", tileJSONUrl, {
                        scrollWheelZoom: true
                    }).setView(defaultMarkerPosition1, 12);

                } catch (e) {

                }

                try {
                    map.removeLayer(marker);
                    marker = new L.marker(defaultMarkerPosition1, {
                        icon: icon
                    });
                    marker.addTo(map);
                } catch (e) {
                }


                map.on("locationerror ", locationerror);

                // var zoomControl = new L.Control.Zoom({position: "topleft"});
                // zoomControl.addTo(map);

                map.on("click", function (e) {
                    if (map.dragging._enabled) {
                        mapPositionContainer.value = e.latlng.lat + "," + e.latlng.lng;
                        map.flyTo(e.latlng);
                    }
                });

                map.on('moveend', function () {
                    if (map.dragging._enabled) marker.setLatLng(map.getCenter());
                });
                map.on('move', function () {
                    if (map.dragging._enabled) marker.setLatLng(map.getCenter());
                });
                //Dragend event of map for update marker position
                map.on('dragend', function () {
                    var cnt = map.getCenter();
                    if (map.dragging._enabled) var position = marker.setLatLng(cnt);
                });

                if (map.dragging._enabled) {
                    $("#unsetLocation").hide();
                    $("#seLocation").show();

                    $("#inputSearchMap").on("keyup", function () {
                        searchMap();
                    });
                }
                return map;
            }, 2000)
        }

        var latlng = '';

        function setLocation() {
            $("#searchMapForm").hide();
            latlng = marker.getLatLng();
            map.dragging.disable();
            $("#seLocation").hide();
            $("#unsetLocation").show();
            $("#billing_map_lat_long").val(JSON.stringify(latlng));
        }

        function unsetLocation() {
            $("#searchMapForm").show();
            map.dragging.enable();
            $("#seLocation").show();
            $("#unsetLocation").hide();
            var latlng = ''; // map.getLatLng();
            $("#billing_map_lat_long").val('');
        }

        function clearSearch() {
            $("#inputSearchMap").val("");
            $(".result-search-map").css("display", "none");
            $(".close-result-search").css("display", "none");
            $(".close-result-search").html("");
        };

        function setCenter(location, name, map) {
            console.log(location, name, location.split(','))
            $(".result-search-map").hide();
            $("#inputSearchMap").val(name);
            map.flyTo(location.split(','), 14);
        }

        function searchMap() {
            $(".result-search-map").css("display", "none");
            $(".close-result-search").css("display", "none");

            if (!map.dragging._enabled) return null;

            var search = $("#inputSearchMap").val();
            var obj = $("#inputSearchMap");
            setTimeout(function () {
                var newSearch = obj.val();
                if (newSearch == search && search.length > 2) {
                    $(".result-search-map").html('');
                    L.cedarmaps.accessToken = "9ed787ebc87b8c555f50aa51a16b7a6815f296ba";
                    var geocoder = L.cedarmaps.geocoder('cedarmaps.streets');

                    $(".result-search-map").css("display", "block");
                    $(".close-result-search").css("display", "block");

                    geocoder.query(search, function (err, res) {
                        if (res && res.results) {
                            res.results.forEach(function (item, index) {
                                var title = item.name + ' (' + item.components.city + ') ';
                                var block = `<li><a onclick="setCenter('${item.location.center}','${item.name}',map)" href="#map">${title}</a></li>`;
                                //console.log({item, index, block});
                                $(".result-search-map").append(block);
                            })
                        } else {
                        }
                    });
                } else {
                    $(".result-search-map").css("display", "none");
                    $(".close-result-search").css("display", "none");
                    //console.log({newSearch, search})
                }
            }, 1000);
        }

        //       map code

        function locationerror() {
            toastr.error('لطفا مکان یاب مرورگر خود را فعال کنید.');
        }

        /// map 2

        var marker2 = new L.marker(defaultMarkerPosition, {
            icon: icon
        });

        var tileJSONUrl2 = "https://api.cedarmaps.com/v1/tiles/cedarmaps.streets.json?access_token=" + L.cedarmaps.accessToken;

        var map2;
        var mapPositionContainer2 = document.getElementById("billing_map_lat_long_edit");
        var defaultMarkerPosition2;

        function initiate2() {
            setTimeout(function () {
                    mapPositionContainer2 = document.getElementById("billing_map_lat_long_edit");
                    try {
                        defaultMarkerPosition2 = JSON.parse(mapPositionContainer2.value);
                    } catch (e) {
                        defaultMarkerPosition2 = defaultMarkerPosition;
                    }
                    marker2 = new L.marker(defaultMarkerPosition2, {
                        icon: icon
                    });
                    marker2 = new L.marker(defaultMarkerPosition2, {
                        icon: icon
                    });


                    try {
                        map2 = L.cedarmaps
                            .map("mapedit", tileJSONUrl2, {
                                scrollWheelZoom: true
                            })
                            .setView(defaultMarkerPosition2, 14);
                        map2.dragging.disable();
                    } catch (e) {

                    }

                    var latLng = map2.getCenter();
                    // console.log({latlng: latLng, map2: map2.getCenter()});
                    map2.removeLayer(marker2);
                    marker2.addTo(map2);
                    map2.on("locationerror ", locationerror);
                    var zoomControl2 = new L.Control.Zoom({position: "topleft"});
                    // zoomControl2.addTo(map2);
                    map2.on("click", function (e) {
                        if (map2.dragging._enabled) {
                            mapPositionContainer.value = e.latlng.lat + "," + e.latlng.lng;
                            map2.flyTo(e.latlng);
                        }
                    });
                    map2.on('moveend', function () {
                        if (map2.dragging._enabled) marker2.setLatLng(map2.getCenter());
                        //console.log(map.getCenter());
                    });
                    map2.on('move', function () {
                        if (map2.dragging._enabled) marker2.setLatLng(map2.getCenter());
                        //console.log(map.getCenter());
                    });
                    //Dragend event of map for update marker2 position
                    map2.on('dragend', function () {
                        var cnt = map2.getCenter();
                        if (map2.dragging._enabled) var position = marker2.setLatLng(cnt);
                    });

                    if (map2.dragging._enabled) {
                        $("#unsetLocation2").hide();
                        $("#seLocation2").show();
                    }

                    $("#inputSearchMap2").on("keyup", function () {
                        searchMap2();
                    });
                    return map2;
                }
                , 2000);
        }

        function searchMap2() {
            $(".result-search-map2").css("display", "none");
            $(".close-result-search2").css("display", "none");

            if (!map2.dragging._enabled) return null;

            var search = $("#inputSearchMap2").val();
            var obj = $("#inputSearchMap2");
            setTimeout(function () {
                var newSearch = obj.val();
                if (newSearch == search && search.length > 2) {
                    $(".result-search-map2").html('');
                    L.cedarmaps.accessToken = "9ed787ebc87b8c555f50aa51a16b7a6815f296ba";
                    var geocoder = L.cedarmaps.geocoder('cedarmaps.streets');

                    $(".result-search-map2").css("display", "block");
                    $(".close-result-search2").css("display", "block");

                    geocoder.query(search, function (err, res) {
                        if (res && res.results) {
                            res.results.forEach(function (item, index) {
                                var title = item.name + ' (' + item.components.city + ') ';
                                var block = `<li><a onclick="setCenter2('${item.location.center}','${item.name}',map2)" href="#map">${title}</a></li>`;
                                //console.log({item, index, block});
                                $(".result-search-map2").append(block);
                            })
                        } else {
                        }
                    });
                } else {
                    $(".result-search-map2").css("display", "none");
                    $(".close-result-search2").css("display", "none");
                    //console.log({newSearch, search})
                }
            }, 1000);
        }

        var latlng2 = '';

        function setLocation2() {
            $("#searchMapForm2").hide();
            latlng2 = marker2.getLatLng();
            map2.dragging.disable();
            $("#seLocation2").hide();
            $("#unsetLocation2").show();
            $("#billing_map_lat_long_edit").val(JSON.stringify(latlng2));
        }

        function unsetLocation2() {
            $("#searchMapForm2").show();
            map2.dragging.enable();
            $("#seLocation2").show();
            $("#unsetLocation2").hide();
            var latlng = ''; // map.getLatLng();
            $("#billing_map_lat_long_edit").val('');
        }

        function clearSearch2() {
            $("#inputSearchMap2").val("");
            $(".result-search-map2").css("display", "none");
            $(".close-result-search2").css("display", "none");
            $(".close-result-search2").html("");
        };

        function setCenter2(location, name, map) {
            console.log(location, name, location.split(','))
            $(".result-search-map2").hide();
            $("#inputSearchMap2").val(name);
            map2.flyTo(location.split(','), 14);
        }

    </script>
@stop