@extends('layouts.member-app')

@push('head-script')
<style>
    #map {
        height: 300px;
        width: 100%;
        border: solid 1px #ccc;
        margin: 10px auto;
        border-radius: 10px;
    }

    .message-item {
        margin-bottom: 25px;
        margin-left: 40px;
        position: relative;
    }

    .message-item .message-inner {
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 3px;
        padding: 10px;
        position: relative;
    }

    .message-item .message-inner:before {
        border-right: 10px solid #ddd;
        border-style: solid;
        border-width: 10px;
        color: rgba(0, 0, 0, 0);
        content: "";
        display: block;
        height: 0;
        position: absolute;
        left: -20px;
        top: 6px;
        width: 0;
    }

    .message-item .message-inner:after {
        border-right: 10px solid #fff;
        border-style: solid;
        border-width: 10px;
        color: rgba(0, 0, 0, 0);
        content: "";
        display: block;
        height: 0;
        position: absolute;
        left: -18px;
        top: 6px;
        width: 0;
    }

    .message-item:before {
        background: #fff;
        border-radius: 2px;
        bottom: -30px;
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
        content: "";
        height: 100%;
        left: -30px;
        position: absolute;
        width: 3px;
    }

    .message-item:after {
        background: #fff;
        border: 2px solid #ccc;
        border-radius: 50%;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        content: "";
        height: 15px;
        left: -36px;
        position: absolute;
        top: 10px;
        width: 15px;
    }

    .clearfix:before,
    .clearfix:after {
        content: " ";
        display: table;
    }

    .message-item .message-head {
        border-bottom: 1px solid #eee;
        margin-bottom: 8px;
        padding-bottom: 8px;
    }

    .message-item .message-head .avatar {
        margin-right: 20px;
    }

    .message-item .message-head .user-detail {
        overflow: hidden;
    }

    .message-item .message-head .user-detail h5 {
        font-size: 16px;
        font-weight: bold;
        margin: 0;
    }

    .message-item .message-head .post-meta {
        float: left;
        padding: 0 15px 0 0;
    }

    .message-item .message-head .post-meta>div {
        color: #333;
        font-weight: bold;
        text-align: right;
    }

    .post-meta>div {
        color: #777;
        font-size: 12px;
        line-height: 22px;
    }

    .message-item .message-head .post-meta>div {
        color: #333;
        font-weight: bold;
        text-align: right;
    }

    .post-meta>div {
        color: #777;
        font-size: 12px;
        line-height: 22px;
    }

    #wallmessages img {
        min-height: 40px;
        max-height: 40px;
    }

    .table {
        border-left: 1px solid #f2f2f3 !important;
        border-right: 1px solid #f2f2f3 !important;
    }
</style>


@endpush

@section('page-title')
<div class="row bg-title">
    <!-- .page title -->
    <div class="col-lg-6 col-md-4 col-sm-4 col-xs-12">
        <h4 class="page-title"><i class="{{ $pageIcon }}"></i> {{ __($pageTitle) }}</h4>
    </div>
    <!-- /.page title -->
    <!-- .breadcrumb -->
    <div class="col-lg-6 col-sm-8 col-md-8 col-xs-12">
        <ol class="breadcrumb">
            <li><a href="{{ route('admin.dashboard') }}">@lang('app.menu.home')</a></li>
            <li><a href="{{ route('admin.clients.index') }}">{{ __($pageTitle) }}</a></li>
            <li class="active">@lang('app.menu.projects')</li>
        </ol>
    </div>
    <div class="col-lg-6 col-sm-8 col-md-8 col-xs-12 text-right">

        <a href="#" class="btn btn-outline btn-success btn-sm">@lang('modules.lead.edit')
            <i class="fa fa-edit" aria-hidden="true"></i></a>
    </div>
    <!-- /.breadcrumb -->
</div>
@endsection


@section('content')

<div class="row">

    <div class="col-xs-12">
        <div class="white-box">
            <div class="row">
                <div class="col-lg-5">
                    <div class="panel panel-default">
                        <div class="panel-heading custom-panel-heading">Order Detail</div>
                        <div class="panel-body custom-panel-body">
                            <div class="table-responsive">
                                <table class="table table-striped table-bordered">
                                    <tbody>
                                        <tr>
                                            <td>WO Number</td>
                                            <td id="wo_number"></td>
                                        </tr>
                                        <tr>
                                            <td>WO Date</td>
                                            <td id="wo_date"></td>
                                        </tr>
                                        <tr>
                                            <td>WO Status</td>
                                            <td id="wo_status"></td>
                                        </tr>
                                        <tr>
                                            <td>Service</td>
                                            <td id="wo_service"></td>
                                        </tr>
                                        <tr>
                                            <td>Client</td>
                                            <td id="wo_client"></td>
                                        </tr>
                                        <tr>
                                            <td>Email</td>
                                            <td id="wo_email"></td>
                                        </tr>
                                        <tr>
                                            <td>Phone</td>
                                            <td id="wo_phone"></td>
                                        </tr>
                                        <tr>
                                            <td>Address</td>
                                            <td id="wo_address"></td>
                                        </tr>
                                        <tr>
                                            <td>Keterangan Alamat</td>
                                            <td id="wo_keterangan_alamat"></td>
                                        </tr>
                                        <tr>
                                            <td>Detail Permintaan</td>
                                            <td id="wo_detail_permintaan"></td>
                                        </tr>
                                        <tr>
                                            <td colspan="2"></td>
                                        </tr>
                                        <tr>
                                            <td>Personel</td>
                                            <td id="wo_personel"></td>
                                        </tr>
                                        <tr>
                                            <td>Pembayaran Melalui</td>
                                            <td id="wo_pembayaran_via"></td>
                                        </tr>
                                        <tr>
                                            <td>Status Pembayaran</td>
                                            <td id="wo_status_pembayaran"><label
                                                    class="label label-danger">UNPAID</label></td>
                                        </tr>
                                        <tr>
                                            <td>Jumlah</td>
                                            <td id="wo_jumlah"></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-7">
                    <div class="panel panel-default">
                        <div class="panel-heading custom-panel-heading">Order Location</div>
                        <div class="panel-body custom-panel-body">
                            <div id="map"></div>
                            <div id="control_panel" class="well text-center text-navy">
                                <div id="directions_panel"></div>
                                <div id="total"></div>
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-heading custom-panel-heading">Timeline Order</div>
                        <div class="panel-body custom-panel-body">
                            <div class="qa-message-list" id="wallmessages">

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

                </div>
            </div>

        </div>
    </div>


</div>

@endsection

@push('footer-script')

<script type="text/javascript"
    src="https://maps.googleapis.com/maps/api/js?libraries=places&amp;key=AIzaSyANABngwjq91LDRPCuv5ExNOJ2LigCqSdY">
</script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    var code = '';
    function initMap($lat = '', $long = '') {
        if ($lat != '' && $long != '') {
            var map = new google.maps.Map(document.getElementById('map'), {
                center: {
                    lat: parseFloat($lat),
                    lng: parseFloat($long)
                },
                zoom: 13
            });

            var marker = new google.maps.Marker({
                position: {
                    lat: parseFloat($lat),
                    lng: parseFloat($long)
                },
                map: map,
                title: 'Hello World!'
            });
        } else {
            var map = new google.maps.Map(document.getElementById('map'), {
                center: {
                    lat: -6.211544,
                    lng: 106.84517200000005
                },
                zoom: 11
            });
        }
        var infowindow = new google.maps.InfoWindow();
    }

    function mapLocation($data) {

        var directionsDisplay;
        var directionsService = new google.maps.DirectionsService();
        var map;
        var map_project;
        function initializeMap($lat, $long) {
            directionsDisplay = new google.maps.DirectionsRenderer();
            var request_location = new google.maps.LatLng(parseFloat($lat), parseFloat($long));
            var mapOptions = {
                zoom: 13,
                center: request_location
            };
            map = new google.maps.Map(document.getElementById('map'), mapOptions);


            directionsDisplay.setMap(map);
            calcRoute();

            var contentString = '<div id="content">' +
                    '<div id="siteNotice">' +
                    '</div>' +
                    '<h1 id="firstHeading" class="firstHeading">' + $data.klien + '</h1>' +
                    '<div id="bodyContent">' +
                    '<p>' + $data.location + '</p>' +
                    '</div>' +
                    '</div>';

            var infowindow = new google.maps.InfoWindow({
                content: contentString
            });

        }

        function calcRoute() {
            console.log($data.map_lat)
            var start = new google.maps.LatLng(parseFloat($data.map_lat), parseFloat($data.map_long));
            //var end = new google.maps.LatLng(38.334818, -181.884886);
            var end = new google.maps.LatLng(parseFloat($data.ut_lat), parseFloat($data.ut_lng));
            var request = {
                origin: start,
                destination: end,
                travelMode: google.maps.TravelMode.DRIVING
            };
            directionsService.route(request, function (response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(response);
                    directionsDisplay.setMap(map);

                    var route = response.routes[0];
                    var summaryPanel = document.getElementById("directions_panel");
                    summaryPanel.innerHTML = "";
                    // For each route, display summary information.
                    for (var i = 0; i < route.legs.length; i++) {
                        var routeSegment = i + 1;
                        summaryPanel.innerHTML += "<b>Route Segment: " + routeSegment + "</b><br />";
                        summaryPanel.innerHTML += route.legs[i].start_address + " to ";
                        summaryPanel.innerHTML += route.legs[i].end_address + "<br />";
                        summaryPanel.innerHTML += route.legs[i].distance.text + "<br /><br />";
                    }
                    computeTotalDistance(response);

                } else {
                    alert("Directions Request from " + start.toUrlValue(6) + " to " + end.toUrlValue(6) + " failed: " + status);
                }
            });
        }

        function computeTotalDistance(result) {
            var totalDist = 0;
            var totalTime = 0;
            var myroute = result.routes[0];
            for (i = 0; i < myroute.legs.length; i++) {
                totalDist += myroute.legs[i].distance.value;
                totalTime += myroute.legs[i].duration.value;
            }
            totalDist = totalDist / 1000.
            document.getElementById("total").innerHTML = 'Est Distance : <b><span id="etd">' + totalDist + '</span> km</b>, ETA <b><span id="eta">' + (totalTime / 60).toFixed(2) + '</span> minutes </b>';
        }
        initializeMap($data.map_lat, $data.map_long);

//        google.maps.event.addDomListener(window, 'load', initialize);
    }

    function timeline_order() {
        $.get('/admin/workorders/ajax_detail/' + code + '/timeline', function (res) {
            var html = '';
            var foto_teknisi = '';
            if (res.timeline.teknisi.photo_url == '-') {
                foto_teknisi = '<img src="https://ssl.gstatic.com/accounts/ui/avatar_2x.png">';
            } else {
                foto_teknisi = '<img src="' + res.timeline.teknisi.photo_url + '">';
            }
            $.each(res.timeline.notes, function (index, value) {
                var status_order = '';
                if (value.status_code == 'SUBMIT_SURVEY') {

                    html += `<div class="message-item" id="m16">
                        <div class="message-inner">
                            <div class="message-head clearfix">
                                <div class="row">
                                    <div class="col-lg-8">
                                        <div class="avatar pull-left"><a href="#">` + foto_teknisi + `</a></div>
                                        <div class="user-detail">
                                            <h5 class="handle">` + res.timeline.teknisi.name + `</h5>
                                            <div class="post-meta">
                                                <div class="asker-meta">
                                                    <span class="qa-message-what"></span>
                                                    <span class="qa-message-when">
                                                        <span class="qa-message-when-data">` + value.created + `</span>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4" style="text-align:right">
                                         <label class="label label-primary">` + value.status_code + `</label>
                                    </div>
                                </div>
                                
                            </div>
                            <div class="qa-message-content">
                                ` + res.timeline.teknisi.name + ` - ` + value.note + ` `;
                    if (typeof value.survey_items !== 'undefined') {
                        $.each(value.survey_items, function (label, si) {
                            console.log('tes');
                            console.log(si);
                            if (label == 'TINDAKAN') {
                                html += '<br>';
                                html += '<table class="table table-striped table-bordered">';
                                html += '<tr><th class="text-center" colspan="2">TINDAKAN</th></tr>';
                                $.each(si, function (ss, s) {
                                    html += '<tr>';
                                    html += '<td style="border-left: 1px solid #f2f2f3 !important;border-right: 1px solid #f2f2f3 !important;">' + s.item_name + '</td>';
                                    html += '<td style="border-left: 1px solid #f2f2f3 !important;border-right: 1px solid #f2f2f3 !important;">' + s.item_value + '</td>';
                                    html += '</tr>';
                                })
                                html += '</table>';
                            } else if (label == 'CEK_AWAL') {
                                html += '<br>';
                                html += '<table class="table table-striped table-bordered">';
                                html += '<tr><th class="text-center" colspan="2">CEK AWAL</th></tr>';
                                $.each(si, function (ss, s) {
                                    html += '<tr>';
                                    html += '<td style="border-left: 1px solid #f2f2f3 !important;border-right: 1px solid #f2f2f3 !important;">' + s.item_name + '</td>';
                                    html += '<td style="border-left: 1px solid #f2f2f3 !important;border-right: 1px solid #f2f2f3 !important;">' + s.item_value + '</td>';
                                    if (s.photo_url != '') {
                                        html += '<td colspan="2" style="border-left: 1px solid #f2f2f3 !important;border-right: 1px solid #f2f2f3 !important;"><a href="' + s.photo_url('http://', 'https://') + '" target="_blank"><img src="' + s.photo_url('http://', 'https://') + '" class="staff-profile-xs-image pull-left"></a></td>';
                                    }
                                    html += '</tr>';
                                })
                                html += '</table>';
                            } else if (label == 'IDENTIFIKASI') {
                                html += '<br>';
                                html += '<table class="table table-striped table-bordered">';
                                html += '<tr><th class="text-center" colspan="2">IDENTIFIKASI</th></tr>';
                                $.each(si, function (ss, s) {
                                    html += '<tr>';
                                    html += '<td style="border-left: 1px solid #f2f2f3 !important;border-right: 1px solid #f2f2f3 !important;">' + s.item_name + '</td>';
                                    html += '<td style="border-left: 1px solid #f2f2f3 !important;border-right: 1px solid #f2f2f3 !important;">' + s.item_value + '</td>';
                                    if (s.photo_url != '') {
                                        html += '<td colspan="2" style="border-left: 1px solid #f2f2f3 !important;border-right: 1px solid #f2f2f3 !important;"><a href="' + s.photo_url('http://', 'https://') + '" target="_blank"><img src="' + s.photo_url('http://', 'https://') + '" class="staff-profile-xs-image pull-left"></a></td>';
                                    }
                                    html += '</tr>';
                                })
                                html += '</table>';
                            }

                        })
                    }

                    html += `</div>
                        </div>
                    </div>`;
                } else if (value.status_code == 'END_WORKING') {
                    html += `<div class="message-item" id="m16">
                        <div class="message-inner">
                            <div class="message-head clearfix">
                                <div class="row">
                                    <div class="col-lg-8">
                                        <div class="avatar pull-left"><a href="#">` + foto_teknisi + `</a></div>
                                        <div class="user-detail">
                                            <h5 class="handle">` + res.timeline.teknisi.name + `</h5>
                                            <div class="post-meta">
                                                <div class="asker-meta">
                                                    <span class="qa-message-what"></span>
                                                    <span class="qa-message-when">
                                                        <span class="qa-message-when-data">` + value.created + `</span>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4" style="text-align:right">
                                         <label class="label label-primary">` + value.status_code + `</label>
                                    </div>
                                </div>
                            </div>
                            <div class="qa-message-content">
                                ` + value.status_code + ` - ` + value.note + ``;
                    if (typeof value.survey_items.length !== 'undefined') {
                        $.each(value.survey_items, function (label, si) {
                            if (label == 'TINDAKAN') {
                                html += '<br>';
                                html += '<table class="table table-striped table-bordered">';
                                html += '<tr><th class="text-center" colspan="2">TINDAKAN</th></tr>';
                                $.each(si, function (ss, s) {
                                    html += '<tr>';
                                    html += '<td style="border-left: 1px solid #f2f2f3 !important;border-right: 1px solid #f2f2f3 !important;">' + s.item_name + '</td>';
                                    html += '<td style="border-left: 1px solid #f2f2f3 !important;border-right: 1px solid #f2f2f3 !important;">' + s.item_value + '</td>';
                                    html += '</tr>';
                                })
                                html += '</table>';
                            } else if (label == 'CEK_AWAL') {
                                html += '<br>';
                                html += '<table class="table table-striped table-bordered">';
                                html += '<tr><th class="text-center" colspan="2">CEK AWAL</th></tr>';
                                $.each(si, function (ss, s) {
                                    html += '<tr>';
                                    html += '<td style="border-left: 1px solid #f2f2f3 !important;border-right: 1px solid #f2f2f3 !important;">' + s.item_name + '</td>';
                                    html += '<td style="border-left: 1px solid #f2f2f3 !important;border-right: 1px solid #f2f2f3 !important;">' + s.item_value + '</td>';
                                    if (s.photo_url != '') {
                                        html += '<td style="border-left: 1px solid #f2f2f3 !important;border-right: 1px solid #f2f2f3 !important;" colspan="2"><a href="' + s.photo_url('http://', 'https://') + '" target="_blank"><img src="' + s.photo_url('http://', 'https://') + '" class="staff-profile-xs-image pull-left"></a></td>';
                                    }
                                    html += '</tr>';
                                })
                                html += '</table>';
                            } else if (label == 'IDENTIFIKASI') {
                                html += '<br>';
                                html += '<table class="table table-striped table-bordered">';
                                html += '<tr><th class="text-center" colspan="2">IDENTIFIKASI</th></tr>';
                                $.each(si, function (ss, s) {
                                    html += '<tr>';
                                    html += '<td style="border-left: 1px solid #f2f2f3 !important;border-right: 1px solid #f2f2f3 !important;">' + s.item_name + '</td>';
                                    html += '<td style="border-left: 1px solid #f2f2f3 !important;border-right: 1px solid #f2f2f3 !important;">' + s.item_value + '</td>';
                                    if (s.photo_url != '') {
                                        html += '<td style="border-left: 1px solid #f2f2f3 !important;border-right: 1px solid #f2f2f3 !important;" colspan="2"><a href="' + s.photo_url('http://', 'https://') + '" target="_blank"><img src="' + s.photo_url('http://', 'https://') + '" class="staff-profile-xs-image pull-left"></a></td>';
                                    }
                                    html += '</tr>';
                                })
                                html += '</table>';
                            }

                        })
                    }
                    html += `</div>
                        </div>
                    </div>`;
                } else {
                    if (value.status_code == 'TAKE_ORDER') {
                        status_order = 'success';
                    } else if (value.status_code == 'PENDING') {
                        status_order = 'warning';
                    } else if (value.status_code == 'CLOSE_ORDER') {
                        status_order = 'danger';
                    } else {
                        status_order = 'primary';
                    }
                    html += `<div class="message-item" id="m16">
                        <div class="message-inner">
                            <div class="message-head clearfix">
                                <div class="row">
                                    <div class="col-lg-8">
                                        <div class="avatar pull-left"><a href="#">` + foto_teknisi + `</a></div>
                                        <div class="user-detail">
                                            <h5 class="handle">` + res.timeline.teknisi.name + `</h5>
                                            <div class="post-meta">
                                                <div class="asker-meta">
                                                    <span class="qa-message-what"></span>
                                                    <span class="qa-message-when">
                                                        <span class="qa-message-when-data">` + value.created + `</span>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4" style="text-align:right">
                                         <label class="label label-` + status_order + `">` + value.status_code + `</label>
                                    </div>
                                </div>
                            </div>
                            <div class="qa-message-content">
                                ` + value.status_code + ` - ` + value.note + ``;

                    html += `</div>
                        </div>
                    </div>`;
                }
            })

            $('#wallmessages').html(html)
        }, 'json')
    }


    $.get('/admin/workorders/ajax_detail/' + code + '/detail', function (res) {
        if (res.order.status_code == 'NEW') {
            initMap(res.order.map_lat, res.order.map_long)
            $('#wallmessages').html('<div class="alert alert-warning text-center"><h3 style="margin:0px">Waiting For Personnel</h3></div>')
        } else {
            mapLocation(res.order);
            timeline_order()
        }


        var status = '';
        var status_pembayaran = '';
        if (res.order.payment_status == 'UNPAID') {
            status_pembayaran = '<label class="label label-danger">CLOSE ORDER</label>';
        } else if (res.order.payment_status == 'PAID') {
            status_pembayaran = '<label class="label label-success">PAID</label>';
        } else {
            status_pembayaran = '<label class="label label-success">PAID</label>';
        }
        if (res.order.status_code == 'NEW') {
            status = '<label class="label label-success">NEW</label>';
        } else if (res.order.status_code == 'CLOSE_ORDER') {
            status = '<label class="label label-danger">CLOSE ORDER</label>';
        } else if (res.order.status_code == 'PENDING') {
            status = '<label class="label label-default">PENDING</label>';
        } else {
            status = '<label class="label label-info">' + res.order.status_code + '</label>';
        }
        $('#wo_number').text(res.order.order_number)
        $('#wo_date').text(res.order.date)
        $('#wo_status').html(status)
        $('#wo_service').text(res.order.service)
        $('#wo_client').text(res.order.klien)
        $('#wo_email').text(res.order.email)
        $('#wo_phone').text(res.order.phone)
        $('#wo_address').text(res.order.location)
        $('#wo_keterangan_alamat').text(res.order.address_note)
        $('#wo_detail_permintaan').text(res.order.description)
        $('#wo_personel').text(res.order.teknisi_name)
        $('#wo_pembayaran_via').text(res.order.payment_via)
        $('#wo_status_pembayaran').html(status_pembayaran)
        $('#wo_jumlah').text(res.order.rate)
    }, 'json')


</script>
@endpush