@extends('dashboard.app')
@section('content')
    <div class="col-xl-20">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h4 class="card-title mb-0">Show About</h4>
                <a href="{{route('about.create')}}" class="btn btn-warning text-dark" onclick="loadingBtn(this)">Create</a>            </div>

            @if (count($about) > 0)

            <div class="card-body">
                <div class="table-responsive-sm">
                    <table class="table table-centered mb-0">
                        <thead class="table-dark">
                            <tr>
                                <th>#</th>
                                <th>Title</th>
                                <th>Description</th>
                                <th>Image</th>
                                <th>Settings</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($about as $index => $item)
                                <tr>
                                    <td>{{ $index + 1 }}</td>
                                    <td>
                                        @foreach (Helper::getLangs() as $local)
                                        <span>{{ $item->getTranslation('title', $local) }}</span>
                                        <br>
                                        @endforeach
                                    </td>
                                    <td class="text-truncate" style="max-width: 200px;">
                                        @foreach (Helper::getLangs() as $local)
                                        <span>{{ $item->getTranslation('description', $local) }}</span>
                                        <br>
                                        @endforeach
                                    </td>
                                    {{-- <td>
                                        @if ($item->image)
                                            <img src="{{ asset($item->image->file) }}" alt="Image" width="100"
                                                height="100">
                                        @else
                                            No Image
                                        @endif
                                    </td> --}}
                                    <td>
                                        @foreach ($item->getMedia('about_image') as $media)
                                            <img src="{{ $media->getUrl() }}" alt="Image" width="200" style="margin-right: 10px;">
                                        @endforeach
                                    </td>
                                    <td>
                                        <div class="dropdown mb-2">
                                            <button type="button" class="btn btn-light" data-bs-toggle="dropdown"
                                                aria-expanded="false">
                                                <i class="bi bi-three-dots-vertical"></i>
                                            </button>
                                            <ul class="dropdown-menu">
                                                <li>
                                                    <a href="{{ route('about.edit', $item->id) }}"
                                                        class="dropdown-item">
                                                        <i class='bi bi-pencil-square me-1'></i> Edit
                                                    </a>
                                                </li>
                                                <li>
                                                    <form id="delete-form-{{ $item->id }}"
                                                        action="{{ route('about.destroy', $item->id) }}"
                                                        method="POST" style="display:inline;">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="button" class="dropdown-item text-danger"
                                                            onclick="confirmDelete({{ $item->id }})">
                                                            <i class='bi bi-trash3 me-1'></i> Delete
                                                        </button>
                                                    </form>
                                                </li>
                                            </ul>
                                        </div>
                                </td>
                                </tr>

                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        @else
            <div class="row justify-content-center">
                <div class="col-4 text-center">
                    <img src="{{ asset('images/not_found_users.png') }}" width="100%" alt="">
                    <p class="text-muted fs-3">Not Found any Sections..</p>
                </div>
            </div>
            @endif
        </div>
    </div>



@endsection