@extends('layouts.master')

@section('title', 'Camions / Détails')

@section('content')
    <div class="row">
        <div class="col-md-8">
            <section class="section">
                <h1 class="section-header">
                    <div>
                        <i class="ion ion-android-options"></i>
                        @yield('title')
                    </div>
                </h1>
            </section>
        </div>

        <div class="col-md-4">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('home') }}">Tableau de bord</a></li>
                <li class="breadcrumb-item"><a href="{{ route('camion.index') }}">Camions</a></li>
                <li class="breadcrumb-item active" aria-current="page">Détails</li>
                </ol>
            </nav>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4 col-sm-12">
                            <img src="{{ asset('dist/img/camion-staroil.jpg') }}" alt="Camion" style="width: 350px">
                            <p class="bg-primary p-2 text-white text-center" style="font-weight: bold">{{ $camion->numero_immatriculation }}</p>
                        </div>

                        <div class="col-md-8 col-sm-12" style="margin-top: 1.5rem">
                            <div class="table-responsive">
                                <table class="table table-bordered">
                                    <tr>
                                        <th>Modèle Tracteur</th>
                                        <th>{{ $camion->modele_tracteur }}</th>
                                    </tr>
                                    <tr>
                                        <th>Chassis Tracteur</th>
                                        <th>{{ $camion->numero_chassis }}</th>
                                    </tr>
                                    <tr>
                                        <th>Date mise en circulation Tracteur</th>
                                        <th>{{ \Carbon\Carbon::parse($camion->date_mise_circulation)->format('d/m/Y') }}</th>
                                    </tr>
                                    <tr>
                                        <th>Chassis Citerne</th>
                                        <th>{{ $camion->numero_chassis_citerne }}</th>
                                    </tr>
                                    <tr>
                                        <th>Date mise en circulation Citerne</th>
                                        <th>{{ \Carbon\Carbon::parse($camion->date_mise_circulation_citerne)->format('d/m/Y') }}</th>
                                    </tr>
                                    <tr>
                                        <th>Capacité</th>
                                        <th>{{ $camion->capacite_citerne }}</th>
                                    </tr>
                                    <tr>
                                        <th>Chauffeur</th>
                                        <th>{{ $response[0]['name'] ?? 'N/A' }}</th>
                                    </tr>
                                </table>
                            </div>
                        </div>

                        <div class="col-md-12">
                            <gmp-map
                                center="{{ $response[0]['latitude'] ?? 0 }}, {{ $response[0]['longitude'] ?? 0 }}"
                                zoom="4"
                                map-id="DEMO_MAP_ID"
                                style="height: 300px"
                            >
                                <gmp-advanced-marker
                                    position="{{ $response[0]['latitude'] ?? 0 }}, {{ $response[0]['longitude'] ?? 0 }}"
                                    title="Star oil"
                                ></gmp-advanced-marker>
                            </gmp-map>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection