@extends('layout.app')

@section('title')
    {{ __('Vehicules') }}
@endsection

@push('styles')
    <link rel="stylesheet" type="text/css" href="{{ asset('modern-admin/app-assets/vendors/css/tables/datatable/datatables.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('modern-admin/app-assets/vendors/css/tables/extensions/buttons.dataTables.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('modern-admin/app-assets/vendors/css/tables/datatable/buttons.bootstrap4.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('modern-admin/app-assets/vendors/css/tables/datatable/select.dataTables.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('modern-admin/app-assets/vendors/css/tables/extensions/responsive.dataTables.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('modern-admin/app-assets/vendors/css/tables/extensions/colReorder.dataTables.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('modern-admin/app-assets/vendors/css/tables/extensions/fixedHeader.dataTables.min.css') }}">
    <style>
        table.dataTable.no-footer {
            border-bottom: none !important;
        }
    </style>
    <style>
        .vehicule-info-card {
            border: none;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
            border-radius: 15px;
            overflow: hidden;
        }
        
        .vehicule-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }
        
        .vehicule-header i {
            font-size: 4rem;
            margin-bottom: 15px;
        }
        
        .vehicule-title {
            font-size: 1.8rem;
            font-weight: 600;
            margin-bottom: 5px;
        }
        
        .vehicule-subtitle {
            font-size: 1.1rem;
            opacity: 0.9;
        }
        
        .status-badge {
            display: inline-block;
            padding: 8px 20px;
            border-radius: 50px;
            font-weight: 600;
            font-size: 0.9rem;
            margin-top: 15px;
        }
        
        .status-active {
            background: #28a745;
            color: white;
        }
        
        .status-inactive {
            background: #dc3545;
            color: white;
        }
        
        .info-section {
            padding: 30px;
        }
        
        .info-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 25px;
        }
        
        .info-item {
            border-bottom: 1px solid #eee;
            padding-bottom: 15px;
        }
        
        .info-label {
            color: #666;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 5px;
        }
        
        .info-value {
            color: #333;
            font-size: 1.2rem;
            font-weight: 600;
        }
        
        .info-value i {
            color: #667eea;
            margin-right: 8px;
            font-size: 1.1rem;
        }
        
        .section-title {
            font-size: 1.3rem;
            font-weight: 600;
            color: #333;
            margin: 30px 0 20px 0;
            padding-bottom: 10px;
            border-bottom: 2px solid #667eea;
        }
        
        .description-box {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
            margin-top: 20px;
        }
        
        .description-text {
            color: #555;
            line-height: 1.8;
            font-size: 1rem;
        }
        
        .meta-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #f8f9fa;
            padding: 15px 25px;
            border-radius: 10px;
            margin-top: 25px;
        }
        
        .meta-item {
            text-align: center;
        }
        
        .meta-label {
            color: #666;
            font-size: 0.85rem;
            text-transform: uppercase;
        }
        
        .meta-value {
            color: #333;
            font-weight: 600;
            margin-top: 5px;
        }
        
        .assoc-card {
            background: white;
            border: 1px solid #eee;
            border-radius: 10px;
            padding: 20px;
            transition: all 0.3s ease;
        }
        
        .assoc-card:hover {
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.2);
            border-color: #667eea;
        }
        
        .assoc-name {
            font-size: 1.2rem;
            font-weight: 600;
            color: #333;
            margin-bottom: 10px;
        }
        
        .assoc-detail {
            color: #666;
            font-size: 0.95rem;
            margin-bottom: 5px;
        }
        
        .assoc-detail i {
            color: #667eea;
            width: 20px;
            margin-right: 8px;
        }
    </style>
@endpush

@section('active_vehicules', 'active')
@section('data_col', '2-columns')
@section('body_class', '2-columns')

@section('content')
<div class="app-content content">
    <div class="content-overlay"></div>
    <div class="content-wrapper">
        <div class="content-header row mb-1">
            <div class="content-header-left col-md-6 col-12 breadcrumb-new">
                <h3 class="content-header-title mb-0 d-inline-block">{{ __('Vehicules')}}</h3>
                <div class="row breadcrumbs-top d-inline-block">
                    <div class="breadcrumb-wrapper col-12">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item">{{ __('Détail') }}</li>
                            <li class="breadcrumb-item active">{{$vehicule->reference}}</li>
                        </ol>
                    </div>
                </div>
            </div>
            <div class="content-header-right col-md-6 col-12">
                <div class="btn-group float-msm-right">
                    <a class="btn btn-dark" href="{{ route('vehicules.index') }}">
                        <i class="la la-arrow-left"></i> {{ __('Retour') }}
                    </a>
                    @can('edit_vehicules')
                        <a class="btn btn-info ml-1" href="{{ route('vehicules.edit', $vehicule->id) }}">
                            <i class="la la-edit"></i> {{ __('Modifier') }}
                        </a>
                    @endcan
                </div>
            </div>
        </div>
        <div class="content-body pb-5">
            <section id="page-account-settings">
                <div class="row">
                    <div class="col-md-2 mb-2 mb-md-0">
                        <ul class="nav nav-pills flex-column mt-md-0 mt-1 bg-white shadow-sm">
                            <li class="nav-item">
                                <a class="nav-link d-flex active" id="account-pill-general" data-toggle="pill" href="#account-vertical-general" aria-expanded="true">
                                    {{ __("Informations")}}
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link d-flex" id="account-pill-password" data-toggle="pill" href="#account-vertical-password" aria-expanded="false">
                                    {{ __("Trips")}}
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="col-md-10">
                        <div class="card">
                            <div class="card-content">
                                <div class="card-body">
                                    <div class="tab-content">
                                        <div role="tabpanel" class="tab-pane active" id="account-vertical-general" aria-labelledby="account-pill-general" aria-expanded="true">
                                            <div class="row">
                                                <div class="col-12">
                                                    <div class="card vehicule-info-card">
                                                        <div class="info-section">
                                                            <div class="info-grid">
                                                                <div class="info-item">
                                                                    <div class="info-label">{{ __('Immatriculation') }}</div>
                                                                    <div class="info-value">
                                                                        <i class="la la-car"></i>
                                                                        {{ $vehicule->immatriculation }}
                                                                    </div>
                                                                </div>
                                                                <div class="info-item">
                                                                    <div class="info-label">{{ __('Marque') }}</div>
                                                                    <div class="info-value">
                                                                        <i class="la la-tag"></i>
                                                                        {{ $vehicule->marque }}
                                                                    </div>
                                                                </div>
                                                                <div class="info-item">
                                                                    <div class="info-label">{{ __('Modèle') }}</div>
                                                                    <div class="info-value">
                                                                        <i class="la la-cube"></i>
                                                                        {{ $vehicule->modele }}
                                                                    </div>
                                                                </div>
                                                                <div class="info-item">
                                                                    <div class="info-label">{{ __('Année') }}</div>
                                                                    <div class="info-value">
                                                                        <i class="la la-calendar"></i>
                                                                        {{ $vehicule->annee }}
                                                                    </div>
                                                                </div>
                                                                <div class="info-item">
                                                                    <div class="info-label">{{ __('Nombre de places') }}</div>
                                                                    <div class="info-value">
                                                                        <i class="la la-users"></i>
                                                                        {{ $vehicule->nombre_places }}
                                                                    </div>
                                                                </div>
                                                                <div class="info-item">
                                                                    <div class="info-label">{{ __('Status') }}</div>
                                                                    <div class="info-value">
                                                                        <span class="badge badge-{{ $vehicule->is_active ? 'success' : 'danger' }}">{{ $vehicule->is_active ? __('Actif') : __('Inactif') }}</span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <h3 class="section-title">{{ __('Description') }}</h3>
                                                            <div class="description-box">
                                                                <p class="description-text">
                                                                    {{ $vehicule->description ?: __('Aucune description disponible') }}
                                                                </p>
                                                            </div>
                                                            <h3 class="section-title">{{ __('Associations') }}</h3>
                                                            <div class="row">
                                                                <!-- Site associé -->
                                                                <div class="col-md-6">
                                                                    <div class="assoc-card">
                                                                        <div class="assoc-name">
                                                                            <i class="la la-building"></i>
                                                                            {{ __('Site') }}
                                                                        </div>
                                                                        @if($vehicule->site)
                                                                            <div class="assoc-detail">
                                                                                <i class="la la-map-marker"></i>
                                                                                {{ $vehicule->site->name ?? '' }}
                                                                            </div>
                                                                        @else
                                                                            <p class="text-muted">{{ __('Aucun site associé') }}</p>
                                                                        @endif
                                                                    </div>
                                                                </div>
                                                                
                                                                <!-- Médiateur associé -->
                                                                <div class="col-md-6">
                                                                    <div class="assoc-card">
                                                                        <div class="assoc-name">
                                                                            <i class="la la-user"></i>
                                                                            {{ __('Médiateur') }}
                                                                        </div>
                                                                        @if($vehicule->mediateur && $vehicule->mediateur->employe)
                                                                            <div class="assoc-detail">
                                                                                <i class="la la-user-circle"></i>
                                                                                {{ $vehicule->mediateur->employe->first_name ?? '' }} {{ $vehicule->mediateur->employe->last_name ?? '' }}
                                                                            </div>
                                                                            <div class="assoc-detail">
                                                                                <i class="la la-envelope"></i>
                                                                                {{ $vehicule->mediateur->employe->email ?? '' }}
                                                                            </div>
                                                                            <div class="assoc-detail">
                                                                                <i class="la la-phone"></i>
                                                                                {{ $vehicule->mediateur->employe->phone ?? '' }}
                                                                            </div>
                                                                        @else
                                                                            <p class="text-muted">{{ __('Aucun médiateur associé') }}</p>
                                                                        @endif
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="tab-pane fade " id="account-vertical-password" role="tabpanel" aria-labelledby="account-pill-password" aria-expanded="false">
                                            <table class="table table-bordered dataex-res-constructor">
                                                <thead class="text-uppercase text-center text-white bg-teal-maq">
                                                    <tr>
                                                        <th>{{ __('ID') }}</th>
                                                        <th>{{ __('Driver') }}</th>
                                                        <th>{{ __('Nombre de places') }}</th>
                                                        <th>{{ __('Date') }}</th>
                                                        <th>{{ __('Source') }}</th>
                                                        <th>{{ __('Destination') }}</th>
                                                        <th>{{ __('Mediateur') }}</th>
                                                        <th>{{ __('Status') }}</th>
                                                    </tr>
                                                </thead>
                                                <tbody></tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>
@endsection

@push('scripts')
    <script src="{{ asset('modern-admin/app-assets/vendors/js/tables/datatable/datatables.min.js') }}"></script>
    <script src="{{ asset('modern-admin/app-assets/vendors/js/tables/buttons.colVis.min.js') }}"></script>
    <script src="{{ asset('modern-admin/app-assets/vendors/js/tables/datatable/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('modern-admin/app-assets/vendors/js/tables/datatable/dataTables.colReorder.min.js') }}"></script>
    <script src="{{ asset('modern-admin/app-assets/vendors/js/tables/datatable/dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('modern-admin/app-assets/vendors/js/tables/datatable/buttons.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('modern-admin/app-assets/vendors/js/tables/datatable/dataTables.fixedHeader.min.js') }}"></script>
    @include('vehicules.partials.datatable2')
@endpush