@extends('layouts.main')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h4>Supplier Finance</h4>
    <a href="{{ route('suppliers.index') }}" class="btn btn-secondary">
        <i class="bi bi-arrow-left"></i> Back
    </a>
</div>

<div class="row mb-4">
    <div class="col-md-4">
        <div class="card bg-primary text-white">
            <div class="card-body">
                <h5>Total Ordered</h5>
                <h3>Kes {{ number_format($totalOrdered, 2) }}</h3>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card bg-success text-white">
            <div class="card-body">
                <h5>Total Paid</h5>
                <h3>Kes {{ number_format($totalPaid, 2) }}</h3>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card bg-danger text-white">
            <div class="card-body">
                <h5>Total Balance Due</h5>
                <h3>Kes {{ number_format($totalBalance, 2) }}</h3>
            </div>
        </div>
    </div>
</div>

<div class="card mb-4">
    <div class="card-header">
        <form method="GET" action="{{ route('suppliers.finance') }}" class="row g-3">
            <div class="col-md-2">
                <input type="date" name="date_from" class="form-control" value="{{ request('date_from') }}" placeholder="From Date">
            </div>
            <div class="col-md-2">
                <input type="date" name="date_to" class="form-control" value="{{ request('date_to') }}" placeholder="To Date">
            </div>
            <div class="col-md-3">
                <select name="supplier_id" class="form-select">
                    <option value="">All Suppliers</option>
                    @foreach($allSuppliers as $supplier)
                        <option value="{{ $supplier->id }}" {{ request('supplier_id') == $supplier->id ? 'selected' : '' }}>
                            {{ $supplier->name }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <button type="submit" class="btn btn-primary w-100">Filter</button>
            </div>
            <div class="col-md-2">
                <a href="{{ route('suppliers.finance') }}" class="btn btn-secondary w-100">Reset</a>
            </div>
        </form>
    </div>
    <div class="card-body table-responsive">
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>Supplier</th>
                    <th>Phone</th>
                    <th>Total Ordered</th>
                    <th>Total Paid</th>
                    <th>Balance Due</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($suppliers as $supplier)
                    <tr>
                        <td><strong>{{ $supplier->name }}</strong></td>
                        <td>{{ $supplier->phone ?? '-' }}</td>
                        <td>Kes {{ number_format($supplier->total_ordered, 2) }}</td>
                        <td>Kes {{ number_format($supplier->total_paid, 2) }}</td>
                        <td>
                            <span class="badge {{ $supplier->balance > 0 ? 'bg-danger' : 'bg-success' }}">
                                Kes {{ number_format($supplier->balance, 2) }}
                            </span>
                        </td>
                        <td>
                            <a href="{{ route('suppliers.finance', ['supplier_id' => $supplier->id]) }}" class="btn btn-sm btn-info">
                                <i class="bi bi-eye"></i> View
                            </a>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" class="text-center">No suppliers found.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

@if($selectedSupplier)
<div class="card">
    <div class="card-header bg-success text-white d-flex justify-content-between align-items-center">
        <h5 class="mb-0">{{ $selectedSupplier->name }} - Finance Details</h5>
        <button class="btn btn-light btn-sm" data-bs-toggle="modal" data-bs-target="#paymentModal">
            <i class="bi bi-plus-circle"></i> Record Payment
        </button>
    </div>
    <div class="card-body">
        <div class="row mb-4">
            <div class="col-md-4">
                <div class="card bg-light">
                    <div class="card-body">
                        <h6>Total Ordered</h6>
                        <h4>Kes {{ number_format($selectedSupplier->total_ordered, 2) }}</h4>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card bg-light">
                    <div class="card-body">
                        <h6>Total Paid</h6>
                        <h4>Kes {{ number_format($selectedSupplier->total_paid, 2) }}</h4>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card bg-light">
                    <div class="card-body">
                        <h6>Balance Due</h6>
                        <h4 class="{{ $selectedSupplier->balance > 0 ? 'text-danger' : 'text-success' }}">
                            Kes {{ number_format($selectedSupplier->balance, 2) }}
                        </h4>
                    </div>
                </div>
            </div>
        </div>

        <h6>Stock In Orders</h6>
        <table class="table table-sm table-hover">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Product</th>
                    <th>Qty</th>
                    <th>Unit Cost</th>
                    <th>Total</th>
                    <th>Reference</th>
                </tr>
            </thead>
            <tbody>
                @forelse($selectedSupplier->inventoryLogs as $log)
                    <tr>
                        <td>{{ $log->created_at->format('M d, Y') }}</td>
                        <td>{{ $log->product->name ?? 'N/A' }}</td>
                        <td>{{ $log->quantity }}</td>
                        <td>Kes {{ number_format($log->unit_cost, 2) }}</td>
                        <td>Kes {{ number_format($log->quantity * $log->unit_cost, 2) }}</td>
                        <td>{{ $log->reference_number ?? '-' }}</td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" class="text-center">No orders found.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<div class="modal fade" id="paymentModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Record Payment - {{ $selectedSupplier->name }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="{{ route('suppliers.payment', $selectedSupplier->id) }}">
                @csrf
                <div class="modal-body">
                    <div class="alert alert-info mb-3">
                        <strong>Balance Due:</strong> Kes {{ number_format($selectedSupplier->balance, 2) }}
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label class="form-label">Cash Amount</label>
                                <input type="number" name="cash_amount" class="form-control" step="0.01" min="0" value="0">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label class="form-label">M-Pesa Amount</label>
                                <input type="number" name="mpesa_amount" class="form-control" step="0.01" min="0" value="0">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label class="form-label">Card Amount</label>
                                <input type="number" name="card_amount" class="form-control" step="0.01" min="0" value="0">
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Reference Number</label>
                        <input type="text" name="reference_number" class="form-control" placeholder="Optional">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Notes</label>
                        <textarea name="notes" class="form-control" rows="2"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-success">Record Payment</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script>
document.querySelector('#paymentModal form').addEventListener('submit', function(e) {
    const cash = parseFloat(document.querySelector('input[name="cash_amount"]').value) || 0;
    const mpesa = parseFloat(document.querySelector('input[name="mpesa_amount"]').value) || 0;
    const card = parseFloat(document.querySelector('input[name="card_amount"]').value) || 0;
    if (cash + mpesa + card <= 0) {
        e.preventDefault();
        alert('Please enter at least one payment amount.');
    }
});
</script>
@endif
@endsection
