@extends('layouts.menage')

@section('title', 'Réassort Café')

@push('styles')
<link href="{{ asset('css/pages/menage/coffee.css') }}?v={{ time() }}" rel="stylesheet">
@endpush

@push('scripts')
<script src="{{ asset('js/pages/menage/coffee.js') }}?v={{ microtime(true) }}" defer></script>
@endpush

@section('content')
<div class="coffee-container">
    <!-- Header avec bouton retour -->
    <div class="coffee-header">

        <h1 class="coffee-title" id="coffee-title">{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['coffee']['title'] ?? 'Réassort Café' }}</h1>
    </div>

    <!-- Bouton principal "Ajouter du café" -->
    <div class="add-coffee-section">
        <button type="button" class="add-coffee-btn" data-modal-open="addCoffeeModal" id="add-coffee-btn">
            <div class="add-coffee-icon">
                <i class="fas fa-plus"></i>
            </div>
            <div class="add-coffee-content">
                <h3 class="add-coffee-title" id="add-coffee-title">{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['coffee']['add_coffee'] ?? 'Ajouter du café' }}</h3>
                <p class="add-coffee-description" id="add-coffee-description">{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['coffee']['add_coffee_description'] ?? 'Enregistrer un nouveau réassort' }}</p>
            </div>
        </button>
    </div>

    <!-- Section historique -->
    <div class="history-section">
        <h2 class="history-title" id="history-title">{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['coffee']['history_title'] ?? 'Historique de mes réassorts' }}</h2>
        
        <div class="history-list {{ $deliveries && $deliveries->count() > 0 ? '' : 'hidden' }}">
            @if($deliveries && $deliveries->count() > 0)
                @foreach($deliveries as $delivery)
                    <div class="history-item" data-delivery-id="{{ $delivery->id }}">
                        <!-- Bouton supprimer -->
                        <button type="button" class="delete-btn" onclick="deleteCoffeeDelivery({{ $delivery->id }})" title="{{ __('coffee.delete_delivery') ?? 'Supprimer cette livraison' }}">
                            <i class="fas fa-trash"></i>
                        </button>
                        
                        <!-- 1ère ligne : 2 colonnes (Date verticale | Logo + Nom du client) -->
                        <div class="history-line-1">
                            <div class="history-date-column">
                                <div class="history-date">
                                    <div class="date-day">{{ $delivery->delivery_date->format('d') }}</div>
                                    <div class="date-month" data-translate="months_short.{{ strtolower($delivery->delivery_date->format('F')) }}">{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['months_short'][strtolower($delivery->delivery_date->format('F'))] ?? $delivery->delivery_date->format('M') }}</div>
                                    <div class="date-year">{{ $delivery->delivery_date->format('Y') }}</div>
                                </div>
                                <div class="history-line-2">
                                    <div class="history-time-column">
                                        <div class="history-time">
                                            {{ $delivery->created_at->format('H:i') }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="client-address-column">
                                <div class="history-client-column">
                                    <div class="client-logo-container">
                                        @if(isset($delivery->client_logo) && $delivery->client_logo)
                                            <img src="{{ $delivery->client_logo }}" alt="{{ $delivery->client_name ?? __('coffee.unknown_client') }}" class="history-client-logo">
                                        @else
                                            <div class="history-client-logo-placeholder">
                                                <i class="fas fa-building"></i>
                                            </div>
                                        @endif
                                    </div>
                                    <div class="history-client-name">{{ $delivery->client_name ?? __('coffee.unknown_client') }}</div>
                                </div>
                                <div class="history-address-column">
                                    <div class="history-address">
                                        @if(isset($delivery->short_address) && $delivery->short_address)
                                            {{ $delivery->short_address }}
                                        @else
                                            {{ __('coffee.no_address') }}
                                        @endif
                                    </div>
                                </div>
                                                        <!-- 3ème ligne : Nombre de kg apporté -->
                        <div class="history-line-3">
                            <div><span class="history-quantity">{{ $delivery->quantity }}</span> <span data-translate="coffee.kg_delivered">{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['coffee']['kg_delivered'] ?? 'kg apporté' }}</span></div>
                        </div>
                            </div>
                        </div>
                        

                    </div>
                @endforeach
            @endif
        </div>
        
        <!-- Section no-history toujours présente, cachée/affichée dynamiquement -->
        <div class="no-history {{ $deliveries && $deliveries->count() > 0 ? 'hidden' : '' }}">
            <div class="no-history-icon">
                <i class="fas fa-coffee"></i>
            </div>
            <p class="no-history-text" id="no-history-text">{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['coffee']['no_history'] ?? 'Aucun réassort enregistré' }}</p>
            <p class="no-history-subtitle" id="no-history-subtitle">{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['coffee']['no_history_subtitle'] ?? 'Commencez par ajouter votre premier réassort' }}</p>
        </div>
    </div>
</div>
@endsection

@push('modals')
<!-- Modal unique multi-étapes : Ajouter du café -->
<div class="coffee-modal-overlay" id="addCoffeeModal">
    <div class="coffee-modal-wrapper" id="coffeeModalWrapper">
        
        <!-- Header -->
        <div class="coffee-modal-header">
            <h3 class="coffee-modal-title" id="modalTitle">
                <i class="fas fa-coffee modal-icon" id="modalIcon"></i>
                <span id="modalTitleText">{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['coffee']['add_coffee'] ?? 'Ajouter du café' }}</span>
            </h3>
            <button type="button" class="modal-close" data-modal-close aria-label="Close">
                <i class="fas fa-times"></i>
            </button>
        </div>
        
        <!-- Body -->
        <div class="coffee-modal-body">
            <!-- Étape 1: Sélection du client -->
            <div class="modal-step" id="step1">
                <div class="clients-grid" id="clientsGrid">
                    <!-- Les clients seront chargés dynamiquement via JS -->
                </div>
            </div>
                
                <!-- Étape 2: Sélection de l'adresse -->
                <div class="modal-step hidden" id="step2">
                    <div class="addresses-list" id="addressesList">
                        <!-- Les adresses seront chargées dynamiquement via JS -->
                    </div>
                </div>
                
                <!-- Étape 3: Saisie des détails -->
                <div class="modal-step hidden" id="step3">
                    <form id="addCoffeeForm">

                    
                    <div class="form-group">
                        <label for="delivery_date" class="form-label">{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['coffee']['delivery_date'] ?? 'Date de livraison' }}</label>
                        <input type="date" class="form-control" id="delivery_date" name="delivery_date" value="{{ date('Y-m-d') }}" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="quantity" class="form-label">{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['coffee']['quantity'] ?? 'Quantité (kg)' }}</label>
                        <input type="number" class="form-control" id="quantity" name="quantity" step="0.1" min="0.1" required>
                    </div>
                    
                    <!-- Jauge de quota café -->
                    <div class="coffee-quota-gauge js-hidden" id="coffeeQuotaGauge">
                        <div class="quota-header">
                            <h6 class="quota-title">{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['coffee']['quota_gauge_title'] ?? 'Quota mensuel' }}</h6>
                            <div class="quota-period" id="quotaPeriod"></div>
                        </div>
                        
                        <div class="quota-progress-container">
                            <div class="progress quota-progress-bar">
                                <div class="progress-bar" id="quotaProgressBar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <div class="quota-info">
                                <div class="quota-current">
                                    <span class="quota-value" id="quotaDelivered">0</span> {{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['coffee']['quota_kg_unit'] ?? 'kg' }} {{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['coffee']['quota_delivered'] ?? 'réassortis' }}
                                </div>
                                <div class="quota-total">
                                    / <span class="quota-value" id="quotaTotal">0</span> {{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['coffee']['quota_kg_unit'] ?? 'kg' }} {{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['coffee']['quota_total'] ?? 'quota' }}
                                </div>
                                <div class="quota-percentage">
                                    (<span id="quotaPercentage">0%</span>)
                                </div>
                            </div>
                        </div>
                        
                        <!-- Section de recommandation intelligente -->
                        <div class="quota-recommendation js-hidden" id="quotaRecommendation">
                            <div class="recommendation-header">
                                <i class="fas fa-lightbulb recommendation-icon"></i>
                                <span class="recommendation-title">{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['coffee']['recommendation_title'] ?? 'Recommandation' }}</span>
                            </div>
                            <div class="recommendation-content">
                                <div class="recommendation-message" id="recommendationMessage">
                                    {{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['coffee']['recommendation_loading'] ?? 'Calcul en cours...' }}
                                </div>
                            </div>
                        </div>
                        
                        <!-- Section conseil prochain réassort -->
                        <div class="next-refill-advice js-hidden" id="nextRefillAdvice">
                            <div class="next-refill-header">
                                <i class="fas fa-calendar-alt next-refill-icon"></i>
                                <span class="next-refill-title">{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['coffee']['next_refill_title'] ?? 'Prochain réassort' }}</span>
                            </div>
                            <div class="next-refill-content">
                                <div class="next-refill-message" id="nextRefillMessage">
                                    <!-- Message dynamique -->
                                </div>
                            </div>
                        </div>
                        
                        <div class="quota-loading js-hidden" id="quotaLoading">
                            <div class="loading-container">
                                <div class="loading-spinner"></div>
                                <span class="loading-text">{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['coffee']['quota_loading'] ?? 'Chargement du quota...' }}</span>
                            </div>
                        </div>
                        
                        <div class="quota-error hidden" id="quotaError">
                            <div class="error-alert">
                                <i class="fas fa-exclamation-triangle"></i>
                                <span>{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['coffee']['quota_error'] ?? 'Erreur lors du chargement du quota' }}</span>
                            </div>
                        </div>
                    </div>
                    

                    <!-- Champs cachés pour les IDs -->
                    <input type="hidden" id="selected_client_id" name="client_id">
                    <input type="hidden" id="selected_address_id" name="address_id">
                    </form>
                </div>
        </div>
        
        <!-- Footer -->
        <div class="coffee-modal-footer" id="modalFooter">
            <!-- Bouton annuler (step 1 uniquement) -->
            <button type="button" class="delete-btn-cancel" id="cancelBtn" data-modal-close>
                <span>{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['coffee']['cancel'] ?? 'Annuler' }}</span>
            </button>
            
            <!-- Bouton retour vers clients (step 2) -->
            <button type="button" class="delete-btn-cancel hidden" id="backToClientBtn">
                <span>{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['coffee']['back'] ?? 'Retour' }}</span>
            </button>
            
            <!-- Bouton retour vers adresses (step 3) -->
            <button type="button" class="delete-btn-cancel hidden" id="backToAddressBtn">
                <span>{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['coffee']['back'] ?? 'Retour' }}</span>
            </button>
            
            <!-- Bouton continuer vers adresses (step 1) -->
            <button type="button" class="delete-btn-confirm" id="continueToAddressBtn" disabled>
                <span>{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['coffee']['continue'] ?? 'Continuer' }}</span>
            </button>
            
            <!-- Bouton continuer vers détails (step 2) -->
            <button type="button" class="delete-btn-confirm hidden" id="continueToDetailsBtn" disabled>
                <span>{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['coffee']['continue'] ?? 'Continuer' }}</span>
            </button>
            
            <!-- Bouton valider le réassort (step 3) -->
            <button type="submit" form="addCoffeeForm" class="delete-btn-confirm hidden" id="submitCoffeeBtn">
                <span>{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['coffee']['validate'] ?? 'Valider le réassort' }}</span>
            </button>
        </div>
        
    </div>
</div>

<!-- Templates pour les cards clients et adresses -->
<div class="d-none">
    <!-- Template client card -->
    <div class="client-card-template">
        <div class="client-card" data-client-id="" data-card-unique="">
            <div class="client-logo">
                <img src="" alt="Logo client" class="client-logo-img js-logo-hidden">
                <i class="fas fa-building client-logo-icon js-logo-visible"></i>
            </div>
            <div class="client-info">
                <h6 class="client-name"></h6>
                <div class="client-quota-section" data-quota-section>
                    <div class="progress quota-progress-bar">
                        <div class="progress-bar" role="progressbar"></div>
                    </div>
                    <div class="quota-info">
                        <span class="quota-delivered" data-quota-delivered="">0</span> кг дост./<span class="quota-total" data-quota-total="">0</span> кг квота (<span class="quota-percentage" data-quota-percentage="">0</span>%)
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Template pour les cards d'adresse -->
    <div class="address-card-template">
        <div class="address-card" data-address-id="">
            <div class="address-info">
                <div class="address-main">
                    <i class="fas fa-map-marker-alt address-icon"></i>
                    <span class="address-title"></span>
                </div>
                <div class="address-details">
                    <div class="address-floor">
                        <i class="fas fa-building address-detail-icon"></i>
                        <span class="floor-text"></span>
                    </div>
                    <div class="address-side">
                        <i class="fas fa-compass address-detail-icon"></i>
                        <span class="side-text"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Template pour nouvelle livraison -->
    <div class="delivery-template">
        <div class="history-item" data-delivery-id="">
            <!-- Bouton supprimer -->
            <button type="button" class="delete-btn" onclick="deleteCoffeeDelivery()" title="{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['coffee']['delete_delivery'] ?? 'Supprimer cette livraison' }}">
                <i class="fas fa-trash"></i>
            </button>
            
            <!-- 1ère ligne : 2 colonnes (Date verticale | Logo + Nom du client) -->
            <div class="history-line-1">
                <div class="history-date-column">
                    <div class="history-date">
                        <div class="date-day"></div>
                        <div class="date-month" data-translate="months_short."></div>
                        <div class="date-year"></div>
                    </div>
                    <div class="history-line-2">
                        <div class="history-time-column">
                            <div class="history-time"></div>
                        </div>
                    </div>
                </div>
                
                <div class="client-address-column">
                    <div class="history-client-column">
                        <div class="client-logo-container">
                            <img alt="" class="history-client-logo js-logo-hidden">
                            <div class="history-client-logo-placeholder js-placeholder-visible">
                                <i class="fas fa-building"></i>
                            </div>
                        </div>
                        <div class="history-client-name"></div>
                    </div>
                    <div class="history-address-column">
                        <div class="history-address"></div>
                    </div>
                                <!-- 3ème ligne : Nombre de kg apporté -->
            <div class="history-line-3">
                <div><span class="history-quantity"></span> <span data-translate="coffee.kg_delivered">{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['coffee']['kg_delivered'] ?? 'kg apporté' }}</span></div>
            </div>
                </div>
            </div>
            

        </div>
    </div>
    
    <!-- Template d'erreur -->
    <div class="error-template">
        <div class="error-container">
            <i class="fas fa-exclamation-triangle error-icon"></i>
            <p class="error-message">Une erreur est survenue</p>
        </div>
    </div>
    
    
</div>

<!-- Modal de confirmation de suppression -->
<div class="coffee-modal-overlay" id="deleteConfirmModal">
    <div class="coffee-modal-backdrop" data-modal-close></div>
    <div class="coffee-modal-wrapper">
        <div class="coffee-modal-form coffee-modal-form-compact">
            <div class="coffee-modal-content">
                <div class="coffee-modal-header">
                    <h3 class="coffee-modal-title">
                        <i class="fas fa-exclamation-triangle modal-icon-warning"></i>
                        {{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['coffee']['confirm_delete_title'] ?? 'Confirmer la suppression' }}
                    </h3>
                    <button type="button" class="modal-close" data-modal-close aria-label="Close">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="coffee-modal-body">
                    <p class="modal-message-text">{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['coffee']['confirm_delete_message'] ?? 'Êtes-vous sûr de vouloir supprimer cette livraison de café ?' }}</p>
                    <div class="modal-message modal-message-warning">
                        <i class="fas fa-info-circle"></i>
                        <span>{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['coffee']['delete_warning'] ?? 'Cette action est irréversible.' }}</span>
                    </div>
                </div>
                <div class="coffee-modal-footer">
                    <button type="button" class="delete-btn-cancel" data-modal-close>
                        <span>{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['coffee']['cancel'] ?? 'Annuler' }}</span>
                    </button>
                    <button type="button" class="delete-btn-confirm" id="confirmDeleteBtn">
                        <span>{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['coffee']['delete'] ?? 'Supprimer' }}</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Toast de notification -->
<div class="toast-container">
    <div id="coffeeToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
            <i class="fas fa-coffee toast-icon"></i>
            <strong class="toast-title">{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['coffee']['notification'] ?? 'Réassort Café' }}</strong>
            <button type="button" class="toast-close" aria-label="Close"></button>
        </div>
        <div class="toast-body" id="toastMessage">
            <!-- Message dynamique -->
        </div>
    </div>
</div>
@endpush