@extends('frontend.layouts.partials.default')
@section('title','IMAGESOUK')
@section('main')

        <div class="section py-5 hero-section" style="background: url('assets_front/img/hero-img.gif');background-position: center; background-size:cover;">
            <div class="container text-center">
                <div class="row justify-content-center banner_mainHeadin_923">
                        <h2 class="pt-5 mx-auto pb-2 text-white">Subscriptions and Images On Demand for every budget</h2>
                </div>
                <div class="row justify-content-center">
                    <a href="{{route('pricing')}}" class="text-white h3 mx-auto plans_pricing" style="text-decoration: underline;">See Plans & pricing</a>
                </div>
                <div class="row justify-content-center">
                    <h5 class="mx-auto text-white pt-3 pb-4">Over 50,000 stock photos for your creative craving! Download instantly.</h5>
                </div>
                <form  action="searchfilter" method="get">

                    <div class="row pt-3 justify-content-center">
                        <div class="col-9 col-md-5 p-0 mb-3">
                            <div class="row">
                                <div class="col-9 m-0 pr-0 banner_inputs_main">
                                        <input list="keywords" class="form-control form-control-lg border-0 height-lg main_searchBox_23" name="searchtext" id="" placeholder="Find images and videos by keywords ">

                                        <div class="row three-filters">
                                            <ul class="list-inline text-white d-flex">

                                                <li class="list-inline-item px-2">
                                                    <label for="flexCheckDefault" class="checkbox_style_main">
                                                        <input class="form-check-input" type="checkbox" name="license" value="0" id="flexCheckDefault" onclick="onlyOne(this)">
                                                        <span class="checkmark"></span>
                                                            Royality Free
                                                    </label>
                                                </li>
                                                <li class="list-inline-item px-2">
                                                <label for="flexCheckDefault1" class="checkbox_style_main">
                                                    <input class="form-check-input" type="checkbox" name="license" value="2" id="flexCheckDefault1" onclick="onlyOne(this)">
                                                    <span class="checkmark"></span>
                                                        Premium Royality Free
                                                    </label>
                                                </li>
                                                <li class="list-inline-item px-2">
                                                <label for="flexCheckDefault2" class="checkbox_style_main">
                                                    <input class="form-check-input" type="checkbox" name="license" value="1" id="flexCheckDefault2" onclick="onlyOne(this)">
                                                    <span class="checkmark"></span>
                                                        Rights Managed
                                                    </label>
                                                </li>
                                            </ul>
                                        </div>

                                        <datalist id="keywords">
                                            @foreach($keywords as $key)
                                            <option value="{{$key->keyword_name}}">
                                            @endforeach
                                        </datalist>
                                </div>
                                <div class="col-3 p-0 media-type banner_inputs_main">
                                    <select class="form-control form-control-lg border-0 height-lg" name="itemtype" >
                                        @foreach([
                                                    'All',
                                                'Images',
                                                'Videos',
                                                ] as $item)
                                            <option value="{{$item}}"
                                            >{{$item}}</option>
                                        @endforeach
                                    </select>
                                    <i class="fas fa-caret-down"></i>
                                </div>
                            </div>

                        </div>
                        <div class="col-6 col-md-2 p-0 banner_inputs_main">
                            <button type="submit" class="form-control form-control-lg bg-warning border-0 height-lg text-white"><i class="fas fa-search"> </i> Search</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!-- Hero Section Ends here -->

        <!-- Browse By Category Section -->

        <div class="section">
            <div class="container pb-5">
                <div class="row justify-content-center browse_Category_hding">
                    <h4>Browse Images by Category</h4>
                </div>
                <div class="row">
                    @foreach($universal->categories as $category)
                    <div class="col-6 col-md-3 mb-3 browse_Category_img_32">
                        <a href="searchfilter?category={{$category->category_id}}" class="text-dark text-decoration-none">
                            <div class="card border-0">
                            <img src="{{$category->category_image}}" class="card-img-top" alt="{{$category->category_name}}">
                            <div class="card-body p-1">
                                <h6 class="card-title m-0">{{$category->category_name}}</h6>
                            </div>
                            </div>
                        </a>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
<script>
    function onlyOne(checkbox) {
        var checkboxes = document.getElementsByName('license')
        checkboxes.forEach((item) => {
            if (item !== checkbox) item.checked = false
        })
    }
</script>
@endsection