@extends('layouts.app')
@section('title')
    {{ __('messages_301.Reports') }}
@endsection
@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">
        @include('inc.breadcrumb', [
            'breadcrumb_items' => [
                __('messages.Home') => route('home'),
                __('messages_301.Reports') => route('admin.reports.index'),
                __('messages_301.Show') => 'active',
            ],
        ])


        <!-- Basic Bootstrap Table -->
        <div class="card card-action mb-4">
            <div class="card-header align-items-center">
                <h5 class="card-action-title mb-0">{{ __('messages_301.Report') }}</h5>
                <div class="card-action-element">
                </div>
            </div>
            <div class="app-email-view-content py-4">
                <div class="card email-card-prev mx-sm-4 mx-3">
                    <div class="card-header d-flex justify-content-between align-items-center flex-wrap">
                        <div class="d-flex align-items-center mb-sm-0 mb-3">
                            <label class="me-3">{{ __('messages_301.From') }}:</label>
                            <img src="{{ $item->reporter->image ? asset($item->reporter->image) : asset('default-images/user-image_.png') }}"
                                alt="user-avatar" class="flex-shrink-0 rounded-circle me-3" height="40" width="40" />
                            <div class="flex-grow-1 ms-1">
                                <h6 class="m-0">{{ $item->reporter->name }}</h6>
                                <small
                                    class="text-muted">{{ $item->reporter->mobile_country_code . ' ' . $item->reporter->mobile }}</small>
                            </div>
                        </div>
                        <div class="d-flex align-items-center mb-sm-0 mb-3">
                            <label class="me-3">{{ __('messages_301.To') }}:</label>

                            @if ($item->reporter_id == $item->driver_id)
                                <img src="{{ $item->customer->image ? asset($item->customer->image) : asset('default-images/user-image_.png') }}"
                                    alt="user-avatar" class="flex-shrink-0 rounded-circle me-3" height="40"
                                    width="40" />
                                <div class="flex-grow-1 ms-1">
                                    <h6 class="m-0">{{ $item->customer->name }}</h6>
                                    <small
                                        class="text-muted">{{ $item->customer->mobile_country_code . ' ' . $item->customer->mobile }}</small>
                                </div>
                            @else
                                <img src="{{ $item->driver->image ? asset($item->driver->image) : asset('default-images/user-image_.png') }}"
                                    alt="user-avatar" class="flex-shrink-0 rounded-circle me-3" height="40"
                                    width="40" />
                                <div class="flex-grow-1 ms-1">
                                    <h6 class="m-0">{{ $item->driver->name }}</h6>
                                    <small
                                        class="text-muted">{{ $item->driver->mobile_country_code . ' ' . $item->driver->mobile }}</small>
                                </div>
                            @endif
                        </div>
                        <div class="d-flex align-items-center">
                            <p class="mb-0 me-3 text-muted">
                                {{ \Carbon\Carbon::parse($item->created_at)->format('Y-m-d h:i a') }}</p>
                        </div>
                    </div>
                    <div class="card-body">
                        <p>
                            {!! $item->comment !!}
                        </p>


                        <hr />
                        <p class="email-attachment-title mb-2">{{ __('messages_301.Attachments') }}</p>
                        <div class="row cursor-pointer">
                            <div class="col-3">
                                <div class="d-flex align-items-center justify-content-between">
                                    @if ($item->attachments && count($item->attachments))
                                        @foreach ($item->attachments as $item)
                                            <a href="{{ asset($item->path) }}" target="blanck" download>
                                                @if (in_array(strtolower(pathinfo($item->path, PATHINFO_EXTENSION)), ['png', 'jpg', 'jpeg']))
                                                    <img height="40px" width="40px"
                                                        src="{{ asset('default-images/image.png') }}">
                                                @elseif (in_array(strtolower(pathinfo($item->path, PATHINFO_EXTENSION)), ['pdf', 'doc', 'docs']))
                                                    <img height="40px" width="40px"
                                                        src="{{ asset('default-images/word.png') }}">
                                                @elseif (in_array(strtolower(pathinfo($item->path, PATHINFO_EXTENSION)), ['webm', 'mkv', 'flv', 'mp4']))
                                                    <img height="40px" width="40px"
                                                        src="{{ asset('default-images/video.png') }}">
                                                @endif
                                            </a>
                                        @endforeach
                                    @else
                                        <span
                                            class="align-middle ms-1">{{ __('messages_301.No attachments found') }}</span>
                                    @endif

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

            </div>
        </div>
    </div>
    <!--/ Basic Bootstrap Table -->

    </div>
@endsection