@extends('layout.default')
@section('content')
<div class="card card-custom mb-3">
    <div class="card-body">
        <div class="row">
            <div class="form-group col-md-4 col-12">
                <div class="navi-item mr-2">
                    <select onchange="filter(this, 'group')" class="group form-control" id="exampleSelect1">
                        <option selected value="0">All Categories</option>
                        @foreach($groups as $gr)
                            <option name="group" {{ $gr->id == $group ? 'selected' : '' }} value="{{$gr->id}}">{{ $gr->name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="form-group  col-md-4 col-12">
                <div class="navi-item mr-2">
                    <select onchange="filter(this, 'format')" class="format form-control" id="exampleSelect1">
                        @foreach($formats as $fo)
                            <option name="format" {{ $fo->id == $format ? 'selected' : ''}} value="{{$fo->id}}">{{ $fo->width . 'x' . $fo->height . ' - ' . $fo->device }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="form-group  col-md-4 col-12">
                <div class="navi-item mr-2">
                    <select onchange="filter(this, 'color')" class="color form-control" id="exampleSelect1">
                        <option selected value="0">All Colors</option>
                        @foreach($colors as $co)
                            <option name="color" {{ $co->id == $color ? 'selected' : '' }} value="{{$co->id}}" style="color: white; background-color: {{ $co->hexadecimal }}">{{ $co->name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>
        <div class="row justify-content-center">
            @forelse($templates as $template)
                <div class="card card-custom overlay mb-5 mr-1 ml-2">
                    <a class="card-body p-0" href="{{ url('/members-area/cpabanners/templates/' . $template->id) }}">
                        <div class="overlay-wrapper">
                            <img class="w-100" src="{{ url('images/cpabanners/' . $template->id . '-' . $template->slug . $template->extension) }}">
                        </div>
                        <div style="z-index: 30" class="overlay-layer">
        {{--                    <button href="{{ url('/members-area/cpabanners/templates/' . $template->id) }}" class="btn font-weight-bold btn-light-primary btn-shadow ml-2">Start</button>--}}
                            <button class="btn font-weight-bold btn-light-primary btn-shadow ml-2">Start</button>
                        </div>
                    </a>
                </div>
            @empty
                <h1>No templates found!</h1>
            @endforelse
        </div>

    </div>
</div>
@endsection
@section('scripts')
    <script type="text/javascript">
        function filter(res, type) {
            let group = $('.group option:selected').val();
            let format = $('.format option:selected').val();
            let color = $('.color option:selected').val();
            location.replace(window.location.origin + "/members-area/cpabanners/templates/" + group + "/" + format + "/" + color);
        }
    </script>
@endsection