Ekapp/skolehjem/resources/views/app/guides/index.blade.php

@extends("app.layout.base")

@section("title")
    Vejledninger
@endsection

@section("content")
    <style>
        div.card {
            margin-top: 1rem;
            margin-bottom: 30px;
            width: auto;
            heigt: auto;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            display: flex;
            flex-direction: row;
            border-radius: 10px;
        }

        div.header {
            background-color: #00788a;
            color: white;
            padding: 8px;
            font-size: 10px;
            text-align: center;
            -webkit-box-flex: 0;
            -ms-flex: 0 0 40%;
            flex: 0 0 40%;
            max-width: 40%;
            border-radius: 10px 0px 0px 10px;
        }

        div.container {
            padding: 8px;
            line-height: 1.5;
        }

        .select2-container--default .select2-results > .select2-results__options {
            max-height: 120px !important;
        }

        .select2-results__option, .select2-search__field {
            color: black;
        }
    </style>
    <script src="{{ asset("/js/jquery-3.2.1.min.js") }}"></script>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
    <script>
        // In your Javascript (external .js resource or <script> tag)
        $(document).ready(function() {
            $('.js-example-basic-single').select2();
        });
    </script>
    <main style="min-height: calc(100% - 61.34px);">
        <h1 class="text-center sde-blue mt-0 mb-2rem">{{__('msg.vejledning')}}</h1>
        @if(!$guides->isEmpty())
            @if (count(\App\GuidesCategory::query()->get()) > 1)
                <h4 class="mt-0 mb-0">{{ __("msg.kategorier") }}</h4>
                <select id="categorySelect" class="js-example-basic-single mb-2rem" name="state">
                    <option value="All" selected>{{ __("msg.allekategorier") }}</option>
                    @foreach (\App\GuidesCategory::query()->get() as $Category)
                        <option value="{{ $Category->id }}">{{ $Category->guidesCategoryName }}</option>
                    @endforeach
                </select>
            @endif

            <div id="main">
                @foreach($guides as $guide)
                    <div class="card">
                        @if($guide->resource_id !== null)
                            <div class="header bs-cover bp-center" style="background-image: url('{{ asset(\App\Resource::query()->where("id", "=", $guide->resource_id)->first()->filename) }}');">
                            </div>
                        @else
                            <div class="header d-flex justify-content-center">
                                <img alt="Image" src="{{ asset('/images/icons/image.svg')  }}" style="width: calc(100% - 20px)">
                            </div>
                        @endif
                        <div class="container w-100">
                            <div class="row justify-content-center">
                                <h4>{{ $guide->name}}</h4>
                            </div>
                            <div class="row justify-content-center">
                                <a class="text-center m-none p-none bold sde-blue" href="{{route("guides.show", ["guide" => $guide->id ])}}">{{__('msg.læsmere')}}</a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            <p class="mb-auto text-center">{{__('msg.dereringenvejledninger')}}.</p>
        @endif
    </main>

    <script>
        $('#categorySelect').on('change', function () {
            $value = $(this).val();

            $.ajax({
                type: 'get',
                url: '{{ route("guides.showCategory") }}',
                data: { 'category':$value },
                success:function (data) {
                    $('#main').html(data);
                },
                error:function (data) {
                    console.log(data);
                }
            });
        })
    </script>
@endsection