@extends('template.app')

@section('meta')
@endsection

@section('title')
    View Logs
@endsection

@section('styles')
<style>
    table {
        width: 100%;
        border-collapse: collapse;
    }
    th, td {
        border: 1px solid white !important;
        padding: 8px;
        text-align: center;
        line-height: 1.8;
    }
    .width_250 { width: 250px; }
    .width_200 { width: 200px; }
    .width_100 { width: 100px; }
    .width_50  { width: 50px;  }
</style>
@endsection

@section('content')
<div class="page-breadcrumb">
    <div class="row">
        <div class="col-7 align-self-center">
            <h4 class="page-title text-truncate text-dark font-weight-medium mb-1">View Logs</h4>
            <div class="d-flex align-items-center">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb m-0 p-0">
                        <li class="breadcrumb-item">
                            <a href="{{ route('dashboard') }}" class="text-muted">Dashboard</a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="{{ route('inventory') }}" class="text-muted">Inventory</a>
                        </li>
                        <li class="breadcrumb-item active text-muted" aria-current="page">View Logs</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
</div>

<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">

                    <!-- Inventory Details -->
                    <table class="table tables" cellspacing="0">
                        <thead>
                            <tr>
                                <th class="width_250">Model</th>
                                <th class="width_250">VIN No.</th>
                                <th class="width_250">Interior Color</th>
                                <th class="width_250">Exterior Color</th>
                                <th class="width_250">Manufacturing Year</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>{{ $product->car_name ?? '-' }}</td>
                                <td>{{ $product->vin_number ?? '-' }}</td>
                                <td>{{ $product->interior_color ?? '-' }}</td>
                                <td>{{ $product->exterior_color ?? '-' }}</td>
                                <td>{{ $product->manufacturing_year ?? '-' }}</td>
                            </tr>
                        </tbody>
                    </table>

                    <!-- Logs Table -->
                    <h5 class="mt-4 mb-2">Action Logs</h5>
                    <table class="table tables">
                        <thead>
                            <tr>
                                <th>Date</th>
                                <th>Module</th>
                                <th>Status</th>
                                <th>Remark</th>
                                <th>Created By</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($logs_data as $log)
                                <tr>
                                    <td>{{ \Carbon\Carbon::parse($log->created_at)->format('d-m-Y H:i:s') }}</td>
                                    <td>{{ ucfirst($log->module_nm) }}</td>
                                    <td>{{ $log->status }}</td>
                                    <td>{{ $log->remark }}</td>
                                    <td>{{ $log->user_name ?? 'System' }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="text-center text-muted">No logs found for this Inventory</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>

                    <!-- Back Button -->
                    <div class="form-group">
                        <a href="{{ route('inventory') }}" class="btn waves-effect waves-light btn-rounded btn-outline-secondary">Back</a>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
@endsection