@extends('lay.dnekcab.retsam')

@section('title')
  {{ $page_title }}
@endsection

@section('css')
    <style>
        .table>:not(caption)>*>*{
            padding:0.3rem !important;
        }
    </style>
@endsection

@section('page-content')
@php
    $picturePath = public_path('assets/transport/car/image/' . $carDetails->picture);
@endphp

    <div class="page-content">
        <div class="container-fluid">

            <!-- start page title -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body list-heading">
                            <!-- card-header -->
                            <!--cenario 1: only header, 2:header and add button, 3:header and print, other:header , add button and prin. type:both[pdf,excel], type:[pdf], type:[excel] -->
                            <x-card-header 
                                :scenario="'1'"
                                :pageTitle="$page_title"
                            />
                           
                            <div class="card">
                                <div class="card-body">
                                    <div class="col-md-12">
                                        <div class="holder m-4" style="box-shadow:0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2);">
                                            <div class="row m-3 pt-4">
                                                <div class="col-md-3">
                                                    <label> {{ __('transport.car.name') }}</label>
                                                    <p class="text-secondary m-0">{{ $carDetails->name}}</p>
                                                </div>
                                                <div class="col-md-3">
                                                    <label> {{ __('transport.car.brand') }}</label>
                                                    <p class="text-secondary m-0">{{ $carDetails->carBrand->name }}</p>
                                                </div>
                                                <div class="col-md-3">
                                                    <label> {{ __('transport.car.shacy_number') }}</label>
                                                    <p class="text-secondary m-0">{{ $carDetails->shacy_number}}</p>
                                                </div>
                                                <div class="col-md-3">
                                                    <label> {{ __('protocol.created_date') }}</label>
                                                    <p class="text-secondary m-0">{{ getHijriDate($carDetails->created_at) }}</p>
                                                </div>
                                            </div>
                                            <hr>
                                        </div>

                                    </div>                                    
                                </div>
                            </div>


                            <div class="card custom-card-border m-1 p-1">
                                <div class="row no-gutters align-items-center">
                                    <div class="col-md-8">
                                        <div class="card-body">
                                            <h5 class="card-title">{{ $carDetails->name ?? '' }}</h5>
                                            <table class="table fs-10">
                                                <tr>
                                                    <th> {{ __('transport.pallet_number') }}: </th><td>{{ $carDetails->pallet_number ?? '' }}</td><th>{{ __('transport.color.header') }}: </th>
                                                    <td>
                                                        @switch($carDetails->color ?? '')
                                                            @case('black')
                                                                {{ __('transport.color.black') }}
                                                                @break
                                                            @case('white')
                                                                {{ __('transport.color.white') }}
                                                                @break
                                                            @case('silver')
                                                                {{ __('transport.color.silver') }}
                                                                @break
                                                            @case('gray')
                                                                {{ __('transport.color.gray') }}
                                                                @break
                                                            @case('red')
                                                                {{ __('transport.color.red') }}
                                                                @break
                                                            @case('blue')
                                                                {{ __('transport.color.blue') }}
                                                                @break
                                                            @case('green')
                                                                {{ __('transport.color.green') }}
                                                                @break
                                                            @case('yellow')
                                                                {{ __('transport.color.yellow') }}
                                                                @break
                                                            @default
                                                                
                                                        @endswitch
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <img  class="card-img img-fluid" src="{{ $carDetails && $carDetails->picture && file_exists($picturePath) ? asset('assets/transport/car/image/' . $carDetails->picture) : asset('assets/img/default-car.png') }}"
                                            alt="{{ $carDetails->name }}" style="width:150px;" target="_blank">
                                    </div>
                                </div>
                            </div>
                        
                        </div>
                    </div>
                </div>
            </div>
            <!-- end page title -->

        </div> <!-- container-fluid -->
    </div>

    <x-confirmation-modal />

@endsection

@section('js')
    <!-- jquery step -->
    <script src="{{asset('assets/libs/jquery-steps/build/jquery.steps.min.js')}}"></script>
    <!-- form wizard init -->
    <script src="{{asset('assets/dnekcab/js/pages/form-wizard.init.js')}}"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('[data-toggle="tooltip"]').tooltip();
            let car = "{{ $carDetails->id }}";
        });
    </script>
@endsection