@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-refresh"></i>
</a>
@endsection

@section('content')
<div class="w-100 h-100 overflow-y-auto position-relative">
    <div class="w-100 overflow-y-auto h-100" style="padding-bottom:64px;">
        <div class="container pt-3">
            <div id="vehicles" class="row"></div>
        </div>
    </div>
    <div class="position-absolute bottom-0 start-0 w-100 bg-light bg-opacity-75">
        <div class="container py-2">
            <input id="search" type="search" class="form-control form-control-lg rounded-pill" placeholder="Search ..."/>
        </div>
    </div>
</div>
@endsection

@push('js')
<script>
$(()=>{
    'use strict'
    const USER_ID = String(`{{ auth()->user()->profile->foxlogger_id ?? '' }}`).trim();
    function cardPlaceholder(){
        let html = ``;
        for(let i = 0; i < 3; i++){
            html +=`
            <div class="col-md-4">
                <div class="card border-0 rounded-0 shadow mb-3">
                    <div class="card-body">
                        <h5 class="card-title placeholder-glow">
                            <span class="placeholder col-6"></span>
                        </h5>
                        <p class="card-text placeholder-glow">
                            <span class="placeholder col-7"></span>
                            <span class="placeholder col-4"></span>
                        </p>
                    </div>
                </div>    
            </div>
            `;
        }
        $(`#vehicles`).html(`${html}`);
    };
    $.ajax({
        url : `https://api-v2.foxlogger.app/user_datas?imei.like=user_id:${USER_ID}`,
        headers : {
            'Content-Type'  : 'application/json',
            'Accept'        : 'application/json',
            'Authorization' : 'Bearer 023khjsdH7123j30-whjdf1-0sadkD2023jh43-0dfkvu123G712j0dfkj3'
        },
        beforeSend(){
            cardPlaceholder();
        },
        success(response){
            let html = ``;
            response.data.forEach((row)=>{
                let batteryLevel = 20 * row.last_battery;
                let batteryClass = (batteryLevel <= 40) ? ((batteryLevel <= 20) ? `bg-danger` : `bg-warning`) : `bg-success`;
                let lastUpdate = moment.duration(moment(row.last_time).diff(new Date(), 'minutes'), "minutes").locale('en').humanize(true);
                html += `
                <div class="col-md-4">
                    <div class="card border-0 shadow mb-3">
                        <div class="card-body">
                            <div class="row align-items-center">
                                <div class="col-8 text-align-center">
                                    <div class="d-flex align-items-center">
                                        <div class="text-secondary me-3">
                                            <img src="{{ asset('statics/images/vehicles.png') }}" width="50px">
                                        </div>
                                        <div class="lh-1">
                                            <p class="fw-bold m-0">${row.gps_name}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="row g-1">
                                        <div class="col-6">
                                            <a href="tel:${String(row.simcard_number).replace(/(^0)+[0-9]/i, '+62')}" class="btn btn-light shadow w-100 p-1">
                                                <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-6">
                                            <a href="{{ route('platform.vehicles.index') }}/${row.imei}" class="btn btn-light shadow w-100 p-1">
                                                <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-info"></i>
                                                            <p class="m-0" style="font-size:.5rem;">Info</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <ul class="list-unstyled mt-3 mb-0">
                                <li class="d-flex justify-content-between align-items-start">
                                    <span>Battery</span>
                                    <span>
                                        <div device-battery class="battery ${batteryClass}" style="--battery-level:${batteryLevel}%;"></div>
                                    </span>
                                </li>
                                <li class="d-flex justify-content-between align-items-start">
                                    <span>Engine</span>
                                    <span device-last-engine>${row.last_engine ? 'On' : 'Off'}</span>
                                </li>
                                <li class="d-flex justify-content-between align-items-start">
                                    <span>Movement</span>
                                    <span device-movement-status>${row.movement_status}</span>
                                </li>
                                <li class="d-flex justify-content-between align-items-start">
                                    <span>Engine</span>
                                    <span device-last-speed>${row.last_speed} Kmph</span>
                                </li>
                                <li class="d-flex justify-content-between align-items-start">
                                    <span>Last Update</span>
                                    <span>${lastUpdate}</span>
                                </li>
                            </ul> 
                        </div>
                    </div>
                </div>
                `;
            });
            $(`#vehicles`).html(html);
        }
    });
    $('#search').on('keyup change search', (e)=>{
        let term = $(e.target).val();
        if(term != ''){
            $(`#vehicles > div`).not(`:contains("${term}")`).hide();
        } else {
            $(`#vehicles`).children().show();
        }
    });
});
</script>
@endpush