@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>Add Media to Your Board</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">Kindly Select the Media, you will like to add to your {{$board->name}}</h5>
    </div>
    <div class="row mt-5 offset-md-1">
        <form method="post" action="{{route('user.add-media-board',['board_id' => $board->id])}}">
            @csrf
            <div class="container row">
                @foreach($media as $category)
                    <div class="col-md-4 col-sm-3 col-xs-3 text-center">
                        <h6>{{$category->media->title}}</h6>
                        <label class="image-checkbox" title="England">
                            @if($category->section_id == 3)
                                <img class="rounded " src="{{asset('uploads/'.$category->media->ref_link)}}" style="max-width: 150px !important; max-height: 150px !important;" />
                            @else
                                <video
                                    src="{{asset('uploads/'.$category->media->ref_link)}}"
                                     style="max-width: 150px !important; max-height: 150px !important;" autoplay muted alt="">
                                </video>
                            @endif
                            <input type="checkbox" name="media[]" value="{{$category->media->id}}"  />
                        </label>
                    </div>
                @endforeach

            </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">Add Media to Board</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