@extends('layouts.app')

@section('title', 'Car Profile')

@section('content')
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">

<div class="container py-4 car-profile">
    <div class="card shadow-lg border-0">
        <div class="card-body">
            <h2 class="text-center text-uppercase text-danger mb-4" style="letter-spacing: 2px;">
                {{ $car->make }} {{ $car->varient }} {{ $car->model }} 
            </h2>
            <h2 class="text-center text-uppercase text-success mb-4" style="letter-spacing: 2px;">
                 {{ $car->registration_no }}
            </h2>

            <div class="detail-grid">
                <div>
                    <div class="detail-item">
                        <span>Make</span>
                        <strong>{{ $car->make }}</strong>
                    </div>
                <div class="detail-item">
                    <span>Varient</span>
                    <strong>{{ $car->varient }}</strong>
                </div>
                <div class="detail-item">
                    <span>Chassis No</span>
                    <strong>{{ $car->chassis_no }}</strong>
                </div>
                <div class="detail-item">
                    <span>Registered City</span>
                    <strong>{{ $car->registered_city }}</strong>
                </div>
                <div class="detail-item">
                    <span>Color</span>
                    <strong>{{ $car->color }}</strong>
                </div>
                <div class="detail-item">
                        <span>Milage</span>
                        <strong>{{ $car->mileage }}</strong>
                    </div>                
            </div>

            <div>
                <div class="detail-item">
                        <span>Model</span>
                        <strong>{{ $car->model }}</strong>
                    </div>
                <div class="detail-item">
                        <span>Registered Year</span>
                        <strong>{{ $car->reg_year }}</strong>
                    </div>    
                    <div class="detail-item">
                        <span>Engine No</span>
                        <strong>{{ $car->engine_no }}</strong>
                    </div>
                    <div class="detail-item">
                        <span>Transmission Type</span>
                        <strong>{{ $car->transmission }}</strong>
                    </div>
                    @php
                        $saleCount = \DB::table('car_sales')
                            ->where('registration_no', $car->registration_no)
                            ->where('status', 1)
                            ->count();
                    @endphp
                    <div class="detail-item">
                        <span>Registration No</span>
                        <strong>{{ $car->registration_no }}</strong>
                    </div>

                    <div class="detail-item">
                        <span>Sold</span>
                        <strong>{{ $saleCount }} Times</strong>
                    </div>



                </div>

            </div>
                <div>
                    <div class="detail">
                       <strong> <span>General Comments : </span></strong>
                         {{ $car->general_comments }}
                    </div>
                </div>
                <br>


            <!-- <h4 class="text-center text-uppercase text-success mb-4" >Gallery</h4> -->
            <h4 class="text-center text-uppercase text-success mb-4" style="letter-spacing: 2px;">
            Gallery
            </h4>


            <div class="row g-3">
                    @for ($i = 1; $i <= 10; $i++)
                        @php
                            $pictureField = 'picture' . $i;
                        @endphp

                        @if (!empty($car->$pictureField))
                            <div class="col-6 col-md-4 col-lg-3">
                                <div class="card border-0 shadow-sm">
                                    <img src="{{ asset('/' . $car->$pictureField) }}" class="card-img-top rounded" alt="Car Image">
                                </div>
                            </div>
                        @endif
                    @endfor
                </div>

            
            
            <div class="row g-3">

                <!-- <div class="col-6 col-md-4 col-lg-3">
                    <div class="card border-0 shadow-sm">
                        <img src="{{ asset('/' . $car->picture1) }}" class="card-img-top rounded" alt="Car Image">
                    </div>
                </div>
                
                <div class="col-6 col-md-4 col-lg-3">
                    <div class="card border-0 shadow-sm">
                        <img src="{{ asset('/' . $car->picture2) }}" class="card-img-top rounded" alt="Car Image">
                    </div>
                </div>
                
                <div class="col-6 col-md-4 col-lg-3">
                    <div class="card border-0 shadow-sm">
                        <img src="{{ asset('/' . $car->picture3) }}" class="card-img-top rounded" alt="Car Image">
                    </div>
                </div>

                <div class="col-6 col-md-4 col-lg-3">
                    <div class="card border-0 shadow-sm">
                        <img src="{{ asset('/' . $car->picture4) }}" class="card-img-top rounded" alt="Car Image">
                    </div>
                </div>

                <div class="col-6 col-md-4 col-lg-3">
                    <div class="card border-0 shadow-sm">
                        <img src="{{ asset('/' . $car->picture5) }}" class="card-img-top rounded" alt="Car Image">
                    </div>
                </div>

                <div class="col-6 col-md-4 col-lg-3">
                    <div class="card border-0 shadow-sm">
                        <img src="{{ asset('/' . $car->picture6) }}" class="card-img-top rounded" alt="Car Image">
                    </div>
                </div>

                <div class="col-6 col-md-4 col-lg-3">
                    <div class="card border-0 shadow-sm">
                        <img src="{{ asset('/' . $car->picture7) }}" class="card-img-top rounded" alt="Car Image">
                    </div>
                </div>

                <div class="col-6 col-md-4 col-lg-3">
                    <div class="card border-0 shadow-sm">
                        <img src="{{ asset('/' . $car->picture8) }}" class="card-img-top rounded" alt="Car Image">
                    </div>
                </div>

                <div class="col-6 col-md-4 col-lg-3">
                    <div class="card border-0 shadow-sm">
                        <img src="{{ asset('/' . $car->picture9) }}" class="card-img-top rounded" alt="Car Image">
                    </div>
                </div>
        
                <div class="col-6 col-md-4 col-lg-3">
                    <div class="card border-0 shadow-sm">
                        <img src="{{ asset('/' . $car->picture10) }}" class="card-img-top rounded" alt="Car Image">
                    </div>
                </div> -->

            </div>

            <div class="text-center mt-5">
                <a href="{{ route('cars.index') }}" class="btn btn-secondary">
                    <i class="bi bi-arrow-left"></i> Back to Stock
                </a>
                <a href="{{ route('cars.edit', $car->id) }}" class="btn btn-success">
                    <i class="bi bi-pencil-square"></i> Edit
                </a>
            </div>
        </div>
    </div>
</div>

<style>
    .car-profile .list-group-itemm {
        background-color: #f9f9f9;
        border: none;
        border-bottom: 1px solid #ddd;
    }

    .car-profile .card-img-top {
        height: 180px;
        object-fit: cover;
    }

    .car-profile h2, .car-profile h4 {
        font-weight: 700;
    }

    .car-profile .btn i {
        margin-right: 5px;
    }
    .detail-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 35px;
            margin: 10px 0;
        }

        .detail-item {
            display: flex;
            justify-content: space-between;
            padding: 6px 0;
            border-bottom: 1px solid #ddd;
        }
</style>

@endsection