@extends('layout')
@section('content')
<div class="instruction-detail-page">
  <div class="container py-5">
    <div class="video-container">
      <div class="play-button">
        <i class="bi bi-play-circle"></i>
      </div>
    </div>
    <h1 class="text-center">คู่มือการใช้งานระบบ</h1>
    <p class="text-sub text-center mb-5">Teacher
      <span><img src="{{asset('images/line-blue.png')}}" alt="instruction" height="16" class="img-fluid"></span>
    </p>

    <div class="accordion custom-accordion" id="instructionAccordion">
      <div class="accordion-item">
        <h2 class="accordion-header" id="headingOne">
          <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne"
            aria-expanded="true" aria-controls="collapseOne">
            1. instruction one
          </button>
        </h2>
        <div id="collapseOne" class="accordion-collapse show" aria-labelledby="headingOne"
          data-bs-parent="#instructionAccordion">
          <div class="accordion-body">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nulla risus, tristique vel cursus nec, mat
            tisac nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pha
            sellussuscipit id quam vitae pulvinar. Praesent at erat condimentum, porttitor arcu et, elementum tortor.
            Curabitur eget augue et ipsum ultricies consequat vel ornare eros. Curabitur eget blandit urna. Donec id
            nibh quis eros fringilla vulputate ut id nibh. Ut at blandit ex. Nunc lacinia elit arcu, in sodales libero
            sus
            cipit non. Vivamus vel felis diam.
          </div>
        </div>
      </div>
      <div class="accordion-item">
        <h2 class="accordion-header" id="headingTwo">
          <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo"
            aria-expanded="true" aria-controls="collapseTwo">
            2. instruction two
          </button>
        </h2>
        <div id="collapseTwo" class="accordion-collapse show" aria-labelledby="headingTwo"
          data-bs-parent="#instructionAccordion">
          <div class="accordion-body">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nulla risus, tristique vel cursus nec, mat
            tisac nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pha
            sellussuscipit id quam vitae pulvinar. Praesent at erat condimentum, porttitor arcu et, elementum tortor.
            Curabitur eget augue et ipsum ultricies consequat vel ornare eros. Curabitur eget blandit urna. Donec id
            nibh quis eros fringilla vulputate ut id nibh. Ut at blandit ex. Nunc lacinia elit arcu, in sodales libero
            sus
            cipit non. Vivamus vel felis diam.
          </div>
        </div>
      </div>
    </div>

  </div>
</div>


@endsection