@extends('admin.layout.app')

@section('content')

<!-- partial -->

<div class="content-wrapper">

  <div class="row">
    <div class="col-xl-6 grid-margin stretch-card flex-column">
      <h5 class="mb-2 text-titlecase mb-4">Site Statistics</h5>
    </div>
  </div>

  <!--<div class="row">-->
  <!--  <div class="col-md-4 grid-margin stretch-card">-->
  <!--    <div class="card">-->
  <!--      <div class="card-body">-->
  <!--        <div class="d-flex align-items-center justify-content-between justify-content-md-center justify-content-xl-between flex-wrap mb-4">-->
  <!--          <div>-->
  <!--            <p class="mb-2 text-md-center text-lg-left">Total Customer</p>-->
  <!--            <h1 class="mb-0">1</h1>-->
  <!--          </div>-->
  <!--          <i class="typcn typcn-user icon-xl text-secondary"></i>-->
  <!--        </div>-->
  <!--        <canvas id="expense-chart" height="80"></canvas>-->
  <!--      </div>-->
  <!--    </div>-->
  <!--  </div>-->
  <!--  <div class="col-md-4 grid-margin stretch-card">-->
  <!--    <div class="card">-->
  <!--      <div class="card-body">-->
  <!--        <div class="d-flex align-items-center justify-content-between justify-content-md-center justify-content-xl-between flex-wrap mb-4">-->
  <!--          <div>-->
  <!--            <p class="mb-2 text-md-center text-lg-left">Total Booking</p>-->
  <!--            <h1 class="mb-0">1</h1>-->
  <!--          </div>-->
  <!--          <i class="typcn typcn-chart-pie icon-xl text-secondary"></i>-->
  <!--        </div>-->
  <!--        <canvas id="budget-chart" height="80"></canvas>-->
  <!--      </div>-->
  <!--    </div>-->
  <!--  </div>-->
  <!--  <div class="col-md-4 grid-margin stretch-card">-->
  <!--    <div class="card">-->
  <!--      <div class="card-body">-->
  <!--        <div class="d-flex align-items-center justify-content-between justify-content-md-center justify-content-xl-between flex-wrap mb-4">-->
  <!--          <div>-->
  <!--            <p class="mb-2 text-md-center text-lg-left">Completed Customers</p>-->
  <!--            <h1 class="mb-0">1</h1>-->
  <!--          </div>-->
  <!--          <i class="typcn typcn-clipboard icon-xl text-secondary"></i>-->
  <!--        </div>-->
  <!--        <canvas id="balance-chart" height="80"></canvas>-->
  <!--      </div>-->
  <!--    </div>-->
  <!--  </div>-->
  <!--</div>-->

  <!--<div class="row">-->
  <!--  <div class="col-md-12">-->
  <!--    <div class="card">-->
  <!--      <div class="table-responsive pt-3">-->
  <!--        <table class="table table-striped project-orders-table">-->
  <!--          <thead>-->
  <!--            <tr>-->
  <!--              <th class="ml-5">ID</th>-->
  <!--              <th>Service name</th>-->
  <!--              <th>Customer</th>-->
  <!--              <th>Date</th>-->
  <!--              <th>Time</th>-->
  <!--              <th>Status</th>-->
  <!--            </tr>-->
  <!--          </thead>-->
  <!--          <tbody>-->
           
  <!--            <tr>-->
  <!--              <td>1</td>-->
  <!--              <td>yfg</td>-->
  <!--              <td>fgtygf</td>-->
  <!--              <td>fgyhg</td>-->
  <!--              <td>ghyg</td>-->
  <!--              <td>-->
  <!--                <div class="d-flex align-items-center">-->
  <!--                  <div class="dropdown">-->
                        
  <!--                    <button class="btn btn-success btn-sm dropdown-toggle" type="button" id="dropdownMenuSizeButton3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">-->
  <!--                     approved-->
  <!--                    </button>-->
                      
  <!--                    <div class="dropdown-menu" aria-labelledby="dropdownMenuSizeButton3" style="">-->
  <!--                  <a class="dropdown-item statusUpdate" data-appointment-id="" value="">hhhi</a>-->
                        
  <!--                    </div>-->
  <!--                  </div>-->
  <!--                </div>-->
  <!--              </td>-->
  <!--            </tr>-->
            
  <!--          </tbody>-->
  <!--        </table>-->
  <!--      </div>-->
  <!--    </div>-->
  <!--  </div>-->
  <!--</div>-->

</div>

@endsection

@section('script')

<script>
    $('.statusUpdate').on('click', function(){
        // Code to update status
        var appointmentId = $(this).data('appointment-id');
        var status = $(this).attr('value');
        // Perform status update logic using appointmentId or any other relevant information
        
        $.ajax({
            url: '',
            method: 'POST',
            headers: {
                "X-CSRF-TOKEN": '{{ csrf_token() }}'
            },
            data:{
                appointmentId:appointmentId,
                status:status,
            },
            success: function(response) {
                // Handle the success response
                if (response.success) {
                    // Display toastr success notification
                    toastr.success(response.success);
                    setTimeout(function() {
                        location.reload();
                    }, 3000);
                } else {
                    // Display toastr error notification
                    toastr.error('Status update failed');
                }
            },
            error: function(xhr, status, error) {
                // Handle the error response
                console.error('Error:', error);
                // Display toastr error notification
                toastr.error('An error occurred while updating status');
            }
        });
    });
</script>

@endsection