@extends('frontend.layout')
@section('content')


<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<style>

.card-main {
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 15px 1px rgba(52,40,104,.08);
}
.card-main {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid #e5e9f2;
    border-radius: .2rem;
}
.card-header:first-child {
    border-radius: calc(.2rem - 1px) calc(.2rem - 1px) 0 0;
}
.card-header {
    border-bottom-width: 1px;
}
.card-header {
    padding: .75rem 1.25rem;
    margin-bottom: 0;
    color: inherit;
    background-color: #fff;
    border-bottom: 1px solid #e5e9f2;
}
.list-group-item.active {
  z-index: 2;
  color: #fff;
  /* background-color: #f26522;
    border-color:#f26522; */
    background-color: #30302e;
border-color: #30302e;
}
.mybtn{
    /* background-color: #f26522;
    border-color:#f26522; */

    background-color: #30302e;
border-color: #30302e;
}

.mybtn:hover{
    background-color: #f26522;
    border-color:#f26522;

}

/* body{
    background:#eee;
    margin-top:20px;
} */
.card-header {
    border-bottom: 1px solid transparent;
    background-color: transparent;
}

.border-primary {
  border-color: #007bff !important;
}
.border {
  border: 1px solid #dee2e6 !important;
}

/* .progression
{
	width: 300px;
	text-align: center;
}

p.progress-text
{
	font-weight: bold;
}

.progress-container
{
	display: block;
	background-color: #f4f1ea;
	height: 25px;
}

.progress-bar
{
	background-color: #927f64;
	height: 100%;
	width: 0%;
	transition: width 0.5s;
} */


.progress-container{
  position: relative;
	width: 100%;
  background: #dddddd;
  border-radius: 50px;
  overflow: hidden;
}
.progress-bar {
  width: 0%;
  height: 50px;
  /* linear-gradient(
      red, #f06d06
    ); */
    background: linear-gradient(to right,   #f06d06,#6A5850 );
    /* animation-duration: 3s; */
  /* background: linear-gradient(to right, #00FF7F , #00BFFF); */
  animation: progress-bar 8s linear forwards;
  animation-delay: 3s;
}
@media screen and (max-width: 640px){

.margin-space{

margin-top:-160px;

}
}
.margin-space{
	margin-top:500px;
	margin-bottom:250px;
}



@import url('https://fonts.googleapis.com/css?family=Oswald');
* {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box
}

body {
    background-color: #dadde6;
    font-family: arial
}

.fl-left {
    float: left
}

.fl-right {
    float: right
}

h1 {
    text-transform: uppercase;
    font-weight: 900;
    border-left: 10px solid #fec500;
    padding-left: 10px;
    margin-bottom: 30px
}

.row {
    overflow: hidden
}

.card {
    display: table-row;
    width: 49%;
    background-color: #fff;
    color: #989898;
    margin-bottom: 10px;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    border-radius: 4px;
    position: relative
}

.card+.card {
    margin-left: 2%
}

.date {
    display: table-cell;
    width: 25%;
    position: relative;
    text-align: center;
    border-right: 2px dashed #dadde6
}

.date:before,
.date:after {
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    background-color: #DADDE6;
    position: absolute;
    top: -15px;
    right: -15px;
    z-index: 1;
    border-radius: 50%
}

.date:after {
    top: auto;
    bottom: -15px
}

.date time {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.date time span {
    display: block
}

.date time span:first-child {
    color: #2b2b2b;
    font-weight: 600;
    font-size: 250%
}

.date time span:last-child {
    text-transform: uppercase;
    font-weight: 600;
    margin-top: -10px
}

.card-cont {
    display: table-cell;
    width: 75%;
    font-size: 85%;
    padding: 5px 5px 15px 20px
}

.card-cont h3 {
    color: #3C3C3C;
    font-size: 130%
}

.reject {
    text-decoration: line-through
}

.card-cont>div {
    display: table-row
}

.card-cont .even-date i,
.card-cont .even-info i,
.card-cont .even-date time,
.card-cont .even-info p {
    display: table-cell
}

.card-cont .even-date i,
.card-cont .even-info i {
    padding: 5% 5% 0 0
}

.card-cont .even-info p {
    padding: 0px 0px 0 0;
    font-size:12px;
}

.card-cont .even-date time span {
    display: block
}

.card-cont a {
    display: block;
    text-decoration: none;
    width: 80px;
    height: 30px;
    background-color: #D8DDE0;
    color: #fff;
    text-align: center;
    line-height: 30px;
    border-radius: 2px;
    position: absolute;
    right: 10px;
    bottom: 10px
}

.row:last-child .card:first-child .card-cont a {
    background-color: #037FDD
}

.row:last-child .card:last-child .card-cont a {
    background-color: #F8504C
}

@media screen and (max-width: 860px) {
    .card {
        display: block;
        float: none;
        width: 100%;
        margin-bottom: 10px
    }
    .card+.card {
        margin-left: 0
    }
    .card-cont .even-date,
    .card-cont .even-info {
        font-size: 75%
    }
}

h1, h2, h3, h4, h5, h6 {
    letter-spacing: 0;
    font-weight: normal;
    position: relative;
    padding: 0px;
    font-weight: normal;
    line-height: normal;
    color: #111111;
    margin: 0;
}



.accordion-box {
  padding: 1em;
}
</style>
<div class="container p-0 margin-space" style="">
    
    <h1 class="h3 mb-3">Settings</h1>
    <div class="row">
        
        <div class="col-md-5 col-xl-4">

            <div class="card-main">
                <div class="card-header">
                    <h5 class="card-title mb-0">Profile Settings </h5>
                </div>
                    <input type="hidden" id="mail" name="url" value=" {{ session('status') }}" />
                <div class="list-group list-group-flush" role="tablist">
                    <a class="list-group-item list-group-item-action {{ request()->is('profile/tab1') ? 'active' : null }}"  href="{{url('profile/tab1')}}" role="tab">
                      Account
                    </a>
                    <a class="list-group-item list-group-item-action {{ request()->is('profile/tab2') ? 'active' : null }}"  href="{{url('profile/tab2')}}" role="tab">
                      Password
                    </a>
                     <a class="list-group-item list-group-item-action {{ request()->is('profile/tab3') ? 'active' : null }}" href="{{url('profile/tab3')}}" role="tab">
                      Reciept 
                    </a>
                    <a class="list-group-item list-group-item-action {{ request()->is('profile/tab4') ? 'active' : null }}" href="{{url('profile/tab4')}}" role="tab">
                      My Receipt 
                    </a>
                    <!-- <a class="list-group-item list-group-item-action" data-toggle="list" href="#" role="tab">
                      Email notifications
                    </a>
                    <a class="list-group-item list-group-item-action" data-toggle="list" href="#" role="tab">
                      Web notifications
                    </a>
                    <a class="list-group-item list-group-item-action" data-toggle="list" href="#" role="tab">
                      Widgets
                    </a>
                    <a class="list-group-item list-group-item-action" data-toggle="list" href="#" role="tab">
                      Your data
                    </a>
                    <a class="list-group-item list-group-item-action" data-toggle="list" href="#" role="tab">
                      Delete account
                    </a>  -->
                </div>
            </div>
        </div>

        <div class="col-md-7 col-xl-8">
            <div class="tab-content">
                <div class="tab-pane fade show  {{ request()->is('profile/tab1') ? 'active' : null }}" id="{{url('profile/tab1')}}" role="tabpanel">

                    <div class="card-main">
                        <div class="card-header">
                            <div class="card-actions float-right">
                                <div class="dropdown show">
                                    <a href="#" data-toggle="dropdown" data-display="static">
                                        <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-more-horizontal align-middle">
                                            <circle cx="12" cy="12" r="1"></circle>
                                            <circle cx="19" cy="12" r="1"></circle>
                                            <circle cx="5" cy="12" r="1"></circle>
                                        </svg>
                                    </a>

                                    <div class="dropdown-menu dropdown-menu-right">
                                        <a class="dropdown-item" href="#">Action</a>
                                        <a class="dropdown-item" href="#">Another action</a>
                                        <a class="dropdown-item" href="#">Something else here</a>
                                    </div>
                                </div>
                            </div>
                            <h5 class="card-title mb-0">Public info</h5>
                        </div>
                        <div class="card-body">
                            <form>
                                <div class="row">
                                    <!-- <div class="col-md-8">
                                        <div class="form-group">
                                            <label for="inputUsername">Username</label>
                                            <input type="text" class="form-control" id="inputUsername" placeholder="Username">
                                        </div>
                                        <div class="form-group">
                                            <label for="inputUsername">Biography</label>
                                            <textarea rows="2" class="form-control" id="inputBio" placeholder="Tell something about yourself"></textarea>
                                        </div>
                                    </div> -->
                                    <div class="col-md-12">
                                        <div class="text-center">
                                            <img alt="Andrew Jones" src="https://bootdey.com/img/Content/avatar/avatar1.png" class="rounded-circle img-responsive mt-2" width="128" height="128">
                                            <!-- <div class="mt-2">
                                                <span class="btn btn-primary"><i class="fa fa-upload"></i></span>
                                            </div>
                                            <small>For best results, use an image at least 128px by 128px in .jpg format</small> -->
                                            <div class="author-card-details">
                                                <h5 class="author-card-name text-lg">{{$user->name}}</h5><span class="author-card-position">{{date('j F, Y', strtotime($user->created_at))}}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- <button type="submit" class="btn btn-primary">Save changes</button> -->
                            </form>

                        </div>
                    </div>

                    <div class="card-main">
                        <div class="card-header">
                            <div class="card-actions float-right">
                                <div class="dropdown show">
                                    <a href="#" data-toggle="dropdown" data-display="static">
                                        <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-more-horizontal align-middle">
                                            <circle cx="12" cy="12" r="1"></circle>
                                            <circle cx="19" cy="12" r="1"></circle>
                                            <circle cx="5" cy="12" r="1"></circle>
                                        </svg>
                                    </a>

                                    <div class="dropdown-menu dropdown-menu-right">
                                        <a class="dropdown-item" href="#">Action</a>
                                        <a class="dropdown-item" href="#">Another action</a>
                                        <a class="dropdown-item" href="#">Something else here</a>
                                    </div>
                                </div>
                            </div>
                            <h5 class="card-title mb-0">Private info</h5>
                        </div>
                        <div class="card-body">
                            <form  class="row" method="post" action="{{url('/profile-update/'.$user->id)}}" enctype="multipart/form-data">
                            @csrf
                            <div class="form-row">
                                    <!-- <div class="form-group col-md-6">
                                        <label for="inputFirstName">First name</label>
                                        <input type="text" class="form-control" id="inputFirstName" placeholder="First name">
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label for="inputLastName">Last name</label>
                                        <input type="text" class="form-control" id="inputLastName" placeholder="Last name">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="inputEmail4">Email</label>
                                    <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
                                </div>
                                <div class="form-group">
                                    <label for="inputAddress">Address</label>
                                    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
                                </div>
                                <div class="form-group">
                                    <label for="inputAddress2">Address 2</label>
                                    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
                                </div>
                                <div class="form-row">
                                    <div class="form-group col-md-6">
                                        <label for="inputCity">City</label>
                                        <input type="text" class="form-control" id="inputCity">
                                    </div>
                                    <div class="form-group col-md-4">
                                        <label for="inputState">State</label>
                                        <select id="inputState" class="form-control">
                                            <option selected="">Choose...</option>
                                            <option>...</option>
                                        </select>
                                    </div>
                                    <div class="form-group col-md-2">
                                        <label for="inputZip">Zip</label>
                                        <input type="text" class="form-control" id="inputZip">
                                    </div> -->
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="account-fn">Name</label>
                                <input name="name" class="form-control" type="text" id="account-fn" value="{{$user->name}}" required="">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="account-ln">QiD Number</label>
                                <input name="qid_number" class="form-control" type="text" id="account-ln" value="{{$user->qid_number}}" required="">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="account-email">E-mail Address</label>
                                <input readonly name="email" class="form-control" type="email" id="account-email" value="{{$user->email}}" >
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="account-phone">Phone Number</label>
                                <input name="phone" class="form-control" type="text" id="account-phone" value="{{$user->phone}}" required="">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="account-phone">Date of birth</label>
                                <input name="dob" class="form-control" type="date" id="account-phone" value="{{$user->dob}}" required="">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="account-phone">State</label>
                                <select id="state_id" name="state_id" class="form-control">
                                    <option value=""> --SELECT STATE-- </option>
                                    @foreach($states as $state)
                                        <option value="{{$state->id}}" {{$state->id == $user->state_id ? 'selected' : ''}}>{{$state->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                        <label class="form-label">Cities</label>
                            <select name="city_id" id="city" class="select2 form-control select2-hidden-accessible" data-select2-placeholder="Select state" data-select2-id="select2-data-4-680y" tabindex="-1" aria-hidden="true">
                            </select><span class="select2 select2-container select2-container--bootstrap-5" dir="ltr" data-select2-id="select2-data-5-np4c" style="width: 391px;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-disabled="false" aria-labelledby="select2-2fn7-container" aria-controls="select2-2fn7-container"><span class="select2-selection__rendered" id="select2-2fn7-container" role="textbox" aria-readonly="true" title="Select City"><span class="select2-selection__placeholder"></span></span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="account-phone">Address</label>
                                <input name="address" class="form-control" type="input" id="account-phone" value="{{$user->address}}" required="">
                            </div>
                        </div>
                
                    </div>
                    <button type="submit" class="mybtn btn btn-primary">Save changes</button>
                </form>

            </div>
            
        </div>

                </div>
                <div class="tab-pane show fade {{ request()->is('profile/tab2') ? 'active' : null }}" id="{{url('profile/tab2')}}" role="tabpanel">
                    <div class="card-main">
                        <div class="card-body">
                            <h5 class="card-title">Password</h5>

                            <!-- <form>
                                <div class="form-group">
                                    <label for="inputPasswordCurrent">Current password</label>
                                    <input type="password" class="form-control" id="inputPasswordCurrent">
                                    <small><a href="#">Forgot your password?</a></small>
                                </div>
                                <div class="form-group">
                                    <label for="inputPasswordNew">New password</label>
                                    <input type="password" class="form-control" id="inputPasswordNew">
                                </div>
                                <div class="form-group">
                                    <label for="inputPasswordNew2">Verify password</label>
                                    <input type="password" class="form-control" id="inputPasswordNew2">
                                </div>
                                <button type="submit" class="btn btn-primary">Save changes</button>
                            </form> -->
 
                        <div class="card-header">{{ __('Reset Password') }}</div>

                            <div class="card-body">
                                @if (session('status'))
                                    <div class="alert alert-success" role="alert">
                                        {{ session('status') }}
                                    </div>
                                @endif

                                <form method="POST" action="{{ route('password.email') }}">
                                    @csrf
                                    <input type="hidden" name="reset" value="reset"/>
                                            <div class="row mb-3">
                                                <label for="email" class="col-md-4 col-form-label text-md-end">{{ __('Email Address') }}</label>

                                                <div class="col-md-6">
                                                    <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>

                                                    @error('email')
                                                        <span class="invalid-feedback" role="alert">
                                                            <strong>{{ $message }}</strong>
                                                        </span>
                                                    @enderror
                                                </div>
                                            </div>

                                    <div class="row mb-0">
                                        <div class="col-md-6 offset-md-4">
                                            <button type="submit" class="mybtn btn btn-primary">
                                                {{ __('Send Password Reset Link') }}
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    @if(isset($token))
            <div class="card"> 
                <div class="card-header">{{ __('Reset Password') }}</div>

                <div class="card-body">
                    <form method="POST" action="{{ route('password.update') }}">
                        @csrf

                        <input type="hidden" name="token" value="{{ $token }}">

                        <div class="row mb-3">
                            <label for="email" class="col-md-4 col-form-label text-md-end">{{ __('Email Address') }}</label>

                            <div class="col-md-6">
                                <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ $email ?? old('email') }}" required autocomplete="email" autofocus>

                                @error('email')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label for="password" class="col-md-4 col-form-label text-md-end">{{ __('Password') }}</label>

                            <div class="col-md-6">
                                <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="new-password">

                                @error('password')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label for="password-confirm" class="col-md-4 col-form-label text-md-end">{{ __('Confirm Password') }}</label>

                            <div class="col-md-6">
                                <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password">
                            </div>
                        </div>

                        <div class="row mb-0">
                            <div class="col-md-6 offset-md-4">
                                <button type="submit" class="btn btn-primary">
                                    {{ __('Reset Password') }}
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
                    @endif

                </div>

                        <div class="tab-pane show fade {{ request()->is('profile/tab3') ? 'active' : null }}" id="{{url('profile/tab3')}}" role="tabpanel">
                            <div class="card">
                                
                            <div class="card-header">
                                    <div class="card-actions float-right">
                                        <div class="dropdown show">
                                            <!-- <a href="#" data-toggle="dropdown" data-display="static">
                                                <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-more-horizontal align-middle">
                                                    <circle cx="12" cy="12" r="1"></circle>
                                                    <circle cx="19" cy="12" r="1"></circle>
                                                    <circle cx="5" cy="12" r="1"></circle>
                                                </svg>
                                            </a> -->

                                            <!-- <div class="dropdown-menu dropdown-menu-right">
                                                <a class="dropdown-item" href="#">Action</a>
                                                <a class="dropdown-item" href="#">Another action</a>
                                                <a class="dropdown-item" href="#">Something else here</a>
                                            </div> -->
                                        </div>
                                    </div>
                                    <h5 class="card-title mb-0">Attachments</h5>
                                </div>
                                <div class="card-body">
                                    
                                @if(session('error'))
                <div class="alert alert-danger" role="alert">
                    <strong>{{ session('error') }}</strong>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                @endif
                @if ($message = Session::get('warning'))

<div class="alert alert-warning alert-block">

	<button type="button" class="close" data-dismiss="alert">×</button>	

	<strong>{{ $message }}</strong>

</div>
@if(session()->has('message'))
    <div class="alert alert-success">
        {{ session()->get('message') }}
    </div>
@endif
@endif
                @if(count($errors))
                <div class="alert alert-danger" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <ul>
                        @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                        @endforeach
                    </ul>

                </div>
                @endif
                                    <!-- <h5 class="card-title">Attachments</h5> -->
                                    <div class="card-body">
                                        <form  class="row" method="post" action="{{url('/profile/rpt/'.$user->register_id)}}" enctype="multipart/form-data">
                                            @csrf

                                            
                                            <div class="form-row">
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label for="account-fn">Bill Number</label>
                                                        <input name="bill_number" class="form-control" type="text" id="bill_number" value="" >
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label for="account-ln" >Reciept</label>
                                                        <input style="" name="file" class="form-control" type="file" id="file" value="" >
                                                        <!-- @if($user->rpt_file == '')  
                                                        <a href="#"   class="mybtn btn-block btn btn-primary">No File Uploaded!</a>
                                                        @else
                                                        <a href="{{asset('/files/'.$user->rpt_file)}}"  target="_blank" class="mybtn btn-block btn btn-primary">View</a>

                                                        @endif -->
                                                    </div>
                                                </div>
                                            
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label for="business_amount">Receipt Date</label>
                                                        <input name="receipt_date" class="form-control" type="date">
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label for="account-phone">Business Type</label>
                                                        <select id="business_type" name="business_type" class="form-control">
                                                            <option value=""> --BUSINESS TYPE-- </option>
                                                            @foreach($business as $single)
                                                                <option value="{{$single->id}}" >{{$single->display_name}}</option>

                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label for="business_amount">Business(%)</label>
                                                        <input  readonly name="business_amount" class="form-control" type="text" id="business_amount" value="" >
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label for="purchase_amount">Amount</label>
                                                        <input  id="purchase_amount" name="amount" class="form-control" type="text" id="amount" value="" >
                                                    </div>
                                                </div>
                                            
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label for="account-phone">Reward Points</label>
                                                        <input readonly name="reward" class="form-control" type="text" id="reward" value="" >
                                                    </div>
                                                </div>
                                            </div>
                                            </div>

                                            <div class="card-body">                                
                                            <div class="row align-items-center">
                                                <div class="col-6 col-lg-9" style="padding:3px;">
                                                
                                                    <!-- <div class="border-success border rounded text-center py-3 mb-3">
                                                        <h5 class="card-title text-success mb-1">$2000</h5>
                                                        <p class="text-success mb-0">Revenue</p>
                                                    </div>
                                                    <div class="border-warning border rounded text-center py-3">
                                                        <h5 class="card-title text-warning mb-1">$200</h5>
                                                        <p class="text-warning mb-0">Refund</p>
                                                    </div> -->
                                                    <p> <span class="float-right"> <p style="margin-left:0px;" class="progress-text"></span></p>
                                                    <div class="progress mb-3 progress-container" style="height: 5px;" >
                                                    <div id="pbar" class="progress-bar progress-bar-animated progress-bar-striped" role="progressbar" style="30%" aria-valuenow="40" aria-valuemin="0"  aria-valuemax="500000"></div>
                                                    </div>
                                                </div>
                                                <div class="col-6 col-lg-3">
                                                <div style="margin-left:10px;margin-top:-25px;" class="border-primary border rounded text-center py-3 mb-3">
                                                        <h5 class="card-title text-primary mb-1">Total Earned</h5>
                                                        <p class="text-primary mb-0" id="business">$5000</p>
                                                    </div>
                                                    <!-- <p>UK <span class="float-right">20%</span></p>
                                                    <div class="progress mb-3" style="height: 5px;">
                                                    <div class="progress-bar bg-success" role="progressbar" style="width: 20%;" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
                                                    </div>
                                                    <p>Canada <span class="float-right">15%</span></p>
                                                    <div class="progress mb-3" style="height: 5px;">
                                                    <div class="progress-bar bg-warning" role="progressbar" style="width: 15%;" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
                                                    </div>
                                                    <p>Australia <span class="float-right">10%</span></p>
                                                    <div class="progress" style="height: 5px;">
                                                    <div class="progress-bar bg-info" role="progressbar" style="width: 10%;" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
                                                    </div> -->
                                                </div>
                                            </div>
                                        </div> 
                                            <input type="hidden" name="from_url" value="rpt"/>
                                            <button type="submit" class="mybtn btn btn-primary">Save changes</button>

                                        </form>
                                        
                                    </div>
                                            <!-- <div class="progression">
                                                <p class="progress-text">You have read  of n numbers.</p>
                                                <div class="progress-container">
                                                    <div class="progress-bar"></div>
                                                </div>
                                                <p class="progress-percentage">0%</p>
                                                <button id="btnDecrease">-</button>
                                                <button id="btnIncrease">+</button>
                                            </div> -->
                            <!-- <div class="container">
                            
                                    <div class="card m-b-30">
                                        <div class="card-header">                                
                                            <h5 class="card-title mb-0">Sales by Country</h5>
                                        </div> -->
        
                            </div>
                            
                        </div>


                
                            <div class="tab-pane show fade {{ request()->is('profile/tab4') ? 'active' : null }}" id="{{url('profile/tab4')}}" role="tabpanel">
                            <body>
  <p>
    <button class="btn btn-primary" style="background:#ffb400;border:#ffb400 solid 1px" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseExample">
    Waiting
  </button>

    <button class="btn btn-primary" style="background:#00af3b;border:#00af3b solid 1px" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseExample2">
    Approved
  </button>

    <button class="btn btn-primary" style="background:#F8504C;border:#F8504C solid 1px" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseExample">
    Rejected
  </button>
  </p>

  <div class="accordion" id="accordionExample">

    <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="accordion-box">
                                <section class="container">
                                          
                                        <div class="row recept-container ">
                                            
                                            @foreach($data as $single)
                                                @if($single->status == 0)
                                                
                                            <article class="card fl-left" style="margin-left:0px;">
                                            <section class="date">
                                                <time datetime="23th feb">
                                                <!-- <span>23</span><span>feb</span> -->
                                                <span> {{date('j', strtotime($single->created_date))}}</span><span>{{date('F', strtotime($single->created_date))}}</span>
                                                
                                                </time>
                                            </section>
                                            <section class="card-cont">
                                                <small>{{$single->name}}</small>
                                                <h4>Bill No:{{$single->bill_number}}</h4>
                                                <div class="even-date">
                                                <!-- <i class="fa fa-calendar"></i> -->
                                                <time>
                                                <span>Bill Date : {{$single->receipt_date}}</span>
                                                
                                                </time>
                                                @if($single->status ==0)
                                                    <span><b style="color:#ffb400"> awaiting Points : {{$single->pending_points}}</b></span>
                                                @elseif($single->status ==1)
                                                <span><b style="color:#00af3b"> awaiting Points : {{$single->pending_points}}</b></span>
                                                @else
                                                <span> <b style="color:#F8504C"> awaiting Points :{{$single->pending_points}}</b></span>
                                                @endif
                                                </div>
                                                <div class="even-info">
                                                <!-- <i class="fa fa-map-marker"></i> -->
                                                <p>
                                                    {{$single->message}}
                                                    @if($single->status ==2)
                                                    {{$single->reject_reason}}
                                                    @endif
                                                </p>
                                                <p>
                                            
                                                </p>
                                                </div>
                                                @if($single->status ==0)
                                                <a href="#" style="background:#ffb400">Waiting</a>
                                                @elseif($single->status ==1)
                                                <a href="#" style="background:#00af3b">Approved</a>
                                                @else
                                                <a href="#" style="background:#F8504C">Rejected</a>
                                                @endif
                                        
                                            </article>
                                            @endif
                                            @endforeach
                                           
                                        </div>
                                </section>
      </div>
    </div>

    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="accordion-box">
      <section class="container">
                                          
                                          <div class="row recept-container ">
                                              
                                              @foreach($data as $single)
                                                  @if($single->status == 1)
                                              <article class="card fl-left" style="margin-left:0px; ">
                                              <section class="date">
                                                  <time datetime="23th feb">
                                                  <!-- <span>23</span><span>feb</span> -->
                                                  <span> {{date('j', strtotime($single->created_date))}}</span><span>{{date('F', strtotime($single->created_date))}}</span>
                                                  
                                                  </time>
                                              </section>
                                              <section class="card-cont">
                                                  <small>{{$single->name}}</small>
                                                  <h4>Bill No:{{$single->bill_number}}</h4>
                                                  <div class="even-date">
                                                  <!-- <i class="fa fa-calendar"></i> -->
                                                  <time>
                                                  <span>Bill Date : {{$single->receipt_date}}</span>
                                                  
                                                  </time>
                                                  @if($single->status ==0)
                                                      <span><b style="color:#ffb400"> awaiting Points : {{$single->pending_points}}</b></span>
                                                  @elseif($single->status ==1)
                                                  <span><b style="color:#00af3b"> awaiting Points : {{$single->pending_points}}</b></span>
                                                  @else
                                                  <span> <b style="color:#F8504C"> awaiting Points :{{$single->pending_points}}</b></span>
                                                  @endif
                                                  </div>
                                                  <div class="even-info">
                                                  <!-- <i class="fa fa-map-marker"></i> -->
                                                  <p>
                                                      {{$single->message}}
                                                      @if($single->status ==2)
                                                      {{$single->reject_reason}}
                                                      @endif
                                                  </p>
                                                  <p>
                                              
                                                  </p>
                                                  </div>
                                                  @if($single->status ==0)
                                                  <a href="#" style="background:#ffb400">Waiting</a>
                                                  @elseif($single->status ==1)
                                                  <a href="#" style="background:#00af3b">Approved</a>
                                                  @else
                                                  <a href="#" style="background:#F8504C">Rejected</a>
                                                  @endif
                                          
                                              </article>
                                              @endif
                                              @endforeach
                                             
                                          </div>
                                  </section>
      </div>
    </div>

    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="accordion-box">
      <section class="container">
                                          
                                          <div class="row recept-container ">
                                              
                                              @foreach($data as $single)
                                                  @if($single->status == 2)
                                              <article class="card fl-left" style="margin-left:0px;">
                                              <section class="date">
                                                  <time datetime="23th feb">
                                                  <!-- <span>23</span><span>feb</span> -->
                                                  <span> {{date('j', strtotime($single->created_date))}}</span><span>{{date('F', strtotime($single->created_date))}}</span>
                                                  
                                                  </time>
                                              </section>
                                              <section class="card-cont">
                                                  <small>{{$single->name}}</small>
                                                  <h4>Bill No:{{$single->bill_number}}</h4>
                                                  <div class="even-date">
                                                  <!-- <i class="fa fa-calendar"></i> -->
                                                  <time>
                                                  <span>Bill Date : {{$single->receipt_date}}</span>
                                                  
                                                  </time>
                                                  @if($single->status ==0)
                                                      <span><b style="color:#ffb400"> awaiting Points : {{$single->pending_points}}</b></span>
                                                  @elseif($single->status ==1)
                                                  <span><b style="color:#00af3b"> awaiting Points : {{$single->pending_points}}</b></span>
                                                  @else
                                                  <span> <b style="color:#F8504C"> awaiting Points :{{$single->pending_points}}</b></span>
                                                  @endif
                                                  </div>
                                                  <div class="even-info">
                                                  <!-- <i class="fa fa-map-marker"></i> -->
                                                  <p>
                                                      {{$single->message}}
                                                      @if($single->status ==2)
                                                      {{$single->reject_reason}}
                                                      @endif
                                                  </p>
                                                  <p>
                                              
                                                  </p>
                                                  </div>
                                                  @if($single->status ==0)
                                                  <a href="#" style="background:#ffb400">Waiting</a>
                                                  @elseif($single->status ==1)
                                                  <a href="#" style="background:#00af3b">Approved</a>
                                                  @else
                                                  <a href="#" style="background:#F8504C">Rejected</a>
                                                  @endif
                                          
                                              </article>
                                              @endif
                                              @endforeach
                                             
                                          </div>
                                  </section>
      </div>
    </div>
  </div>
</body>
                            </div>

                        </div>
                    </div>  
                </div>
            </div>
        </div>
    </div>

</div>





@endsection




<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
<script>
   

     $(document).ready(function() {
        
        //Fetching BussinessType Onload Start //
        var business_id = $('#business_type').val();
        if(business_id) {
                    $.ajax({
                        url  : "{{url('profile/getBusiness')}}",
                        type : "POST",
                        data : {
                            "_token" : "{{csrf_token()}}",

                            business_id : business_id,
                        },
                        cache:false,
                        //contentType: false,
                        dataType:"json",
                            
                    success:function(data){
                           
                        $.each(data,function(key,value){    
                                var purchase_amount = $('#purchase_amount').val();
                                var per = purchase_amount*key/100;
                                $('#business_amount').val(key);
                                $('#reward').val(per);
                          
                        });
                                var target = 10000;
                                var reward = $('#reward').val();
                                var purchase_amount = $('#purchase_amount').val();
                                //var decreese = (purchase_amount/target)*100;
                                var decreese = reward * (1/target) * 100;
                                //alert(decreese);
                                var barmax =  $('.progress-bar').val();
                               // alert(barmax)
                                //i=0;
                                //alert(i);
                                function makeProgress(){
                                    // if(reward < 500000){
                                       // i = i+reward;
                                     //   $('#theprogressbar').attr('aria-valuenow', newprogress).css('width', newprogress+'%');
                                        //$(".progress-bar").css("width", i).text(reward);
                                        $('#pbar').attr('aria-valuemax', 500000);
                                        $('#pbar').attr('aria-valuenow', decreese +'%').css('width', decreese +'%').text(reward);
                                       // $(".progress-text").append(reward);
                                       $(".progress-text").text('You will Earn '+ reward + ' rewards');
                                    //    $(".progress-text").text('You have reached '+ reward + ' of ' + target);
                                       // $(".progress-text").innerText("You have reached"); 
                                    // }
                                
                                    // Wait for sometime before running this script again
                                    setTimeout("makeProgress()", .6);
                                }
                                makeProgress();

                           // var reward = $('#reward').val();




                            // var current = 0;
                            // const min = 0;
                            // const max = 30;

                            // //This function is taken from: https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API#testing_for_availability
                            // //This is used to check if localStorage is available
                            // function storageAvailable(type) {
                            //     var storage;
                            //     try {
                            //         storage = window[type];
                            //         var x = '__storage_test__';
                            //         storage.setItem(x, x);
                            //         storage.removeItem(x);
                            //         return true;
                            //     }
                            //     catch(e) {
                            //         return e instanceof DOMException && (
                            //             // everything except Firefox
                            //             e.code === 22 ||
                            //             // Firefox
                            //             e.code === 1014 ||
                            //             // test name field too, because code might not be present
                            //             // everything except Firefox
                            //             e.name === 'QuotaExceededError' ||
                            //             // Firefox
                            //             e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
                            //             // acknowledge QuotaExceededError only if there's something already stored
                            //             (storage && storage.length !== 0);
                            //     }
                            // }

                            // //This function should be called each time you update the progress so the display updates as well
                            // function updateProgress()
                            // {
                            //     document.querySelector(".progress-text").innerText = `You have read ${current} out of ${max} books.`; //this sets the text including the variable values
                            //     document.querySelector(".progress-bar").style.width = Math.round((current / max) * 100) + "%"; //this sets the length of the progress-bar to a percentage
                            //     document.querySelector(".progress-percentage").innerText = Math.round((current / max) * 100) + "%"; //this displays the progress as a percentage
                            // }

                            // //this function is called each time the increase button is clicked
                            // function onButtonIncreaseClicked(e)
                            // {
                            //     e.preventDefault(); //prevent the button from doing anything else

                            //     //make sure the current value never goes above the max value
                            //     if (current < max)
                            //         current++;

                            //     //this will set the value in the localStorage as long as it is available and accessible
                            //     if (storageAvailable('localStorage'))
                            //     {
                            //         localStorage.setItem("progress", current); //our "key" is set to contain the value of current
                            //     }

                            //     updateProgress(); //call to update the display
                            // }

                            // //identical to the increase button, only decreases
                            // function onButtonDecreaseClicked(e)
                            // {
                            //     e.preventDefault();

                            //     //prevent us from going below the minimum value
                            //     if (current > min)
                            //         current--;

                            //     if (storageAvailable('localStorage'))
                            //     {
                            //         localStorage.setItem("progress", current);
                            //     }

                            //     updateProgress(); //always call to update the display
                            // }

                            // //this function is to register the button click event handlers. This makes clicking the buttons work. You should only call this once per page load.
                            // function registerHandlers()
                            // {
                            //     document.querySelector("#btnIncrease").addEventListener("click", onButtonIncreaseClicked);
                            //     document.querySelector("#btnDecrease").addEventListener("click", onButtonDecreaseClicked);
                            // }

                            // //this function is to unregister the button click event handlers. This prevents the buttons from working. Just incase.
                            // function unregisterHandlers()
                            // {
                            //     document.querySelector("#btnIncrease").removeEventListener("click", onButtonIncreaseClicked);
                            //     document.querySelector("#btnDecrease").removeEventListener("click", onButtonDecreaseClicked);
                            // }

                            // //This is our setup function. You should call this once per page load.
                            // function setup()
                            // {
                            //     //check if localstorage is available and if there's a valid number in it
                            //     if (storageAvailable('localStorage') && localStorage.getItem("progress") != null && !isNaN(localStorage.getItem("progress")))
                            //     {
                            //         current = parseInt(localStorage.getItem("progress")); //load our stored value

                            //         if (current > max) //make sure the stored value is not above our max value
                            //             current = max;
                            //         else if (current < min) //make sure the stored value is not below our min value
                            //             current = min;
                            //     }

                            //     registerHandlers(); //make clicking buttons work
                            //     updateProgress(); //update the display
                            // }

                            // setup(); //our call to setup everything, should be called once per page load.
                               
                    //console.log(data);
                  
                },
            });
        }
        //Fetching BussinessType Onload End //

        // var purchase_amount = $('#purchase_amount').val();
        // var business_amount = $('#business_amount').val();

        // var per = purchase_amount*business_amount/100;
        // $('#reward').val(per);

        //Fetching City Onload Start //
        var state_id = $('#state_id').val();
        if(state_id) {
                    $.ajax({
                        url  : "{{url('getStates')}}",
                        type : "POST",
                        data : {
                            "_token" : "{{csrf_token()}}",

                            state_id : state_id,
                        },
                        cache:false,
                        //contentType: false,
                        dataType:"json",
                            
                        success:function(data){
                            //console.log(data.course);
                            //console.log(data.course_model);
                             $('select[name="city_id"]').empty();
                            //  $('select[name="city_id"]').append('<option value="">--CITIES--</option>');
                             $.each(data,function(key,value){
                                //console.log(value);
                               $('select[name="city_id"]').append('<option value="'+ key + '">'+ value +'</option>');
                               
                             });
                           
                        },
                    });
                }

                
        $('select[name="state_id"]').change(function(){
            
            var state_id=$(this).val();
                if(state_id) {
                    $.ajax({
                        url  : "{{url('getStates')}}",
                        type : "POST",
                        data : {
                            "_token" : "{{csrf_token()}}",

                            state_id : state_id,
                        },
                        cache:false,
                        //contentType: false,
                        dataType:"json",
                            
                        success:function(data){
                            //console.log(data.course);
                            //console.log(data.course_model);
                             $('select[name="city_id"]').empty();
                             $('select[name="city_id"]').append('<option value="">--CITIES--</option>');
                             $.each(data,function(key,value){
                                //console.log(value);
                               $('select[name="city_id"]').append('<option value="'+ key + '">'+ value +'</option>');
                               
                             });
                           
                        },
                    });
                }
    
        });

        //Business Onchange Starts
        $('select[name="business_type"]').change(function(){
           
            var business_id=$(this).val();
                if(business_id) {
                    $.ajax({
                        url  : "{{url('profile/getBusiness')}}",
                        type : "POST",
                        data : {
                            "_token" : "{{csrf_token()}}",

                            business_id : business_id,
                        },
                        cache:false,
                        //contentType: false,
                        dataType:"json",
                            
                        success:function(data){
                               
                             $.each(data,function(key,value){
                                //console.log(value);
                             
                                var purchase_amount = $('#purchase_amount').val();
                                var per = purchase_amount*key/100;
                                $('#business_amount').val(key);
                                $('#reward').val(per);
                          
                               
                             });


                             var target = 10000;
                                var reward = $('#reward').val();
                                var purchase_amount = $('#purchase_amount').val();
                                //var decreese = (purchase_amount/target)*100;
                                var decreese = reward * (1/target) * 100;
                                //alert(decreese);
                                var barmax =  $('.progress-bar').val();
                               // alert(barmax)
                                //i=0;
                                //alert(i);
                                function makeProgress(){
                                    // if(reward < 500000){
                                       // i = i+reward;
                                     //   $('#theprogressbar').attr('aria-valuenow', newprogress).css('width', newprogress+'%');
                                        //$(".progress-bar").css("width", i).text(reward);
                                        $('#pbar').attr('aria-valuemax', 500000);
                                        $('#pbar').attr('aria-valuenow', decreese +'%').css('width', decreese +'%').text(reward);
                                       // $(".progress-text").append(reward);
                                       $(".progress-text").text('You will Earn '+ reward + ' rewards');
                                    //    $(".progress-text").text('You have reached '+ reward + ' of ' + target);
                                       // $(".progress-text").innerText("You have reached"); 
                                    // }
                                
                                    // Wait for sometime before running this script again
                                    setTimeout("makeProgress()", .6);
                                }
                                makeProgress();
                            console.log(data);
                          
                           
                        },
                    });
                }
    
        });

        $('#purchase_amount,#business_amount,#reward').keyup(function() {
            var purchase_amount = $('#purchase_amount').val();
            var business_amount = $('#business_amount').val();


            // $price=0.8333333333;
            // $taxRate=20;
            // $tax=$price*$taxRate/100;
            // $total=$price+$tax;
            // $calculatedTaxRate=(($total-$price)/$price)*100;  

            var per = purchase_amount*business_amount/100;

           // alert(per);
            $('#reward').val(per);

                                var target = 10000;
                                var reward = $('#reward').val();
                                var purchase_amount = $('#purchase_amount').val();
                                //var decreese = (purchase_amount/target)*100;
                                var decreese = reward * (1/target) * 100;

                                

                               // alert(decreese);
                                var barmax =  $('.progress-bar').val();
                               // alert(barmax)
                                //i=0;
                                //alert(i);
                                function makeProgress(){
                                    // if(reward < 500000){
                                       // i = i+reward;
                                     //   $('#theprogressbar').attr('aria-valuenow', newprogress).css('width', newprogress+'%');
                                        //$(".progress-bar").css("width", i).text(reward);
                                        //$('#pbar').attr('aria-valuemax', 500000);
                                        $('#pbar').attr('aria-valuenow', decreese +'%').css('width', decreese +'%').text(reward);
                                       // $(".progress-text").append(reward);
                                       
                                    //   $(".progress-text").text('You have reached '+ reward + ' of ' + target);
                                    
                                        //$("#business").text(business_amount);

                                       $(".progress-text").text('You will Earn '+ reward +' rewards');
                                       // $(".progress-text").innerText("You have reached"); 
                                    // }
                                
                                    // Wait for sometime before running this script again
                                    setTimeout("makeProgress()", .6);
                                }
                                makeProgress();
        });
    });
</script>
<script>
    // var i = $('#reward').val();
    // function makeProgress(){
    //     // if(i < 100){
    //         $(".progress-bar").css("width", i + "%").text(i + "%");
    //     // }
    
    //     // Wait for sometime before running this script again
    //     setTimeout("makeProgress()", 100);
    // }
    // makeProgress();
    </script>