@extends('layouts.app')
@section('content')
    <div class="container">
        <div class="mt-4">{!! $courses->render() !!}</div>
        <div class="row">
            @foreach($courses as $course)
                <div class="col-lg-4 col-md-4 col-sm-6 pt-2 pb-4">
                    <div class="card shadow text-center mb-2 mt-5 w-auto rounded-lg" style="width: 18rem; @if(isset($course->body_color) && !is_null($course->body_color)) background-color: {{ $course->body_color }}; @endif">
                        <div class="card-header" style="@if(isset($course->header_color) && !is_null($course->header_color)) background-color: {{ $course->header_color }}; @endif">
                            @foreach($course->careers as $career)
                                <b>{{ ucfirst($career->name) }}</b>
                            @endforeach
                        </div>
                        <div class="card-body">
                            <div style="height: 40px;">
                                <h5><b>{{ucfirst($course->name)}}</b></h5>
                            </div>
                            <div style="height: 62px;">
                                <p class="text-truncate">
                                    {{ $course->detail }}
                                </p>
                            </div>
                            <a href="{{ route('course-by-id', ['course' => $course->id]) }}" class="btn btn-outline-dark">
                                Mas Info
                            </a>
                        </div>
                        <div class="card-footer">
                            <div class="float-right">
                                @if ($course->price> 0 && $course->discount_price > 0)
                                    <del class="mr-2 text-muted">$@convert($course->discount_price)</del>
                                @endif
                                @if ($course->price > 0)
                                    <b>$@convert($course->price)</b>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
@endsection