@extends('layouts.app', ['class' => 'bg-default'])

@section('content')
    @include('layouts.headers.choose-store-category-header')

    <style>
        .cards-wrapper {
        display: flex;
        justify-content: center;
        }
        
        .card img {
            max-width: 100%;
            max-height: 100%;
        }

        .card {
            margin: 0 0.5em;
            box-shadow: 2px 6px 8px 0 rgba(22, 22, 26, 0.18);
            border: none;
            width: 30rem;
            height: 35rem;
        }
        .carousel-inner {
        padding: 1em;
        }
        .carousel-control-prev,
        .carousel-control-next {
        background-color: #e1e1e1;
        width: 5vh;
        height: 5vh;
        border-radius: 50%;
        top: 50%;
        transform: translateY(-50%);
        }

        @media (min-width: 768px) {
            .card img {
                height: 11em;
            }
        }

        .content {
        pointer-events: none;
        transition: all 0.4s;
        }

        .card-hghlght {
        pointer-events: auto;
        transform: scale(1);
        transition: all 0.4s;
        }

        .card-hghlght:hover {
        opacity: 1;
        transform: scale(1.02);
        }

        .content:hover .card-hghlght:not(:hover) {
        opacity: 0.5;
        transform: scale(0.9);
        }

        .disabled{
            pointer-events: none;
        }
        
    </style>
<link rel="stylesheet" href="{{ asset('css/frontend/custom-styles.css') }}"  type="text/css" />
<div class="col">
    <div id="carouselExampleControls" class="carousel carousel-dark slide mt--9 pb-8 d-none d-sm-block" data-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <div class="cards-wrapper content">

                <div class="card card-hghlght" id="card1">
                    <img src="https://images.unsplash.com/photo-1524095731963-b4e38d1b3329?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">Qazaam Food</h5>
                        <p class="card-text">Open your restaurant or cafe on Facebook Messenger</p>

                        <input type="checkbox" class="btn-check" id="foods-selected" autocomplete="off" style="visibility: hidden;" hidden>
                        <label class="btn align-self-center" for="foods-selected" id="food-label" style="background-color: #DCDCDC;">Select</label><br>
                        
                    </div>
                </div>

                <div class="card card-hghlght" id="card2">
                    <img src="https://images.unsplash.com/photo-1524095731963-b4e38d1b3329?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">Qazaam Mall</h5>
                        <p class="card-text">Open you online store on Facebook Messenger.</p>

                        <input type="checkbox" class="btn-check" id="mall-selected" autocomplete="off" style="visibility: hidden;" hidden>
                        <label class="btn align-self-center disabled" for="mall-selected" id="mall-label" style="background-color: #DCDCDC;">Coming Soon!</label><br>
                        
                    </div>
                </div>

                <div class="card card-hghlght" id="card3" disabled>
                    <img src="https://images.unsplash.com/photo-1524095731963-b4e38d1b3329?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">Qazaam Professionals</h5>
                        <p class="card-text">Display your professional profile for employers on Facebook Messenger.</p>

                        <input type="checkbox" class="btn-check" id="professional-selected" autocomplete="off" style="visibility: hidden;" hidden>
                        <label class="btn align-self-center disabled" for="professional-selected" id="pro-label" style="background-color: #DCDCDC;">Coming Soon!</label><br>
                        
                    </div>
                </div>

                <div class="card card-hghlght" id="card4" disabled>
                    <img src="https://images.unsplash.com/photo-1524095731963-b4e38d1b3329?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">Qazaam Properties</h5>
                        <p class="card-text">Display your listings on Facebook Messenger.</p>

                        <input type="checkbox" class="btn-check" id="property-selected" autocomplete="off" style="visibility: hidden;" hidden>
                        <label class="btn align-self-center disabled" for="property-selected" id="proper-label" style="background-color: #DCDCDC;">Coming Soon!</label><br>
                        
                    </div>
                </div>

            </div>
        </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
    </div>
</div>

<!-- for smaller screens -->
    <div class="col">
        <div id="carouselExampleControlsSmaller" class="carousel carousel-dark slide mt--9 pb-8 d-sm-none" data-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <div class="cards-wrapper">
                    <!-- will show in smaller screens -->
                    <div class="card card-hghlght" id="card1">
                        <img src="https://images.unsplash.com/photo-1524095731963-b4e38d1b3329?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80" class="card-img-top" alt="...">
                        <div class="card-body">
                        <h5 class="card-title">Qazaam Food</h5>
                        <p class="card-text">Open your restaurant or cafe on Facebook Messenger</p>

                        <input type="checkbox" class="btn-check" id="foods-selected" autocomplete="off" style="visibility: hidden;" hidden>
                        <label class="btn align-self-center" for="foods-selected" id="small-food-label" style="background-color: #DCDCDC;">Select</label><br>
                        </div>
                    </div>
                    <!-- will show in smaller screens end -->
                </div>
            </div>
            <div class="carousel-item">
                <div class="cards-wrapper">
                    <!-- will show in smaller screens -->
                        <div class="card card-hghlght" id="card2">
                            <img src="https://images.unsplash.com/photo-1524095731963-b4e38d1b3329?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80" class="card-img-top" alt="...">
                            <div class="card-body">
                            <h5 class="card-title">Qazaam Mall</h5>
                            <p class="card-text">Open you online store on Facebook Messenger.</p>

                            <input type="checkbox" class="btn-check" id="mall-selected" autocomplete="off" style="visibility: hidden;" hidden>
                        <label class="btn align-self-center disabled" for="mall-selected" id="mall-label" style="background-color: #DCDCDC;">Coming Soon!</label><br>
                                
                            </div>
                        </div>
                    <!-- will show in smaller screens end-->
                </div>
            </div>
            <div class="carousel-item">
                <div class="cards-wrapper">
                    <!-- will show in smaller screens -->
                        <div class="card card-hghlght" id="card3">
                            <img src="https://images.unsplash.com/photo-1524095731963-b4e38d1b3329?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80" class="card-img-top" alt="...">
                            <div class="card-body">
                            <h5 class="card-title">Qazaam Professionals</h5>
                            <p class="card-text">Display your professional profile for employers on Facebook Messenger.</p>

                            <input type="checkbox" class="btn-check" id="professional-selected" autocomplete="off" style="visibility: hidden;" hidden>
                        <label class="btn align-self-center disabled" for="professional-selected" id="pro-label" style="background-color: #DCDCDC;">Coming Soon!</label><br>
                                
                            </div>
                        </div>
                    <!-- will show in smaller screens end-->
                </div>
            </div>
            <div class="carousel-item">
                <div class="cards-wrapper">
                    <!-- will show in smaller screens -->
                        <div class="card card-hghlght" id="card4">
                            <img src="https://images.unsplash.com/photo-1524095731963-b4e38d1b3329?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80" class="card-img-top" alt="...">
                            <div class="card-body">
                            <h5 class="card-title">Qazaam Properties</h5>
                        <p class="card-text">Display your listings on Facebook Messenger.</p>

                        <input type="checkbox" class="btn-check" id="property-selected" autocomplete="off" style="visibility: hidden;" hidden>
                        <label class="btn align-self-center disabled" for="property-selected" id="proper-label" style="background-color: #DCDCDC;">Coming Soon!</label><br>
                                
                            </div>
                        </div>
                    <!-- will show in smaller screens end-->
                </div>
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleControlsSmaller" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleControlsSmaller" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
        </div>
    </div>
<!-- for smaller screens -->

<!-- <div id="carouselExampleIndicators" class="carousel carousel-dark slide mt--9 pb-8 d-none d-sm-block" data-bs-ride="carousel">
    <ol class="carousel-indicators">
        {{--<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>--}}
        {{--<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>--}}
        {{--<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>--}}
    </ol>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <div class="cards-wrapper content d-flex justify-content-center">
                <div class="card card-hghlght m-5"  id="card1">
                    <img src="https://images.unsplash.com/photo-1524095731963-b4e38d1b3329?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80" class="card-img-top" alt="...">
                    <div class="card-body">
                        <center><h5 class="card-title">Qazzam Food</h5></center>
                        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Leo duis ut diam quam nulla porttitor massa. Morbi tincidunt augue interdum velit euismod in pellentesque massa placerat.</p>
                        <a href="#" id="store-category1" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
                <div class="card card-hghlght m-5"  id="card2">
                    <img src="https://images.unsplash.com/photo-1524095731963-b4e38d1b3329?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" id="store-category2" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
                <div class="card card-hghlght m-5"  id="card3">
                    <img src="https://images.unsplash.com/photo-1524095731963-b4e38d1b3329?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" id="store-category3" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
                <div class="card card-hghlght m-5" id="card4">
                    <img src="https://images.unsplash.com/photo-1524095731963-b4e38d1b3329?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" id="store-category4" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
        </div>
        {{--<div class="carousel-item"><img class="d-block w-100" src="https://images.unsplash.com/photo-1524095731963-b4e38d1b3329?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80" alt="Third slide"></div>--}}
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
    </div>
</div>

<div id="carouselExampleIndicatorsSmallerScreen" class="carousel carousel-dark slide mt--9 pb-8 d-sm-none" data-bs-ride="carousel">
    <ol class="carousel-indicators">
        {{--<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>--}}
        {{--<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>--}}
        {{--<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>--}}
    </ol>
    <div class="carousel-inner d-flex justify-content-center">
        <div class="carousel-item active">
            <div class="card card-hghlght" style="width: 18rem;" id="card1">
                <img src="https://images.unsplash.com/photo-1524095731963-b4e38d1b3329?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80" class="card-img-top" alt="...">
                <div class="card-body">
                    <center><h5 class="card-title">Qazzam Food</h5></center>
                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Leo duis ut diam quam nulla porttitor massa. Morbi tincidunt augue interdum velit euismod in pellentesque massa placerat.</p>
                    <a href="#" id="store-category1" class="btn btn-primary">Go somewhere</a>
                </div>
            </div>
        </div>
        <div class="carousel-item">
            <div class="card card-hghlght" style="width: 18rem;" id="card1">
                <img src="https://images.unsplash.com/photo-1524095731963-b4e38d1b3329?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80" class="card-img-top" alt="...">
                <div class="card-body">
                    <center><h5 class="card-title">Qazzam Food</h5></center>
                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Leo duis ut diam quam nulla porttitor massa. Morbi tincidunt augue interdum velit euismod in pellentesque massa placerat.</p>
                    <a href="#" id="store-category1" class="btn btn-primary">Go somewhere</a>
                </div>
            </div>
        </div>
        <div class="carousel-item">
            <div class="card card-hghlght" style="width: 18rem;" id="card1">
                <img src="https://images.unsplash.com/photo-1524095731963-b4e38d1b3329?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80" class="card-img-top" alt="...">
                <div class="card-body">
                    <center><h5 class="card-title">Qazzam Food</h5></center>
                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Leo duis ut diam quam nulla porttitor massa. Morbi tincidunt augue interdum velit euismod in pellentesque massa placerat.</p>
                    <a href="#" id="store-category1" class="btn btn-primary">Go somewhere</a>
                </div>
            </div>
        </div>
        <div class="carousel-item">
            <div class="card card-hghlght" style="width: 18rem;" id="card1">
                <img src="https://images.unsplash.com/photo-1524095731963-b4e38d1b3329?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80" class="card-img-top" alt="...">
                <div class="card-body">
                    <center><h5 class="card-title">Qazzam Food</h5></center>
                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Leo duis ut diam quam nulla porttitor massa. Morbi tincidunt augue interdum velit euismod in pellentesque massa placerat.</p>
                    <a href="#" id="store-category1" class="btn btn-primary">Go somewhere</a>
                </div>
            </div>
        </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicatorsSmallerScreen" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleIndicatorsSmallerScreen" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
    </div>
</div> -->

<div class="col-10 d-flex justify-content-end">
    <!-- <button type="submit" class="btn btn-primary mt-4">{{ __('Create account') }}</button> -->
    <a href="{{ URL::to( 'select-plan?hash='.$confirm->remember_token.'&oauth_type='.$confirm->oauth_type) }}" class="btn btn-md disabled" style="background-color:yellow; color:black" tabindex="-1" role="button" aria-disabled="true" id="next1">{{ __('Next') }}</a>
    <!-- <button class="btn btn-md mt-4" style="background-color:yellow;" disabled>
        <a href="{{ route('select-store-category') }}" style="color:black">
            {{ __('Next') }}
        </a>
    </button> -->
</div>

@endsection