@extends('layouts.layout-horizontal')

@section('title', 'Purchase Bills')

@section('css')
@include('partials._index-table-styles')
<style>
    /* Page tint — purchases (light amber) */
    body, .pc-container, .pc-content { background: #ffe4bf !important; }
</style>
@endsection

@section('content')
    @php $showTaxColumns = ($companyMode ?? 'bill') !== 'cash'; @endphp

    <div class="card">
        {{-- Compact header --}}
        <div class="card-header" style="padding:10px 16px;background:#f8f9fb;border-bottom:1px solid #e9ecef;">
            <div class="d-flex align-items-center justify-content-between">
                <span style="font-weight:700;font-size:.95rem;color:#1e293b">Purchase Bills</span>
                <div class="d-flex align-items-center gap-2">
                    <span class="badge bg-light text-dark border" style="font-size:.75rem">{{ $purchases->count() }} bills</span>
                    <a href="{{ route('purchase.create') }}" class="btn btn-primary btn-sm" style="font-size:.8rem;padding:5px 14px">
                        <i class="ph-duotone ph-plus me-1"></i> New Purchase
                    </a>
                    @if(($companyMode ?? 'bill') === 'cash')
                        <a href="{{ route('purchase.create', ['overseas' => 1]) }}" class="btn btn-outline-dark btn-sm" style="font-size:.8rem;padding:5px 14px">
                            <i class="ph-duotone ph-globe-hemisphere-east me-1"></i> Overseas Purchase
                        </a>
                    @endif
                </div>
            </div>
        </div>

        <div class="card-body p-0">
            <div data-st data-st-export="excel" data-st-filename="purchases-{{ now()->format('Y-m-d') }}">
            <div class="idx-scroll">
                <div class="table-responsive">
                <table class="table table-hover table-sm align-middle mb-0">
                    <thead>
                        <tr>
                            <th class="export-only" style="display:none">Date</th>
                            <th>Party</th>
                            <th>Bill No</th>
                            <th>Mode</th>
                            <th class="text-end">Amount</th>
                            @if($showTaxColumns)
                                <th class="text-end">Tax</th>
                            @endif
                            <th class="text-end">Grand Total</th>
                            <th width="140" class="text-center no-sort no-export">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @php
                            $avatarColors = ['#6366f1','#ec4899','#f59e0b','#10b981','#3b82f6','#8b5cf6','#ef4444','#14b8a6','#f97316','#06b6d4'];
                            $grouped = $purchases->groupBy(fn($s) => $s->invoice_date->format('Y-m-d'));
                        @endphp

                        @forelse ($grouped as $date => $datePurchases)
                            {{-- Date group header --}}
                            @php
                                $dateObj = \Carbon\Carbon::parse($date);
                                $dateLabel = $dateObj->isToday() ? 'Today' : ($dateObj->isYesterday() ? 'Yesterday' : $dateObj->format('d M Y'));
                                $dayTotal = $datePurchases->sum('grand_total');
                            @endphp
                            <tr class="date-group-row">
                                <td colspan="{{ $showTaxColumns ? 7 : 6 }}">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <span>{{ $dateLabel }} <span style="font-weight:400;opacity:.6">({{ $datePurchases->count() }})</span></span>
                                        <span class="num num-total">₹{{ indian_number($dayTotal, 2) }}</span>
                                    </div>
                                </td>
                            </tr>

                            @foreach ($datePurchases as $purchase)
                                @php $initial = strtoupper(substr($purchase->party?->name ?? '?', 0, 1)); $colorIdx = ($purchase->party_id ?? 0) % count($avatarColors); @endphp
                                <tr>
                                    <td class="export-only" style="display:none" data-export-value="{{ $purchase->invoice_date->format('Y-m-d') }}">{{ $purchase->invoice_date->format('d-M-Y') }}</td>
                                    <td data-export-value="{{ $purchase->party?->name ?? '-' }}">
                                        <div class="d-flex align-items-center gap-2">
                                            <span class="party-avatar" style="background:{{ $avatarColors[$colorIdx] }}">{{ $initial }}</span>
                                            <span>{{ $purchase->party?->name ?? '—' }}</span>
                                        </div>
                                    </td>
                                    <td>
                                        <a href="{{ route('purchase.edit', $purchase->id) }}" class="fw-bold text-primary text-decoration-none">{{ $purchase->bill_no ?: '—' }}</a>
                                    </td>
                                    <td>
                                        <span class="badge {{ $purchase->mode == 'cash' ? 'bg-dark' : 'bg-secondary' }}">
                                            {{ ucfirst($purchase->mode) }}
                                        </span>
                                    </td>
                                    <td class="text-end num num-amt">{{ indian_number($purchase->amount_total, 2) }}</td>
                                    @if($showTaxColumns)
                                        <td class="text-end num num-tax">{{ indian_number($purchase->tax_total, 2) }}</td>
                                    @endif
                                    <td class="text-end num num-total" data-export-value="{{ number_format((float) $purchase->grand_total, 2, '.', '') }}">₹{{ indian_number($purchase->grand_total, 2) }}</td>
                                    <td class="text-center">
                                        <div class="tbl-actions">
                                            <a href="{{ route('purchase.show', $purchase->id) }}" class="tbl-act" data-bs-toggle="tooltip" title="View"><i class="ph-duotone ph-eye"></i></a>
                                            <button type="button" class="tbl-act invoice-preview-btn" data-preview-url="{{ route('purchase.preview', $purchase->id) }}" data-preview-title="Purchase Bill {{ $purchase->bill_no }}" data-bs-toggle="tooltip" title="Preview"><i class="ph-duotone ph-file-magnifying-glass"></i></button>
                                            @if($purchase->mode === 'cash' && ($purchase->items_count ?? 0) > 0)
                                                <a href="{{ route('purchase.show', $purchase->id) }}#transfer" class="tbl-act" data-bs-toggle="tooltip" title="Transfer to Bill"><i class="ph-duotone ph-arrow-square-right"></i></a>
                                            @endif
                                            <button type="button" class="tbl-act add-payment-btn"
                                                data-party-id="{{ $purchase->party_id }}"
                                                data-party-name="{{ $purchase->party?->name }}"
                                                data-bill-no="{{ $purchase->bill_no }}"
                                                data-amount="{{ number_format((float) $purchase->grand_total, 2, '.', '') }}"
                                                data-bs-toggle="tooltip" title="Add Payment"><i class="ph-duotone ph-currency-inr"></i></button>
                                            @if(auth()->user()->role === 'admin')
                                                <div class="dropdown">
                                                    <button class="tbl-act tbl-act-more" type="button" data-bs-toggle="dropdown"><i class="ph-duotone ph-dots-three-vertical"></i></button>
                                                    <ul class="dropdown-menu dropdown-menu-end">
                                                        @if(isset($lastActivities[$purchase->id]))
                                                            @php $activity = (object) $lastActivities[$purchase->id]; @endphp
                                                            <li><span class="dropdown-item" data-bs-toggle="tooltip" data-bs-html="true"
                                                                title="<strong>{{ ucfirst($activity->action) }}</strong> by {{ $activity->user['name'] ?? 'Unknown' }}<br>{{ \Carbon\Carbon::parse($activity->created_at)->format('d-M-Y h:i A') }}">
                                                                <i class="ph-duotone ph-clock-counter-clockwise me-2"></i>Activity</span></li>
                                                        @else
                                                            <li><span class="dropdown-item text-muted" data-bs-toggle="tooltip" title="No activity logged">
                                                                <i class="ph-duotone ph-clock-counter-clockwise me-2"></i>Activity</span></li>
                                                        @endif
                                                        <li><hr class="dropdown-divider"></li>
                                                        <li>
                                                            <form action="{{ route('purchase.destroy', $purchase->id) }}" method="POST" onsubmit="return confirm('Delete purchase bill #{{ $purchase->bill_no }}? This cannot be undone.')">
                                                                @csrf
                                                                @method('DELETE')
                                                                <button type="submit" class="dropdown-item text-danger">
                                                                    <i class="ph-duotone ph-trash me-2"></i>Delete
                                                                </button>
                                                            </form>
                                                        </li>
                                                    </ul>
                                                </div>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        @empty
                            <tr>
                                <td colspan="{{ $showTaxColumns ? 7 : 6 }}">
                                    @include('partials._empty-state', [
                                        'icon' => 'ph-note',
                                        'title' => 'No purchase bills yet',
                                        'subtitle' => 'Create your first purchase bill.',
                                        'action' => route('purchase.create'),
                                        'actionLabel' => 'Create Purchase',
                                    ])
                                </td>
                            </tr>
                        @endforelse
                    </tbody>

                    @if ($purchases->count())
                        <tfoot class="sticky-totals">
                            <tr>
                                <th colspan="3" class="text-end" style="color:#94a3b8">
                                    {{ $purchases->count() }} bills
                                </th>
                                <th class="text-end num" style="color:#94a3b8;font-weight:500">{{ indian_number($purchases->sum('amount_total'), 2) }}</th>
                                @if($showTaxColumns)
                                    <th class="text-end num" style="color:#64748b;font-weight:400">{{ indian_number($purchases->sum('tax_total'), 2) }}</th>
                                @endif
                                <th class="text-end num" style="color:#94a3b8;font-weight:500" data-export-value="{{ number_format((float) $purchases->sum('grand_total'), 2, '.', '') }}">₹{{ indian_number($purchases->sum('grand_total'), 2) }}</th>
                                <th></th>
                            </tr>
                        </tfoot>
                    @endif
                </table>
                </div>
            </div>
            </div>
        </div>
    </div>


{{-- Quick Add Payment Modal --}}
<div class="modal fade" id="addPaymentModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST" action="{{ route('purchase-payments.store') }}" id="addPaymentForm">
                @csrf
                <input type="hidden" name="from_purchase_index" value="1">
                <input type="hidden" name="party_id" id="pp_party_id">

                <div class="modal-header py-2">
                    <h6 class="modal-title mb-0">
                        Payment — <span id="pp_modal_party" class="text-primary"></span>
                        <small class="text-muted ms-2">Bill <span id="pp_modal_bill"></span></small>
                    </h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-6">
                            <label class="form-label small mb-1">Date</label>
                            <input type="date" name="paid_at" id="pp_paid_at" class="form-control form-control-sm" value="{{ now()->toDateString() }}" required>
                        </div>
                        <div class="col-6">
                            <label class="form-label small mb-1">Amount</label>
                            <div class="input-group input-group-sm">
                                <span class="input-group-text">₹</span>
                                <input type="number" step="0.01" min="0.01" name="amount" id="pp_amount" class="form-control" required>
                            </div>
                        </div>
                        <div class="col-12">
                            <label class="form-label small mb-1">Pay via (Bank/Cash)</label>
                            <select name="bank_account_id" class="form-select form-select-sm" required>
                                <option value="">-- Select account --</option>
                                @foreach($banks as $b)
                                    <option value="{{ $b->id }}" @selected($defaultBankId == $b->id)>
                                        {{ $b->name }} @if($b->mode === 'cash')(Cash)@else(Bank)@endif
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-6">
                            <label class="form-label small mb-1">Reference</label>
                            <input type="text" name="reference" id="pp_reference" class="form-control form-control-sm" placeholder="Cheque / UTR">
                        </div>
                        <div class="col-6">
                            <label class="form-label small mb-1">Remarks</label>
                            <input type="text" name="remarks" id="pp_remarks" class="form-control form-control-sm" placeholder="Notes">
                        </div>
                        <div class="col-12">
                            <div class="form-check">
                                <input type="checkbox" name="print_cheque" value="1" class="form-check-input" id="pp_print_cheque">
                                <label class="form-check-label small" for="pp_print_cheque">
                                    <i class="ph-duotone ph-check-square me-1"></i> Print Cheque after saving
                                </label>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer py-2">
                    <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-sm btn-primary">
                        <i class="ph-duotone ph-floppy-disk me-1"></i> Save Payment
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        tooltipTriggerList.forEach(function(tooltipTriggerEl) {
            new bootstrap.Tooltip(tooltipTriggerEl);
        });

        // Quick Add Payment modal
        const modalEl = document.getElementById('addPaymentModal');
        if (!modalEl) return;
        const modal = new bootstrap.Modal(modalEl);

        document.addEventListener('click', function(e) {
            const btn = e.target.closest('.add-payment-btn');
            if (!btn) return;

            document.getElementById('pp_party_id').value   = btn.dataset.partyId || '';
            document.getElementById('pp_modal_party').textContent = btn.dataset.partyName || '';
            document.getElementById('pp_modal_bill').textContent  = btn.dataset.billNo || '';
            document.getElementById('pp_amount').value     = btn.dataset.amount || '';
            document.getElementById('pp_reference').value  = btn.dataset.billNo || '';
            document.getElementById('pp_remarks').value    = 'Against Bill ' + (btn.dataset.billNo || '');
            modal.show();
        });
    });
</script>
<div class="modal fade" id="invoicePreviewModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header py-2">
                <h6 class="modal-title" id="invoicePreviewTitle">Purchase Preview</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-0" style="height:78vh">
                <iframe id="invoicePreviewFrame" title="Purchase preview" style="width:100%;height:100%;border:0;background:#f8fafc"></iframe>
            </div>
        </div>
    </div>
</div>
<script>
(function(){
    const modalEl = document.getElementById('invoicePreviewModal');
    const frame = document.getElementById('invoicePreviewFrame');
    if (!modalEl || !frame) return;
    const title = document.getElementById('invoicePreviewTitle');
    const modal = new bootstrap.Modal(modalEl);
    document.addEventListener('click', function(e) {
        const btn = e.target.closest('.invoice-preview-btn');
        if (!btn) return;
        frame.src = btn.dataset.previewUrl;
        title.textContent = btn.dataset.previewTitle || 'Purchase Preview';
        modal.show();
    });
    modalEl.addEventListener('hidden.bs.modal', function() { frame.src = 'about:blank'; });
})();
</script>
@endpush