@section('title', ($pageTitle ?? ''))

<x-app-layout :assets="$assets ?? []">
<div class="row">
   <div class="col-lg-12">
      <div class="card rounded">
         <div class="card-body">
            <div class="row">
               <div class="col-sm-12 d-flex justify-content-between align-items-center">
                  <div>
                      <h4 class="mb-2">Facture #{{ $order->number }}</h4>
                      <h5 class="mb-3">Client : {{ $order->customer->name ?? 'Client passager' }} </h5>
                      <p>Date de création : {{ $order->created_at->format('d/m/Y') }}</p>
                  </div>
                  <div class="text-end">
                      <span class="badge bg-{{ ($order->payment_status ?? \App\Enums\PaymentStatus::UNPAID)->color() }} fs-5">
                          {{ ($order->payment_status ?? \App\Enums\PaymentStatus::UNPAID)->label() }}
                      </span>
                  </div>
               </div>
            </div>
            <div class="row">
               <div class="col-sm-12 mt-4">
                  <div class="table-responsive-sm">
                     <table class="table">
                        <thead>
                           <tr>
                              @if($order->type === \App\Enums\OrderType::INVOICE)
                                 <th scope="col">Source</th>
                              @endif
                              <th scope="col">Désignation</th>
                              <th class="text-center" scope="col">Quantité</th>
                              <th class="text-center" scope="col">Prix Unitaire</th>
                              <th class="text-center" scope="col">Total Brut HT</th>
                              <th class="text-center" scope="col">Remise</th>
                              <th class="text-center" scope="col">Total Net HT</th>
                           </tr>
                        </thead>
                        <tbody>
                           @php
                               $groupedItems = $order->items->groupBy(function($item) use ($order) {
                                   if ($item->source) {
                                       return 'Bon de Livraison # ' . $item->source->number;
                                   } 
                                   
                                   return $order->type === \App\Enums\OrderType::DELIVERY_NOTE ? 'Articles' : 'Articles (Direct)';
                               });
                           @endphp

                           @foreach($groupedItems as $groupName => $items)
                               @if($groupName !== 'Articles' && $groupName !== 'Articles (Direct)')
                                   <tr class="bg-light">
                                       <td colspan="{{ $order->type === \App\Enums\OrderType::INVOICE ? 7 : 6 }}"><strong>{{ $groupName }}</strong></td>
                                   </tr>
                               @endif

                               @foreach($items as $item)
                               <tr>
                                  @if($order->type === \App\Enums\OrderType::INVOICE)
                                      <td>
                                          @if($item->source)
                                              <span class="badge bg-info">{{ $item->source->number }}</span>
                                          @else
                                              -
                                          @endif
                                      </td>
                                  @endif
                                  <td>
                                     <h6 class="mb-0">{{ $item->product->designation ?? 'Produit Inconnu' }}</h6>
                                  </td>
                                  <td class="text-center">{{ $item->quantity }}</td>
                                  <td class="text-center">{{ number_format($item->unit_price, 3) }} TND</td>
                                  <td class="text-center">{{ number_format($item->total_price_ht_nd ?? ($item->unit_price * $item->quantity), 3) }} TND</td>
                                  <td class="text-center text-danger">{{ number_format($item->total_discount, 3) }} TND</td>
                                  <td class="text-center"><strong>{{ number_format($item->total, 3) }} TND</strong></td>
                               </tr>
                               @endforeach
                           @endforeach
                        </tbody>
                     </table>
                  </div>
               </div>
            </div>

            <div class="row mt-4">
               <div class="col-md-6">
                   <div class="card shadow-sm border-0 bg-light">
                       <div class="card-body">
                           <h5 class="card-title mb-3">Résumé du Paiement</h5>
                           <div class="d-flex justify-content-between mb-2">
                               <span>Total TTC:</span>
                               <strong>{{ number_format($order->total_price, 3) }} TND</strong>
                           </div>
                           <div class="d-flex justify-content-between mb-2 text-success">
                               <span>Montant Payé:</span>
                               <strong>{{ number_format($order->paid_amount, 3) }} TND</strong>
                           </div>
                           <hr>
                           <div class="d-flex justify-content-between text-danger">
                               <span class="h6">Reste à Payer:</span>
                               <strong class="h6">{{ number_format($order->remaining_amount, 3) }} TND</strong>
                           </div>
                           @if($order->remaining_amount > 0)
                           <div class="mt-3 text-center">
                               <button type="button" class="btn btn-outline-primary btn-sm" data-bs-toggle="modal" data-bs-target="#addPaymentModal">
                                   Enregistrer un paiement
                               </button>
                           </div>
                           @endif
                       </div>
                   </div>
               </div>
               <div class="col-md-5 col-lg-4 offset-md-1 offset-lg-2">
                   <div class="card shadow-sm border-0">
                       <div class="card-body p-0">
                         <table class="table table-borderless mb-0">
                            <tbody>
                               <tr>
                                  <td class="ps-4">Total HT</td>
                                  <td class="text-end pe-4">{{ number_format($order->total_price_ht, 3) }} TND</td>
                               </tr>
                               <tr>
                                  <td class="ps-4">TVA</td>
                                  <td class="text-end pe-4">{{ number_format($order->vat, 3) }} TND</td>
                               </tr>
                               <tr>
                                  <td class="ps-4">Timbre Fiscal</td>
                                  <td class="text-end pe-4">{{ number_format($order->revenue_stamp, 3) }} TND</td>
                               </tr>
                               <tr class="border-top">
                                  <td class="ps-4 py-3"><strong>Net à Payer (TTC)</strong></td>
                                  <td class="text-end pe-4 py-3 text-primary"><h5>{{ number_format($order->total_price, 3) }} TND</h5></td>
                               </tr>
                            </tbody>
                         </table>
                       </div>
                   </div>
               </div>
            </div>

            <!-- Historique des Paiements -->
            <div class="row mt-5">
               <div class="col-sm-12">
                   <h5 class="mb-3">Historique des paiements</h5>
                   <div class="table-responsive">
                       <table class="table table-striped table-bordered text-center">
                           <thead class="bg-primary text-white">
                                <tr>
                                    <th>Date</th>
                                    <th>Mode</th>
                                    <th>Réf/Date Chèque</th>
                                    <th>Montant</th>
                                    <th>Note</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($order->payments as $payment)
                                <tr>
                                    <td>{{ $payment->paid_at->format('d/m/Y') }}</td>
                                    <td><span class="badge bg-info">{{ $payment->method?->label() ?? 'N/A' }}</span></td>
                                    <td>
                                        @if($payment->reference_number)
                                            N°: {{ $payment->reference_number }} <br>
                                            Échéance: {{ $payment->reference_date?->format('d/m/Y') ?? '-' }}
                                        @else
                                            -
                                        @endif
                                    </td>
                                    <td><strong>{{ number_format($payment->amount, 3) }} TND</strong></td>
                                    <td>{{ $payment->note ?? '-' }}</td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="5">Aucun paiement enregistré pour le moment.</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
             </div>

             <div class="row mt-4 mb-5">
                <div class="col-sm-12">
                     <div class="d-flex justify-content-center gap-2">
                         <a href="{{ route('invoices.print', $order) }}" target="_blank" class="btn btn-primary">Imprimer</a>
                         <a href="{{ route('invoices.download_pdf', $order) }}" id="download-pdf-btn" class="btn btn-success">Télécharger PDF</a>
                     </div>
                </div>
             </div>
          </div>
       </div>
    </div>
</div>

<!-- Modal Ajout Paiement -->
<div class="modal fade" id="addPaymentModal" tabindex="-1" aria-labelledby="addPaymentModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <form action="{{ route('invoices.add_payment', $order) }}" method="POST">
            @csrf
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addPaymentModalLabel">Enregistrer un paiement</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="amount" class="form-label">Montant (TND)</label>
                        <input type="number" step="0.001" name="amount" id="amount" class="form-control" value="{{ $order->remaining_amount }}" max="{{ $order->remaining_amount }}" required>
                    </div>

                    <div class="mb-3">
                        <label for="method_select" class="form-label">Mode de paiement</label>
                        <select name="method" id="method_select" class="form-control" required>
                            @foreach(\App\Enums\PaymentMethod::labels() as $value => $label)
                                <option value="{{ $value }}" {{ $value === \App\Enums\PaymentMethod::CASH->value ? 'selected' : '' }}>
                                    {{ $label }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div id="reference_fields" style="display: none;">
                        <div class="mb-3">
                            <label for="reference_number" class="form-label">Numéro (Chèque/Traite)</label>
                            <input type="text" name="reference_number" id="reference_number" class="form-control">
                        </div>
                        <div class="mb-3">
                            <label for="reference_date" class="form-label">Date d'échéance</label>
                            <input type="date" name="reference_date" id="reference_date" class="form-control">
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="paid_at" class="form-label">Date du paiement</label>
                        <input type="date" name="paid_at" id="paid_at" class="form-control" value="{{ date('Y-m-d') }}" required>
                    </div>
                    <div class="mb-3">
                        <label for="note" class="form-label">Note (facultatif)</label>
                        <textarea name="note" id="note" class="form-control" rows="2"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                    <button type="submit" class="btn btn-primary">Enregistrer</button>
                </div>
            </div>
        </form>
    </div>
</div>
@push('scripts')
<script>
    $(document).ready(function() {
        // Precise loader control using Fetch API
        $('#download-pdf-btn').on('click', function(e) {
            e.preventDefault();
            const url = $(this).attr('href');
            
            $('#download-loader').css('display', 'flex');
            
            fetch(url)
                .then(response => {
                    if (!response.ok) throw new Error('Download failed');
                    
                    // Try to get filename from Content-Disposition header
                    let filename = "Document.pdf";
                    const disposition = response.headers.get('Content-Disposition');
                    if (disposition && disposition.indexOf('attachment') !== -1) {
                        const filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
                        const matches = filenameRegex.exec(disposition);
                        if (matches != null && matches[1]) { 
                            filename = matches[1].replace(/['"]/g, '');
                        }
                    }
                    
                    return response.blob().then(blob => ({ blob, filename }));
                })
                .then(({ blob, filename }) => {
                    const blobUrl = window.URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.style.display = 'none';
                    a.href = blobUrl;
                    a.download = filename;
                    document.body.appendChild(a);
                    a.click();
                    window.URL.revokeObjectURL(blobUrl);
                    
                    // INSTANT Hide
                    $('#download-loader').fadeOut(300);
                })
                .catch(error => {
                    console.error('Error:', error);
                    $('#download-loader').fadeOut(300);
                    alert("Une erreur est survenue lors de l'téléchargement.");
                });
        });

        // Payment Method Toggle
        $('#method_select').on('change', function() {
            const method = $(this).val();
            if (method === 'cheque' || method === 'draft') {
                $('#reference_fields').slideDown();
                $('#reference_number, #reference_date').prop('required', true);
            } else {
                $('#reference_fields').slideUp();
                $('#reference_number, #reference_date').prop('required', false);
            }
        });
    });
</script>
@endpush
</x-app-layout>