@extends('user.layouts.app')

@section('content')
@section('title', 'Notifications')
<!-- notification popup /-- -->
        <!-- notification inner section:begin -->
        <div class="notification-section inner-spacer">
          <div class="notification-section_inner">
            <div class="notification-section_head">
              <h4>{{__('language.notification')}}</h4>

              <div class="filter-branch">
                <span class="text">{{__('language.filter_by')}}</span>
                <div class="dropdown">
                  {{-- <button
                    class="btn dropdown-toggle"
                    type="button"
                    id="dropdownMenuBranch"
                    data-bs-toggle="dropdown"
                    aria-expanded="false"
                  >
                    {{__('language.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> --}}
                  <select name="" id="branches" class="btn dropdown-toggle" onchange="duration()" style="padding: 7px 12px;border-radius: 8px;border: 1px solid #c3d3e2;background: #fff;color: #737791;font-family:sans-serif;font-size: 1.4rem;font-style: normal;font-weight: 400;line-height: normal;width:90px">
                    <option value="">All</option>
                @foreach($filter_branches as $branch_data)
                    <option value="{{$branch_data['id']}}">{{$branch_data['ShopName']}}</option>
                @endforeach
            </select>
                </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">{{$unread_count}} {{__('language.unread_notification')}}</p>
          </div>
          
          <div class="notification-section_list" id="new_notification">
            <h3>{{__('language.today')}}</h3>
            <ul class="list-notify">
              @foreach($branches as $branch_data)
              <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">
                          @if ($branch_data['read_status']=='0')
                          <img
                            src="{{asset('user/icons/notify-orange.svg')}}"
                            alt="latest notification"
                            class="img-fluid"
                          />
                          @endif
                          @if ($branch_data['read_status']=='1')
                          <img
                          src="{{asset('user/icons/notify-gray.svg')}}"
                          alt="latest notification"
                          class="img-fluid"
                        />
                          @endif
                           
                          
                        </span>
                        <div class="">
                          <h5>{{$branch_data['ShopName']}}</h5>
                          <p>
                            {{$branch_data['subject']}}
                          </p>
                        </div>
                      </div>
                    </button>
                    <span class="time-notif">
                      {{ $branch_data->created_at->diffForHumans() }}
                    </span>
                  </div>
                </a>
              </li>
              @endforeach
            </ul>
            <h3>{{__('language.previous')}}</h3>
            <ul class="list-notify">
              @foreach($old_branch_data as $old_data)
              <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>{{$old_data['ShopName']}}</h5>
                          <p>
                            {{$old_data['subject']}}
                          </p>
                        </div>
                      </div>
                    </button>
                    <span class="time-notif"> Yesterday at 12:32 pm</span>
                  </div>
                </a>
              </li>
              @endforeach
             
            </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 -->
        {{ $branches->links('pagination::bootstrap-4') }}
        {{-- <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
<script>
   function duration()
    {
        var branches = $("#branches").val();
        //var duration = $("#duration").val();
        //var best_selling_product = $("#best_selling_product").val();
        // alert(best_selling_product);
        // let url = "{{ route('user.notification-filter', 'val') }}";
        let url = "{{ route('user.notification', 'val') }}";
            url = url.replace('val', branches);
            $.ajax({
                    method:'GET',
                    url: url,
                    data:{branches:branches},
                    success:function(res)
                    { console.log(res);
                      document.getElementById("new_notification").innerHTML = res;
                        
                    }

                });
    }
</script>