@extends('frontend.layouts.main')
@section('content')
    <section class="gallery-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-3">
                        <h3 class="text-start">Photo</h3>
                        <ul class="new nav nav-pills mt-3 mb-3" id="pills-tab" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="pills-all-tab" data-bs-toggle="pill"
                                    data-bs-target="#pills-all" type="button" role="tab" aria-controls="pills-all"
                                    aria-selected="true">All</button>
                            </li>
                            @foreach ($categories as $category)
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="pills-{{ $category->slug }}-tab" data-bs-toggle="pill"
                                        data-bs-target="#pills-{{ $category->slug }}" type="button" role="tab"
                                        aria-controls="pills-{{ $category->slug }}" aria-selected="false">
                                    {{ $category->title }}
                                </button>
                            </li>
                        @endforeach
                        </ul>
                    </div>
                    <div class="col-lg-9">
                        <div class="tab-content" id="pills-tabContent">
                            <div class="tab-pane fade show active" id="pills-all" role="tabpanel"
                                 aria-labelledby="pills-all-tab">
                                <div class="row">
                                    @foreach ($galleries as $gallery)
                                        <div class="col-lg-2">
                                            <div class="card" style="width: auto;">
                                                <img src="{{ asset($gallery->image) }}" class="card-img-top" alt="...">
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                            @foreach ($categories as $category)
                                <div class="tab-pane fade" id="pills-{{ $category->slug }}" role="tabpanel"
                                     aria-labelledby="pills-{{ $category->slug }}-tab">
                                    <div class="row">
                                        @foreach ($galleries->where('category_id', $category->id) as $gallery)
                                            <div class="col-lg-2">
                                                <div class="card" style="width: auto;">
                                                    <img src="{{ asset($gallery->image) }}" class="card-img-top" alt="...">
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
            </div>
        </div>
    </section>
@endsection