@extends('layouts.main')

@section('content')
    <div class="pagetitle">
        <h1>Detail Kendaraan</h1>
        <nav>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="/">Home</a></li>
                <li class="breadcrumb-item"><a href="{{ route('data-kendaraan.index') }}">Data Kendaraan</a></li>
                <li class="breadcrumb-item active">Detail</li>
            </ol>
        </nav>
    </div><!-- End Page Title -->

    <section class="section profile">
        <div class="row">
            <div class="col-xl-4">
                <div class="card">
                    <div class="card-body profile-card pt-4 d-flex flex-column align-items-center">
                        @if($kendaraan->foto_kendaraan)
                            <img src="{{ asset('uploads/kendaraan/' . $kendaraan->id . '/' . $kendaraan->foto_kendaraan) }}" 
                                 alt="Vehicle Photo" class="rounded" style="max-width: 250px; max-height: 250px; object-fit: cover;">
                        @else
                            <div class="d-flex align-items-center justify-content-center rounded bg-light" 
                                 style="width: 250px; height: 200px;">
                                <i class="bi bi-car-front-fill text-muted" style="font-size: 4rem;"></i>
                            </div>
                        @endif
                        
                        <h2 class="mt-3 text-center">{{ $kendaraan->merk }} {{ $kendaraan->type }}</h2>
                        <h3 class="text-muted">{{ $kendaraan->plat_no }}</h3>
                        
                        <div class="mt-2">
                            {!! $kendaraan->status_badge !!}
                        </div>

                        @if($kendaraan->is_primary)
                            <div class="mt-2">
                                <span class="badge bg-warning"><i class="bi bi-star-fill"></i> Kendaraan Utama</span>
                            </div>
                        @endif

                        @if($kendaraan->user)
                            <div class="mt-3 text-center">
                                <h6 class="text-muted">Dimiliki oleh:</h6>
                                <h5><a href="{{ route('data-worker.show', $kendaraan->user_id) }}" class="text-decoration-none">
                                    {{ $kendaraan->user->name }}
                                </a></h5>
                                <small class="text-muted">{{ $kendaraan->user->username }}</small>
                            </div>
                        @else
                            <div class="mt-3 text-center">
                                <h6 class="text-muted">Status:</h6>
                                <span class="badge bg-secondary">Kendaraan Pool</span>
                                <br><small class="text-muted">Tidak dimiliki teknisi tertentu</small>
                            </div>
                        @endif
                    </div>
                </div>

                @if($kendaraan->foto_stnk)
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Foto STNK</h5>
                            <img src="{{ asset('uploads/kendaraan/' . $kendaraan->id . '/' . $kendaraan->foto_stnk) }}" 
                                 alt="STNK Photo" class="img-fluid rounded">
                        </div>
                    </div>
                @endif
            </div>

            <div class="col-xl-8">
                <div class="card">
                    <div class="card-body pt-3">
                        <!-- Bordered Tabs -->
                        <ul class="nav nav-tabs nav-tabs-bordered">
                            <li class="nav-item">
                                <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#detail-overview">
                                    Detail Kendaraan
                                </button>
                            </li>
                            <li class="nav-item">
                                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#vehicle-documents">
                                    Dokumen Kendaraan
                                </button>
                            </li>
                            <li class="nav-item">
                                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#vehicle-history">
                                    Riwayat
                                </button>
                            </li>
                        </ul>
                        
                        <div class="tab-content pt-2">
                            <div class="tab-pane fade show active profile-overview" id="detail-overview">
                                <h5 class="card-title">Informasi Kendaraan</h5>

                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="row mb-2">
                                            <div class="col-lg-4 col-md-4 label fw-bold">Merk</div>
                                            <div class="col-lg-8 col-md-8">{{ $kendaraan->merk ?: '-' }}</div>
                                        </div>

                                        <div class="row mb-2">
                                            <div class="col-lg-4 col-md-4 label fw-bold">Type</div>
                                            <div class="col-lg-8 col-md-8">{{ $kendaraan->type ?: '-' }}</div>
                                        </div>

                                        <div class="row mb-2">
                                            <div class="col-lg-4 col-md-4 label fw-bold">Warna</div>
                                            <div class="col-lg-8 col-md-8">{{ $kendaraan->warna ?: '-' }}</div>
                                        </div>

                                        <div class="row mb-2">
                                            <div class="col-lg-4 col-md-4 label fw-bold">Jenis</div>
                                            <div class="col-lg-8 col-md-8">
                                                <span class="badge bg-info">{{ ucfirst($kendaraan->jenis) }}</span>
                                            </div>
                                        </div>

                                        <div class="row mb-2">
                                            <div class="col-lg-4 col-md-4 label fw-bold">Plat Nomor</div>
                                            <div class="col-lg-8 col-md-8">
                                                <strong class="text-primary">{{ $kendaraan->plat_no ?: '-' }}</strong>
                                            </div>
                                        </div>

                                        <div class="row mb-2">
                                            <div class="col-lg-4 col-md-4 label fw-bold">Tahun</div>
                                            <div class="col-lg-8 col-md-8">{{ $kendaraan->tahun ?: '-' }}</div>
                                        </div>
                                    </div>

                                    <div class="col-lg-6">
                                        <div class="row mb-2">
                                            <div class="col-lg-4 col-md-4 label fw-bold">Kondisi</div>
                                            <div class="col-lg-8 col-md-8">
                                                @if($kendaraan->kondisi == 'baik')
                                                    <span class="badge bg-success">Baik</span>
                                                @elseif($kendaraan->kondisi == 'cukup')
                                                    <span class="badge bg-warning">Cukup</span>
                                                @elseif($kendaraan->kondisi == 'kurang')
                                                    <span class="badge bg-danger">Kurang</span>
                                                @else
                                                    <span class="text-muted">-</span>
                                                @endif
                                            </div>
                                        </div>

                                        <div class="row mb-2">
                                            <div class="col-lg-4 col-md-4 label fw-bold">Status</div>
                                            <div class="col-lg-8 col-md-8">{!! $kendaraan->status_badge !!}</div>
                                        </div>

                                        <div class="row mb-2">
                                            <div class="col-lg-4 col-md-4 label fw-bold">No. Rangka</div>
                                            <div class="col-lg-8 col-md-8">{{ $kendaraan->no_rangka ?: '-' }}</div>
                                        </div>

                                        <div class="row mb-2">
                                            <div class="col-lg-4 col-md-4 label fw-bold">No. Mesin</div>
                                            <div class="col-lg-8 col-md-8">{{ $kendaraan->no_mesin ?: '-' }}</div>
                                        </div>

                                        <div class="row mb-2">
                                            <div class="col-lg-4 col-md-4 label fw-bold">Dibuat</div>
                                            <div class="col-lg-8 col-md-8">{{ $kendaraan->created_at->format('d M Y H:i') }}</div>
                                        </div>

                                        <div class="row mb-2">
                                            <div class="col-lg-4 col-md-4 label fw-bold">Diupdate</div>
                                            <div class="col-lg-8 col-md-8">{{ $kendaraan->updated_at->format('d M Y H:i') }}</div>
                                        </div>
                                    </div>
                                </div>

                                @if($kendaraan->keterangan)
                                    <hr>
                                    <h6 class="fw-bold">Keterangan:</h6>
                                    <p class="text-muted">{{ $kendaraan->keterangan }}</p>
                                @endif
                            </div>

                            <div class="tab-pane fade pt-3" id="vehicle-documents">
                                <h5 class="card-title">Dokumen & Perizinan</h5>

                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="card bg-light">
                                            <div class="card-body">
                                                <h6 class="card-title">
                                                    <i class="bi bi-file-earmark-text"></i> STNK
                                                </h6>
                                                
                                                <div class="row mb-2">
                                                    <div class="col-5"><small class="fw-bold">No. STNK:</small></div>
                                                    <div class="col-7"><small>{{ $kendaraan->no_stnk ?: '-' }}</small></div>
                                                </div>
                                                
                                                <div class="row mb-2">
                                                    <div class="col-5"><small class="fw-bold">Expired:</small></div>
                                                    <div class="col-7">
                                                        @if($kendaraan->expired_stnk)
                                                            <small class="{{ $kendaraan->is_stnk_expired ? 'text-danger' : ($kendaraan->is_stnk_expiring_soon ? 'text-warning' : 'text-success') }}">
                                                                {{ $kendaraan->expired_stnk->format('d M Y') }}
                                                                @if($kendaraan->is_stnk_expired)
                                                                    <i class="bi bi-exclamation-triangle-fill text-danger"></i>
                                                                @elseif($kendaraan->is_stnk_expiring_soon)
                                                                    <i class="bi bi-exclamation-triangle-fill text-warning"></i>
                                                                @endif
                                                            </small>
                                                        @else
                                                            <small class="text-muted">-</small>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-lg-6">
                                        <div class="card bg-light">
                                            <div class="card-body">
                                                <h6 class="card-title">
                                                    <i class="bi bi-credit-card"></i> Pajak Kendaraan
                                                </h6>
                                                
                                                <div class="row mb-2">
                                                    <div class="col-5"><small class="fw-bold">Expired:</small></div>
                                                    <div class="col-7">
                                                        @if($kendaraan->expired_pajak)
                                                            <small class="{{ $kendaraan->is_pajak_expired ? 'text-danger' : ($kendaraan->is_pajak_expiring_soon ? 'text-warning' : 'text-success') }}">
                                                                {{ $kendaraan->expired_pajak->format('d M Y') }}
                                                                @if($kendaraan->is_pajak_expired)
                                                                    <i class="bi bi-exclamation-triangle-fill text-danger"></i>
                                                                @elseif($kendaraan->is_pajak_expiring_soon)
                                                                    <i class="bi bi-exclamation-triangle-fill text-warning"></i>
                                                                @endif
                                                            </small>
                                                        @else
                                                            <small class="text-muted">-</small>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                @if($kendaraan->expired_stnk || $kendaraan->expired_pajak)
                                    <div class="alert alert-info">
                                        <h6><i class="bi bi-info-circle"></i> Status Dokumen:</h6>
                                        <ul class="mb-0">
                                            @if($kendaraan->is_stnk_expired)
                                                <li class="text-danger">STNK sudah expired!</li>
                                            @elseif($kendaraan->is_stnk_expiring_soon)
                                                <li class="text-warning">STNK akan expired dalam 30 hari</li>
                                            @endif
                                            
                                            @if($kendaraan->is_pajak_expired)
                                                <li class="text-danger">Pajak kendaraan sudah expired!</li>
                                            @elseif($kendaraan->is_pajak_expiring_soon)
                                                <li class="text-warning">Pajak kendaraan akan expired dalam 30 hari</li>
                                            @endif
                                        </ul>
                                    </div>
                                @endif
                            </div>

                            <div class="tab-pane fade pt-3" id="vehicle-history">
                                <h5 class="card-title">Riwayat Kendaraan</h5>
                                
                                <div class="activity">
                                    <div class="activity-item d-flex">
                                        <div class="activite-label">{{ $kendaraan->created_at->format('d M Y') }}</div>
                                        <i class='bi bi-circle-fill activity-badge text-success align-self-start'></i>
                                        <div class="activity-content">
                                            Kendaraan didaftarkan
                                            @if($kendaraan->user)
                                                oleh <strong>{{ $kendaraan->user->name }}</strong>
                                            @endif
                                        </div>
                                    </div>

                                    @if($kendaraan->updated_at > $kendaraan->created_at)
                                        <div class="activity-item d-flex">
                                            <div class="activite-label">{{ $kendaraan->updated_at->format('d M Y') }}</div>
                                            <i class='bi bi-circle-fill activity-badge text-info align-self-start'></i>
                                            <div class="activity-content">
                                                Data kendaraan diperbarui
                                            </div>
                                        </div>
                                    @endif

                                    <!-- Future: Add more activity logs here -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <a href="{{ route('data-kendaraan.index') }}" class="btn btn-secondary">
                                <i class="bi bi-arrow-left"></i> Kembali ke Daftar
                            </a>
                            
                            <div>
                                <a href="{{ route('data-kendaraan.edit', $kendaraan->id) }}" class="btn btn-warning me-2">
                                    <i class="bi bi-pencil"></i> Edit
                                </a>
                                
                                <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteModal">
                                    <i class="bi bi-trash"></i> Hapus
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Delete Modal -->
    <div class="modal fade" id="deleteModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Konfirmasi Hapus</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>Apakah Anda yakin ingin menghapus kendaraan <strong>{{ $kendaraan->merk }} {{ $kendaraan->type }}</strong> dengan plat nomor <strong>{{ $kendaraan->plat_no }}</strong>?</p>
                    <p class="text-danger"><small><i class="bi bi-exclamation-triangle"></i> Tindakan ini tidak dapat dibatalkan!</small></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <form action="{{ route('data-kendaraan.destroy', $kendaraan->id) }}" method="POST" class="d-inline">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger">Ya, Hapus</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection