@extends('front.layouts.front')
@section('maincss')
    {{-- <link rel="stylesheet" href="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css"> --}}
@endsection
@section('content')
    <!-- page title -->
    <section class="section section--first section--last section--head" data-bg="{{ asset('assets/img/bg.jpg') }}">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="section__wrap">
                        <h2 class="section__title">Professional Reel</h2>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- end page title -->

    <!-- section -->
    <section class="section">
        <div class="container">
            {{-- Begin:: search --}}
            <form action="{{ route('front.professional-reel.index') }}" method="get" id="newsfilter">
                <div class="sort justify-content-between">
                    <div class="filter__group filter__group--sort w-100 mr-3">
                        <label for="search" class="filter__label">Search:</label>
                        <input class="filter__input" name="q" id="search" type="text" placeholder="Search Professional Reel..." />
                    </div>

                    <div class="buttonWithLoder mr-3">
                        <button type="submit" class="btn header__login">
                            <span>Search</span>
                        </button>
                    </div>
                    <div class="buttonWithLoder">
                        <a href="{{ route('front.professional-reel.create') }}" class="btn header__login">
                            <span>Create</span>
                        </a>
                    </div>
                </div>
            </form>
            {{-- End:: search --}}

            {{-- Begin:: festival Cards --}}
            <div class="row">
                @foreach ($professionalreels as $professionalreel)
                    <div class="col-12 col-lg-6">
                        <div class="post row mx-0">
                            <a href="{{ route('front.professional-reel.details',[$professionalreel->id]) }}" class="festive__img col-md-3">
                                <img src="{{ $professionalreel->thumbnail1 }}" class="img-fluid" alt="Logo">
                            </a>
                            <div class="post__content col-md-9">
                                <h3 class="post__title mt-0"><a href="{{ route('front.professional-reel.details',[$professionalreel->id]) }}">{{ $professionalreel->professional_name }}</a></h3>
                                <p class="mb-0 text-white small mt-2">{{ $professionalreel->reel_title }}</p>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            {{-- End:: festival Cards --}}
        </div>
    </section>
    <!-- end section -->
@endsection

@section('script')
@endsection