@extends('layout.app')
@section('contents')
    <div class="breadcrumb-section">
        <div class="container">
            <div class="row">
                <div class="col-sm-6">
                    <div class="page-title">
                        <h2>Welcome to Adult.com</h2>
                    </div>
                </div>
                <div class="col-sm-6">
                    <nav aria-label="breadcrumb" class="theme-breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item active" aria-current="page"><a href="{{route('homepage')}}">Home</a></li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    <!-- breadcrumb End -->


    <!--section start-->
    <div class=" col-md-8 mt-5 offset-md-2" >
        <h5 class="text-center">Step 2: Select all your favourite categories so we can suggest a few goog pins to start off with!</h5>
    </div>
    <div class="row mt-5 offset-md-1">
        <form method="post" action="{{route('user.select-category-interest')}}">
            @csrf
            <div class="container row">
                @for($i = 0; $i<5; $i ++)
                    @foreach($categories as $category)
                        <div class="col-md-2 col-sm-3 col-xs-3 text-center">
                            <h6>{{$category->category}}</h6>
                            <label class="image-checkbox" title="England">
                                <img class="rounded" src="{{asset('uploads/'.$category->image)}}" style="width: 50px; height: 50px" />
                                <input type="checkbox" name="team[]" value="{{$category->id}}"  />
                            </label>
                        </div>
                    @endforeach
                @endfor
            </div>
            <hr/>
            <div class="col-md-6 offset-md-4 mt-5">
                <button type="submit" style="padding: 10px 22px" class=" btn btn-outline-success"><span class="text-lowercase">Continue to Step 3 >></span></button>
            </div>
        </form>
    </div>
@endsection
@section('script')
    <script type="text/javascript">
        jQuery(function ($) {
            // init the state from the input
            $(".image-checkbox").each(function () {
                if ($(this).find('input[type="checkbox"]').first().attr("checked")) {
                    $(this).addClass('image-checkbox-checked');
                }
                else {
                    $(this).removeClass('image-checkbox-checked');
                }
            });

            // sync the state to the input
            $(".image-checkbox").on("click", function (e) {
                if ($(this).hasClass('image-checkbox-checked')) {
                    $(this).removeClass('image-checkbox-checked');
                    $(this).find('input[type="checkbox"]').first().removeAttr("checked");
                }
                else {
                    $(this).addClass('image-checkbox-checked');
                    $(this).find('input[type="checkbox"]').first().attr("checked", "checked");
                }

                e.preventDefault();
            });
        });
    </script>
@endsection