@extends('user.layouts.app')

@section('content')
@section('title', 'Document List')
<!-- notification popup /-- -->
        <!-- notification inner section:begin -->
        <div class="notification-section inner-spacer">
          <div class="notification-section_inner">
            <div class="notification-section_head">
              <h4>Notification</h4>

              <div class="filter-branch">
                <span class="text">Filter by</span>
                <div class="dropdown">
                  <button
                    class="btn dropdown-toggle"
                    type="button"
                    id="dropdownMenuBranch"
                    data-bs-toggle="dropdown"
                    aria-expanded="false"
                  >
                    All Branch
                  </button>
                  <ul
                    class="dropdown-menu"
                    aria-labelledby="dropdownMenuBranch1"
                  >
                    <li><a class="dropdown-item" href="#">one</a></li>
                    <li><a class="dropdown-item" href="#">two</a></li>
                    <li>
                      <a class="dropdown-item" href="#">three</a>
                    </li>
                  </ul>
                </div>
                <!-- <select
                class="form-select"
                aria-label="Default select branch-select"
              >
                <option selected>All Branch</option>
                <option value="1">One</option>
                <option value="2">Two</option>
                <option value="3">Three</option>
              </select> -->
              </div>
            </div>
            <p class="notification-section_para">3 Unread Notification</p>
          </div>
          <div class="notification-section_list">
            <h3>Today</h3>
            <ul class="list-notify">
              <li>
                <a href="#">
                  <div class="d-between">
                    <button
                      class="btn"
                      type="button"
                      data-bs-toggle="offcanvas"
                      data-bs-target="#offcanvasRightView"
                      aria-controls="offcanvasRightView"
                    >
                      <div class="d-flex align-items-center gap-4">
                        <span class="list-notify_imgBox">
                          <img
                            src="{{asset('user/icons/notify-orange.svg')}}"
                            alt="latest notification"
                            class="img-fluid"
                          />
                        </span>
                        <div class="">
                          <h5>Branch 01</h5>
                          <p>
                            It is a long established fact that a reader will be
                            distracted by the readable content of a page when
                            looking at its layout. The point of using Lorem
                          </p>
                        </div>
                      </div>
                    </button>
                    <span class="time-notif"> 34min. ago </span>
                  </div>
                </a>
              </li>

              <li>
                <a href="#">
                  <div class="d-between">
                    <button
                      class="btn"
                      type="button"
                      data-bs-toggle="offcanvas"
                      data-bs-target="#offcanvasRightView"
                      aria-controls="offcanvasRightView"
                    >
                      <div class="d-flex align-items-center gap-4">
                        <span class="list-notify_imgBox">
                          <img
                            src="{{asset('user/icons/notify-orange.svg')}}"
                            alt="latest notification"
                            class="img-fluid"
                          />
                        </span>
                        <div class="">
                          <h5>Branch 02</h5>
                          <p>
                            It is a long established fact that a reader will be
                            distracted by the readable content of a page when
                            looking at its layout. The point of using Lorem
                          </p>
                        </div>
                      </div>
                    </button>
                    <span class="time-notif"> 34min. ago </span>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="d-between">
                    <button
                      class="btn"
                      type="button"
                      data-bs-toggle="offcanvas"
                      data-bs-target="#offcanvasRightView"
                      aria-controls="offcanvasRightView"
                    >
                      <div class="d-flex align-items-center gap-4">
                        <span class="list-notify_imgBox">
                          <img
                            src="{{asset('user/icons/notify-orange.svg')}}"
                            alt="latest notification"
                            class="img-fluid"
                          />
                        </span>
                        <div class="">
                          <h5>Branch 03</h5>
                          <p>
                            It is a long established fact that a reader will be
                            distracted by the readable content of a page when
                            looking at its layout. The point of using Lorem
                          </p>
                        </div>
                      </div>
                    </button>
                    <span class="time-notif"> 34min. ago </span>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="d-between">
                    <button
                      class="btn"
                      type="button"
                      data-bs-toggle="offcanvas"
                      data-bs-target="#offcanvasRightView"
                      aria-controls="offcanvasRightView"
                    >
                      <div class="d-flex align-items-center gap-4">
                        <span class="list-notify_imgBox">
                          <img
                            src="{{asset('user/icons/notify-gray.svg')}}"
                            alt="latest notification"
                            class="img-fluid"
                          />
                        </span>
                        <div class="">
                          <h5>Branch 02</h5>
                          <p>
                            It is a long established fact that a reader will be
                            distracted by the readable content of a page when
                            looking at its layout. The point of using Lorem
                          </p>
                        </div>
                      </div>
                    </button>
                    <span class="time-notif"> 34min. ago </span>
                  </div>
                </a>
              </li>
            </ul>
            <h3>Previous</h3>
            <ul class="list-notify">
              <li>
                <a href="#">
                  <div class="d-between">
                    <button
                      class="btn"
                      type="button"
                      data-bs-toggle="offcanvas"
                      data-bs-target="#offcanvasRightView"
                      aria-controls="offcanvasRightView"
                    >
                      <div class="d-flex align-items-center gap-4">
                        <span class="list-notify_imgBox">
                          <img
                            src="{{asset('user/icons/notify-gray.svg')}}"
                            alt="latest notification"
                            class="img-fluid"
                          />
                        </span>
                        <div class="">
                          <h5>Branch 01</h5>
                          <p>
                            It is a long established fact that a reader will be
                            distracted by the readable content of a page when
                            looking at its layout. The point of using Lorem
                          </p>
                        </div>
                      </div>
                    </button>
                    <span class="time-notif"> Yesterday at 12:32 pm</span>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="d-between">
                    <button
                      class="btn"
                      type="button"
                      data-bs-toggle="offcanvas"
                      data-bs-target="#offcanvasRightView"
                      aria-controls="offcanvasRightView"
                    >
                      <div class="d-flex align-items-center gap-4">
                        <span class="list-notify_imgBox">
                          <img
                            src="{{asset('user/icons/notify-gray.svg')}}"
                            alt="latest notification"
                            class="img-fluid"
                          />
                        </span>
                        <div class="">
                          <h5>Branch 02</h5>
                          <p>
                            It is a long established fact that a reader will be
                            distracted by the readable content of a page when
                            looking at its layout. The point of using Lorem
                          </p>
                        </div>
                      </div>
                    </button>
                    <span class="time-notif"> 2 Jul 2023, 12:19 pm </span>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="d-between">
                    <button
                      class="btn"
                      type="button"
                      data-bs-toggle="offcanvas"
                      data-bs-target="#offcanvasRightView"
                      aria-controls="offcanvasRightView"
                    >
                      <div class="d-flex align-items-center gap-4">
                        <span class="list-notify_imgBox">
                          <img
                            src="{{asset('user/icons/notify-gray.svg')}}"
                            alt="latest notification"
                            class="img-fluid"
                          />
                        </span>
                        <div class="">
                          <h5>Branch 03</h5>
                          <p>
                            It is a long established fact that a reader will be
                            distracted by the readable content of a page when
                            looking at its layout. The point of using Lorem
                          </p>
                        </div>
                      </div>
                    </button>
                    <span class="time-notif"> 2 Jul 2023, 12:19 pm </span>
                  </div>
                </a>
              </li>
            </ul>
            <!-- view notifications offcanvas:begin  -->

            <div
              class="offcanvas offcanvas-end offcanvas-notify"
              tabindex="-1"
              id="offcanvasRightView"
              aria-labelledby="offcanvasRightViewLabel"
            >
              <div class="offcanvas-header">
                <h5 id="offcanvasRightViewLabel">Notification details</h5>
                <button
                  type="button"
                  class="btn-close text-reset"
                  data-bs-dismiss="offcanvas"
                  aria-label="Close"
                ></button>
              </div>
              <div class="offcanvas-branch">
                <div class="d-between">
                  <div class="d-flex align-items-center gap-4">
                    <span class="list-notify_imgBox">
                      <img
                        src="{{asset('user/icons/notify-orange.svg')}}"
                        alt="latest notification"
                        class="img-fluid"
                      />
                    </span>

                    <h5>Branch 01</h5>
                  </div>
                  <span class="time-notif"> 13 july, 2023, 10:30 pm</span>
                </div>
              </div>
              <div class="offcanvas-body">
                <ul class="list-notify">
                  <li>
                    <a href="#">
                      <!-- <div class="d-between mb-4 pb-2">
                        <div class="d-flex align-items-center gap-4">
                          <span class="list-notify_imgBox">
                            <img
                              src="./icons/notify-orange.svg"
                              alt="latest notification"
                              class="img-fluid"
                            />
                          </span>

                          <h5>Branch 01</h5>
                        </div>
                        <span class="time-notif"> 13 july, 2023, 10:30 pm</span>
                      </div> -->
                      <p class="mb-4 pb-2">
                        It is a long established fact that a reader will be
                        distracted by the readable content of a page when
                        looking at its layout. The point of using Lorem
                      </p>
                      <p>
                        It is a long established fact that a reader will be All
                        the Lorem Ipsum generators on the Internet tend to
                        repeat predefined chunks as necessary, making this the
                        first true generator on the Internet. It uses a
                        dictionary of over 200 Latin words, combined with a
                        handful of model sentence
                      </p>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <!-- view notifications offcanvas:end  -->
        <!-- notification inner section:end -->

        <!-- notification pagination:begin -->
        <div class="pagination-notify">
          <div
            aria-label="pagination-notification"
            class="pagination-notify_wrapper"
          >
            <ul class="pagination">
              <li class="page-item">
                <span class="page-link page-link--prev disabled">
                  <svg
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <g id="carat">
                      <path
                        d="M15.1602 7.41L10.5802 12L15.1602 16.59L13.7502 18L7.75016 12L13.7502 6L15.1602 7.41Z"
                        fill="#137BC0"
                      />
                    </g>
                  </svg>
                </span>
              </li>
              <li class="page-item"><a class="page-link" href="#">1</a></li>
              <li class="page-item active" aria-current="page">
                <span class="page-link">2</span>
              </li>
              <li class="page-item"><a class="page-link" href="#">3</a></li>
              <li class="page-item">
                <a class="page-link page-link--next" href="#">
                  <svg
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <g id="carat">
                      <path
                        id="Vector"
                        d="M8.83984 7.41L13.4198 12L8.83984 16.59L10.2498 18L16.2498 12L10.2498 6L8.83984 7.41Z"
                        fill="#137BC0"
                      ></path>
                    </g>
                  </svg>
                </a>
              </li>
            </ul>
          </div>
        </div>
        <!-- notification pagination:end  -->
@endsection