@extends('admin.app')

@section('content')
<div class="container-fluid px-3 mt-5">

    <h2 class="mb-3">Gallery</h2>

    @if(session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif

    <a href="{{ route('gallery.create') }}"
       class="btn btn-primary mb-3">
        + Add Gallery
    </a>

    <div class="table-responsive">

        <table class="table table-bordered align-middle" id="galleryTable">

            <thead class="table-light">
                <tr>
                    <th>#</th>
                    <th>Preview</th>
                    <th>Category</th>
                    <th>Title</th>
                    <th>Type</th>
                    <th width="180">Action</th>
                </tr>
            </thead>

            <tbody>

                @forelse($images as $img)

                <tr>

                    <td>{{ $loop->iteration }}</td>

                    <td>

                        @if($img->youtube_url)

                            @php
                                preg_match('/(?:v=|\/)([0-9A-Za-z_-]{11}).*/', $img->youtube_url, $matches);
                                $videoId = $matches[1] ?? null;
                            @endphp

                            <img src="https://img.youtube.com/vi/{{ $videoId }}/hqdefault.jpg"
                                 width="100"
                                 class="rounded">

                        @else

                            <img src="{{ asset('storage/'.$img->image) }}"
                                 width="100"
                                 class="rounded">

                        @endif

                    </td>

                    <td>
                        {{ $img->category->name ?? '-' }}
                    </td>

                    <td>
                        {{ $img->title }}
                    </td>

                    <td>
                        @if($img->youtube_url)
                            <span class="badge bg-danger">Video</span>
                        @else
                            <span class="badge bg-success">Image</span>
                        @endif
                    </td>

                    <td class="text-nowrap">

                        <a href="{{ route('gallery.edit',$img->id) }}"
                           class="btn btn-sm btn-warning mb-1">
                            Edit
                        </a>

                        <form action="{{ route('gallery.destroy',$img->id) }}"
                              method="POST"
                              class="d-inline"
                              onsubmit="return confirm('Are you sure?')">

                            @csrf
                            @method('DELETE')

                            <button class="btn btn-sm btn-danger mb-1">
                                Delete
                            </button>

                        </form>

                    </td>

                </tr>

                @empty

                <tr>
                    <td colspan="6" class="text-center">
                        No Gallery Items Found
                    </td>
                </tr>

                @endforelse

            </tbody>

        </table>

    </div>

</div>
@endsection

@push('styles')
<style>
@media (max-width: 768px) {
    table th,
    table td {
        font-size: 14px;
    }
}
</style>
@endpush

@push('scripts')
<script>
$(document).ready(function () {

    $('#galleryTable').DataTable({
        pageLength: 10,
        ordering: true,
        searching: true,
        scrollX: true,
        autoWidth: false
    });

});
</script>
@endpush