@extends('admin.layout.master')

@section('content')

<div class="app-content  my-3 my-md-5">
				<div class="side-app">
					<div class="page-header">
						<ol class="breadcrumb">
							<li class="breadcrumb-item" aria-current="page"><a href="">Customer Support</a></li>
							<li class="breadcrumb-item active" aria-current="page">All Customer</li>
						</ol>
					</div>
					<!-- MAIN BODY CONTENT -->
				  <div class="top-header mb-5">
						<h1 class="m-0">Customer Support</h1>
					</div>
		      @if(Session::has('error'))
						<div class="alert alert-danger" style="background: none; border: none;">
							<p style="color: #f00">{{ Session::get('error') }}</p>
						</div>
					@endif
          <div class="row ">
              <div class="col-xl-4 col-lg-4 col-md-4 col-sm-6">
                <div class="card">
                  <div class="card-body small-card">
                    <h5 class="font-medium">Total No Of Registered User</h5>
                    <div class="counter">
                      <svg
                        id="small-card-icon"
                        class="red"
                        xmlns="http://www.w3.org/2000/svg"
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                      >
                        <g transform="translate(21090 -1397)">
                          <rect
                            width="24"
                            height="24"
                            transform="translate(-21090 1397)"
                            fill="none"
                          />
                          <path
                            d="M14.222,18H1.778A1.791,1.791,0,0,1,0,16.2V3.6A1.792,1.792,0,0,1,1.778,1.8H5.494a2.646,2.646,0,0,1,5.014,0h3.715A1.791,1.791,0,0,1,16,3.6V16.2A1.791,1.791,0,0,1,14.222,18ZM4.445,12.6a.9.9,0,0,0,0,1.8H8.89a.9.9,0,0,0,0-1.8Zm0-3.6a.9.9,0,0,0,0,1.8h7.111a.9.9,0,0,0,0-1.8Zm0-3.6a.9.9,0,0,0,0,1.8h7.111a.9.9,0,0,0,0-1.8ZM8,1.8a.9.9,0,1,0,.889.9A.9.9,0,0,0,8,1.8Z"
                            transform="translate(-21086 1400)"
                            fill=""
                          />
                        </g>
                      </svg>
                      <span class="maintotalSet">{{ $total_registered_users }}</span>
                    </div>
                    <svg
                      id="small-card-bg-icon"
                      class="red"
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                    >
                      <g transform="translate(21090 -1397)">
                        <rect
                          width="24"
                          height="24"
                          transform="translate(-21090 1397)"
                          fill="none"
                        />
                        <path
                          d="M14.222,18H1.778A1.791,1.791,0,0,1,0,16.2V3.6A1.792,1.792,0,0,1,1.778,1.8H5.494a2.646,2.646,0,0,1,5.014,0h3.715A1.791,1.791,0,0,1,16,3.6V16.2A1.791,1.791,0,0,1,14.222,18ZM4.445,12.6a.9.9,0,0,0,0,1.8H8.89a.9.9,0,0,0,0-1.8Zm0-3.6a.9.9,0,0,0,0,1.8h7.111a.9.9,0,0,0,0-1.8Zm0-3.6a.9.9,0,0,0,0,1.8h7.111a.9.9,0,0,0,0-1.8ZM8,1.8a.9.9,0,1,0,.889.9A.9.9,0,0,0,8,1.8Z"
                          transform="translate(-21086 1400)"
                          fill=""
                        />
                      </g>
                    </svg>
                  </div>
                </div>
              </div>
              <div class="col-xl-4 col-lg-4 col-md-4 col-sm-6">
                <div class="card">
                  <div class="card-body small-card">
                    <h5 class="font-medium">
                      Total No Of Registered User In Last 30 Days
                    </h5>
                    <div class="counter">
                      <svg
                        id="small-card-icon"
                        class="orange"
                        xmlns="http://www.w3.org/2000/svg"
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                      >
                        <g transform="translate(21090 -1397)">
                          <rect
                            width="24"
                            height="24"
                            transform="translate(-21090 1397)"
                            fill="none"
                          />
                          <path
                            d="M14.222,18H1.778A1.791,1.791,0,0,1,0,16.2V3.6A1.792,1.792,0,0,1,1.778,1.8H5.494a2.646,2.646,0,0,1,5.014,0h3.715A1.791,1.791,0,0,1,16,3.6V16.2A1.791,1.791,0,0,1,14.222,18ZM4.445,12.6a.9.9,0,0,0,0,1.8H8.89a.9.9,0,0,0,0-1.8Zm0-3.6a.9.9,0,0,0,0,1.8h7.111a.9.9,0,0,0,0-1.8Zm0-3.6a.9.9,0,0,0,0,1.8h7.111a.9.9,0,0,0,0-1.8ZM8,1.8a.9.9,0,1,0,.889.9A.9.9,0,0,0,8,1.8Z"
                            transform="translate(-21086 1400)"
                            fill=""
                          />
                        </g>
                      </svg>
                      <span>{{$total_registered_users_30d}}</span>
                    </div>
                    <svg
                      id="small-card-bg-icon"
                      class="orange"
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                    >
                      <g transform="translate(21090 -1397)">
                        <rect
                          width="24"
                          height="24"
                          transform="translate(-21090 1397)"
                          fill="none"
                        />
                        <path
                          d="M14.222,18H1.778A1.791,1.791,0,0,1,0,16.2V3.6A1.792,1.792,0,0,1,1.778,1.8H5.494a2.646,2.646,0,0,1,5.014,0h3.715A1.791,1.791,0,0,1,16,3.6V16.2A1.791,1.791,0,0,1,14.222,18ZM4.445,12.6a.9.9,0,0,0,0,1.8H8.89a.9.9,0,0,0,0-1.8Zm0-3.6a.9.9,0,0,0,0,1.8h7.111a.9.9,0,0,0,0-1.8Zm0-3.6a.9.9,0,0,0,0,1.8h7.111a.9.9,0,0,0,0-1.8ZM8,1.8a.9.9,0,1,0,.889.9A.9.9,0,0,0,8,1.8Z"
                          transform="translate(-21086 1400)"
                          fill=""
                        />
                      </g>
                    </svg>
                  </div>
                </div>
              </div>
              <div class="col-xl-4 col-lg-4 col-md-4 col-sm-6">
                <div class="card">
                  <div class="card-body small-card">
                    <h5 class="font-medium">
                      Total No Of Blocked User
                    </h5>
                    <div class="counter">
                      <svg
                        id="small-card-icon"
                        class="blue"
                        xmlns="http://www.w3.org/2000/svg"
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                      >
                        <g transform="translate(21090 -1397)">
                          <rect
                            width="24"
                            height="24"
                            transform="translate(-21090 1397)"
                            fill="none"
                          />
                          <path
                            d="M14.222,18H1.778A1.791,1.791,0,0,1,0,16.2V3.6A1.792,1.792,0,0,1,1.778,1.8H5.494a2.646,2.646,0,0,1,5.014,0h3.715A1.791,1.791,0,0,1,16,3.6V16.2A1.791,1.791,0,0,1,14.222,18ZM4.445,12.6a.9.9,0,0,0,0,1.8H8.89a.9.9,0,0,0,0-1.8Zm0-3.6a.9.9,0,0,0,0,1.8h7.111a.9.9,0,0,0,0-1.8Zm0-3.6a.9.9,0,0,0,0,1.8h7.111a.9.9,0,0,0,0-1.8ZM8,1.8a.9.9,0,1,0,.889.9A.9.9,0,0,0,8,1.8Z"
                            transform="translate(-21086 1400)"
                            fill=""
                          />
                        </g>
                      </svg>
                      <span id="suspended_users">{{$total_suspended_users}}</span>
                    </div>
                    <svg
                      id="small-card-bg-icon"
                      class="blue"
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                    >
                      <g transform="translate(21090 -1397)">
                        <rect
                          width="24"
                          height="24"
                          transform="translate(-21090 1397)"
                          fill="none"
                        />
                        <path
                          d="M14.222,18H1.778A1.791,1.791,0,0,1,0,16.2V3.6A1.792,1.792,0,0,1,1.778,1.8H5.494a2.646,2.646,0,0,1,5.014,0h3.715A1.791,1.791,0,0,1,16,3.6V16.2A1.791,1.791,0,0,1,14.222,18ZM4.445,12.6a.9.9,0,0,0,0,1.8H8.89a.9.9,0,0,0,0-1.8Zm0-3.6a.9.9,0,0,0,0,1.8h7.111a.9.9,0,0,0,0-1.8Zm0-3.6a.9.9,0,0,0,0,1.8h7.111a.9.9,0,0,0,0-1.8ZM8,1.8a.9.9,0,1,0,.889.9A.9.9,0,0,0,8,1.8Z"
                          transform="translate(-21086 1400)"
                          fill=""
                        />
                      </g>
                    </svg>
                  </div>
                </div>
              </div>
            </div>

            <div class="card" style="min-height: 85px !important;">
                <div class="card-body">
                    <div class="form-row filter-row">
                      <div class="form-group mb-1 col-md-3">
                      <select class="form-control input-sm search_filter" id="state_filter" name="state_filter">
                        <option value="">Select State</option>
                        @if($states)
                          @foreach($states as $state_row)
                              <option value="{{$state_row->id}}"  @if(request()->post('state_filter') == $state_row->id){{'selected'}}@endif>{{$state_row->name}}</option>
                          @endforeach
                        @endif
                      </select>
                      </div>
                      <div class="form-group mb-1 col-md-3">
                        <select class="form-control input-sm search_filter" id="city_filter" name="city_filter">
                        <option value="">Select City</option>
                      </select>
                      </div>
                      <div class="col-md-6 col-lg-6">
                       <div class="input-group custom">
                              <input type="hidden" name="search_type" id="search_type">
                              <div class="input-group-prepend">
                                <button type="button" class="btn btn-outline-secondary">
                                  <i class="fa fa-search text-warning"></i>
                                </button>
                                <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"    aria-haspopup="true" aria-expanded="false">
                                  <span class="sr-only">Toggle Dropdown</span>
                                </button>
                                <div class="dropdown-menu">
                                  <a class="dropdown-item list" href="javascript:void(0)" data-id="">All Search</a>
                                  <a class="dropdown-item list" href="javascript:void(0)" data-id="1">Search By Name</a>
                                  <a class="dropdown-item list" href="javascript:void(0)" data-id="2">Search By Email</a>
                                  <a class="dropdown-item list" href="javascript:void(0)" data-id="3">Search By Phone Number</a>
                                  <a class="dropdown-item list" href="javascript:void(0)" data-id="4">Search By Username</a>
                                </div>
                              </div>
                              <input type="text" class="form-control input-sm" id="student_search_key" name="student_search_key" placeholder="Search Student">
                       </div>
                    </div>
                    </div>
                </div>
          </div>
          <!-- Table -->
              <div class="card">
                <div class="card-header pt-5 customer-listheader">
                   <h2> All Customer </h2>
                   <div class="filter-group col-lg-10 pr-0 cus-flex-nowrap customer-listfilter">
                    <span class="add_btn">
                      <a href="{{ route('admin.customer-support.customer-add') }}"><button class="btn btn-primary add-btn add-btn-sm"><i class="fa fa-plus-circle"></i>Add User</button>
                      </a>
                    </span>                    
                    <select class="form-control search_filter" id="gender_filter" name="gender_filter">
                      <option value="">Gender</option>
                      <option value="male">Male</option>
                      <option value="female">Female</option>
                      <option value="na">Prefer not to say</option>
                    </select>
                    <label for="exam_type_id" class="form-label" style="margin-bottom: 0px !important;">Exam Type</label>
                    <select class="js-ExamType form-control search_filter search-shadow" id="exam_type_id" name="exam_type_id[]" multiple="multiple">