<!-- Form -->
<div class="content-animation animated">
    <div class="row clearfix fBTitrBold ">
        <div class="row clearfix text-center">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
                <div class="card ">
                    <div class="header">
                        <h2>
                            <button class="btn btn-success waves-effect waves-default refresh-request">
                                سیستم 137
                            </button>
                        </h2>
                    </div>
                    <div class="body ">
                        <div class="row">
                            <div class="col-md-12" dir="ltr">
                                <div class="table-responsive text-center p-t-20 align-center no-overflow-y no-overflow-x">
                                    <table class="table table-bordered table-striped table-hover dataTable js-exportable-request text-center full_width"
                                           style="overflow-y: hidden">
                                        <thead>
                                        <tr>
                                            <td class="text-center">عملیات</td>
                                            <td class="text-center">فایل های پیوست</td>
                                            <td class="text-center">مکان انتخابی</td>
                                            <td class="text-center">مکان کاربر</td>
                                            <td class="text-center">آدرس</td>
                                            <td class="text-center">موضوع</td>
                                            <td class="text-center">نام و نام خانوادگی</td>

                                            <td class="text-center">تاریخ ثبت</td>
                                            <td class="text-center">کد</td>
                                            <td class="text-center">شماره</td>
                                        </tr>
                                        </thead>
                                        <tbody class="bordered">

                                        </tbody>
                                        <tfoot>
                                        <tr>
                                            <td class="text-center">عملیات</td>
                                            <td class="text-center">فایل های پیوست</td>
                                            <td class="text-center">مکان انتخابی</td>
                                            <td class="text-center">مکان کاربر</td>
                                            <td class="text-center">آدرس</td>
                                            <td class="text-center">موضوع</td>
                                            <td class="text-center">نام و نام خانوادگی</td>

                                            <td class="text-center">تاریخ ثبت</td>
                                            <td class="text-center">کد</td>
                                            <td class="text-center">شماره</td>
                                        </tr>
                                        </tfoot>
                                    </table>


                                    <script type="text/javascript">

                                        (function ($) {
                                            $(document).ready(function () {
                                                let table = null, last_load,
                                                    System = {api: '', package: 'com.android.kashancard.v2.com'};

                                                let tableUpdate = function (data) {
                                                    /**
                                                     * @return {null}
                                                     */
                                                    let LatLong = function (myStr) {
                                                        if (myStr.length > 0) {
                                                            let f = myStr.indexOf('(') + 1;
                                                            let l = myStr.indexOf(')');
                                                            let subStr = myStr.substring(f, l);
                                                            subStr = subStr.split(',');
                                                            return subStr;
                                                        } else {
                                                            return [0, 0];
                                                        }
                                                    };
                                                    let content = "";
                                                    if (data.length > 0) {
                                                        for (i = 0; i < data.length; i += 1) {
                                                            let row = "", o = data[i];
                                                            row += "<tr>";
                                                            o.file = JSON.parse(o.file);
                                                            row += "<td><button data-response='" + o.response + "' data-action='request-action' data-mode='add-response' data-id='" + o.ID + "' class='btn btn-success add-response waves-effect send-commend btn-lg fBKoodakBold'>" + (o.response.length > 0 ? 'پاسخ داده شده' : 'جدید') + "</button></td>";
                                                            row += "<td><button data-action='request-action' data-mode='show-file' data-id='" + (o.file.length > 0 ? o.ID : '-1') + "' class='btn btn-success show-file waves-effect send-commend btn-lg fBKoodakBold'>" + (o.file.length > 0 ? 'نمایش' : 'وجود ندارد') + "</button></td>";
                                                            row += "<td><button data-action='request-action' data-mode='show-location' data-lat='" + LatLong(o.userLocation)[0] + "' data-lng='" + LatLong(o.userLocation)[1] + "' class='btn btn-success show-location waves-effect send-commend btn-lg fBKoodakBold'>نمایش</button></td>";
                                                            row += "<td><button data-action='request-action' data-mode='show-location' data-lat='" + LatLong(o.userSelectLocation)[0] + "' data-lng='" + LatLong(o.userSelectLocation)[1] + "' class='btn show-location btn-success waves-effect send-commend btn-lg fBKoodakBold'>نمایش</button></td>";


                                                            row += "<td>" + (o.address) + "</td>";
                                                            row += "<td>" + (o.text) + "</td>";
                                                            row += "<td>" + (o.userName + " " + o.userFamily) + "</td>";
                                                            row += "<td>" + (o.date) + "</td>";
                                                            row += "<td>" + (o.ID) + "</td>";
                                                            row += "<td>" + (i + 1) + "</td>";
                                                            row += "</tr>";
                                                            content += row;
                                                        }
                                                    }
                                                    last_load = data;

                                                    if (table == null) {
                                                        table = $('.js-exportable-request');
                                                        table.find('tbody').empty().append(content);
                                                        table.DataTable({
                                                            responsive: true,
                                                            "language": {
                                                                "lengthMenu": "Display _MENU_ records per page",
                                                                "zeroRecords": " چیزی یافت نشد",
                                                                "info": "نمایش از _START_ تا _END_ در _TOTAL_ رکورد",
                                                                "infoEmpty": "<center>رکوردی پیدا نشد</center>",
                                                                "infoFiltered": "(filtered from _MAX_ total records)",
                                                                "paginate": {
                                                                    "next": "بعدی",
                                                                    "previous": "قبلی"
                                                                }
                                                            },
                                                            "fnInfoCallback": function (oSettings, iStart, iEnd, iMax, iTotal, sPre) {
                                                                event_request();
                                                            },
                                                            "fnDrawCallback": function (oSettings) {
                                                                event_request();
                                                            }
                                                        });
                                                    } else {
                                                        table.find('tbody').empty().append(content);
                                                        table.dataTable();
                                                    }
                                                    event_request();
                                                };

                                                let WebServices = function (method, param, callback) {
                                                    $.ajax({
                                                        type: "POST",
                                                        crossDomain: true,
                                                        url: "http://81.12.87.20/PopularReportingSystem/PopularReportingSystem.asmx/" + method,
                                                        contentType: "application/json; charset=utf-8",
                                                        data: JSON.stringify(param),
                                                        success: function (json) {
                                                            callback(true, json.d);
                                                        },
                                                        error: function () {
                                                            callback(false, null);
                                                        }
                                                    });
                                                };


                                                let run = function () {
                                                    WebServices('GetRequestList', {
                                                        api: System.api,
                                                        package: System.package,
                                                        startDate: "now",
                                                        endDate: "now"
                                                    }, function (status, values) {
                                                        if (status) {
                                                            tableUpdate(JSON.parse(values))
                                                        }
                                                    });
                                                };

                                                $('button.refresh-request').unbind().bind('tap, click', function (e) {
                                                    let btn = $(this);
                                                    btn.attr('disabled', 'disabled');
                                                    loadSystemData(btn);
                                                });


                                                let loadSystemData = function (btn = null) {
                                                    WebServices("GetApi", {package: System.package}, function (status, value) {
                                                        if (status) {
                                                            System.api = value;
                                                            run();
                                                        } else {
                                                            swal("خطا", "خطایی رخ داده با پشتیبانی تماس حاصل نمایید.", "error");
                                                        }
                                                    });
                                                    setTimeout(function () {
                                                        if (btn !== null) btn.removeAttr('disabled', 'disabled');
                                                    }, 30)
                                                };

                                                loadSystemData();

                                                let event_request = function () {
                                                    $('button[data-action="request-action"]').unbind().bind('tap, click', function () {
                                                        let btn = $(this);

                                                        let action = btn.attr('data-mode');

                                                        switch (action) {
                                                            case 'show-location':
                                                                ShowLocation(btn.attr('data-lat'), btn.attr('data-lng'));
                                                                break;
                                                            case 'show-file':
                                                                if (btn.attr('data-id') > -1)
                                                                    ShowFile(btn.attr('data-id'));
                                                                break;
                                                            case 'add-response':
                                                                AddResponse(btn.attr('data-id'), btn.attr('data-response'));
                                                                break;
                                                            default:
                                                                break;
                                                        }
                                                    });
                                                };

                                                var DaysEnum = {"Image": 1, "Video": 3, "Sound": 2, 'None': 0};
                                                Object.freeze(DaysEnum);
                                                let ShowFile = function (id) {
                                                    if (id !== -1 || id !== '-1') {
                                                        let file = '';
                                                        for (let i = 0; i < last_load.length; i += 1) {
                                                            if (parseInt(last_load[i].ID) === parseInt(id)) {
                                                                file = last_load[i].file;
                                                                break;
                                                            }
                                                        }
                                                        let model = $('#smallModal');
                                                        model.modal({backdrop: "static"});

                                                        model.find('.modal-body').append().empty();
                                                        let html = '', base = 'http://81.12.87.20';
                                                        for (let f = 0; f < file.length; f += 1) {
                                                            let url = base + file[f].vp + file[f].url;
                                                            console.log(url);
                                                            if (parseInt(file[f].type) === parseInt(DaysEnum.Image)) {
                                                                html += Image(url);
                                                            }
                                                            if (parseInt(file[f].type) === parseInt(DaysEnum.Sound)) {
                                                                html += Audio(url);
                                                            }
                                                            if (parseInt(file[f].type) === parseInt(DaysEnum.Video)) {
                                                                html += Video(url);
                                                            }

                                                        }
                                                        model.find('.modal-body').append(html);
                                                    }
                                                };
                                                /**
                                                 * @return {string}
                                                 */
                                                let Video = function (url) {
                                                    let html = "";

                                                    html += '<video width="400" controls>';
                                                    html += '    <source src="' + url + '" type="video/mp4">';
                                                    html += '        Your browser does not support HTML5 video.';
                                                    html += '</video>';
                                                    return html;
                                                };
                                                /**
                                                 * @return {string}
                                                 */
                                                let Image = function (url) {

                                                    let html = "";
                                                    html += '<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">';
                                                    html += '        <img class="img-responsive thumbnail" src="' + url + '">';
                                                    html += '</div>';
                                                    return html;
                                                };

                                                /**
                                                 * @return {string}
                                                 */
                                                let Audio = function (url) {

                                                    let html = "";
                                                    html += '<a class="btn btn-default btn-success" href="' + url + '" download>';
                                                    html += "دانلود این فایل صوتی";
                                                    html += '</a>';
                                                    return html;
                                                };

                                                let AddResponse = function (id, response) {
                                                    swal({
                                                        title: "جوابتان را ینجا بنویسید",
                                                        text: "متن را وارد کنید",
                                                        type: "input",
                                                        showCancelButton: true,
                                                        closeOnConfirm: false,
                                                        animation: "slide-from-top",
                                                        inputPlaceholder: response
                                                    }, function (inputValue) {
                                                        if (inputValue === false) return false;
                                                        if (inputValue === "") {
                                                            swal.showInputError("You need to write something!");
                                                            return false
                                                        } else {
                                                            WebServices('AddRequestResponse', {
                                                                api: System.api,
                                                                package: System.package,
                                                                requestId: parseInt(id),
                                                                response: inputValue
                                                            }, function (status, values) {
                                                                if (status && values) {
                                                                    swal("", 'ویرایش شد.', "success");
                                                                }
                                                            });
                                                        }
                                                    });
                                                };

                                                let ShowLocation = function (lat = null, lng = null) {

                                                    if (lat == null || lng == null) {
                                                        swal("خطا", "وارد نشده است.", "error");
                                                    } else {
                                                        moveToLocation(lat, lng, 17);
                                                    }
                                                };

                                                let initGoogleMap = function (location = null) {
                                                    if (Map == null) {
                                                        Map = new google.maps.Map($('#google-map')[0], {
                                                            center: new google.maps.LatLng(33, 55),
                                                            zoom: 5
                                                        });
                                                        // google.maps.event.addListener(Map, 'click', function (event) {
                                                        //     addMarker(event.latLng);
                                                        // });
                                                    }

                                                    try {
                                                        if (location == null) {
                                                            //  moveToLocation(33, 55, 5);
                                                        } else {
                                                            let loc = location.split(',');
                                                            if (loc.length === 2) moveToLocation(loc[0].replace("(", ''), loc[1].replace(")", ''), 5);
                                                        }
                                                    } catch (e) {
                                                        console.log(e);
                                                    }
                                                };
                                                let singleMarker, Map = null;


                                                let addMarker = function (latLng) {
                                                    //if marker exists, erase marker
                                                    if (singleMarker) {
                                                        singleMarker.setMap(null);
                                                    }
                                                    singleMarker = new google.maps.Marker({
                                                        position: latLng, //mouse click position
                                                        map: Map,
                                                        draggable: false,
                                                        icon: "http://www.google.com/mapfiles/marker_green.png"
                                                    });
                                                };
                                                let moveToLocation = function (lat, lng, zoom) {
                                                    let center = new google.maps.LatLng(lat, lng);
                                                    // // using global variable:
                                                    Map.setZoom(zoom);
                                                    Map.panTo(center);
                                                    addMarker(center);
                                                };
                                                initGoogleMap();

                                            });
                                        }(jQuery));


                                    </script>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- #END# Exportable Table -->
        <!-- #END# Advanced Form Example With Validation -->
    </div>
</div>


<div class="modal fade" id="smallModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg clearfix fBTitrBold" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="smallModalLabel">
                    <center>پیوست ها</center>
                </h4>
            </div>
            <div class="modal-body" dir="rtl">


            </div>
            <br>
            <hr>
            <div class="modal-footer">
                <button type="button" class="btn btn-link waves-effect" data-dismiss="modal">بستن</button>
            </div>
        </div>
    </div>
</div>


<!-- Form -->
<div class="content-animation animated">
    <div class="row clearfix fBTitrBold ">
        <div class="row clearfix text-center">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
                <div class="card ">
                    <div class="header">
                        <h2>
                            نقشه
                        </h2>
                    </div>
                    <div class="body ">
                        <div class="row">
                            <div class="btn btn-lg btn-info full_width " id="google-map"
                                 style="height: 350px"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
