@extends('public.skeleton')
@section('title', 'Certificates')

@section('library-styles')

@endsection

@section('body')
    <div class="container-fluid p-0 menu_margin_top_fixed min_height_banner_inner" style="position: relative; clip-path: polygon(50% 9%, 100% 0, 100% 93%, 50% 100%, 0 93%, 0 0);">
        <img src="{{asset('images/banner_cont.jpg')}}" class="img-fluid">
        <div class="overlay_inner_img"></div>
        <div class="inner_caption">Welcome {{$member->name}}</div>
    </div>
    <!---------------------------------------------------------------------->
    <div class="container-fluid"
         style="padding-top: 2.8rem; padding-bottom: 3rem">
        <div class="container">
            <div class="row">
                <div class="col-md-12 mb-2">
                    <div class="sec-title">
                    <span class="tag-line">
                        {{$member->company->title}}</span>
                    </div>
                </div>
            </div>
            <form method="get" action="{{route('frontend.certificates')}}">
                <div class="row">
                    <div class="col-md-3">
                        <label class="m-0" style="color: #4E7034; font-weight: bold" for="category_id">Category</label>
                        <select id="category_id" name="c" class="custom-select  mb-3" >
                            <option value="" data-company="">Search by categories</option>
                            @forelse($categories as $category)
                                <option value="{{$category->fake_id}}" class="form-control"
                                        @if(\Illuminate\Support\Facades\Input::get('c') == $category->fake_id ) selected @endif >
                                    {{$category->title}}
                                </option>
                            @empty
                                <option value="">No Categories</option>
                            @endforelse
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="m-0" style="color: #4E7034; font-weight: bold" for="sub_category_id">Sub Category</label>
                        <select id="sub_category_id" name="sc" class="custom-select" title="Must choose Category First" >
                            <option value="" data-category="">Search by sub-categories</option>
                            @forelse($subCategories as $subCategory)
                                <option value="{{$subCategory->fake_id}}" class="form-control"
                                        @if(\Illuminate\Support\Facades\Input::get('sc') == $subCategory->fake_id ) selected @endif
                                        data-category="{{$subCategory->category->fake_id}}">
                                    {{$subCategory->title}}
                                </option>
                            @empty
                                <option value="">No Sub-Categories</option>
                            @endforelse
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="m-0" style="color: #4E7034; font-weight: bold" for="title">Title</label>
                        <input name="title" id="title" type="text" class="form-control" value="{{\Illuminate\Support\Facades\Input::get('title')}}">
                    </div>

                    <div class="col-md-3">
                        <button class="btn btn-outline-secondary mt-4" type="submit">Search</button>
                        <button class="btn btn-outline-secondary mt-4 float-right" onclick="event.preventDefault();$('#sub-category-download').submit()">Download Selected</button>

                        <label class="float-right"><input id="select-all" type="checkbox" class="align-middle" style="margin-bottom: 0.1rem"> Select All</label>
                    </div>
                </div>
            </form>
            <form id="sub-category-download" method="get" action="{{route('zip')}}">
                <div class="row">

                    @foreach($certificateCategories as $Category => $certificateSubCategories)
                        @php ksort($certificateSubCategories) @endphp
                        <div class="col-md-12">
                            <h3 class="text-center p-1"   style=" background-color:#F47822; border-radius: 5px;  color: #fff;">{{$Category}}</h3>

                            <div class="row mb-5">
                                @foreach($certificateSubCategories as $subCategory => $certificates)
                                    <div class="col-md-12">
                                        <h4 class="p-1 text-center"  style=" color: #fff;  background-color:  #4E7034; border-radius: 5px;">{{$subCategory}}</h4>

                                    </div>


                                    @foreach($certificates as $certificate)
                                        <div class="col-md-3">

                                            <a target="_blank" href="{!! route('view-certificate', [$certificate->fake_id]) !!}" style="color: #222">
                                                <img src="{{asset('images/pdf.png')}}" class="img-fluid"><br>
                                            </a>
                                            <div class="row">
                                                <div><input id="download-{{$certificate->fake_id}}" class="mr-1 ml-3 certificate-checkbox" type="checkbox" name="ids[]" value="{{$certificate->fake_id}}"></div>
                                                <div>
                                                    <label for="download-{{$certificate->fake_id}}">
                                                        {{$certificate->title}}
                                                        <p style="font-size: 14px; color: #666">{{$certificate->created_at->format('d-M-Y')}}</p>
                                                    </label>
                                                </div>
                                            </div>


                                        </div>
                                    @endforeach


                                @endforeach
                            </div>
                        </div>
                    @endforeach


                </div>
            </form>
        </div>
    </div>
@endsection

@section('footer-scripts')
    <script>
        $('#category_id').on('change', function () {
            let selected = $(this).val();
            $("#sub_category_id option").each(function () {
                let element = $(this);
                if(selected === element.data("category") || element.data("category") === ''){
                    element.removeClass('hidden')
                        .addClass('visible')
                        .show();
                } else {
                    if(element.is(':selected')){
                        element.prop('selected', false);
                    }
                    element.removeClass('visible')
                        .addClass('hidden')
                        .hide();
                }
            });
        }).triggerHandler('change');

        $('#select-all').on('change', function(){
            if($(this).is(':checked')){
                $('.certificate-checkbox').prop('checked', true);
            } else {
                $('.certificate-checkbox').prop('checked', false);
            }
        })
    </script>
@endsection