@extends('layouts/layoutMaster')

@section('title', $title ?? __('Store Dashboard'))

@section('vendor-style')
@vite([
  'resources/assets/vendor/libs/apex-charts/apex-charts.scss',
  'resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss',
  'resources/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.scss',
  'resources/assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.scss'
])
@endsection

@section('vendor-script')
@vite([
  'resources/assets/vendor/libs/apex-charts/apexcharts.js',
  'resources/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js'
])
@endsection

@section('page-script')
<script>
'use strict';

(function () {
  // Shipments Over Time Chart
  const shipmentsChartEl = document.querySelector('#shipmentsOverTimeChart');
  if (shipmentsChartEl) {
    const shipmentsChartConfig = {
      chart: {
        height: 300,
        type: 'area',
        toolbar: { show: false }
      },
      series: [{
        name: '{{ __("Shipments") }}',
        data: @json($shipmentsChartData['counts'])
      }],
      xaxis: {
        categories: @json($shipmentsChartData['dates'])
      },
      colors: ['#696cff'],
      fill: {
        type: 'gradient',
        gradient: {
          shade: 'light',
          type: 'vertical',
          shadeIntensity: 0.4,
          opacityFrom: 1,
          opacityTo: 0.8
        }
      },
      stroke: {
        curve: 'smooth',
        width: 3
      },
      dataLabels: { enabled: false }
    };
    const shipmentsChart = new ApexCharts(shipmentsChartEl, shipmentsChartConfig);
    shipmentsChart.render();
  }

  // Status Distribution Chart
  const statusChartEl = document.querySelector('#statusDistributionChart');
  if (statusChartEl) {
    const statusChartConfig = {
      chart: {
        height: 300,
        type: 'donut'
      },
      series: @json($statusDistributionData['values']),
      labels: @json($statusDistributionData['labels']),
      colors: @json($statusDistributionData['colors']),
      legend: {
        position: 'bottom'
      },
      plotOptions: {
        pie: {
          donut: {
            size: '70%',
            labels: {
              show: true,
              name: { show: true },
              value: { show: true },
              total: {
                show: true,
                label: '{{ __("Total") }}',
                formatter: function (w) {
                  return w.globals.seriesTotals.reduce((a, b) => a + b, 0);
                }
              }
            }
          }
        }
      }
    };
    const statusChart = new ApexCharts(statusChartEl, statusChartConfig);
    statusChart.render();
  }
})();
</script>
@endsection

@section('content')
<div class="row">
  <!-- Welcome Card -->
  <div class="col-12 col-lg-4 mb-4">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title mb-3">{{ __('Welcome back') }}, {{ $storeInfo['name'] }}! 👋</h5>
        <p class="mb-2"><strong>{{ __('Category') }}:</strong> {{ $storeInfo['category'] }}</p>
        <p class="mb-2"><strong>{{ __('Delivery Team') }}:</strong> {{ $storeInfo['delivery_team'] }}</p>
        <p class="mb-2"><strong>{{ __('Rating') }}:</strong> 
          <span class="badge bg-label-warning">
            <i class="ti ti-star-filled"></i> {{ number_format($storeInfo['rating'], 1) }}
          </span>
        </p>
        <p class="mb-3"><strong>{{ __('Prepare Duration') }}:</strong> {{ $storeInfo['prepare_duration'] }} {{ __('minutes') }}</p>
        <a href="{{ route('dashboard.store.shipments.create') }}" class="btn btn-primary">
          <i class="ti ti-plus me-1"></i> {{ __('Create Shipment') }}
        </a>
      </div>
    </div>
  </div>

  <!-- Statistics Cards -->
  <div class="col-12 col-lg-8 mb-4">
    <div class="card h-100">
      <div class="card-header">
        <h5 class="card-title mb-0">{{ __('Shipment Statistics') }}</h5>
      </div>
      <div class="card-body">
        <div class="row gy-3">
          <div class="col-md-3 col-6">
            <div class="d-flex align-items-center">
              <div class="badge rounded-pill bg-label-warning me-3 p-2">
                <i class="ti ti-clock ti-sm"></i>
              </div>
              <div class="card-info">
                <h5 class="mb-0">{{ $shipmentCounts['pending'] ?? 0 }}</h5>
                <small>{{ __('Pending') }}</small>
              </div>
            </div>
          </div>
          <div class="col-md-3 col-6">
            <div class="d-flex align-items-center">
              <div class="badge rounded-pill bg-label-info me-3 p-2">
                <i class="ti ti-truck-delivery ti-sm"></i>
              </div>
              <div class="card-info">
                <h5 class="mb-0">{{ $shipmentCounts['process'] ?? 0 }}</h5>
                <small>{{ __('In Process') }}</small>
              </div>
            </div>
          </div>
          <div class="col-md-3 col-6">
            <div class="d-flex align-items-center">
              <div class="badge rounded-pill bg-label-success me-3 p-2">
                <i class="ti ti-check ti-sm"></i>
              </div>
              <div class="card-info">
                <h5 class="mb-0">{{ $shipmentCounts['complete'] ?? 0 }}</h5>
                <small>{{ __('Completed') }}</small>
              </div>
            </div>
          </div>
          <div class="col-md-3 col-6">
            <div class="d-flex align-items-center">
              <div class="badge rounded-pill bg-label-danger me-3 p-2">
                <i class="ti ti-x ti-sm"></i>
              </div>
              <div class="card-info">
                <h5 class="mb-0">{{ $shipmentCounts['cancelled'] ?? 0 }}</h5>
                <small>{{ __('Cancelled') }}</small>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Charts Row -->
<div class="row">
  <div class="col-12 col-lg-8 mb-4">
    <div class="card">
      <div class="card-header">
        <h5 class="card-title mb-0">{{ __('Shipments Over Time') }}</h5>
        <small class="text-muted">{{ __('Last 7 days') }}</small>
      </div>
      <div class="card-body">
        <div id="shipmentsOverTimeChart"></div>
      </div>
    </div>
  </div>

  <div class="col-12 col-lg-4 mb-4">
    <div class="card">
      <div class="card-header">
        <h5 class="card-title mb-0">{{ __('Status Distribution') }}</h5>
      </div>
      <div class="card-body">
        <div id="statusDistributionChart"></div>
      </div>
    </div>
  </div>
</div>

<!-- Wallet Summary -->
<div class="row">
  <div class="col-12 col-md-4 mb-4">
    <div class="card">
      <div class="card-body">
        <div class="d-flex justify-content-between align-items-center mb-3">
          <h5 class="card-title mb-0">{{ __('Wallet Balance') }}</h5>
          <i class="ti ti-wallet ti-lg text-primary"></i>
        </div>
        <h3 class="mb-2">{{ number_format($walletBalance, 2) }} {{ __('SAR') }}</h3>
        <a href="{{ route('dashboard.store.wallet.index') }}" class="btn btn-sm btn-outline-primary">
          {{ __('View Transactions') }}
        </a>
      </div>
    </div>
  </div>

  <!-- Recent Shipments -->
  <div class="col-12 col-md-8 mb-4">
    <div class="card">
      <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="card-title mb-0">{{ __('Recent Shipments') }}</h5>
        <a href="{{ route('dashboard.store.shipments.index') }}" class="btn btn-sm btn-primary">
          {{ __('View All') }}
        </a>
      </div>
      <div class="card-body">
        {!! $dataTable->table(['class' => 'table table-hover']) !!}
      </div>
    </div>
  </div>
</div>
@endsection

@push('scripts')
{!! $dataTable->scripts() !!}
@endpush