@extends('website.layout.master')
@section('title', 'الرئيسية')
@section('content')

    <div class="container">
        <div class="header">
            <h3>Demo</h3>
            <ul>
                <li><a href="{{url('/')}}">Home </a></li>
                <li>/</li>


                <li> Demo </li>
            </ul>
        </div>
    </div>
    </header>
    <!--  -->
    <div class="body-content">
        <div class="container">

            <div class="row mb-5  justify-content-center">
                <div class="col-12 col-lg-12 mt-5">
                    <ul class="nav nav-tabs frcem-tab" id="myTab" role="tablist">
                        @foreach($exams as $key=>$exam)
                        <li class="nav-item" role="presentation">
                            <button class="nav-link @if($key == 0) active @endif" id="{{$exam->id}}-tab" data-toggle="tab" data-target="#{{$exam->id}}" type="button"
                                    role="tab" aria-controls="{{$exam->id}}" aria-selected="{{($key ==0 ) ? true : false}}">

                                <img src="{{asset('web')}}/img/t1.svg" alt="">
                                <h6>{{$exam->title}} </h6>

                            </button>
                        </li>
                        @endforeach
                    </ul>
                    <div class="tab-content" id="myTabContent">
                        @foreach($exams as $key=>$exam)
                        <div class="tab-pane fade @if($key == 0 ) show active @endif" id="{{$exam->id}}" role="tabpanel" aria-labelledby="{{$exam->id}}-tab">
                            <div class="body-e">
                                <div class="try-it">
                                    <p>{!! $exam->description !!}</p>
                                    <a href="./Sign-up.html" class="try">Sign up</a>

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

                    </div>
                </div>

                <div class="col-12">
                    <div class="box-ll">
                        <div class="ti-title">
                            <h6>our departments</h6>
                            <h4>Check out our website features  </h4>
                        </div>
                        <div class="row">
                                @foreach($categories as $category)
                                    <div class="col-12 col-md-3 col-lg-2 ">
                                        <div class="revision-item">
                                            <a href="#">
                                                <img src="{{ $category->image }}" alt="">
                                                <h5>{{ $category->name }}</h5>
                                            </a>
                                        </div>
                                    </div>
                                @endforeach
                            <div class="col-12">
                                <div class="try-it">

                                    <a href="{{url('demo-question')}}" class="try">Start demo</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>


    </div>


@stop