@php
    use Carbon\Carbon;
    $title = $ar->name;
@endphp
@extends('layouts.app')
@section('title', $title)
@section('content')
    <x-page-header>
        <x-slot name="left">
            <x-breadcrumbs :items="[
                ['label' => __('sidebar.dashboard'), 'url' => route('home.dashboard')],
                ['label' => __('AR.index'), 'url' => route('AR.index')],
                ['label' => $title, 'url' => '']
            ]" />
        </x-slot>

        <x-slot name="right">
            @include('shared.button', ['type' => 'edit', 'url' => route('AR.edit', $ar)])
            @include('shared.button', ['type' => 'delete', 'url' => route('AR.destroy', $ar)])
        </x-slot>
    </x-page-header>

    <hr class="my-5 border-gray-300 dark:border-gray-700">

    <ul class="space-y-5">
        <li>
            {{ __('forms.name') }} : {{ $ar->name }}
        </li>
        <li>
            {{ __('forms.description') }} : {{ $ar->description ?? '---' }}
        </li>
        <li>
            {{ __('forms.CreatedAt') }} : {{ CheckDateTime($ar->created_at, 'show', 'FullDateTime') }}
        </li>
        <li>
            {{ __('forms.UpdatedAt') }} : {{ CheckDateTime($ar->updated_at, 'show', 'FullDateTime') }}
        </li>
    </ul>
    <h2 class="text-3xl mt-5">
        {{ __('forms.images') }} :
    </h2>
    <div class="flex flex-col sm:flex-row sm:space-x-2 space-y-2 sm:space-y-0 mt-3">
        @foreach($ar->Images()->sortBy('use_type') as $image)
            <div class="p-2 rounded-md bg-gray-300 dark:bg-gray-700 hover:shadow-xl">
                <a href="{{ asset($image->path) }}" data-fancybox="AR" data-caption="Index : {{ $image->use_type }}">
                    <img src="{{ asset($image->path) }}" alt="{{ $image->use_type }}" class="sm:w-48 sm:h-48 rounded-md"/>
                </a>
                <p class="text-center mt-2">
                    {{ __('forms.index') }} : {{ $image->use_type }}
                </p>
            </div>
        @endforeach
    </div>
@endsection