@extends('admin.layout.master')

@php
    $statusBadge = match ($scooter->status) {
        App\Enums\ScooterStatus::ACTIVE => 'success',
        App\Enums\ScooterStatus::IN_RIDE => 'primary',
        App\Enums\ScooterStatus::MAINTENANCE => 'warning',
        App\Enums\ScooterStatus::OUT_OF_SERVICE => 'danger',
        default => 'secondary',
    };

    $formatCoord = ($scooter->lat && $scooter->lng)
        ? number_format($scooter->lat, 6) . ', ' . number_format($scooter->lng, 6)
        : null;

    $mapsUrl = $formatCoord
        ? 'https://www.google.com/maps?q=' . $scooter->lat . ',' . $scooter->lng
        : null;

    $avgDuration = (int) ($stats['avg_duration_seconds'] ?? 0);
    $avgDurationFormatted = sprintf('%02d:%02d', intdiv($avgDuration, 60), $avgDuration % 60);
@endphp

@section('css')
    @if($formatCoord)
    <x-vendor.leaflet-css />
    <style>
        #scooter-show-map {
            width: 100%;
            height: 320px;
            border-radius: .5rem;
            position: relative;
            z-index: 0;
            background: #e8e8e8;
        }

        #scooter-show-map.leaflet-container .leaflet-tile-pane img,
        #scooter-show-map.leaflet-container img.leaflet-tile {
            max-width: none !important;
            max-height: none !important;
        }
    </style>
    @endif
@endsection

@section('content')
<div class="content-body">
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center flex-wrap">
            <div>
                <h4 class="mb-0">{{ __('admin.show_scooter') }}</h4>
                <small class="text-muted">{{ $scooter->code }}</small>
            </div>
            <div class="d-flex align-items-center mt-1 mt-md-0">
                <span class="badge badge-{{ $statusBadge }} mr-1">
                    {{ __('apis.scooter_status.' . $scooter->status) }}
                </span>
                <span class="lock-scooter btn btn-outline-secondary btn-sm mr-1" data-id="{{ $scooter->id }}">
                    <i class="feather icon-lock"></i> {{ __('admin.lock') }}
                </span>
                <span class="unlock-scooter btn btn-outline-success btn-sm mr-1" data-id="{{ $scooter->id }}">
                    <i class="feather icon-unlock"></i> {{ __('admin.unlock') }}
                </span>
                <a href="{{ route('admin.scooters.edit', $scooter->id) }}" class="btn btn-info btn-sm mr-1">{{ __('admin.edit') }}</a>
                <a href="{{ route('admin.scooters.index') }}" class="btn btn-outline-primary btn-sm">{{ __('admin.back') }}</a>
            </div>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-lg-4 col-md-5 mb-2 text-center">
                    <img src="{{ $scooter->image }}" alt="{{ $scooter->code }}" class="img-thumbnail rounded" style="max-width: 220px; max-height: 220px; object-fit: cover;">
                    <div class="mt-2">
                        <progress class="w-100" value="{{ $scooter->battery_percent }}" max="100" style="height: 10px;" aria-label="{{ __('admin.battery') }}: {{ $scooter->battery_percent }}%"></progress>
                        <small class="text-muted">{{ __('admin.battery') }}: {{ $scooter->battery_percent }}%</small>
                    </div>
                </div>

                <div class="col-lg-8 col-md-7">
                    <h5 class="mb-1">{{ __('admin.main_data') }}</h5>
                    <div class="row mb-2">
                        <div class="col-md-6 mb-1">
                            <strong>{{ __('admin.scooter_code') }}:</strong> {{ $scooter->code }}
                        </div>
                        <div class="col-md-6 mb-1">
                            <strong>{{ __('admin.model') }}:</strong> {{ $scooter->model ?? '—' }}
                        </div>
                        <div class="col-md-6 mb-1">
                            <strong>{{ __('admin.serial_number') }}:</strong> {{ $scooter->serial_number ?? '—' }}
                        </div>
                        <div class="col-md-6 mb-1">
                            <strong>{{ __('admin.km_can_run') }}:</strong> {{ $scooter->km_can_run }} km
                        </div>
                        <div class="col-md-6 mb-1">
                            <strong>{{ __('admin.city') }}:</strong> {{ $scooter->city?->name ?? '—' }}
                        </div>
                        <div class="col-md-6 mb-1">
                            <strong>{{ __('admin.provider') }}:</strong>
                            @if($scooter->provider)
                                <a href="{{ route('admin.providers.show', $scooter->provider->id) }}">{{ $scooter->provider->name }}</a>
                            @else
                                {{ __('admin.unassigned') }}
                            @endif
                        </div>
                        <div class="col-md-6 mb-1">
                            <strong>{{ __('admin.assigned_at') }}:</strong>
                            {{ $scooter->assigned_at?->format('Y-m-d H:i') ?? '—' }}
                        </div>
                        <div class="col-md-6 mb-1">
                            <strong>{{ __('admin.last_used_at') }}:</strong>
                            @if($scooter->last_used_at)
                                {{ $scooter->last_used_at->format('Y-m-d H:i') }}
                            @else
                                <span class="text-danger">{{ __('admin.scooter_not_used_yet') }}</span>
                            @endif
                        </div>
                        <div class="col-md-6 mb-1">
                            <strong>{{ __('admin.created_at') }}:</strong>
                            {{ $scooter->created_at?->format('Y-m-d H:i') ?? '—' }}
                        </div>
                    </div>

                    <h5 class="mb-1 mt-1">{{ __('admin.location_information') }}</h5>
                    <div class="row mb-2">
                        <div class="col-md-12 mb-1">
                            <strong>{{ __('admin.coordinates') }}:</strong>
                            @if($formatCoord)
                                {{ $formatCoord }}
                                <a href="{{ $mapsUrl }}" target="_blank" rel="noopener" class="btn btn-sm btn-outline-primary ml-1">
                                    {{ __('admin.open_in_maps') }}
                                </a>
                            @else
                                {{ __('admin.current_location_not_available') }}
                            @endif
                        </div>
                        @if($formatCoord)
                            <div class="col-md-12 mb-1">
                                <div id="scooter-show-map"></div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            <hr>

            <h5 class="mb-1">{{ __('admin.fleet_statistics') }}</h5>
            <div class="row mb-2">
                <div class="col-md-3 col-6 mb-1">
                    <div class="border rounded p-1 text-center">
                        <small class="text-muted d-block">{{ __('admin.rides_count') }}</small>
                        <strong>{{ number_format($scooter->rides_count) }}</strong>
                    </div>
                </div>
                <div class="col-md-3 col-6 mb-1">
                    <div class="border rounded p-1 text-center">
                        <small class="text-muted d-block">{{ __('admin.completed_rides') }}</small>
                        <strong>{{ number_format($scooter->completed_rides_count) }}</strong>
                    </div>
                </div>
                <div class="col-md-3 col-6 mb-1">
                    <div class="border rounded p-1 text-center">
                        <small class="text-muted d-block">{{ __('admin.total_revenue') }}</small>
                        <strong>{{ number_format($stats['total_revenue'], 2) }} {{ __('admin.sar') }}</strong>
                    </div>
                </div>
                <div class="col-md-3 col-6 mb-1">
                    <div class="border rounded p-1 text-center">
                        <small class="text-muted d-block">{{ __('admin.avg_duration') }}</small>
                        <strong>{{ $avgDuration > 0 ? $avgDurationFormatted : '—' }}</strong>
                    </div>
                </div>
                <div class="col-md-3 col-6 mb-1">
                    <div class="border rounded p-1 text-center">
                        <small class="text-muted d-block">{{ __('admin.distance') }}</small>
                        <strong>{{ number_format($stats['total_distance_km'], 2) }} km</strong>
                    </div>
                </div>
            </div>

            <hr>

            <h5 class="mb-1">{{ __('admin.scooter_action_history') }}</h5>
            <div id="scooter-action-history" data-section="action_histories">
                @include('admin.scooters.parts.action_histories', ['actionHistories' => $actionHistories])
            </div>

            <hr>

            <h5 class="mb-1">{{ __('admin.recent_rides') }}</h5>
            <div id="scooter-recent-rides" data-section="recent_rides">
                @include('admin.scooters.parts.recent_rides', ['rides' => $rides])
            </div>
        </div>
    </div>
</div>
@endsection

@section('js')
@if($formatCoord)
<x-vendor.leaflet-js />
@endif
<script src="{{ asset('admin/app-assets/vendors/js/extensions/sweetalert2.all.min.js') }}"></script>
<script src="{{ asset('admin/app-assets/js/scripts/extensions/sweet-alerts.js') }}"></script>
<script>
    @if($formatCoord)
    (function () {
        'use strict';

        const lat = @json($scooter->lat);
        const lng = @json($scooter->lng);
        const tileUrl = globalThis.BEEB_OSM_TILE_URL || 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
        const scooterIcon = L.icon({
            iconUrl: @json(asset('admin/assets/images/scooter-loader.png')),
            iconSize: [42, 42],
            iconAnchor: [21, 42],
            popupAnchor: [0, -42],
        });
        const map = L.map('scooter-show-map').setView([lat, lng], 15);

        L.tileLayer(tileUrl, {
            subdomains: ['a', 'b', 'c'],
            maxZoom: 19,
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
        }).addTo(map);

        L.marker([lat, lng], { icon: scooterIcon })
            .addTo(map)
            .bindPopup(@json($scooter->code));

        map.whenReady(function () {
            map.setView([lat, lng], 15);
            map.invalidateSize();
        });

        $(window).on('load', function () {
            map.invalidateSize();
        });

        setTimeout(function () { map.invalidateSize(); }, 2800);
    })();
    @endif
</script>
<script>

    function sendScooterLockCommand(id, action) {

        const url = action === 'lock'
            ? '{{ url('admin/scooters') }}/' + id + '/lock'
            : '{{ url('admin/scooters') }}/' + id + '/unlock';

        Swal.fire({
            title: "{{ __('admin.are_you_want_to_continue') }}",
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: "{{ __('admin.confirm') }}",
            confirmButtonClass: 'btn btn-primary',
            cancelButtonText: "{{ __('admin.cancel') }}",
            cancelButtonClass: 'btn btn-danger ml-1',
            buttonsStyling: false,
        }).then((result) => {
            if (!result.value) {
                return;
            }

            $.ajax({
                type: 'post',
                url: url,
                dataType: 'json',
                success: function(response) {
                    if (response.key === 'unauthorized') {
                        Swal.fire({
                            position: 'top-start',
                            type: 'warning',
                            title: response.msg || "{{ __('auth.not_authorized') }}",
                            showConfirmButton: false,
                            timer: 2000,
                            buttonsStyling: false,
                        });
                        return;
                    }

                    Swal.fire({
                        position: 'top-start',
                        type: 'success',
                        title: response.message,
                        showConfirmButton: false,
                        timer: 1500,
                        buttonsStyling: false,
                    });
                },
                error: function(xhr) {
                    const json = xhr.responseJSON || {};
                    Swal.fire({
                        position: 'top-start',
                        type: 'warning',
                        title: json.message || json.msg || xhr.statusText,
                        showConfirmButton: false,
                        timer: 2000,
                        buttonsStyling: false,
                    });
                }
            });
        });
    }

    $(document).on('click', '.lock-scooter', function(e) {
        e.preventDefault();
        sendScooterLockCommand($(this).data('id'), 'lock');
    });

    $(document).on('click', '.unlock-scooter', function(e) {
        e.preventDefault();
        sendScooterLockCommand($(this).data('id'), 'unlock');
    });

    function appendSectionParam(url, section) {
        if (url.indexOf('section=') > -1) {
            return url;
        }

        return url + (url.indexOf('?') > -1 ? '&' : '?') + 'section=' + section;
    }

    function loadScooterShowSection(container, url) {
        $.ajax({
            url: url,
            type: 'GET',
            dataType: 'json',
            success: function(response) {
                container.html(response.html);
            },
        });
    }

    $(document).on('click', '#scooter-action-history .pagination a', function(e) {
        e.preventDefault();

        var container = $('#scooter-action-history');
        var url = appendSectionParam($(this).attr('href'), container.data('section'));

        loadScooterShowSection(container, url);
    });

    $(document).on('click', '#scooter-recent-rides .pagination a', function(e) {
        e.preventDefault();

        var container = $('#scooter-recent-rides');
        var url = appendSectionParam($(this).attr('href'), container.data('section'));

        loadScooterShowSection(container, url);
    });

</script>
@endsection