@extends("admin.template", ["pageTitle"=>$pageTitle])
@section('content')
{{-- <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"> --}}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style>
.doctor-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /*padding: 10px;*/
  /*border: 1px solid #ccc;*/
  /*border-radius: 5px;*/
}

.doctor-info, .doctor-stats {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.doctor-info p {
  margin: 0;
}

.doctor-stats .stat {
  margin-right: 20px;
}

.doctor-stats .stat p {
  margin: 0;
}

.doctor-stats .stat i {
  color: gold;
}
.dropdown-toggle::after {
  border: none !important;
}
.counter {
  background-color:#f5f5f5;
  padding: 20px 0;
  border-radius: 5px;
}

.count-title {
  font-size: 40px;
  font-weight: normal;
  margin-top: 10px;
  margin-bottom: 0;
  text-align: center;
}

.count-text {
  font-size: 13px;
  font-weight: normal;
  margin-top: 10px;
  margin-bottom: 0;
  text-align: center;
}

.fa-2x {
  margin: 0 auto;
  float: none;
  display: table;
  color: #825049;
}
/*Tooltip CSS*/

.card__article {
  position: relative;
  align-self: flex-end;
  display: flex;
  justify-content: center;
}

.card__profile, 
.card__mask {
  /*width: 100px;*/
  /*height: 100px;*/
  background-color: var(--gray-color);
  /*border-radius: 50%;*/
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.card__profile img, 
.card__mask img {
  width: 95px;
}

.card__profile {
  border: 4px solid var(--container-color);
  z-index: 5;
  transition: opacity .4s, transform .4s;
}

.card__tooltip {
  position: absolute;
  bottom: -2rem;
  /*padding-bottom: 5rem;*/
  transition: opacity .4s, bottom .4s cubic-bezier(.6, -.5, .3, 1.5);
  pointer-events: none;
  opacity: 0;
  z-index: 9999999;
  background-color: whitesmoke;
}

.card__content {
  position: relative;
  width: calc(100vw - 3rem);
  background-color: var(--container-color);
  box-shadow: 0 16px 32px hsla(230, 50%, 20%, .1);
  padding: 2rem 1.5rem;
  border-radius: 1.5rem;
}

.card__content::after {
  content: "";
  width: 32px;
  height: 32px;
  background-color: var(--container-color);
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.75rem;
  margin-inline: auto;
  border-radius: .25rem;
  rotate: 45deg;
}

.card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
}

.card__header span {
  color: var(--title-color);
  font-weight: 500;
}

.card__social {
  display: flex;
  column-gap: .75rem;
}

.card__social p {
  font-size: 1.25rem;
  color: var(--title-color);
}

.card__image {
  width: 100px;
  height: 100px;
  position: relative;
  margin: 0 auto 1rem;
}

.card__status {
  width: 12px;
  height: 12px;
  background-color: var(--second-color);
  position: absolute;
  top: .5rem;
  right: .75rem;
  border-radius: 50%;
  border: 2px solid var(--container-color);
}

.card__data {
  text-align: center;
}

.card__name {
  font-size: var(--h2-font-size);
  color: var(--title-color);
  font-weight: 600;
  margin-bottom: .25rem;
}

.card__profession {
  font-size: var(--normal-font-size);
  font-weight: 500;
  margin-bottom: 2rem;
}

.card__button {
  display: inline-flex;
  align-items: center;
  column-gap: .5rem;
  color: var(--first-color);
  font-weight: 500;
}

.card__button i {
  font-size: 1.25rem;
}

/* Scale profile image */
.card__article:hover .card__profile {
  transform: scale(.8);
  opacity: .7;
}

/* Show tooltip card */
.card__article:hover .card__tooltip {
  opacity: 1;
  pointer-events: initial;
  bottom: 4rem;
}

/*=============== BREAKPOINTS ===============*/
/* For medium devices */
@media screen and (min-width: 540px) {
  .card__content {
    width: 380px;
    padding-inline: 2rem;
  }
}
.card-custom {
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  text-align: center;
  width: 300px;
  background-color: #fff;
}
.icon-container {
  background-color: #965b45;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 10px;
}
.icon-container img {
  width: 30px;
  height: 30px;
}
.card-title-custom {
  font-size: 18px;
  color: #333;
  margin-bottom: 10px;
}
.total-custom {
  background-color: #965b45;
  color: #fff;
  border-radius: 20px;
  padding: 5px 15px;
  font-size: 20px;
  margin-bottom: 20px;
  display: inline-block;
}
.details-custom {
  text-align: left;
  font-size: 16px;
  margin-bottom: 10px;
}
.details-custom div {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}
.label-custom {
  color: #333;
}
.value-custom {
  color: #965b45;
  font-weight: bold;
}
.percentage-custom {
  background-color: rgba(150, 91, 69, 0.2);
  color: #965b45;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 14px;
}
</style>
<div class="body-content">
  <div class="row">
    <div class="col-lg-12">
      <div class="card mb-4">
        <div class="card-header">
          <div class="d-flex justify-content-between align-items-center">
            <div>
              <h6 class="fs-17 font-weight-600 mb-0">Dashboard</h6>
            </div>
          </div>
        </div>
        <div class="card-body">
          @if (Session::has('success'))
            <div class="alert alert-success">
              {{ Session::get('success') }}
            </div>
          @endif

          @if (isset($error))
            <div class="alert alert-danger">
              {{ $error }}
            </div>
          @endif

          <div class="row">
            <div class="container col-md-9">
              <h3>Overview</h3>
              <div class="row text-center">
                <!-- Registered Pets Card -->
                @php
                    $totalPets = max($registeredPets['totaRegisteredPets'] ?? 1, 1);
                    $dogCount = $registeredPets['DogCount'] ?? 0;
                    $catCount = $registeredPets['CatCount'] ?? 0;
                    $birdCount = $registeredPets['BirdCount'] ?? 0;
                @endphp
                <div class="col">
                  <div class="counter">
                    <i class="fa fa-paw fa-2x"></i>
                    <h2 class="timer count-title count-number" data-to="100" data-speed="1500"></h2>
                    <p class="count-text">Registered Pet</p>
                    <h1>{{ $totalPets }}</h1>
                    <article class="card__article">
                      <div class="card__profile">
                        <p href="#" style="margin-left:6rem!important;cursor: pointer;">Show details</p>
                      </div>

                      <div class="card__tooltip">
                        <div class="card__content">
                          <div class="card__data">
                            <div class="icon-scontainer">
                              <i class="fa fa-paw fa-2x"></i>
                            </div>
                            <div class="card-title-custom">Registered Pets</div>
                            <div class="total-custom">Total: {{ $totalPets }}</div>
                            <div class="details-custom">
                              <div>
                                <span class="label-custom">Dogs</span>
                                <span class="value-custom">{{ $dogCount }}</span>
                                <span class="percentage-custom">
                                    {{ number_format(($totalPets > 0 ? ($dogCount / $totalPets) * 100 : 0), 1) }}%
                                </span>
                              </div>
                              <div>
                                <span class="label-custom">Cats</span>
                                <span class="value-custom">{{ $catCount }}</span>
                                <span class="percentage-custom">
                                    {{ number_format(($totalPets > 0 ? ($catCount / $totalPets) * 100 : 0), 1) }}%
                                </span>
                              </div>
                              <div>
                                <span class="label-custom">Birds</span>
                                <span class="value-custom">{{ $birdCount }}</span>
                                <span class="percentage-custom">
                                    {{ number_format(($totalPets > 0 ? ($birdCount / $totalPets) * 100 : 0), 1) }}%
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </article>
                  </div>
                </div>

                <!-- Customer Statistics Card -->
                @php
                    $totalCustomers = max($customerTotal ?? 1, 1);
                    $activeCustomers = $customerActive ?? 0;
                @endphp
                <div class="col">
                  <div class="counter">
                    <i class="fa fa-user fa-2x"></i>
                    <h2 class="timer count-title count-number" data-to="100" data-speed="1500"></h2>
                    <p class="count-text">Registered Customer</p>
                    <h1>{{ $totalCustomers }}</h1>
                    <article class="card__article">
                      <div class="card__profile">
                        <p href="#" style="margin-left:6rem!important;cursor: pointer;">Show details</p>
                      </div>

                      <div class="card__tooltip">
                        <div class="card__content">
                          <div class="card__data">
                            <div class="icon-scontainer">
                              <i class="fa fa-user fa-2x"></i>
                            </div>
                            <div class="card-title-custom">Registered Customer</div>
                            <div class="total-custom">Total: {{ $totalCustomers }}</div>
                            <div class="details-custom">
                              <div>
                                <span class="label-custom">Active Customer</span>
                                <span class="value-custom">{{ $activeCustomers }}</span>
                                <span class="percentage-custom">
                                    {{ number_format(($totalCustomers > 0 ? ($activeCustomers / $totalCustomers) * 100 : 0), 1) }}%
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </article>
                  </div>
                </div>

                <!-- Clinic Statistics Card -->
                @php
                    $totalDoctors = max($doctorTotal ?? 1, 1);
                    $activeDoctors = $doctorActive ?? 0;
                    $totalAppointments = max($appointmentTotal ?? 1, 1);
                    $pendingAppointments = $appointmentPending ?? 0;
                    $completedAppointments = $appointmentCompleted ?? 0;
                @endphp
                <div class="col">
                  <div class="counter">
                    <i class="fas fa-clinic-medical fa-2x"></i>
                    <h2 class="timer count-title count-number" data-to="100" data-speed="1500"></h2>
                    <p class="count-text">Clinic Consultations</p>
                    <h1>{{ $totalAppointments }}</h1>
                    <article class="card__article">
                      <div class="card__profile">
                        <p href="#" style="margin-left:6rem!important;cursor: pointer;">Show details</p>
                      </div>

                      <div class="card__tooltip">
                        <div class="card__content">
                          <div class="card__data">
                            <div class="icon-scontainer">
                              <i class="fas fa-clinic-medical fa-2x"></i>
                            </div>
                            <div class="card-title-custom">Clinic Consultations</div>
                            <div class="total-custom">Total: {{ $totalAppointments }}</div>
                            <div class="details-custom">
                              <div>
                                <span class="label-custom">Doctors Registered</span>
                                <span class="value-custom">{{ $activeDoctors }}</span>
                                <span class="percentage-custom">
                                    {{ number_format(($totalDoctors > 0 ? ($activeDoctors / $totalDoctors) * 100 : 0), 1) }}%
                                </span>
                              </div>
                              <div>
                                <span class="label-custom">Consultation Pending</span>
                                <span class="value-custom">{{ $pendingAppointments }}</span>
                                <span class="percentage-custom">
                                    {{ number_format(($totalAppointments > 0 ? ($pendingAppointments / $totalAppointments) * 100 : 0), 1) }}%
                                </span>
                              </div>
                              <div>
                                <span class="label-custom">Consultation Completed</span>
                                <span class="value-custom">{{ $completedAppointments }}</span>
                                <span class="percentage-custom">
                                    {{ number_format(($totalAppointments > 0 ? ($completedAppointments / $totalAppointments) * 100 : 0), 1) }}%
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </article>
                  </div>
                </div>
              </div>
              <div class="row text-center mt-4">
                <!-- Shipment Card -->
                @php
                    $totalShipments = max($shipmentTotalRequest ?? 1, 1);
                    $inquiryPending = $shipmentInquiryPending ?? 0;
                    $inquiryResponded = $shipmentInquiryResponded ?? 0;
                    $shipmentsConfirmed = $shipmentConfirmed ?? 0;
                    $shipmentsDelivered = $shipmentDelivered ?? 0;
                @endphp
                <div class="col">
                  <div class="counter">
                    <img width="10%" height="10%" src="{{ asset('assets/images/plane-removebg-preview.png') }}" alt="Shipment">
                    <h2 class="timer count-title count-number" data-to="100" data-speed="1500"></h2>
                    <p class="count-text">Shipment</p>
                    <h1>{{ $totalShipments }}</h1>
                    <article class="card__article">
                      <div class="card__profile">
                        <p href="#" style="margin-left:6rem!important;cursor: pointer;">Show details</p>
                      </div>

                      <div class="card__tooltip">
                        <div class="card__content">
                          <div class="card__data">
                            <div class="icon-scontainer">
                              <img width="10%" height="10%" src="{{ asset('assets/images/plane-removebg-preview.png') }}" alt="Shipment">
                            </div>
                            <div class="card-title-custom">Shipment Request</div>
                            <div class="total-custom">Total: {{ $totalShipments }}</div>
                            <div class="details-custom">
                              <div>
                                <span class="label-custom">Inquiry Pending</span>
                                <span class="value-custom">{{ $inquiryPending }}</span>
                                <span class="percentage-custom">
                                    {{ number_format(($totalShipments > 0 ? ($inquiryPending / $totalShipments) * 100 : 0), 1) }}%
                                </span>
                              </div>
                              <div>
                                <span class="label-custom">Inquiry Responded</span>
                                <span class="value-custom">{{ $inquiryResponded }}</span>
                                <span class="percentage-custom">
                                    {{ number_format(($totalShipments > 0 ? ($inquiryResponded / $totalShipments) * 100 : 0), 1) }}%
                                </span>
                              </div>
                              <div>
                                <span class="label-custom">Shipment Confirmed</span>
                                <span class="value-custom">{{ $shipmentsConfirmed }}</span>
                                <span class="percentage-custom">
                                    {{ number_format(($totalShipments > 0 ? ($shipmentsConfirmed / $totalShipments) * 100 : 0), 1) }}%
                                </span>
                              </div>
                              <div>
                                <span class="label-custom">Shipment Delivered</span>
                                <span class="value-custom">{{ $shipmentsDelivered }}</span>
                                <span class="percentage-custom">
                                    {{ number_format(($totalShipments > 0 ? ($shipmentsDelivered / $totalShipments) * 100 : 0), 1) }}%
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </article>
                  </div>
                </div>

                <!-- Ecommerce Card -->
                @php
                    $totalVendors = max($vendorTotal ?? 1, 1);
                    $totalProducts = $vendorProduct ?? 0;
                    $pendingOrders = $ordersPending ?? 0;
                    $deliveredOrders = $ordersDelivered ?? 0;
                    $totalOrders = max(($pendingOrders + $deliveredOrders), 1);
                @endphp
                <div class="col">
                  <div class="counter">
                    <img width="10%" height="10%" src="{{ asset('assets/images/delivered-removebg-preview.png') }}" alt="Ecommerce">
                    <h2 class="timer count-title count-number" data-to="100" data-speed="1500"></h2>
                    <p class="count-text">Ecommerce</p>
                    <h1>{{ $totalVendors }}</h1>
                    <article class="card__article">
                      <div class="card__profile">
                        <p href="#" style="margin-left:6rem!important;cursor: pointer;">Show details</p>
                      </div>

                      <div class="card__tooltip">
                        <div class="card__content">
                          <div class="card__data">
                            <div class="icon-scontainer">
                              <i class="fas fa-shopping-cart fa-2x"></i>
                            </div>
                            <div class="card-title-custom">Vendors</div>
                            <div class="total-custom">{{ $totalVendors }}</div>
                            <div class="details-custom">
                              <div>
                                <span class="label-custom">Vendor Products</span>
                                <span class="value-custom">{{ $totalProducts }}</span>
                                <span class="percentage-custom">
                                    {{ number_format(($totalVendors > 0 ? ($totalProducts / $totalVendors) : 0), 1) }} per vendor
                                </span>
                              </div>
                              <div>
                                <span class="label-custom">Orders Pending</span>
                                <span class="value-custom">{{ $pendingOrders }}</span>
                                <span class="percentage-custom">
                                    {{ number_format(($totalOrders > 0 ? ($pendingOrders / $totalOrders) * 100 : 0), 1) }}%
                                </span>
                              </div>
                              <div>
                                <span class="label-custom">Orders Delivered</span>
                                <span class="value-custom">{{ $deliveredOrders }}</span>
                                <span class="percentage-custom">
                                    {{ number_format(($totalOrders > 0 ? ($deliveredOrders / $totalOrders) * 100 : 0), 1) }}%
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </article>
                  </div>
                </div>
              </div>

              <!-- Charts Section -->
              @if(isset($petCateWiseAppointments) && isset($petCateWiseShipment))
                <div id="PetAppointment" class="mt-4"></div>
                <div id="PetShipment" class="mt-4"></div>
              @endif
            </div>

            <!-- Top Performers Column -->
            <div class="col-md-12 col-lg-3">
              <!-- Top Doctor Card -->
              @if(isset($topDoctor) && isset($topDoctor->doctor))
                <div class="card shadow">
                  <h4 class="text-center pt-3">Top Performing Doctors</h4>
                  <img src="{{ asset('assets/images/76472d.png') }}" class="card-img-top" alt="Doctor Banner" style="max-height: 115px;">
                  <div class="card-body text-center">
                    <div class="avatar avatar-xl card-avatar card-avatar-top mb-4">
                      <img src="{{ $topDoctor->doctor->picture ?? asset('assets/images/default-avatar.png') }}" 
                           class="avatar-img rounded-circle border-card" alt="Doctor Profile">
                    </div>
                    <h5 class="card-title font-weight-600 mb-2">
                      {{ $topDoctor->doctor->name ?? 'N/A' }}
                    </h5>
                    <div class="doctor-card">
                      <div class="doctor-info">
                        <p>Experience: {{ $topDoctor->doctor->experience ?? 'N/A' }}</p>
                        <p class="text-center">Patients</p>
                        <b>{{ $topDoctor->patientCount ?? 0 }}</b>
                      </div>
                      <div class="d-flex" style="height: 200px;">
                        <div class="vr"></div>
                      </div>
                      <div class="doctor-stats">
                        <div class="stat">
                          <p>{{ ($topDoctor->doctor->education ?? 'N/A') . ' - ' . ($topDoctor->doctor->expertise ?? 'N/A') }}</p>
                        </div>
                        <div class="stat">
                          <p>Rating</p>
                          <p>{{ number_format($doctor->rating_avg_rating ?? 0, 1) }}</p>
                          <i class="fa fa-star"></i>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              @else
                <div class="card shadow">
                  <h4 class="text-center pt-3">Top Performing Doctors</h4>
                  <div class="card-body text-center">
                    <p>No doctor data available</p>
                  </div>
                </div>
              @endif

              <!-- Top Vendor Card -->
              <div class="card shadow mt-4">
                <h4 class="text-center pt-3">Top Performing Vendor</h4>
                <img src="{{ asset('assets/images/76472d.png') }}" class="card-img-top" alt="Vendor Banner" style="max-height: 115px;">
                <div class="card-body text-center">
                  <div class="avatar avatar-xl card-avatar card-avatar-top mb-4">
                    <img src="{{ asset('assets/images/user1.jpg') }}" class="avatar-img rounded-circle border-card" alt="Vendor Profile">
                  </div>
                  @if(isset($topVendor) && isset($topVendor->Vendor))
                    <h5 class="card-title font-weight-600 mb-2">
                      {{ $topVendor->Vendor->vendor_name ?? 'N/A' }}
                    </h5>
                    <p class="card-text text-muted mb-2">{{ $topVendor->Vendor->business_name ?? 'N/A' }}</p>
                    <hr>
                    <p class="card-text">Items Sold</p>
                    <p class="card-text text-muted mb-2">{{ $bestSellingProduct->total_sales ?? 0 }}</p>
                  @else
                    <p class="card-text">No vendor data available</p>
                  @endif
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

@endsection
@section('footer-script')
{{-- <script src="{{ asset('js/chosen.jquery.min.js') }}"></script> --}}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>



<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function () {
    Highcharts.chart('PetShipment', {
        chart: {
            type: 'column'
        },
        title: {
            text: 'Pet Wise Shipments',
            align: 'left'
        },
        subtitle: {
            text: '',
            align: 'left'
        },
        xAxis: {
            categories: @json($months),
            crosshair: true,
            accessibility: {
                description: 'Months'
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Number of Shipments'
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y} shipments</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: @json($petCateWiseShipment)
    });
});
</script>
<script type="text/javascript">
  
  // PetAppointment
  Highcharts.chart('PetAppointment', {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Pet Wise Appointments',
    align: 'left'
  },
  subtitle: {
        // text:
        //     'Source: <a target="_blank" ' +
        //     'href="https://www.indexmundi.com/agriculture/?commodity=corn">indexmundi</a>',
        // align: 'left'
      },
      xAxis: {
        categories:  null ,
        crosshair: true,
        accessibility: {
          description: 'Months'
        }
      },
      yAxis: {
        min: 0,
        title: {
          text: ''
        }
      },
      tooltip: {
        // valueSuffix: ' (1000 MT)'
      },
      plotOptions: {
        column: {
          pointPadding: 0.2,
          borderWidth: 0
        }
      },
      
      series: null      
    });
  //Meter graph start 
  Highcharts.chart('container-speed', {
        chart: {
            type: 'solidgauge',
        },
        // title: {
        //     text: 'Simple Solid Gauge'
        // },
        pane: {
            center: ['50%', '85%'],
            size: '100%',
            startAngle: -90,
            endAngle: 90,
            background: {
                backgroundColor: Highcharts.defaultOptions.legend.backgroundColor || '#EEE',
                innerRadius: '60%',
                outerRadius: '100%',
                shape: 'arc'
            }
        },
        yAxis: {
            min: 0,
            max: 100,
            title: {
                text: 'Shipment Bookings'
            },
            stops: [
                [0.1, '#55BF3B'],  // Green
                // [0.5, '#DDDF0D'],  // Yellow
                // [0.9, '#DF5353']   // Red
            ],
            lineWidth: 0,
            tickWidth: 0,
            minorTickInterval: null,
            tickAmount: 2,
          
            labels: {
                y: 16
            }
        },
        series: [{
            name: 'Shipment Bookings',
            data: [50],
            tooltip: {
                valueSuffix: ' km/h'
            },
            dataLabels: {
                format: '<div style="text-align:center"><span style="font-size:25px">{y}</span><br/>' +
                    '<span style="font-size:12px;opacity:0.4">km/h</span></div>'
            },
            dial: {
                radius: '100%'
            }
        }]
    });
// Meter grah end
function confirmDeleteOperation() {
  if (confirm('Do you want to delete this?'))
    return true;
  else
    return false;
}
function getDateTime() {
  var now = new Date();
  var year = now.getFullYear();
  var month = now.getMonth() + 1;
  var day = now.getDate();
  var hour = now.getHours();
  var minute = now.getMinutes();
  var second = now.getSeconds();
  if (month.toString().length == 1) {
    month = '0' + month;
  }
  if (day.toString().length == 1) {
    day = '0' + day;
  }
  if (hour.toString().length == 1) {
    hour = '0' + hour;
  }
  if (minute.toString().length == 1) {
    minute = '0' + minute;
  }
  if (second.toString().length == 1) {
    second = '0' + second;
  }
  var dateTime = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
  return dateTime;
}

var table = $('table').DataTable({
  processing: false,
  serverSide: true,
  searching: false,
  stateSave: false,
  pagingType: "full_numbers",
  pageLength: 10,
      //order: [[ "2" , "DESC" ]],
      dom: 'Bfrtip',
      buttons: [
      {
        extend: 'csvHtml5',
        text: '<i class="fa fa-file-text-o"></i>&nbsp; CSV',
        title: 'ClientsReport-' + getDateTime(),
        action: newexportaction
      },
      {
        extend: 'excelHtml5',
        text: '<i class="fa fa-file-excel-o"></i>&nbsp; Excel',
        title: 'ClientsReport-' + getDateTime(),
        action: newexportaction,
        exportOptions: {
          modifier: {
            // DataTables core
            order: 'index',  // 'current', 'applied', 'index',  'original'
            page: 'all',      // 'all',    'current'
            search: 'applied'     // 'none',    'applied', 'removed'
          }
        }
      }
      ],
      ajax: {
        'url': '{!! route('admin.shipment.ajax_data') !!}',
        'data': function (d) {
          d.date_from = $("input[name='date_from']").val();
          d.date_to = $("input[name='date_to']").val();
          d.brand_id = $("select[name='brand_id']").val();
          return d;
        }
      },
      columns: [
      {data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false, className: 'text-center'},

      {data: 'date', name: 'date'},
      {data: 'customer_name', name: 'customer_name'},
      {data: 'category', name: 'category'},
      {data: 'book_shipment', name: 'book_shipment'},
      {data: 'query_status', name: 'query_status'},
      {data: 'payment_status', name: 'payment_status'},
      {data: 'origin', name: 'origin'},
      {data: 'destination', name: 'destination'},

      {data: 'actions', name: 'actions'}
      ],
      columnDefs: [ {
        'orderable': false, /* true or false */
      }]
    });
function newexportaction(e, dt, button, config) {
  var self = this;
  var oldStart = dt.settings()[0]._iDisplayStart;
  dt.one('preXhr', function (e, s, data) {
  // Just this once, load all data from the server...
  data.start = 0;
  data.length = 2147483647;
  dt.one('preDraw', function (e, settings) {
      // Call the original action function
      if (button[0].className.indexOf('buttons-copy') >= 0) {
        $.fn.dataTable.ext.buttons.copyHtml5.action.call(self, e, dt, button, config);
      } else if (button[0].className.indexOf('buttons-excel') >= 0) {

        $.fn.dataTable.ext.buttons.excelHtml5.available(dt, config) ?
        $.fn.dataTable.ext.buttons.excelHtml5.action.call(self, e, dt, button, config) :
        $.fn.dataTable.ext.buttons.excelFlash.action.call(self, e, dt, button, config);
      } else if (button[0].className.indexOf('buttons-csv') >= 0) {

        $.fn.dataTable.ext.buttons.csvHtml5.available(dt, config) ?
        $.fn.dataTable.ext.buttons.csvHtml5.action.call(self, e, dt, button, config) :
        $.fn.dataTable.ext.buttons.csvFlash.action.call(self, e, dt, button, config);
      } else if (button[0].className.indexOf('buttons-pdf') >= 0) {

        $.fn.dataTable.ext.buttons.pdfHtml5.available(dt, config) ?
        $.fn.dataTable.ext.buttons.pdfHtml5.action.call(self, e, dt, button, config) :
        $.fn.dataTable.ext.buttons.pdfFlash.action.call(self, e, dt, button, config);
      } else if (button[0].className.indexOf('buttons-print') >= 0) {

        $.fn.dataTable.ext.buttons.print.action(e, dt, button, config);
      }
      dt.one('preXhr', function (e, s, data) {
        // DataTables thinks the first item displayed is index 0, but we're not drawing that.
        // Set the property to what it was before exporting.
        settings._iDisplayStart = oldStart;
        data.start = oldStart;
      });
    // Reload the grid with the original page. Otherwise, API functions like table.cell(this) don't work properly.
    setTimeout(dt.ajax.reload, 0);
    // Prevent rendering of the full data to the DOM
    return false;
  });
}
);
  // Requery the server with the new one-time export settings
  dt.ajax.reload();
};
table.ajax.reload();
$("#search-button").click(function (e) {
  e.preventDefault();
  table.ajax.reload();

});
</script>
@endsection