@extends('backend.master')
@section('title')
    {{ ___('common.Notifications') }}
@endsection
@section('content')

<div class="page-content">

    {{-- bradecrumb Area S t a r t --}}
    <div class="page-header">
        <div class="row">
            <div class="col-sm-6">
                    <h4 class="bradecrumb-title mb-1">{{ ___('common.notications') }}</h1>
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="javascript:void(0)">{{ ___('common.home') }}</a></li>
                        <li class="breadcrumb-item">{{ ___('common.notications') }}</li>
                    </ol>
            </div>
            <div class="col-sm-6">
                <!-- Bookmark Start-->
                <div class="bookmark">
                    <ul>
                        <li><a href="javascript:void(0)"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-inbox"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path></svg></a></li>
                        <li><a href="javascript:void(0)"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-square"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg></a></li>
                        <li><a href="javascript:void(0)" ><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-command"><path d="M18 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3H6a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3V6a3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3h12a3 3 0 0 0 3-3 3 3 0 0 0-3-3z"></path></svg></a></li>
                        <li><a href="javascript:void(0)"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-layers"><polygon points="12 2 2 7 12 12 22 7 12 2"></polygon><polyline points="2 17 12 22 22 17"></polyline><polyline points="2 12 12 17 22 12"></polyline></svg></a></li>
                        <li><a href="javascript:void(0)"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star bookmark-search"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg></a></li>
                    </ul>
                </div>
                <!-- Bookmark Ends-->
            </div>
        </div>
    </div>
    {{-- bradecrumb Area E n d --}}


    <!-- Start Notification content -->
    <div class="ot-notification-contents p-0">
      <div class="notification-container p-0">
        <div class="notification-col">
          <div class="card d-flex justify-content-center align-items-center flex-column">
            <div class="card-head d-flex justify-content-between w-100">
              <div class="card-title">{{ ___('common.recent_notification') }}</div>
              <div class="item-selector d-flex">
                <select class="select-items">
                  <option>{{ ___('common.recent') }}</option>
                  <option>{{ ___('common.new') }}</option>
                  <option>{{ ___('common.this_year') }}</option>
                </select>
                <div class="action ml-12">
                  <button type="button" class="btn-action" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="fa fa-ellipsis-h"></i>
                  </button>
                  <ul class="dropdown-menu dropdown-menu-end noti-dropdown">
                    <li><a class="dropdown-item" href="#">{{ ___('common.mark_as_read') }}</a></li>
                    <li><a class="dropdown-item" href="#">{{ ___('common.go_setting') }}</a></li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="notification-list d-flex w-100 mt-16">
              <a href="#">
                <div class="notification-img">
                  <img src="{{ asset('backend/assets/images/notification/usericon1.png') }}" alt="user">
                  <div class="item-badge item-icon-badge">
                    <i class="fa fa-star"></i>
                  </div>
                </div>
              </a>
              <div class="notification-details w-100 ml-20">
                <div class="notification-line d-flex">
                  <div class="notification-subtitle"><strong>Domenica</strong></div>
                  <div class="d-flex justify-content-between w-100">
                    <div class="notification-login">@domenica</div>
                    <div class="ml-10 notification-time d-flex align-items-center"><span>2h</span>
                      <div class="ml-6 status-dot active"></div>
                    </div>
                  </div>
                </div>
                <div class="notification-content">Comment on <strong>Smiles – 3D icons</strong>
                </div>
                <div class="notification-comment mt-16">"Great work, I just purchased this
                  product"</div>
                <div class="notification-control">
                  <button class="notification-action">{{ ___('common.like') }}</button>
                  <button class="notification-action" data-bs-toggle="collapse" data-bs-target="#collapseExample1"
                    aria-expanded="false" aria-controls="collapseExample1">{{ ___('common.reply') }}</button>
                </div>
                <div class="answer collapse" id="collapseExample1">
                  <div class="user-answer d-flex align-items-start">
                    <a href="#"><img src="{{ asset('backend/assets/images/notification/usericon2.png') }}" alt="user"></a>
                    <textarea name="answer" id="answer1" cols="30" rows="10"
                      placeholder="Leave something to reply"></textarea>
                  </div>
                  <div class="btn-answer mt-16">
                    <button class="btn ot-btn-primary" type="button">{{ ___('common.reply') }}</button>
                    <button class="btn ot-btn-danger" data-bs-toggle="collapse" data-bs-target="#collapseExample1"
                      aria-expanded="false" aria-controls="collapseExample1" type="button">{{ ___('common.cancel') }}</button>
                  </div>
                </div>
              </div>
            </div>

            <div class="notification-list d-flex w-100">
              <a href="#">
                <div class="notification-img">
                  <img src="{{ asset('backend/assets/images/notification/usericon3.png') }}" alt="">
                  <div class="item-badge item-icon-badge">
                    <i class="fa fa-star"></i>
                  </div>
                </div>
              </a>
              <div class="notification-details w-100 ml-20">
                <div class="notification-line d-flex">
                  <div class="notification-subtitle"><strong>Domenica</strong></div>
                  <div class="d-flex justify-content-between w-100">
                    <div class="notification-login">@domenica</div>
                    <div class="ml-10 notification-time d-flex align-items-center"><span>2h</span>
                      <div class="ml-6 status-dot active"></div>
                    </div>
                  </div>
                </div>
                <div class="notification-content">Comment on <strong>Smiles – 3D icons</strong>
                </div>
                <div class="notification-comment mt-16">"Great work, I just purchased this
                  product"</div>
                <div class="notification-control">
                  <button class="notification-action liked-action">{{ ___('common.liked') }}</button>
                  <button class="notification-action" data-bs-toggle="collapse" data-bs-target="#collapseExample2"
                    aria-expanded="false" aria-controls="collapseExample2">{{ ___('common.reply') }}</button>
                </div>
                <div class="answer collapse" id="collapseExample2">
                  <div class="user-answer d-flex align-items-start">
                    <a href="#"><img src="{{ asset('backend/assets/images/notification/usericon2.png') }}" alt="user"></a>
                    <textarea name="answer" id="answer2" cols="30" rows="10"
                      placeholder="Leave something to reply"></textarea>
                  </div>
                  <div class="btn-answer mt-16">
                    <button class="btn ot-btn-primary" type="button">{{ ___('common.reply') }}</button>
                    <button class="btn ot-btn-danger" data-bs-toggle="collapse" data-bs-target="#collapseExample2"
                      aria-expanded="false" aria-controls="collapseExample2" type="button">{{ ___('common.cancel') }}</button>
                  </div>
                </div>
              </div>
            </div>

            <div class="notification-list d-flex w-100">
              <a href="#">
                <div class="notification-img">
                  <img src="{{ asset('backend/assets/images/notification/usericon4.png') }}" alt="">
                  <div class="item-badge item-icon-badge">
                    <i class="fa fa-star"></i>
                  </div>
                </div>
              </a>
              <div class="notification-details w-100 ml-20">
                <div class="notification-line d-flex">
                  <div class="notification-subtitle"><strong>Domenica</strong></div>
                  <div class="d-flex justify-content-between w-100">
                    <div class="notification-login">@domenica</div>
                    <div class="ml-10 notification-time d-flex align-items-center"><span>2h</span>
                      <div class="ml-6 status-dot active"></div>
                    </div>
                  </div>
                </div>
                <div class="notification-content">Comment on <strong>Smiles – 3D icons</strong>
                </div>
                <div class="notification-comment mt-16">"Great work, I just purchased this
                  product"</div>
                <div class="notification-control">
                  <button class="notification-action">{{ ___('common.like') }}</button>
                  <button class="notification-action" data-bs-toggle="collapse" data-bs-target="#collapseExample3"
                    aria-expanded="false" aria-controls="collapseExample3">{{ ___('common.reply') }}</button>
                </div>
                <div class="answer collapse" id="collapseExample3">
                  <div class="user-answer d-flex align-items-start">
                    <a href="#"><img src="{{ asset('backend/assets/images/notification/usericon2.png') }}" alt="user"></a>
                    <textarea name="answer" id="answer3" cols="30" rows="10"
                      placeholder="Leave something to reply"></textarea>
                  </div>
                  <div class="btn-answer mt-16">
                    <button class="btn ot-btn-primary" type="button">{{ ___('common.reply') }}</button>
                    <button class="btn ot-btn-danger" data-bs-toggle="collapse" data-bs-target="#collapseExample3"
                      aria-expanded="false" aria-controls="collapseExample3" type="button">{{ ___('common.cancel') }}</button>
                  </div>
                </div>
              </div>
            </div>

            <div class="notification-list d-flex w-100">
              <a href="#">
                <div class="notification-img">
                  <img src="{{ asset('backend/assets/images/notification/usericon1.png') }}" alt="">
                  <div class="item-badge item-icon-badge">
                    <i class="fa fa-star"></i>
                  </div>
                </div>
              </a>
              <div class="notification-details w-100 ml-20">
                <div class="notification-line d-flex">
                  <div class="notification-subtitle"><strong>Domenica</strong></div>
                  <div class="d-flex justify-content-between w-100">
                    <div class="notification-login">@domenica</div>
                    <div class="ml-10 notification-time d-flex align-items-center"><span>2h</span>
                      <div class="ml-6 status-dot active"></div>
                    </div>
                  </div>
                </div>
                <div class="notification-content">Comment on <strong>Smiles – 3D icons</strong>
                </div>
                <div class="notification-comment mt-16">"Great work, I just purchased this
                  product"</div>
                <div class="notification-control">
                  <button class="notification-action">{{ ___('common.like') }}</button>
                  <button class="notification-action" data-bs-toggle="collapse" data-bs-target="#collapseExample4"
                    aria-expanded="false" aria-controls="collapseExample4">{{ ___('common.reply') }}</button>
                </div>
                <div class="answer collapse" id="collapseExample4">
                  <div class="user-answer d-flex align-items-start">
                    <a href="#"><img src="{{ asset('backend/assets/images/notification/usericon2.png') }}" alt="user"></a>
                    <textarea name="answer" id="answer4" cols="30" rows="10"
                      placeholder="Leave something to reply"></textarea>
                  </div>
                  <div class="btn-answer mt-16">
                    <button class="btn ot-btn-primary" type="button">{{ ___('common.reply') }}</button>
                    <button class="btn ot-btn-danger" data-bs-toggle="collapse" data-bs-target="#collapseExample4"
                      aria-expanded="false" aria-controls="collapseExample4" type="button">{{ ___('common.cancel') }}</button>
                  </div>
                </div>
              </div>
            </div>

            <div class="d-flex align-items-center mt-30">
              <button class="btn ot-btn-primary" type="button" disabled="">
                <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
                {{ ___('common.load_more') }}
              </button>
            </div>
          </div>
        </div>
      </div>
      <div class="filter-container p-0">
        <div class="filter">
          <div class="title-filter">{{ ___('common.filter_by') }}</div>
          <div class="input-checkbox input-check-radio d-flex flex-column gap-3 mt-10 mb-32 ml-22">
            <div class="form-check">
              <input type="checkbox" class="form-check-input" name="comments" id="comments">
              <label class="form-check-label" for="comments">{{ ___('common.comments') }}</label>
            </div>
            <div class="form-check">
              <input type="checkbox" class="form-check-input" name="likes" id="likes">
              <label class="form-check-label" for="likes">{{ ___('common.likes') }}</label>
            </div>
            <div class="form-check">
              <input type="checkbox" class="form-check-input" name="reviews" id="reviews">
              <label class="form-check-label" for="reviews">{{ ___('common.reviews') }}</label>
            </div>
            <div class="form-check">
              <input type="checkbox" class="form-check-input" name="mentions" id="mentions">
              <label class="form-check-label" for="mentions">{{ ___('common.mentions') }}</label>
            </div>
            <div class="form-check">
              <input type="checkbox" class="form-check-input" name="purchases" id="purchases">
              <label class="form-check-label" for="purchases">{{ ___('common.purchases') }}</label>
            </div>
            <div class="form-check">
              <input type="checkbox" class="form-check-input" name="message" id="message">
              <label class="form-check-label" for="message">{{ ___('common.message') }}</label>
            </div>
          </div>
          <div class="btn-select">
            <button class="select btn ot-btn-primary" type="button">{{ ___('common.select_all') }}</button>
            <button class="deselect btn ot-btn-warning" type="button">{{ ___('common.delete_all') }}</button>
          </div>
          <hr>
          <div class="input-user input-check-radio  d-flex flex-column gap-3">
            <div class="form-check">
              <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
              <label class="form-check-label" for="flexRadioDefault1">
              {{ ___('common.everyone') }}
              </label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
              <label class="form-check-label" for="flexRadioDefault2">
                Admin
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- End Notification content  -->
  </div>

@endsection