@extends('layout.default')
@section('styles')
    <link href="{{ asset('plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css"/>
@endsection
@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, '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 class="form-group  col-md-4 col-12">
                    <div class="navi-item mr-2">
                        <select onchange="filter(this, 'option')" class="landeroption form-control" id="exampleSelect1">
                            <option selected value="0">All Options</option>
                            @foreach($options as $op)
                                <option name="option" {{ $op->id == $option ? 'selected' : ''}} value="{{$op->id}}">{{ $op->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="d-flex flex-column-fluid">
        <div class="row justify-content-center">
            @foreach($templates as $template)
            <div class="col" style="max-width:320px; min-width:320px">
                <div class="card card-custom gutter-b card-stretch">
                    <div class="card-body">
                        <div  style="justify-content: center" class="d-flex align-items-center">
                            <div class="align-content-center" style="border: 1px solid black;">
                                <img style="max-width: 237px" src="{{ url('/images/cpalanders/' . $template->id . '-' . $template->slug . $template->extension) }}" alt="">
                            </div>
                        </div>
                        <div class="mt-8">
                            <div class="mr-12 d-flex flex-column mb-7">
                                <h4 class="d-block font-weight-bolder">{{ $template->name }}</h4>
                            </div>
                            @foreach($options as $option)
                                @if($template->options->where('id', $option->id) != '[]')
                                    <span class="label font-weight-bold label-lg label-light-success label-inline">{{ $option->name }}</span>
                                @else
                                    <span class="label font-weight-bold label-lg label-secondary label-inline">{{ $option->name }}</span>
                                @endif
                            @endforeach
                        </div>
                        <p class="mb-7 mt-3">{{ $template->description }}</p>
                        <div class="d-flex flex-wrap">
                            <div class="mr-12 d-flex flex-column mb-7">
                                <span class="font-weight-bolder mb-4">Colors</span>
                                <div class="mt-2">
                                    @foreach($template->colors as $color)
                                        <span style="background: {{ $color->hexadecimal }}" class="label font-weight-bold label-xl"></span>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer d-flex align-items-center">
                        <a href="{{ url('members-area/cpalanders/templates/start-now/' . $template->id) }}" class="btn btn-primary btn-sm text-uppercase font-weight-bolder mt-5 mt-sm-0 mr-auto mr-sm-0 ml-sm-auto"><strong>START NOW</strong><i class="ml-3 pr-0 flaticon2-arrow"></i></a>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
@endsection
@section('scripts')
    <script src="{{ asset('plugins/custom/datatables/datatables.bundle.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/datatable.js') }}" type="text/javascript"></script>
    <script type="text/javascript">
        function filter(res, type) {
            let group = $('.group option:selected').val();
            let color = $('.color option:selected').val();
            let option = $('.landeroption option:selected').val();
            location.replace(window.location.origin + "/members-area/cpalanders/templates/" + group + "/" + color + "/" + option);
        }
    </script>
@endsection