@extends('layouts.app')
@section('title', 'Dashboard')
@section('css')
<style>
  .fa-3x {
    font-size: 3em !important;
  }
</style>
@endsection
@section('content')
<section class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-sm-6">
        <h1>Dashboard</h1>
      </div>
      <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
          <li class="breadcrumb-item"><a href="#">Home</a></li>
          <li class="breadcrumb-item active">Vendor Dashboard</li>
        </ol>
      </div>
    </div>
  </div>
</section>

<section class="content">
  <div class="container-fluid">
    <div class="row">

      <div class="col-12 col-sm-6 col-md-3">
        <div class="info-box flex-column align-items-center text-center p-3">
          <div class="d-flex align-items-center justify-content-between w-100 px-3">
            <span class="info-box-icon bg-info elevation-1 h50px">
              <i class="fas fa-shopping-cart"></i>
            </span>
            <span class="info-box-number fs-4 mb-0">{{ $totalNewBooking }}</span>
          </div>
          <span class="info-box-text mt-3" data-toggle="tooltip" data-placement="top" title="New Bookings for Today">
            <a href="{{ route('bookingorder.list') }}">New Bookings for Today</a>
          </span>
        </div>
      </div>

      <div class="col-12 col-sm-6 col-md-3">
        <div class="info-box flex-column align-items-center text-center p-3">
          <div class="d-flex align-items-center justify-content-between w-100 px-3">
            <span class="info-box-icon bg-danger elevation-1 h50px">
              <i class="fas fa-shopping-cart"></i>
            </span>
            <span class="info-box-number fs-4 mb-0">{{ $totalPendingBooking }}</span>
          </div>
          <span class="info-box-text mt-3" data-toggle="tooltip" data-placement="top" title="Total Pending Bookings">
            <a href="{{ route('bookingorder.list') }}">Total Pending Bookings</a>
          </span>
        </div>
      </div>

      <!-- fix for small devices only -->
      <div class="clearfix hidden-md-up"></div>

      <div class="col-12 col-sm-6 col-md-3">
        <div class="info-box flex-column align-items-center text-center p-3">
          <div class="d-flex align-items-center justify-content-between w-100 px-3">
            <span class="info-box-icon bg-success elevation-1 h50px">
              <i class="fas fa-shopping-cart"></i>
            </span>
            <span class="info-box-number fs-4 mb-0">{{ $totalCompletedBooking }}</span>
          </div>
          <span class="info-box-text mt-3" data-toggle="tooltip" data-placement="top" title="Total Completed Bookings">
            <a href="{{ route('bookingorder.list') }}">Total Completed Bookings</a>
          </span>
        </div>
      </div>

      <div class="col-12 col-sm-6 col-md-3">
        <div class="info-box flex-column align-items-center text-center p-3">
          <div class="d-flex align-items-center justify-content-between w-100 px-3">
            <span class="info-box-icon bg-warning elevation-1 h50px">
              <i class="fas fa-shopping-cart"></i>
            </span>
            <span class="info-box-number fs-4 mb-0">{{ $totalCancelledBooking }}</span>
          </div>
          <span class="info-box-text mt-3" data-toggle="tooltip" data-placement="top" title="Total Cancelled Bookings">
            <a href="{{ route('bookingorder.list') }}">Total Cancelled Bookings</a>
          </span>
        </div>
      </div>

    </div>

    <div class="row">
      <div class="col-lg-9">
        <!-- Service booking graph -->
        <div class="card">
          <div class="card-header border-0">
            <h3 class="card-title">
              <i class="fas fa-th mr-1"></i>
              Service Booking
            </h3>
          </div>
          <div class="card-body">
            <div class="row">
              <select class="form-control col-md-4 mb-1 mr-1" id="range">
                <option value="">Today</option>
                <option value="yesterday">Yesterday</option>
                <option value="7">Last 7 Days</option>
                <option value="14">Last 14 Days</option>
                <option value="30">Last 30 Days</option>
                <option value="1year">Last 1 Year</option>
                <option value="custom">Custom Range</option>
              </select>

              <select class="form-control col-md-4 mb-1" id="bookingStatus">
                <option value="all">All</option>
                @foreach ($bookingStatuses as $key => $label)
                  @if($key < 3)
                    <option value="{{ $key }}">{{ ucfirst($label) }}</option>
                  @endif
                @endforeach
              </select>

              <!-- Custom Range Inputs (initially hidden) -->
              <div id="customDateInputs" class="col-md-12 mb-1" style="display: none;">
                <div class="row">
                  <input type="text" class="form-control col-md-4 mr-1" id="startDate" placeholder="Start date" autocomplete="off" />
                  <input type="text" class="form-control col-md-4" id="endDate" placeholder="End date" autocomplete="off" />
                </div>
              </div>
            </div>

            <div class="chart row" id="serviceBookingVendorChartContainer"></div>
          </div>
          <div class="card-footer bg-transparent">
            <div class="row">
            </div>
          </div>
        </div>
      </div>

      <div class="col-lg-3">

        <div class="card">
          <div class="card-header border-0">
            <h3 class="card-title">
              <i class="fas fa-th mr-1"></i>
              {{ $currentSubscription ? 'Active Plan' : 'Your Plan Detail' }}
            </h3>
          </div>

          <div class="card-body">
            <div class="row">
              <div class="cl-md-12">
                @if($currentSubscription)
                  <p><span class="text-bold text-success">Plan Name: </span>{{ $currentSubscription->plan_name }}</p>
                  <p><span class="text-bold text-success">Plan Expired On: </span>{{ date(config('constant.date_format.display_format'), strtotime($currentSubscription->end_date)) }}</p>
                @elseif($expiredSubscription)
                  <p><span class="text-bold text-danger">Plan Name: </span>{{ $expiredSubscription->plan_name }}</p>
                  <p><span class="text-bold text-danger">Your Plan Is Expired: </span>{{ date(config('constant.date_format.display_format'), strtotime($expiredSubscription->end_date)) }}</p>
                @else
                  <p><span class="text-bold text-danger">There are currently no plans associated with your account.</span></p>
                @endif
              </div>
            </div>
          </div>

          @if($currentSubscription)
            <div class="card-footer bg-transparent">
              <div class="row">
                <!-- Footer content if needed -->
              </div>
            </div>
          @endif
        </div>


      </div>
    </div>

    <div class="row">
      <div class="col-lg-6">
        <!-- booking revenue graph -->
        <div class="card">
          <div class="card-header border-0">
            <h3 class="card-title">
              <i class="fas fa-th mr-1"></i>
              Booking Revenue
            </h3>
          </div>
          <div class="card-body">
            <div class="row">
              <select class="form-control col-md-4 mb-1" id="revenueChartRange">
                <option value="">Today</option>
                <option value="yesterday">Yesterday</option>
                <option value="7">Last 7 Days</option>
                <option value="14">Last 14 Days</option>
                <option value="30">Last 30 Days</option>
                <option value="1year">Last 1 Year</option>
                <option value="custom">Custom Range</option>
              </select>

              <!-- Custom Range Inputs (initially hidden) -->
              <div id="revenueChartRangeCustomDateInputs" class="col-md-8 mb-1" style="display: none;">
                <div class="row">
                  <input type="text" class="form-control col-md-6" id="revenueChartRangeStartDate" placeholder="Start date" autocomplete="off" />
                  <input type="text" class="form-control col-md-6" id="revenueChartRangeEndDate" placeholder="End date" autocomplete="off" />
                </div>
              </div>
            </div>
            <div class="chart row" id="revenueBookingChartContainer"></div>
          </div>
          <div class="card-footer bg-transparent">
            <div class="row">
            </div>
          </div>
        </div>
      </div>

      <div class="col-lg-6">
        <!-- completed orders price graph -->
        <div class="card">
          <div class="card-header border-0">
            <h3 class="card-title">
              <i class="fas fa-th mr-1"></i>
              Completed Orders
            </h3>
          </div>
          <div class="card-body">
            <div class="row">
              <select class="form-control col-md-4 mb-1" id="completedServiceChartRange">
                <option value="">Today</option>
                <option value="yesterday">Yesterday</option>
                <option value="7">Last 7 Days</option>
                <option value="14">Last 14 Days</option>
                <option value="30">Last 30 Days</option>
                <option value="1year">Last 1 Year</option>
                <option value="custom">Custom Range</option>
              </select>

              <!-- Custom Range Inputs (initially hidden) -->
              <div id="completedServiceChartRangeCustomDateInputs" class="col-md-8 mb-1" style="display: none;">
                <div class="row">
                  <input type="text" class="form-control col-md-6" id="completedServiceChartRangeStartDate" placeholder="Start date" autocomplete="off" />
                  <input type="text" class="form-control col-md-6" id="completedServiceChartRangeEndDate" placeholder="End date" autocomplete="off" />
                </div>
              </div>
            </div>
            <div class="chart row" id="completedServiceChartContainer"></div>
          </div>
          <div class="card-footer bg-transparent">
            <div class="row">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
@endsection
@section('scripts')
<script>
  const chartRoute = "{{ route('vendor.dashboard.chart.data') }}";
  window.userRole = 'vendor';
</script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="{{asset('js/dashboard-chart.js')}}"></script>
@endsection