@extends('layouts.backend.master')
@section('content')

@section('breadcrumbs')
<div class="container">
        <div class="row">
            <div class="col-md-12">

                <div class="book-container">
              <div class="book-left"></div>
              <div class="book-content">
                <h4>{{ $lesson->title }}</h4>
                <hr/>
                  {!! $lesson->content !!}

                  <br/><br/>
                  <div class="navigation">
                      @if ($previousLesson)
                          <a href="{{ route('client-lessons.show', ['courseSlug' => $course->slug, 'lessonSlug' => $previousLesson->slug]) }}"
                             class="btn btn-primary">Previous Chapter</a>
                      @endif

                      @if ($nextLesson)
                          <a href="{{ route('client-lessons.show', ['courseSlug' => $course->slug, 'lessonSlug' => $nextLesson->slug]) }}"
                             class="btn btn-primary">Next Chapter</a>
                      @endif
                  </div>
              </div>
              <div class="book-right"></div>
          </div>


      </div>  </div>  </div>
      <style>
      .book-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 5px;
}

.book-left,
.book-right {

    background-color: #f1f1f1;
}

.book-content {
    flex: 1;
    padding: 40px;
    background-color: #ffffff;
    font-size: 16px;
    line-height: 1.5;
}

.navigation {
    margin-top: 8px;
}

      </style>
          
@endsection