@extends('vehicles.layouts.master')
@section('page_content')
@php
    $image_url = $vehicleDetail->version->image_url;
    $image  = strpos($image_url, 'uploads/vehicle/models') !== false ? $baseUrl."/storage/".$image_url : $image_url ?? 'N/A';
@endphp
<div class="profile-foreground position-relative mx-n4 mt-n4">
    <div class="profile-wid-bg">
        <img src="{{ URL::asset($image) }}" alt="" class="profile-wid-img" />
    </div>
</div>
<div class="pt-4 mb-4 mb-lg-3 pb-lg-4 profile-wrapper">
    <div class="row g-4">
        <div class="col-auto">
            <img src="{{ URL::asset($image) }}" alt="user-img" class="rounded" width="200" />
        </div>
        <div class="col">
            <div class="p-2">
                <h3 class="text-white mb-1">{{ Str::limit($vehicleDetail->name ?: 'N/A', 100, '..') }}</h3>
                <p class="text-white text-opacity-75">{{ Str::upper($vehicleDetail->plate_number) }}</p>
                <div class="hstack text-white gap-1">
                    <div class="me-2"><i class="ri-car-fill me-1 text-white text-opacity-75 fs-16 align-middle"></i>{{$vehicleDetail->version->year->model->brand->name . ' ' . $vehicleDetail->version->year->model->name}}</div>
                    <div>
                        <i class="ri-building-line me-1 text-white text-opacity-75 fs-16 align-middle"></i>{{ $vehicleDetail->lastFleet->fleet->name ?? 'N/A' }}
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-auto order-last order-lg-0">
            <div class="row text text-white-50 text-center">
                <div class="col-lg-12 col-12">
                    <div class="p-2">
                        <p class="fs-14 mb-1">@Lang('translation.contents.odometer')</p>
                        <h4 class="text-white mb-0">{{ $vehicleDetail->lastOdometer->value ?? '0' }} km</h4>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-12">
        <div>
            <div class="d-flex profile-wrapper">
                <ul class="nav nav-pills animation-nav profile-nav gap-2 gap-lg-3 flex-grow-1" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link fs-14 active" data-bs-toggle="tab" href="#overview" role="tab">
                            <i class="ri-airplay-fill d-inline-block d-md-none"></i> 
                            <span class="d-none d-md-inline-block">@Lang('translation.contents.overview')</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link fs-14" data-bs-toggle="tab" href="#informations" role="tab">
                            <i class="ri-list-unordered d-inline-block d-md-none"></i> 
                            <span class="d-none d-md-inline-block">@Lang('translation.contents.informations')</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link fs-14" data-bs-toggle="tab" href="#maintenance" role="tab">
                            <i class="ri-list-unordered d-inline-block d-md-none"></i> 
                            <span class="d-none d-md-inline-block">@lang('translation.contents.maintenance')</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link fs-14" data-bs-toggle="tab" href="#fuel" role="tab">
                            <i class="ri-folder-4-line d-inline-block d-md-none"></i> 
                            <span class="d-none d-md-inline-block">@Lang('translation.contents.refueling')</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link fs-14" data-bs-toggle="tab" href="#services" role="tab">
                            <i class="ri-folder-4-line d-inline-block d-md-none"></i> 
                            <span class="d-none d-md-inline-block">@Lang('translation.contents.services')</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link fs-14" data-bs-toggle="tab" href="#renewals" role="tab">
                            <i class="ri-folder-4-line d-inline-block d-md-none"></i> 
                            <span class="d-none d-md-inline-block">@Lang('translation.contents.renewals')</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link fs-14" data-bs-toggle="tab" href="#inspections" role="tab">
                            <i class="ri-folder-4-line d-inline-block d-md-none"></i> 
                            <span class="d-none d-md-inline-block">@Lang('translation.contents.inspections')</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <div class="dropdown card-header-dropdown">
                            <a class="nav-link fs-14" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="ri-more-line d-inline-block d-md-none"></i> <span class="d-none d-md-inline-block">@Lang('translation.contents.more')</span>
                            </a>
                            <div class="dropdown-menu dropdown-menu-end">
                                <a class="dropdown-item" data-bs-toggle="tab" href="#documents" role="tab">@Lang('translation.contents.documents')</a>
                                <a class="dropdown-item" data-bs-toggle="tab" href="#odometer" role="tab">@Lang('translation.contents.odometer')</a>
                                <a class="dropdown-item" data-bs-toggle="tab" href="#acquisitions" role="tab">@Lang('translation.contents.acquisitions')</a>
                                <a class="dropdown-item" data-bs-toggle="tab" href="#assignments" role="tab">@Lang('translation.contents.assignments')</a>
                                <a class="dropdown-item" data-bs-toggle="tab" href="#expenses" role="tab">@Lang('translation.contents.expenses')</a>
                                <a class="dropdown-item" data-bs-toggle="tab" href="#issues" role="tab">@Lang('translation.contents.issues')</a>
                                <a class="dropdown-item" data-bs-toggle="tab" href="#incidents" role="tab">@Lang('translation.contents.incidents')</a>
                                <!--a class="dropdown-item" data-bs-toggle="tab" href="#tasks" role="tab">@Lang('translation.contents.tasks')</a-->
                                <!--a class="dropdown-item" data-bs-toggle="tab" href="#highway_toll" role="tab">@Lang('translation.contents.highway_toll')</a-->
                                <a class="dropdown-item" data-bs-toggle="tab" href="#specifications" role="tab">@Lang('translation.contents.specifications')</a>
                            </div>
                        </div>

                    </li>
                </ul>
            </div>
            <div class="tab-content pt-4 text-muted">
                <div class="tab-pane active" id="overview" role="tabpanel">@include('vehicles.details_tabs.overview')</div>
                <div class="tab-pane fade" id="informations" role="tabpanel">@include('vehicles.details_tabs.informations')</div>
                <div class="tab-pane fade" id="specifications" role="tabpanel">@include('vehicles.details_tabs.specifications')</div>
                <div class="tab-pane fade" id="documents" role="tabpanel">@include('vehicles.details_tabs.documents')</div>
                <div class="tab-pane fade" id="odometer" role="tabpanel">@include('vehicles.details_tabs.odometer')</div>
                <div class="tab-pane fade" id="fuel" role="tabpanel">@include('vehicles.details_tabs.fuel')</div>
                <div class="tab-pane fade" id="acquisitions" role="tabpanel">@include('vehicles.details_tabs.acquisitions')</div>
                <div class="tab-pane fade" id="assignments" role="tabpanel">@include('vehicles.details_tabs.assignments')</div>
                <div class="tab-pane fade" id="expenses" role="tabpanel">@include('vehicles.details_tabs.expenses')</div>
                <div class="tab-pane fade" id="services" role="tabpanel">@include('vehicles.details_tabs.services')</div>
                <div class="tab-pane fade" id="renewals" role="tabpanel">@include('vehicles.details_tabs.renewals')</div>
                <div class="tab-pane fade" id="maintenance" role="tabpanel">@include('vehicles.details_tabs.maintenance')</div>
                <div class="tab-pane fade" id="inspections" role="tabpanel">@include('vehicles.details_tabs.inspections')</div>
                <div class="tab-pane fade" id="issues" role="tabpanel">@include('vehicles.details_tabs.issues')</div>
                <div class="tab-pane fade" id="incidents" role="tabpanel">@include('vehicles.details_tabs.incidents')</div>
                <!--div class="tab-pane fade" id="tasks" role="tabpanel">@include('vehicles.details_tabs.tasks')</div-->
                <!--div class="tab-pane fade" id="highway_toll" role="tabpanel">@include('vehicles.details_tabs.highway_toll')</div-->
            </div>
        </div>
    </div>
</div>
<div id="vehicle_detail_id" data-id="{{ $vehicleDetail->uuid }}" style="display: none;"></div>
@endsection 

@section('custom_scripts')
    <script src="{{ URL::asset('build/js/apps/vehicles/details.overview.js') }}"></script>
    <script src="{{ URL::asset('build/js/apps/vehicles/details.informations.js') }}"></script>
    <script src="{{ URL::asset('build/js/apps/vehicles/details.specifications.js') }}"></script>
    <script src="{{ URL::asset('build/js/apps/vehicles/details.documents.js') }}"></script>
    <script src="{{ URL::asset('build/js/apps/vehicles/details.odometer.js') }}"></script>
    <script src="{{ URL::asset('build/js/apps/vehicles/details.fuel.js') }}"></script>
    <script src="{{ URL::asset('build/js/apps/vehicles/details.acquisitions.js') }}"></script>
    <script src="{{ URL::asset('build/js/apps/vehicles/details.assignments.js') }}"></script>
    <script src="{{ URL::asset('build/js/apps/vehicles/details.expenses.js') }}"></script>
    <script src="{{ URL::asset('build/js/apps/vehicles/details.services.js') }}"></script>
    <script src="{{ URL::asset('build/js/apps/vehicles/details.renewals.js') }}"></script>
    <script src="{{ URL::asset('build/js/apps/vehicles/details.maintenance.js') }}"></script>
    <script src="{{ URL::asset('build/js/apps/vehicles/details.inspections.js') }}"></script>
    <script src="{{ URL::asset('build/js/apps/vehicles/details.issues.js') }}"></script>
    <script src="{{ URL::asset('build/js/apps/vehicles/details.incidents.js') }}"></script>
    <script src="{{ URL::asset('build/js/apps/vehicles/details.tasks.js') }}"></script>
    <script src="{{ URL::asset('build/js/apps/vehicles/details.highway_toll.js') }}"></script>
@endsection