@props(['vehicle', 'keychain', 'case', 'client', 'case_employee'])
<div class="text-xl flex justify-between gap-2 bg-slate-700 mb-4 px-4 py-2 text-white">
    <div>
        @if($client->is_company==1)
            {{ $client->company_name }} &nbsp;
        @endif
        {{ $client->name }} {{ $client->last_name }} &nbsp; tel. {{ $client->phone }}
    </div>
    <div>
        {{ \Illuminate\Support\Carbon::parse($case->created_at)->format('Y-m-d H:i') }}
    </div>
</div>
<div class="pb-4 flex justify-between items-center">
    <div class="text-2xl font-bold text-gray-800 flex flex-wrap items-center gap-2">
        <span class="px-4 py-1 rounded-full bg-gray-500 text-white">{{ $keychain->keychain ?: '' }}</span>
        <span class="px-2 py-1 rounded-md bg-gray-700 text-white">{{ $vehicle->plate_number ?: '' }}</span>
        <span>{{ $vehicle->car_brand ?: '' }} {{ $vehicle->car_model ?: '' }}</span>

        <button type="button" id="modal-button-vehicle-info" class="ml-2 border rounded-full px-4 text-white bg-sky-500">info</button>

        @if(!empty($case_employee))
            <span class="flex items-center text-[0.7em] gap-2 ml-2">
                {{ __('office.mechanics') }}:
                @foreach($case_employee as $employee)
                    <span class="border border-gray-300 rounded-full mt-1 pl-2 pr-7 pt-[2px] pb-1 w-fit relative flex items-center text-md">
                        {{ $employee->name }} {{ $employee->last_name }}
                        <a class="red_x absolute right-1 top-1 cursor-pointer delete-assigned-employee"
                           data-employee_id="{{ $employee->id }}"
                           data-case_id="{{ $case->id }}"
                           data-employee_name="{{ $employee->name }} {{ $employee->last_name }}"></a>
                    </span>
                @endforeach
            </span>
        @endif
    </div>

    <div class="rounded-lg border-2 border-slate-600 text-lg py-[1px] px-2 flex items-center gap-2">
        <span class="font-bold">Status</span>
        <span class="px-2 py-1 status-color{{ $case->status }}">
            {{ __('workshop.position_status.'.$case->status) }}
        </span>
    </div>
</div>
@push('modal')
    <x-modal.modal-remove-assigned-employee-component modalRoute="{{ route('office.cases.update.remove_assigned_employee') }}" />
@endpush
{{--
@if(strlen(trim($vehicle->description)) > 0)
<div class="mb-4">
    {{ $vehicle->description }}
</div>
@endif --}}