@extends('layouts.app')

@section('title','Sales')

@section('content')
  <div class="d-flex justify-content-between align-items-center mb-3">
    <h3 class="mb-0">Sales</h3>
    <a href="{{ route('sales.create') }}" class="btn btn-primary">Add Sale</a>
  </div>

  <div class="table-responsive">
    <table class="table table-striped align-middle text-center mb-0">
      <thead class="table-dark">
        <tr>
          <th style="width:110px;">Date</th>
          <th>Customer</th>
          <th style="width:140px;">Phone</th>
          <th class="text-end" style="width:120px;">Total</th>
          <th class="text-end" style="width:120px;">Paid</th>
          <th class="text-end" style="width:120px;">Due</th>
          <th style="width:90px;">Status</th>
          <th style="width:90px;">Cycle</th>
          <th style="width:120px;">Next Due</th>
          <th style="width:220px;">Actions</th>
        </tr>
      </thead>

      <tbody>
        @forelse($sales as $sale)
          {{-- MAIN ROW --}}
          <tr>
            <td>{{ \Carbon\Carbon::parse($sale->date)->format('d-m-Y') }}</td>
            <td class="text-start">
              {{ $sale->customer_name }}
            </td>
            <td>{{ $sale->customer_phone }}</td>

            <td class="text-end">{{ number_format((float)$sale->total, 2) }}</td>
            <td class="text-end">{{ number_format((float)$sale->paid, 2) }}</td>
            <td class="text-end">{{ number_format((float)$sale->due, 2) }}</td>

            <td>
              @if($sale->status === 'paid')
                <span class="badge bg-success">Paid</span>
              @else
                <span class="badge bg-warning text-dark">Due</span>
              @endif
            </td>

            <td>{{ $sale->payment_cycle ?? 'none' }}</td>

            <td>
              {{ $sale->next_due_date ? \Carbon\Carbon::parse($sale->next_due_date)->format('d-m-Y') : '-' }}
            </td>

            <td class="text-nowrap">
              {{-- View Items toggle --}}
              <button type="button"
                      class="btn btn-sm btn-outline-primary btn-toggle-items"
                      data-target="#sale-items-{{ $sale->id }}">
                View Items
              </button>

              <a href="{{ route('sales.edit', $sale->id) }}"
                 class="btn btn-sm btn-outline-secondary">
                Edit
              </a>

              <form action="{{ route('sales.destroy', $sale->id) }}"
                    method="POST"
                    class="d-inline-block"
                    onsubmit="return confirm('Delete this sale?');">
                @csrf
                @method('DELETE')
                <button class="btn btn-sm btn-outline-danger">Delete</button>
              </form>
            </td>
          </tr>

          {{-- DETAILS ROW (HIDDEN) --}}
          <tr id="sale-items-{{ $sale->id }}" class="d-none">
            <td colspan="10" class="p-0">
              <div class="p-3 bg-light border-top">
                <div class="d-flex justify-content-between align-items-center mb-2">
                  <strong>Sold Items (Invoice: {{ $sale->invoice_no ?? ('#'.$sale->id) }})</strong>
                  <button type="button"
                          class="btn btn-sm btn-outline-dark btn-toggle-items"
                          data-target="#sale-items-{{ $sale->id }}">
                    Close
                  </button>
                </div>

                <div class="table-responsive">
                  <table class="table table-sm table-bordered mb-0 align-middle">
                    <thead class="table-light">
                      <tr>
                        <th class="text-start">Product</th>
                        <th class="text-end" style="width:80px;">Qty</th>
                        <th class="text-end" style="width:120px;">Price</th>
                        <th class="text-end" style="width:130px;">Total</th>
                      </tr>
                    </thead>
                    <tbody>
                      @forelse($sale->items as $it)
                        @php
                          $qty   = (float) ($it->qty ?? 0);
                          $price = (float) ($it->price ?? 0);
                          $line  = (float) ($it->line_total ?? ($qty * $price));
                        @endphp
                        <tr>
                          <td class="text-start">{{ optional($it->product)->name ?? 'Deleted product' }}</td>
                          <td class="text-end">{{ rtrim(rtrim(number_format($qty, 2), '0'), '.') }}</td>
                          <td class="text-end">{{ number_format($price, 2) }}</td>
                          <td class="text-end">{{ number_format($line, 2) }}</td>
                        </tr>
                      @empty
                        <tr>
                          <td colspan="4" class="text-center text-muted py-3">
                            No items found for this sale.
                          </td>
                        </tr>
                      @endforelse
                    </tbody>
                  </table>
                </div>

              </div>
            </td>
          </tr>

        @empty
          <tr>
            <td colspan="10" class="text-muted text-center py-3">No sales found.</td>
          </tr>
        @endforelse
      </tbody>
    </table>
  </div>

  <div class="mt-3">
    {{ $sales->links() }}
  </div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
  // toggle show/hide items row
  document.addEventListener('click', function (e) {
    const btn = e.target.closest('.btn-toggle-items');
    if (!btn) return;

    const targetSel = btn.getAttribute('data-target');
    const row = document.querySelector(targetSel);
    if (!row) return;

    // (optional) একসাথে একটাই খুলতে চাইলে এগুলো আনকমেন্ট করো
    // document.querySelectorAll('tr[id^="sale-items-"]').forEach(r => {
    //   if (r !== row) r.classList.add('d-none');
    // });

    row.classList.toggle('d-none');
  });
});
</script>
@endpush