@extends('layouts.app')
@section('title', 'Supplier: ' . $supplier->name)

@section('content')
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="page-title"><i class="bi bi-truck me-2"></i>{{ $supplier->name }}</h1>
        <div class="d-flex gap-2">
            <a href="{{ route('inventory.suppliers.ledger', $supplier) }}" class="btn btn-outline-warning">
                <i class="bi bi-journal-text me-1"></i> Ledger
            </a>
            <a href="{{ route('inventory.suppliers.edit', $supplier) }}" class="btn btn-outline-primary">
                <i class="bi bi-pencil me-1"></i> Edit
            </a>
            <a href="{{ route('inventory.suppliers.index') }}" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left me-1"></i> Back
            </a>
        </div>
    </div>

    @if(session('success'))
        <div class="alert alert-success fade-in">
            <i class="bi bi-check-circle me-1"></i> {{ session('success') }}
        </div>
    @endif
    @if($errors->any())
        <div class="alert alert-danger fade-in">
            <i class="bi bi-exclamation-triangle me-1"></i>
            @foreach($errors->all() as $error)
                <div>{{ $error }}</div>
            @endforeach
        </div>
    @endif

    <!-- Supplier Info + Financial Summary -->
    <div class="row g-4 mb-4">
        <div class="col-md-6">
            <div class="card h-100">
                <div class="card-header">
                    <h6 class="mb-0">Contact Information</h6>
                </div>
                <div class="card-body">
                    <table class="table table-borderless mb-0">
                        <tr>
                            <th width="130">Name</th>
                            <td><strong>{{ $supplier->name }}</strong></td>
                        </tr>
                        <tr>
                            <th>Company</th>
                            <td>{{ $supplier->company_name ?? '—' }}</td>
                        </tr>
                        <tr>
                            <th>Mobile</th>
                            <td>{{ $supplier->mobile }}</td>
                        </tr>
                        <tr>
                            <th>Email</th>
                            <td>{{ $supplier->email ?? '—' }}</td>
                        </tr>
                        <tr>
                            <th>Address</th>
                            <td>{{ $supplier->address ?? '—' }}</td>
                        </tr>
                        <tr>
                            <th>Status</th>
                            <td>
                                @if($supplier->is_active)
                                    <span class="badge bg-success">Active</span>
                                @else
                                    <span class="badge bg-secondary">Inactive</span>
                                @endif
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card h-100">
                <div class="card-header">
                    <h6 class="mb-0">Financial Summary</h6>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-6">
                            <div class="text-muted small">Total Purchase / Bill</div>
                            <div class="fs-5 fw-bold">৳{{ number_format((float) $supplier->total_purchase, 2) }}</div>
                        </div>
                        <div class="col-6">
                            <div class="text-muted small">Total Paid</div>
                            <div class="fs-5 fw-bold text-success">৳{{ number_format((float) $supplier->total_paid, 2) }}</div>
                        </div>
                        <div class="col-6">
                            <div class="text-muted small">Total Due</div>
                            <div class="fs-5 fw-bold {{ (float) $supplier->total_due > 0 ? 'text-danger' : '' }}">
                                ৳{{ number_format((float) $supplier->total_due, 2) }}
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="text-muted small">Total Purchases</div>
                            <div class="fs-5 fw-bold">{{ $supplier->purchases->count() }}</div>
                        </div>
                    </div>

                    @if((float) $supplier->total_due > 0)
                        <hr>
                        <div class="d-flex align-items-center gap-2">
                            <div class="progress flex-grow-1" style="height: 8px;">
                                @php
                                    $paidPercent = (float) $supplier->total_purchase > 0
                                        ? ((float) $supplier->total_paid / (float) $supplier->total_purchase) * 100
                                        : 0;
                                @endphp
                                <div class="progress-bar bg-success" style="width: {{ min($paidPercent, 100) }}%"></div>
                            </div>
                            <small class="text-muted">{{ number_format($paidPercent, 0) }}% paid</small>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Project-wise Purchase & Due Breakdown -->
    <div class="card mb-4">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h6 class="mb-0"><i class="bi bi-diagram-3 me-2"></i>Project-wise Breakdown</h6>
        </div>
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead>
                    <tr>
                        <th>Project</th>
                        <th class="text-center">Purchases</th>
                        <th class="text-end">Total Bill</th>
                        <th class="text-end">Total Paid</th>
                        <th class="text-end">Due</th>
                        <th class="text-center">Status</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($projectSummary as $ps)
                        <tr>
                            <td>
                                <strong>{{ $ps['project_name'] }}</strong>
                            </td>
                            <td class="text-center">
                                <span class="badge bg-light text-dark">{{ $ps['purchases'] }}</span>
                            </td>
                            <td class="text-end">৳{{ number_format($ps['total_bill'], 2) }}</td>
                            <td class="text-end text-success">৳{{ number_format($ps['total_paid'], 2) }}</td>
                            <td class="text-end {{ $ps['total_due'] > 0 ? 'text-danger fw-bold' : '' }}">
                                ৳{{ number_format($ps['total_due'], 2) }}
                            </td>
                            <td class="text-center">
                                @if($ps['total_due'] <= 0)
                                    <span class="badge bg-success"><i class="bi bi-check-circle"></i> Settled</span>
                                @else
                                    <span class="badge bg-warning text-dark"><i class="bi bi-clock"></i> Due</span>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="text-center text-muted py-3">No project purchases yet.</td>
                        </tr>
                    @endforelse
                </tbody>
                @if(count($projectSummary) > 0)
                    <tfoot class="table-light">
                        <tr class="fw-bold">
                            <td>Total</td>
                            <td class="text-center">{{ array_sum(array_column($projectSummary, 'purchases')) }}</td>
                            <td class="text-end">৳{{ number_format(array_sum(array_column($projectSummary, 'total_bill')), 2) }}</td>
                            <td class="text-end text-success">৳{{ number_format(array_sum(array_column($projectSummary, 'total_paid')), 2) }}</td>
                            <td class="text-end text-danger">৳{{ number_format(array_sum(array_column($projectSummary, 'total_due')), 2) }}</td>
                            <td></td>
                        </tr>
                    </tfoot>
                @endif
            </table>
        </div>
    </div>

    <div class="row g-4 mb-4">
        <!-- Record Payment Form -->
        <div class="col-lg-5">
            <div class="card h-100">
                <div class="card-header">
                    <h6 class="mb-0"><i class="bi bi-cash-stack me-2"></i>Record Payment</h6>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('inventory.suppliers.payment', $supplier) }}" id="paymentForm">
                        @csrf

                        <div class="mb-3">
                            <label for="project_id" class="form-label">Project <span class="text-danger">*</span></label>
                            <select name="project_id" id="project_id" class="form-select" required>
                                <option value="">— Select Project —</option>
                                @foreach($projectSummary as $ps)
                                    @if($ps['project_id'] && $ps['total_due'] > 0)
                                        <option value="{{ $ps['project_id'] }}"
                                                data-due="{{ $ps['total_due'] }}"
                                                {{ old('project_id') == $ps['project_id'] ? 'selected' : '' }}>
                                            {{ $ps['project_name'] }} — Due: ৳{{ number_format($ps['total_due'], 2) }}
                                        </option>
                                    @endif
                                @endforeach
                            </select>
                            <div id="projectDueInfo" class="mt-1" style="display:none;">
                                <small class="text-muted">
                                    Due: <strong id="dueValue" class="text-danger">—</strong>
                                </small>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="amount" class="form-label">Amount (৳) <span class="text-danger">*</span></label>
                            <input type="number" name="amount" id="amount" step="0.01" min="0.01"
                                   class="form-control" placeholder="Enter payment amount"
                                   value="{{ old('amount') }}" required>
                        </div>

                        <div class="mb-3">
                            <label for="payment_method_id" class="form-label">Payment Method</label>
                            <select name="payment_method_id" id="payment_method_id" class="form-select">
                                <option value="">— Select —</option>
                                @foreach($paymentMethods as $pm)
                                    <option value="{{ $pm->id }}" {{ old('payment_method_id') == $pm->id ? 'selected' : '' }}>
                                        {{ $pm->method_name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="mb-3">
                            <label for="payment_date" class="form-label">Date <span class="text-danger">*</span></label>
                            <input type="date" name="payment_date" id="payment_date" class="form-control"
                                   value="{{ old('payment_date', now()->format('Y-m-d')) }}" required>
                        </div>

                        <div class="mb-3">
                            <label for="reference_number" class="form-label">Reference / Cheque No.</label>
                            <input type="text" name="reference_number" id="reference_number" class="form-control"
                                   placeholder="e.g., TXN-12345" value="{{ old('reference_number') }}">
                        </div>

                        <div class="mb-3">
                            <label for="narration" class="form-label">Note</label>
                            <textarea name="narration" id="narration" class="form-control" rows="2"
                                      placeholder="Payment note...">{{ old('narration') }}</textarea>
                        </div>

                        <button type="submit" class="btn btn-primary w-100" id="payBtn">
                            <i class="bi bi-cash-coin me-1"></i> Record Payment
                        </button>
                    </form>
                </div>
            </div>
        </div>

        <!-- Recent Payments -->
        <div class="col-lg-7">
            <div class="card h-100">
                <div class="card-header">
                    <h6 class="mb-0"><i class="bi bi-clock-history me-2"></i>Payment History</h6>
                </div>
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead>
                            <tr>
                                <th>Date</th>
                                <th>Project</th>
                                <th>Method</th>
                                <th>Note</th>
                                <th class="text-end">Amount</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($supplier->purchasePayments->take(20) as $p)
                                <tr class="{{ $p->is_reversal ? 'table-warning' : '' }}">
                                    <td>{{ $p->payment_date->format('d M Y') }}</td>
                                    <td>
                                        @php
                                            $payProject = $p->project
                                                ?? ($p->purchase ? $p->purchase->project : null);
                                        @endphp
                                        {{ $payProject->project_name ?? '—' }}
                                    </td>
                                    <td>
                                        @if($p->is_reversal)
                                            <span class="badge bg-warning text-dark">Reversal</span>
                                        @else
                                            <span class="badge bg-info">
                                                {{ $p->paymentMethod->method_name ?? 'N/A' }}
                                            </span>
                                        @endif
                                    </td>
                                    <td class="small">{{ Str::limit($p->narration, 30) }}</td>
                                    <td class="text-end fw-bold {{ $p->is_reversal ? 'text-danger' : 'text-success' }}">
                                        {{ $p->is_reversal ? '-' : '' }}৳{{ number_format((float) $p->amount, 2) }}
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="text-center text-muted py-3">No payments recorded yet.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Purchases -->
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h6 class="mb-0"><i class="bi bi-receipt me-2"></i>Purchase History</h6>
            <a href="{{ route('inventory.purchases.create') }}?supplier_id={{ $supplier->id }}" class="btn btn-sm btn-primary">
                <i class="bi bi-plus-lg me-1"></i> New Purchase
            </a>
        </div>
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Date</th>
                        <th>Invoice</th>
                        <th>Project</th>
                        <th>Materials</th>
                        <th class="text-end">Total Bill</th>
                        <th class="text-end">Paid</th>
                        <th class="text-end">Due</th>
                        <th>Status</th>
                        <th class="text-center">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($supplier->purchases->take(15) as $purchase)
                        <tr>
                            <td><code>{{ $purchase->id }}</code></td>
                            <td>{{ $purchase->purchase_date->format('d M Y') }}</td>
                            <td>{{ $purchase->invoice_number ?? '—' }}</td>
                            <td>{{ $purchase->project->project_name ?? '—' }}</td>
                            <td class="small">
                                {{ $purchase->items->pluck('material.material_name')->join(', ') }}
                            </td>
                            <td class="text-end">৳{{ number_format((float) $purchase->total_bill, 2) }}</td>
                            <td class="text-end text-success">৳{{ number_format((float) $purchase->paid_amount, 2) }}</td>
                            <td class="text-end {{ (float) $purchase->due_amount > 0 ? 'text-danger fw-bold' : '' }}">
                                ৳{{ number_format((float) $purchase->due_amount, 2) }}
                            </td>
                            <td>
                                @php
                                    $statusColors = ['draft' => 'secondary', 'posted' => 'primary', 'settled' => 'success'];
                                @endphp
                                <span class="badge bg-{{ $statusColors[$purchase->status] ?? 'secondary' }}">
                                    {{ ucfirst($purchase->status) }}
                                </span>
                            </td>
                            <td class="text-center">
                                <a href="{{ route('inventory.purchases.show', $purchase) }}" class="btn btn-sm btn-outline-info">
                                    <i class="bi bi-eye"></i>
                                </a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="10" class="text-center text-muted py-3">No purchases yet.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const projectSelect = document.getElementById('project_id');
    const amountInput = document.getElementById('amount');
    const dueInfo = document.getElementById('projectDueInfo');
    const dueValue = document.getElementById('dueValue');

    projectSelect.addEventListener('change', function () {
        const opt = this.options[this.selectedIndex];
        if (opt && opt.value) {
            const due = parseFloat(opt.dataset.due || 0);
            dueValue.textContent = '৳' + due.toLocaleString('en-BD', { minimumFractionDigits: 2 });
            dueInfo.style.display = 'block';
            amountInput.max = due;
        } else {
            dueInfo.style.display = 'none';
            amountInput.max = '';
        }
    });

    // Trigger on load if old value selected
    if (projectSelect.value) {
        projectSelect.dispatchEvent(new Event('change'));
    }

    // Confirm before submit
    document.getElementById('paymentForm').addEventListener('submit', function (e) {
        const project = projectSelect.options[projectSelect.selectedIndex]?.text;
        const amount = amountInput.value;
        if (!confirm(`Record payment of ৳${amount} for ${project}?`)) {
            e.preventDefault();
        }
    });
});
</script>
@endpush