@extends('layouts.admin')

@section('page-title') Suivi Café @endsection
@section('page-subtitle') Gestion du quota et des livraisons café @endsection

@section('styles')
<link href="{{ asset('css/pages/admin/components.css') }}" rel="stylesheet">
<link href="{{ asset('css/pages/admin/cafe/show.css') }}" rel="stylesheet">
@endsection

@section('content')
<div class="coffee-show-page" 
     data-client-id="{{ $client->id }}"
     data-contract-start-date="{{ $stats['contract'] ? $stats['contract']->start_date : '' }}"
     data-monthly-quota="{{ $stats['monthly_quota'] ?? 0 }}">
  <div class="page-header-row">
    <div class="main-header-navigation">
      <a href="{{ route('admin.coffee.index') }}" class="back-link">
        <i class="fas fa-arrow-left"></i>
        <span>Retour à la liste</span>
      </a>
    </div>
    <div class="client-info-header">
      @if($client->logo_url)
        <img src="{{ $client->logo_url }}" alt="Logo {{ $client->client_display_name }}" 
             class="client-logo coffee-me-3">
      @endif
      <div class="client-details">
        <div class="d-flex align-items-center">
          <h3 class="client-name mb-0 me-3">{{ $client->client_display_name }}</h3>
          @if($stats['contract'] !== null)
            @php
              // Calculer le statut du contrat par rapport à aujourd'hui
              $today = \Carbon\Carbon::today();
              $contractStart = \Carbon\Carbon::parse($contract->start_date)->startOfDay();
              $contractEnd = $contract->end_date ? \Carbon\Carbon::parse($contract->end_date)->endOfDay() : null;
              
              // Déterminer le statut du contrat par rapport à aujourd'hui
              if ($today->lt($contractStart)) {
                  // Aujourd'hui est AVANT le début du contrat
                  $status = 'Pas commencé';
                  $badgeClass = 'bg-secondary';
              } elseif ($contractEnd && $today->gt($contractEnd)) {
                  // Aujourd'hui est APRÈS la fin du contrat
                  $status = 'Terminé';
                  $badgeClass = 'bg-danger';
              } else {
                  // Le contrat est actif aujourd'hui
                  $status = 'En cours';
                  $badgeClass = 'bg-success';
              }
            @endphp
            <span class="badge {{ $badgeClass }} contract-status-badge">
              {{ $status }}
            </span>
          @else
            <span class="badge bg-secondary contract-status-badge">
              Aucun contrat
            </span>
          @endif
        </div>

        @if($stats['contract'] !== null)
          <!-- Dates du contrat -->
          <div class="contract-dates mt-2">
            <div class="d-flex justify-content-start align-items-center">
              <small class="text-muted me-2">Dates du contrat :</small>
              <i class="fas fa-play me-1 text-success"></i>
              <span class="text-muted">{{ \Carbon\Carbon::parse($contract->start_date)->format('d/m/Y') }}</span>
              <span class="mx-2 text-muted">-</span>
              @if($contract->end_date)
                <i class="fas fa-stop me-1 text-danger"></i>
                <span class="text-muted">{{ \Carbon\Carbon::parse($contract->end_date)->format('d/m/Y') }}</span>
              @else
                <i class="fas fa-infinity me-1 text-primary"></i>
                <span class="text-muted">Indéterminé</span>
              @endif
            </div>
          </div>
        @endif

      </div>
    </div>

  </div>

  @if($stats['contract'] === null)
    <!-- Message élégant quand aucun contrat n'est actif pour ce mois -->
    <div class="card border-0 shadow-sm mt-4 mb-4 no-contract-banner">
      <div class="card-body p-4">
        <div class="row align-items-center">
          <div class="col-auto">
            <div class="rounded-circle d-flex align-items-center justify-content-center no-contract-icon">
              <i class="fas fa-calendar-times fa-2x"></i>
            </div>
          </div>
          <div class="col">
            <h4 class="mb-2 text-primary fw-bold">
              <i class="fas fa-info-circle me-2"></i>Aucun contrat café actif
            </h4>
            <p class="mb-2 text-muted">
              Il n'y a pas de contrat café actif pour le mois sélectionné 
              <strong class="text-primary">{{ $month }}/{{ $year }}</strong>.
            </p>
            <div class="d-flex align-items-center text-muted">
              <i class="fas fa-lightbulb me-2 text-warning"></i>
              <small>Sélectionnez un autre mois ou créez un nouveau contrat pour voir les données.</small>
            </div>
          </div>
        </div>
      </div>
    </div>
  @endif

    <!-- Vue synthétique -->
    <div class="coffee-stats-section">
        <!-- KPI GÉNÉRAUX -->
        <div class="coffee-stats-header">
            <h4 class="coffee-stats-title">
                <i class="fas fa-chart-bar coffee-me-2"></i>KPI généraux
            </h4>
        </div>
        <div class="stats-coffee">
            <div class="stat-card">
                <i class="fas fa-calendar-alt fa-2x coffee-text-info"></i>
                <h5>Quota Mensuel</h5>
                <h3 class="coffee-text-info">
                    @if($stats['contract'] === null)
                        N/A
                    @else
                        {{ number_format($stats['monthly_quota'] ?? 0, 0) }} kg
                    @endif
                </h3>
            </div>
            <div class="stat-card" id="cumulative-quota-card">
                <i class="fas fa-calendar fa-2x coffee-text-primary"></i>
                <h5>Quota cumulé</h5>
                <small class="coffee-text-muted" id="cumulative-quota-period">
                    Chargement...
                </small>
                <h3 id="cumulative-quota-value" class="coffee-text-primary">
                    -- kg
                </h3>
            </div>
            <div class="stat-card" id="cumulative-delivered-card">
                <i class="fas fa-chart-line fa-2x coffee-text-info"></i>
                <h5>Livré cumulé</h5>
                <small class="coffee-text-muted" id="cumulative-delivered-period">
                    Chargement...
                </small>
                <h3 id="cumulative-delivered-value" class="coffee-text-info">
                    -- kg
                </h3>
            </div>
            <div class="stat-card" id="cumulative-surplus-card">
                <i class="fas fa-exchange-alt fa-2x coffee-text-muted" id="surplus-icon"></i>
                <h5>Surplus cumulé net</h5>
                <small class="coffee-text-muted" id="surplus-period">
                    Chargement...
                </small>
                <h3 class="coffee-text-muted" id="surplus-value">
                    -- kg
                </h3>
            </div>
            <div class="stat-card">
                <i class="fas fa-exclamation-triangle fa-2x coffee-text-muted" id="global-status-icon"></i>
                <h5>Statut Global</h5>
                <h3>
                    <span class="coffee-badge coffee-badge-muted" id="global-status-badge">Chargement...</span>
                </h3>
            </div>
            <div class="stat-card" id="cumulative-billed-card">
                <i class="fas fa-euro-sign fa-2x coffee-text-warning" id="billed-icon"></i>
                <h5>KG DÉJÀ FACTURÉS</h5>
                <small class="coffee-text-muted" id="billed-period">
                    Chargement...
                </small>
                <h3 class="coffee-text-warning" id="billed-value">
                    -- kg
                </h3>
            </div>
        </div>

        <!-- KPI MENSUELS -->
        <div class="coffee-stats-header coffee-mt-4">
            <h4 class="coffee-stats-title">
                <i class="fas fa-calendar-month coffee-me-2"></i>KPI mensuels
            </h4>
        </div>
        <div class="stats-coffee">
            <div class="stat-card">
                <i class="fas fa-coffee fa-2x coffee-text-info"></i>
                <h5>Livré ce Mois</h5>
                <h3 class="coffee-text-info" id="monthly-consumed">
                    @if($stats['contract'] === null)
                        N/A
                    @else
                        {{ number_format($trackingData['monthly_consumed'] ?? 0, 0) }} kg
                    @endif
                </h3>
            </div>

            <div class="stat-card">
                <i class="fas fa-truck fa-2x coffee-text-primary"></i>
                <h5>Nb Réassort</h5>
                <h3 class="coffee-text-primary" id="monthly-deliveries-count">
                    @if($stats['contract'] === null)
                        N/A
                    @else
                        {{ $trackingData['monthly_deliveries_count'] ?? 0 }}
                    @endif
                </h3>
            </div>
            <div class="stat-card">
                <i class="fas fa-calculator fa-2x coffee-text-secondary"></i>
                <h5>Moyenne Kg/Réassort</h5>
                <h3 class="coffee-text-secondary" id="monthly-avg-delivery">
                    @if($stats['contract'] === null)
                        N/A
                    @else
                        @php
                            $monthlyCount = $trackingData['monthly_deliveries_count'] ?? 0;
                            $monthlyConsumed = $trackingData['monthly_consumed'] ?? 0;
                            $avgDelivery = $monthlyCount > 0 ? $monthlyConsumed / $monthlyCount : 0;
                        @endphp
                        {{ number_format($avgDelivery, 0) }} kg
                    @endif
                </h3>
            </div>
            <div class="stat-card" id="monthly-surplus-card">
                <i class="fas fa-exchange-alt fa-2x coffee-text-muted" id="monthly-surplus-icon"></i>
                <h5>Surplus mensuel</h5>
                <h3 class="coffee-text-muted" id="monthly-surplus-value">
                    -- kg
                </h3>
            </div>
            <div class="stat-card" id="monthly-status-card">
                <i class="fas fa-balance-scale fa-2x coffee-text-muted" id="monthly-status-icon"></i>
                <h5>Statut Mensuel</h5>
                <h3>
                    <span class="coffee-badge coffee-badge-muted" id="monthly-status-badge">Chargement...</span>
                </h3>
            </div>
            <div class="stat-card">
                <i class="fas fa-euro-sign fa-2x coffee-text-warning"></i>
                <h5>Facturation</h5>
                <small class="coffee-text-muted" id="billing-period">
                    @php
                        $monthNames = ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'];
                        $currentMonth = now()->month - 1; // 0-11
                        $currentYear = now()->year;
                    @endphp
                    fin {{ $monthNames[$currentMonth] }} {{ $currentYear }}
                </small>
                <h3 class="coffee-text-warning" id="monthly-billing">
                    @php
                        // Trouver la facturation mensuelle pour le mois courant
                        $currentMonth = date('Y-m');
                        $monthlyBillingAmount = 0;
                        
                        foreach ($trackingData['monthly_data'] as $monthData) {
                            if ($monthData['month'] === $currentMonth) {
                                $monthlyBillingAmount = $monthData['monthly_billing_amount'] ?? 0;
                                break;
                            }
                        }
                    @endphp
                    @if($monthlyBillingAmount > 0)
                        {{ number_format($monthlyBillingAmount, 0) }} kg
                    @else
                        <span class="coffee-text-muted">Rien à facturer</span>
                    @endif
                </h3>
            </div>
        </div>
    </div>

    <!-- Tableau mensuel détaillé -->
    <div class="coffee-row">
        <!-- Filters Card -->
        <div class="filters-card">
            <div class="filters-card-content">
                <!-- Barre de recherche -->
                <div class="search-box">
                    <i class="fas fa-search"></i>
                    <input type="text" id="tracking-search-input" placeholder="Rechercher dans les données...">
                </div>
                <!-- Navigation par mois (même style que workers/profile) -->
                <div class="main-header-calendar">
                    <button id="prev-month-tracking" class="main-header-calendar-btn">
                        <i class="fa-solid fa-chevron-left"></i>
                    </button>
                    <button type="button" id="current-month-display" class="main-header-calendar-current" data-bs-toggle="modal" data-bs-target="#month-selector-modal"></button>
                    <button id="next-month-tracking" class="main-header-calendar-btn">
                        <i class="fa-solid fa-chevron-right"></i>
                    </button>
                </div>


            </div>
        </div>

            <div class="coffee-card">
                <div class="coffee-card-header">
                    <h5 class="coffee-mb-0">
                        <i class="fas fa-table coffee-me-2"></i>Suivi Mensuel Détaillé du réassort
                    </h5>
                    <div class="coffee-d-flex coffee-gap-2">
                        <button class="btn btn-primary" data-action="add-delivery">
                            <i class="fas fa-plus coffee-me-2"></i>Ajouter une livraison
                        </button>
                            <button class="btn btn-secondary" data-action="export-billing">
                                <i class="fas fa-download coffee-me-2"></i>Export Facturation
                            </button>
                        </div>
                </div>
                <div class="coffee-card-body coffee-p-0">
                    <div class="coffee-table-responsive">
                        <table class="coffee-table coffee-table-hover coffee-mb-0">
                            <thead class="coffee-table-light">
                                <tr>
                                    <th class="coffee-text-center">Date</th>
                                    <th class="coffee-text-center">Quantité</th>
                                    <th class="coffee-text-center">Adresse</th>
                                    <th class="coffee-text-center">Utilisateur</th>
                                    <th class="coffee-text-center">Actions</th>
                                </tr>
                            </thead>
                            <tbody id="tracking-table-body">
                                @forelse($deliveriesData as $delivery)
                                <tr class="coffee-delivery-row" data-month="{{ $delivery['month_key'] }}" data-month-year="{{ $delivery['month_key'] }}">
                                    <td class="coffee-text-center">
                                        <div class="coffee-delivery-date-info">
                                            <strong>{{ \Carbon\Carbon::parse($delivery['delivery_date'])->format('d/m/Y') }}</strong>
                                            <small class="coffee-text-muted coffee-d-block">{{ \Carbon\Carbon::parse($delivery['created_at'])->format('H:i') }}</small>
                                        </div>
                                    </td>
                                    <td class="coffee-text-center">
                                        <span class="coffee-badge-info">
                                            {{ number_format($delivery['quantity'], 0) }} kg
                                        </span>
                                    </td>
                                    <td class="coffee-text-center">
                                        <div class="coffee-address-info">
                                            <i class="fas fa-map-marker-alt coffee-me-1 text-secondary"></i>
                                            <span class="coffee-address-text">{{ $delivery['address_short'] }}</span>
                                        </div>
                                    </td>
                                    <td class="coffee-text-center">
                                        <div class="coffee-user-info">
                                            <i class="fas fa-user coffee-me-1"></i>
                                            <span class="coffee-user-name">{{ $delivery['created_by'] }}</span>
                                        </div>
                                    </td>
                                    <td class="coffee-text-center">
                                        <div class="coffee-action-buttons">
                                            <button class="coffee-btn coffee-btn-sm coffee-btn-outline-primary coffee-me-1" 
                                                    data-action="edit-delivery" 
                                                    data-delivery-id="{{ $delivery['id'] }}"
                                                    title="Modifier">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            <button class="coffee-btn coffee-btn-sm coffee-btn-danger" 
                                                    data-action="delete-delivery" 
                                                    data-delivery-id="{{ $delivery['id'] }}"
                                                    title="Supprimer">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                @empty
                                <tr id="no-deliveries-row">
                                    <td colspan="5" class="coffee-text-center coffee-text-muted coffee-py-4">
                                        <i class="fas fa-calendar-times fa-2x coffee-mb-2"></i>
                                        <div>Aucune donnée disponible pour cette période</div>
                                    </td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
    </div>
</div>

<!-- Modal d'ajout de livraison -->
<div class="coffee-modal" id="addDeliveryModal">
    <div class="coffee-modal-dialog">
        <div class="coffee-modal-header">
            <h5 class="coffee-modal-title">
                <i class="fas fa-plus coffee-me-2"></i>Ajouter une livraison
            </h5>
            <button type="button" class="coffee-btn-close" data-action="close-modal">×</button>
        </div>
        <form id="addDeliveryForm">
            <div class="coffee-modal-body">
                <input type="hidden" name="client_id" value="{{ $client->client_id }}">
                
                <div class="coffee-form-group coffee-mb-3">
                    <label for="delivery_date" class="coffee-form-label">Date de livraison *</label>
                    <input type="date" class="coffee-form-control" id="delivery_date" name="delivery_date" 
                           value="{{ date('Y-m-d') }}" required>
                </div>
                
                <div class="coffee-form-group coffee-mb-3">
                    <label for="quantity" class="coffee-form-label">Quantité (kg) *</label>
                    <input type="number" class="coffee-form-control" id="quantity" name="quantity" 
                           step="0.1" min="0" required>
                </div>
            </div>
            <div class="coffee-modal-footer">
                <button type="button" class="btn btn-secondary" data-action="close-modal">Annuler</button>
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-save coffee-me-2"></i>Enregistrer
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Modal de sélection de période -->
<div class="modal fade" id="month-selector-modal" tabindex="-1" aria-labelledby="month-selector-modal-label" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="month-selector-modal-label">
                    <i class="fas fa-calendar me-2"></i>Sélectionner une période
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
            </div>
            <div class="modal-body">
                <form id="periodSelectorForm">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="month-select-tracking" class="form-label">Mois</label>
                            <div class="input-group">
                                <select id="month-select-tracking" class="form-select">
                                    <option value="1">Janvier</option>
                                    <option value="2">Février</option>
                                    <option value="3">Mars</option>
                                    <option value="4">Avril</option>
                                    <option value="5">Mai</option>
                                    <option value="6">Juin</option>
                                    <option value="7">Juillet</option>
                                    <option value="8">Août</option>
                                    <option value="9">Septembre</option>
                                    <option value="10">Octobre</option>
                                    <option value="11">Novembre</option>
                                    <option value="12">Décembre</option>
                                </select>
                                <span class="input-group-text"><i class="fas fa-calendar-alt"></i></span>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label for="year-select-tracking" class="form-label">Année</label>
                            <div class="input-group">
                                <select id="year-select-tracking" class="form-select">
                                    <!-- Les options seront générées par JavaScript -->
                                </select>
                                <span class="input-group-text"><i class="fas fa-calendar-alt"></i></span>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times me-2"></i>Annuler
                </button>
                <button type="button" class="btn btn-primary" id="apply-month-year-tracking">
                    <i class="fas fa-check me-2"></i>Appliquer
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal de détails mensuel -->
<div class="coffee-modal" id="monthDetailsModal">
    <div class="coffee-modal-dialog coffee-modal-dialog-lg">
        <div class="coffee-modal-header">
            <h5 class="coffee-modal-title">
                <i class="fas fa-calendar coffee-me-2"></i>Détails du mois
            </h5>
            <button type="button" class="coffee-btn-close" data-action="close-modal">×</button>
        </div>
        <div class="coffee-modal-body" id="monthDetailsContent">
            <!-- Contenu chargé dynamiquement -->
        </div>
    </div>
</div>

@endsection



@section('scripts')
<script>
    // Injecter les données de statistiques directement pour éviter les problèmes d'API
    window.coffeeStatsData = {
        tracking_data: @json($stats['tracking_data'] ?? []),
        balance_data: @json($stats['balance_data'] ?? []),
        cumulative_data: @json($stats['cumulative_data'] ?? []),
        monthly_billing_amount: {{ $stats['monthly_billing_amount'] ?? 0 }},
        global_status: "{{ $stats['global_status'] ?? 'normal' }}",
        current_balance: {{ $stats['current_balance'] ?? 0 }}
    };
    console.log('📊 Données stats injectées:', window.coffeeStatsData);
</script>
<script src="{{ asset('js/pages/admin/cafe/coffee-show.js') }}"></script>
@endsection