@extends('platform.layout')

@section('back')
    <a href="{{ route('platform.vehicles.index') }}" class="btn btn-light shadow position-absolute start-0 top-0 ms-2 mt-2"
        style="z-index:1050;">
        <i class="fa fa-arrow-left"></i>
    </a>
@endsection

@section('content')
    <div class="w-100 h-100 overflow-y-auto">
        <div class="container py-3">
            <div class="row justify-content-center">
                <div class="col-md-4">
                    <div class="position-relative">
                        <div class="d-flex justify-content-center align-items-center">
                            <div id="last_engine_icon" style="font-size:70px; line-height:1;"></div>
                        </div>
                    </div>
                    <div class="text-center lh-1 mb-3">
                        <h3 id="gps_name" class="fw-bolder mb-0">GPS Name</h3>
                        <p id="gps_imei" class="mb-0">GPS Imei</p>
                    </div>
                    <div class="row justify-content-center">
                        <div class="col-3">
                            <a id="gps_call" href="" class="btn btn-light shadow w-100 mb-3">
                                <div class="ratio ratio-1x1">
                                    <div class="w-100 h-100 d-flex justify-content-center align-items-center">
                                        <div class="">
                                            <i class="fa fa-phone"></i>
                                            <p class="m-0" style="font-size:.5rem;">Call</p>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="col-3">
                            <a message-warning="Tindakan ini akan membuat kendaraan anda mati."
                                href="{{ route('platform.vehicles.relay.off', ['imei' => $imei]) }}"
                                class="btn btn-light shadow w-100 mb-3 btn-relay">
                                <div class="ratio ratio-1x1">
                                    <div class="w-100 h-100 d-flex justify-content-center align-items-center">
                                        <div class="">
                                            <i class="fa-solid fa-power-off text-danger"></i>
                                            <p class="m-0" style="font-size:.5rem;">Cut Off</p>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="col-3">
                            <a message-warning="Tindakan ini akan membuat kendaraan dapat dihidupkan kembali."
                                href="{{ route('platform.vehicles.relay.on', ['imei' => $imei]) }}"
                                class="btn btn-light shadow w-100 mb-3 btn-relay">
                                <div class="ratio ratio-1x1">
                                    <div class="w-100 h-100 d-flex justify-content-center align-items-center">
                                        <div class="">
                                            <i class="fa-solid fa-power-off text-success"></i>
                                            <p class="m-0" style="font-size:.5rem;">Cut On</p>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="col-3">
                            <a message-warning="Tindakan ini dilakukan untuk memerika status mesin."
                                href="{{ route('platform.vehicles.relay.check', ['imei' => $imei]) }}"
                                class="btn btn-light shadow w-100 mb-3 btn-relay">
                                <div class="ratio ratio-1x1">
                                    <div class="w-100 h-100 d-flex justify-content-center align-items-center">
                                        <div class="">
                                            <i class="fa-solid fa-power-off text-dark"></i>
                                            <p class="m-0" style="font-size:.5rem;">Check</p>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                    <p class="text-center mb-0">Latest Update : <span id="last_time"></span></p>
                    <ol class="list-group">
                        <li class="list-group-item">
                            <div class="fw-bold">Sim Card</div>
                            <ul class="list-unstyled">
                                <li class="d-flex justify-content-between align-items-start">
                                    <span>Number</span>
                                    <span id="simcard_number"></span>
                                </li>
                                <li class="d-flex justify-content-between align-items-start">
                                    <span>Expired</span>
                                    <span id="simcard_expired"></span>
                                </li>
                            </ul>
                        </li>
                        <li class="list-group-item">
                            <div class="fw-bold">Latest Device</div>
                            <ul class="list-unstyled">
                                <li class="d-flex justify-content-between align-items-start">
                                    <span>Battery</span>
                                    <span>
                                        <div id="battery" class="battery" style="--battery-level:0%;"></div>
                                    </span>
                                </li>
                                <li class="d-flex justify-content-between align-items-start">
                                    <span>Mesin</span>
                                    <span id="last_engine"></span>
                                </li>
                                <li class="d-flex justify-content-between align-items-start">
                                    <span>Pergerakan</span>
                                    <span id="movement_status"></span>
                                </li>
                                <li class="d-flex justify-content-between align-items-start">
                                    <span>Kecepatan</span>
                                    <span id="last_speed"></span>
                                </li>
                            </ul>
                        </li>
                        <li class="list-group-item">
                            <div class="fw-bold">Latest Position</div>
                            <ul class="list-unstyled">
                                <li class="d-flex justify-content-between align-items-start">
                                    <span id="last_address"></span>
                                    <a id="gmap_link" class="btn btn-light shadow ms-3" href="" target="_blank"><i
                                            class="fa fa-map"></i></a>
                                </li>
                            </ul>
                        </li>
                        <li class="list-group-item">
                            <div class="fw-bold">Reports</div>
                            <ul class="list-unstyled">
                                <li class="d-flex justify-content-between align-items-start">
                                    <span id="last_address">Timeline</span>
                                    <a class="btn btn-light shadow ms-3"
                                        href="{{ route('platform.vehicles.timeline', ['imei' => $imei]) }}"><i
                                            class="fa fa-map"></i></a>
                                </li>
                            </ul>
                        </li>
                        <li class="list-group-item">
                            <div class="fw-bold">Stream</div>
                            <ul class="list-unstyled">
                                <div class="ratio ratio-16x9 rounded">
                                    <video id="videoElement" class="video" controls autoplay></video>
                                </div>
                            </ul>
                        </li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('css')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.10.5/dist/sweetalert2.min.css">
@endpush

@push('js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/flv.js/1.5.0/flv.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.10.5/dist/sweetalert2.all.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.30.1/moment-with-locales.min.js"
        integrity="sha512-4F1cxYdMiAW98oomSLaygEwmCnIP38pb4Kx70yQYqRwLVCs3DbRumfBq82T08g/4LJ/smbFGFpmeFlQgoDccgg=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <script>
        $(document).ready(function() {
            const url = 'https://api-v2.foxlogger.app/send_instruct';
            const USER_ID = '{{ auth()->user()->profile->foxlogger_id ?? '' }}';

            const urlParts = window.location.href.split('/');
            const imei = urlParts[urlParts.length - 1];

            const cleanedImei = imei.replace(/^0+/, '');

            if (!imei || cleanedImei === '') {
                console.error('IMEI tidak ditemukan dalam URL atau tidak valid.');
            } else {
                $.ajax({
                    url: url,
                    type: 'POST',
                    dataType: 'json',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'Authorization': 'Bearer 023khjsdH7123j30-whjdf1-0sadkD2023jh43-0dfkvu123G712j0dfkj3'
                    },
                    data: JSON.stringify({
                        imei: cleanedImei,
                        channel: 1,
                        user_id: USER_ID,
                        _token: '{{ csrf_token() }}',
                        _method: 'POST'
                    }),
                    success: function(response) {
                        Swal.fire({
                            title: "load stream video...",
                            showConfirmButton: false,
                            timer: 4000
                        });

                        if (flvjs.isSupported()) {
                            var videoElement = document.getElementById('videoElement');
                            var flvPlayer = flvjs.createPlayer({
                                type: 'flv',
                                url: `https://streamv.foxlogger.info/live/1/${cleanedImei}.flv`
                            });
                            flvPlayer.attachMediaElement(videoElement);
                            flvPlayer.load();
                            flvPlayer.play();
                        }
                    },
                    error: function(xhr) {
                        Swal.fire({
                            icon: "error",
                            title: "Perintah gagal dijalankan",
                            showConfirmButton: false,
                            timer: 4000
                        });
                    }
                });
            }
        });
    </script>

    <script>
        $(() => {
            'use strict'
            async function getDevice() {
                try {
                    const response = await $.ajax({
                        url: `https://api-v2.foxlogger.app/user_datas?imei.eq={{ $imei }}`,
                        headers: {
                            'Content-Type': 'application/json',
                            'Accept': 'application/json',
                            'Authorization': 'Bearer 023khjsdH7123j30-whjdf1-0sadkD2023jh43-0dfkvu123G712j0dfkj3'
                        }
                    });
                    if (typeof response.data == 'object') {
                        let data = response.data[0];
                        let duration = moment.duration(moment(data.last_time).diff(new Date(), 'minutes'),
                            "minutes").locale('en').humanize(true);
                        $(`#last_time`).html(`${duration}`);
                        $(`#gps_name`).html(data.gps_name);
                        $(`#gps_imei`).html(data.imei);
                        $(`#gps_call`).attr('href',
                            `tel:${String(data.simcard_number).replace(/(^0)+[0-9]/i, '+62')}`);
                        $(`#simcard_number`).html(data.simcard_number);
                        $(`#simcard_expired`).html(data.simcard_expired);
                        $(`#gmap_link`).attr('href',
                            `https://www.google.com/maps/place/${data.last_latitude},${data.last_longtitude}`
                        );
                        let batteryLevel = 20 * data.last_battery;
                        let batteryClass = (batteryLevel <= 40) ? ((batteryLevel <= 20) ? `bg-danger` :
                            `bg-warning`) : `bg-success`;
                        $(`#battery`).addClass(batteryClass).css({
                            "--battery-level": `${batteryLevel}%`
                        });
                        $(`#last_engine`).html((data.last_engine == 1 ? 'On' : 'Off'));
                        let icon = data.vehicle_type == "MOTORBIKE" ? `<i class="fa fa-motorcycle"></i>` :
                            `<i class="fa fa-car"></i>`;
                        if (data.last_engine == 1) {
                            $(`#last_engine_icon`).addClass('text-success');
                        }
                        $(`#last_engine_icon`).html(icon);
                        $(`#last_address`).html(data.last_address);
                        $(`#movement_status`).html(data.movement_status);
                        $(`#last_speed`).html(`${data.last_speed} Kmph`);
                        return response.data;
                    }
                } catch (error) {
                    return null;
                }
            }
            getDevice();
            const swalWithBootstrapButtons = Swal.mixin({
                customClass: {
                    confirmButton: "btn btn-lg btn-primary shadow ms-1",
                    cancelButton: "btn btn-lg btn-light shadow"
                },
                buttonsStyling: false
            });
            $(`.btn-relay`).click((e) => {
                e.preventDefault();
                let btn = $(e.currentTarget),
                    url = btn.attr('href'),
                    btnContent = btn.html(),
                    messageWarning = btn.attr('message-warning');
                btn.html(
                    `<div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div`
                );
                swalWithBootstrapButtons.fire({
                    title: "Peringatan!",
                    text: messageWarning,
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonText: "Ya, lanjutkan!",
                    cancelButtonText: "Tidak, batalkan!",
                    reverseButtons: true
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: url,
                            type: 'POST',
                            dataType: 'json',
                            data: {
                                _token: `{{ csrf_token() }}`,
                                _method: `POST`
                            },
                            success(response) {
                                Swal.fire({
                                    icon: "success",
                                    title: "Perintah sedang dijalankan. Silahkan tunggu, tindakan ini mungkin membutuhkan waktu beberapa saat.",
                                    showConfirmButton: false,
                                    timer: 4000
                                });
                            },
                            error(xhr) {
                                Swal.fire({
                                    icon: "error",
                                    title: "Perintah gagal dijalankan",
                                    showConfirmButton: false,
                                    timer: 4000
                                });
                            }
                        });
                    };
                    btn.html(btnContent);
                });
            });
        });
    </script>
@endpush