@extends('layouts.app')

@section('title', 'Previous Purchase Invoices')

@section('content')
<style>
    /* Reduce line heights globally for this page */
    .container-fluid {
        line-height: 1.2 !important;
    }
    
    .container-fluid * {
        line-height: 1.2 !important;
    }
    
    /* Reduce card padding and margins */
    .card-body {
        padding: 0.75rem !important;
    }
    
    .card-header {
        padding: 0.5rem 0.75rem !important;
    }
    
    .py-2, .py-3 {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }
    
    /* Reduce margins */
    .mb-1 {
        margin-bottom: 0.15rem !important;
    }
    
    .mb-2, .mb-3 {
        margin-bottom: 0.5rem !important;
    }
    
    .mb-4 {
        margin-bottom: 0.75rem !important;
    }
    
    /* Reduce table cell padding */
    .table td, .table th {
        padding: 0.4rem !important;
        line-height: 1.1 !important;
    }
    
    /* Reduce form element spacing */
    .form-group {
        margin-bottom: 0.5rem !important;
    }
    
    .form-label, label {
        margin-bottom: 0.2rem !important;
        line-height: 1.1 !important;
    }
    
    .form-control {
        padding: 0.3rem 0.5rem !important;
        line-height: 1.1 !important;
    }
    
    /* Reduce button padding */
    .btn {
        padding: 0.3rem 0.6rem !important;
        line-height: 1.1 !important;
    }
    
    .btn-sm {
        padding: 0.2rem 0.4rem !important;
        font-size: 0.75rem !important;
        line-height: 1 !important;
    }
    
    /* Smaller alert font */
    .alert {
        font-size: 0.875rem !important;
        padding: 0.5rem 1rem !important;
    }
</style>
<div class="container-fluid">
    <!-- Success/Error Messages -->
    @if(session('success'))
        <div class="row mb-3">
            <div class="col-12">
                <div class="alert alert-success alert-dismissible fade show" role="alert" style="font-size: 0.875rem; padding: 0.5rem 1rem;">
                    <i class="fas fa-check-circle mr-2"></i>{{ session('success') }}
                    <button type="button" class="close" data-dismiss="alert" style="font-size: 1rem;">
                        <span>&times;</span>
                    </button>
                </div>
            </div>
        </div>
    @endif

    @if(session('error'))
        <div class="row mb-3">
            <div class="col-12">
                <div class="alert alert-danger alert-dismissible fade show" role="alert" style="font-size: 0.875rem; padding: 0.5rem 1rem;">
                    <i class="fas fa-exclamation-circle mr-2"></i>{{ session('error') }}
                    <button type="button" class="close" data-dismiss="alert" style="font-size: 1rem;">
                        <span>&times;</span>
                    </button>
                </div>
            </div>
        </div>
    @endif

    <!-- Page Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-0 text-gray-800">
                        <i class="fas fa-history mr-2"></i>Previous Purchase Invoices
                        @if(isset($previousMonth))
                            <small class="text-muted">({{ $previousMonth }})</small>
                        @endif
                    </h1>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ route('reseller.purchase-invoices.index') }}">Purchase Invoice</a></li>
                            <li class="breadcrumb-item active">Previous Invoices</li>
                        </ol>
                    </nav>
                </div>
                <div>
                    <a href="{{ route('reseller.purchase-invoices.index') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left mr-2"></i>Back to Purchase Invoices
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Filters -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card shadow">
                <div class="card-body">
                    <form method="GET" action="{{ route('reseller.purchase-invoices.previous') }}">
                        <div class="row align-items-end">
                            <div class="col-md-2">
                                <div class="form-group mb-0">
                                    <label for="search" class="mb-1" style="font-size: 0.875rem;">Search</label>
                                    <input type="text" class="form-control form-control-sm" id="search" name="search" 
                                           value="{{ request('search') }}" placeholder="Bill No, Provider">
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group mb-0">
                                    <label for="from_date" class="mb-1" style="font-size: 0.875rem;">From Date</label>
                                    <input type="date" class="form-control form-control-sm" id="from_date" name="from_date" 
                                           value="{{ request('from_date') }}">
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group mb-0">
                                    <label for="to_date" class="mb-1" style="font-size: 0.875rem;">To Date</label>
                                    <input type="date" class="form-control form-control-sm" id="to_date" name="to_date" 
                                           value="{{ request('to_date') }}">
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group mb-0">
                                    <label for="status" class="mb-1" style="font-size: 0.875rem;">Status</label>
                                    <select class="form-control form-control-sm" id="status" name="status">
                                        <option value="">All</option>
                                        <option value="paid" {{ request('status') == 'paid' ? 'selected' : '' }}>Paid</option>
                                        <option value="due" {{ request('status') == 'due' ? 'selected' : '' }}>Due</option>
                                        <option value="partial" {{ request('status') == 'partial' ? 'selected' : '' }}>Partial</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group mb-0">
                                    <label for="provider" class="mb-1" style="font-size: 0.875rem;">Provider</label>
                                    <select class="form-control form-control-sm" id="provider" name="provider">
                                        <option value="">All Providers</option>
                                        @foreach($providers as $provider)
                                            <option value="{{ $provider->id }}" {{ request('provider') == $provider->id ? 'selected' : '' }}>
                                                {{ $provider->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group mb-0">
                                    <button type="submit" class="btn btn-primary btn-sm">
                                        <i class="fas fa-search mr-1"></i>Filter
                                    </button>
                                    <a href="{{ route('reseller.purchase-invoices.previous') }}" class="btn btn-secondary btn-sm">
                                        <i class="fas fa-redo mr-1"></i>Reset
                                    </a>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Purchase Invoice List Table -->
    <div class="row">
        <div class="col-12">
            <div class="card shadow mb-4">
                <div class="card-header py-3 d-flex justify-content-between align-items-center">
                    <h6 class="m-0 font-weight-bold text-primary">Purchase Invoice List</h6>
                    <div class="d-flex align-items-center">
                        <button type="button" class="btn btn-success btn-sm mr-2" id="generateInvoiceBtn" onclick="generateInvoices()" disabled>
                            <i class="fas fa-file-invoice mr-1"></i>Generate Invoice
                        </button>
                        <span class="mr-2">SHOW</span>
                        <select class="form-control form-control-sm" style="width: auto;">
                            <option value="25" selected>25 ENTRIES</option>
                            <option value="50">50 ENTRIES</option>
                            <option value="100">100 ENTRIES</option>
                        </select>
                    </div>
                </div>
                <div class="card-body">
                    @if($bills->count() > 0)
                        <form id="generateInvoiceForm" action="{{ route('reseller.purchase-invoices.generate') }}" method="POST">
                            @csrf
                            <div class="table-responsive">
                                <table class="table table-bordered">
                                    <thead class="thead-dark">
                                        <tr>
                                            <th>
                                                <input type="checkbox" id="selectAll" onchange="toggleSelectAll()">
                                            </th>
                                            <th>SN</th>
                                            <th>Provider</th>
                                            <th>Contact Person</th>
                                            <th>Bill No</th>
                                            <th>Provider Invoice</th>
                                            <th>Bill Month</th>
                                            <th>Total VAT</th>
                                            <th>Bill Amount</th>
                                            <th>Paid Amount</th>
                                            <th>Discount</th>
                                            <th>Due</th>
                                            <th>Status</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($bills as $index => $bill)
                                        <tr>
                                            <td>
                                                <input type="checkbox" class="bill-checkbox" name="bill_ids[]" value="{{ $bill->id }}">
                                            </td>
                                            <td>{{ $bills->firstItem() + $index }}</td>
                                            <td>{{ $bill->provider->name }}</td>
                                            <td>{{ $bill->provider->contact_person ?: 'N/A' }}</td>
                                            <td>{{ $bill->bill_no }}</td>
                                            <td>{{ $bill->provider_invoice ?: 'N/A' }}</td>
                                            <td>{{ $bill->bill_month }}</td>
                                            <td class="text-right">৳{{ number_format(isset($bill->items) && $bill->items ? $bill->items->sum('total_vat') : 0, 2) }}</td>
                                            <td class="text-right">৳{{ number_format($bill->bill_amount, 2) }}</td>
                                            <td class="text-right">৳{{ number_format($bill->paid_amount, 2) }}</td>
                                            <td class="text-right">৳{{ number_format($bill->discount_amount, 2) }}</td>
                                            <td class="text-right">৳{{ number_format($bill->due_amount, 2) }}</td>
                                            <td>
                                                @if($bill->status === 'paid')
                                                    <span class="badge badge-success">Paid</span>
                                                @elseif($bill->status === 'partial')
                                                    <span class="badge badge-warning">Partial</span>
                                                @else
                                                    <span class="badge badge-danger">Due</span>
                                                @endif
                                            </td>
                                            <td>
                                                <div class="btn-group" role="group">
                                                    <a href="{{ route('reseller.purchase-invoices.show', $bill->id) }}" 
                                                       class="btn btn-sm btn-outline-info" title="View">
                                                        <i class="fas fa-eye"></i>
                                                    </a>
                                                    <button type="button" class="btn btn-sm btn-outline-success" 
                                                            data-toggle="modal" data-target="#paymentModal{{ $bill->id }}" title="Payment">
                                                        <i class="fas fa-money-bill"></i>
                                                    </button>
                                                    <button type="button" class="btn btn-sm btn-outline-danger" 
                                                            onclick="deleteBill({{ $bill->id }})" title="Delete">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </div>
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                    <tfoot class="thead-light">
                                        <tr>
                                            <th colspan="7" class="text-right">Total:</th>
                                            <th class="text-right">৳{{ number_format($bills->sum(function($bill) { return isset($bill->items) && $bill->items ? $bill->items->sum('total_vat') : 0; }), 2) }}</th>
                                            <th class="text-right">৳{{ number_format($bills->sum('bill_amount'), 2) }}</th>
                                            <th class="text-right">৳{{ number_format($bills->sum('paid_amount'), 2) }}</th>
                                            <th class="text-right">৳{{ number_format($bills->sum('discount_amount'), 2) }}</th>
                                            <th class="text-right">৳{{ number_format($bills->sum('due_amount'), 2) }}</th>
                                            <th colspan="2"></th>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </form>

                        <!-- Pagination -->
                        <div class="d-flex justify-content-between align-items-center mt-3">
                            <div>
                                Showing {{ $bills->firstItem() }} to {{ $bills->lastItem() }} of {{ $bills->total() }} entries
                            </div>
                            <div>
                                {{ $bills->links() }}
                            </div>
                        </div>
                    @else
                        <div class="text-center py-5">
                            <i class="fas fa-file-invoice fa-3x text-muted mb-3"></i>
                            <h5 class="text-muted">No purchase invoices found</h5>
                            <p class="text-muted">No invoices match your search criteria.</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Payment Modals -->
@foreach($bills as $bill)
<div class="modal fade" id="paymentModal{{ $bill->id }}" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Make Payment - Bill #{{ $bill->bill_no }}</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <form action="{{ route('reseller.purchase-invoices.payment', $bill->id) }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="form-group">
                        <label for="payment_amount_{{ $bill->id }}" class="form-label">Amount <span class="text-danger">*</span></label>
                        <input type="number" class="form-control payment-amount" id="payment_amount_{{ $bill->id }}" 
                               name="amount" step="0.01" min="0.01" 
                               value="{{ $bill->due_amount }}" required data-bill-id="{{ $bill->id }}" data-due="{{ $bill->due_amount }}"
                               oninput="updateComputedFields({{ $bill->id }})" onchange="updateComputedFields({{ $bill->id }})">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Due Amount</label>
                        <input type="text" class="form-control" id="due_amount_display_{{ $bill->id }}" 
                               value="0.00" readonly style="background:#f0f0f0;">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Advance Payment</label>
                        <input type="text" class="form-control" id="advance_amount_display_{{ $bill->id }}" 
                               value="0.00" readonly style="background:#f0f0f0;">
                        <small class="text-muted">Amount paid in excess of the due amount</small>
                    </div>
                    
                    <div class="form-group">
                        <label for="bank_account_{{ $bill->id }}" class="form-label">Select Bank Account <span class="text-danger">*</span></label>
                        <select class="form-control" id="bank_account_{{ $bill->id }}" name="bank_account_info_id" required>
                            <option value="">Select Bank Account</option>
                            @foreach(\App\Models\BankAccountInfo::where('is_active', true)->get() as $bank)
                                <option value="{{ $bank->id }}">
                                    @if($bank->account_name)
                                        {{ $bank->bank_name }} - {{ $bank->account_name }} ({{ $bank->account_number }})
                                    @else
                                        {{ $bank->bank_name }} - {{ $bank->account_number }}
                                    @endif
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="payment_method_{{ $bill->id }}" class="form-label">Payment Method</label>
                        <select class="form-control" id="payment_method_{{ $bill->id }}" name="payment_method">
                            <option value="bank_transfer">Bank Transfer</option>
                            <option value="check">Check</option>
                            <option value="cash">Cash</option>
                            <option value="online">Online</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="transaction_date_{{ $bill->id }}" class="form-label">Transaction Date</label>
                        <input type="date" class="form-control" id="transaction_date_{{ $bill->id }}" 
                               name="transaction_date" value="{{ date('Y-m-d') }}" required>
                    </div>
                    <div class="form-group">
                        <label for="notes_{{ $bill->id }}" class="form-label">Notes</label>
                        <textarea class="form-control" id="notes_{{ $bill->id }}" name="notes" rows="3"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-success">Make Payment</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endforeach

<script>
function deleteBill(id) {
    if (confirm('Are you sure you want to delete this purchase bill?')) {
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = '{{ route("reseller.purchase-invoices.destroy", ":id") }}'.replace(':id', id);
        
        const csrfToken = document.createElement('input');
        csrfToken.type = 'hidden';
        csrfToken.name = '_token';
        csrfToken.value = '{{ csrf_token() }}';
        form.appendChild(csrfToken);
        
        const methodField = document.createElement('input');
        methodField.type = 'hidden';
        methodField.name = '_method';
        methodField.value = 'DELETE';
        form.appendChild(methodField);
        
        document.body.appendChild(form);
        form.submit();
    }
}

// Auto-hide alerts after 5 seconds
setTimeout(function() {
    $('.alert').fadeOut('slow');
}, 5000);

// Calculate Due Amount and Advance Payment
function updateComputedFields(billId) {
    const amountInput = document.getElementById('payment_amount_' + billId);
    const dueDisplay = document.getElementById('due_amount_display_' + billId);
    const advDisplay = document.getElementById('advance_amount_display_' + billId);
    
    if (!amountInput || !dueDisplay || !advDisplay) {
        return;
    }
    
    const originalDue = parseFloat(amountInput.getAttribute('data-due')) || 0;
    const amount = parseFloat(amountInput.value) || 0;
    
    const remainingDue = Math.max(0, originalDue - amount);
    const advancePayment = Math.max(0, amount - originalDue);
    
    dueDisplay.value = remainingDue.toFixed(2);
    advDisplay.value = advancePayment.toFixed(2);
}

// Update on amount input
$(document).on('input keyup change paste', '.payment-amount', function() {
    const billId = this.getAttribute('data-bill-id');
    if (billId) {
        updateComputedFields(billId);
    }
});

// Initialize when modal opens
$('[id^="paymentModal"]').on('shown.bs.modal', function () {
    const billId = $(this).attr('id').replace('paymentModal', '');
    setTimeout(function() {
        updateComputedFields(billId);
    }, 100);
});

// Toggle select all checkboxes
function toggleSelectAll() {
    const selectAll = document.getElementById('selectAll');
    const checkboxes = document.querySelectorAll('.bill-checkbox');
    
    checkboxes.forEach(function(checkbox) {
        checkbox.checked = selectAll.checked;
    });
    
    // Update Generate Invoice button state
    updateGenerateInvoiceButton();
}

// Update Generate Invoice button state based on checkbox selection
function updateGenerateInvoiceButton() {
    const generateBtn = document.getElementById('generateInvoiceBtn');
    const checkedBoxes = document.querySelectorAll('.bill-checkbox:checked');
    
    if (checkedBoxes.length > 0) {
        generateBtn.disabled = false;
        generateBtn.classList.remove('btn-secondary');
        generateBtn.classList.add('btn-success');
    } else {
        generateBtn.disabled = true;
        generateBtn.classList.remove('btn-success');
        generateBtn.classList.add('btn-secondary');
    }
}

// Initialize button state on page load
document.addEventListener('DOMContentLoaded', function() {
    // Add event listeners to all checkboxes
    document.querySelectorAll('.bill-checkbox').forEach(function(checkbox) {
        checkbox.addEventListener('change', updateGenerateInvoiceButton);
    });
    
    // Add event listener to select all checkbox
    const selectAll = document.getElementById('selectAll');
    if (selectAll) {
        selectAll.addEventListener('change', function() {
            toggleSelectAll();
        });
    }
    
    // Initial button state
    updateGenerateInvoiceButton();
});

// Generate invoices for selected bills
function generateInvoices() {
    const selectedBills = [];
    document.querySelectorAll('.bill-checkbox:checked').forEach(function(checkbox) {
        const billId = parseInt(checkbox.value);
        if (!isNaN(billId) && billId > 0) {
            selectedBills.push(billId);
        }
    });
    
    if (selectedBills.length === 0) {
        alert('Please select at least one invoice to generate.');
        return;
    }
    
    if (confirm(`Are you sure you want to generate invoices for ${selectedBills.length} selected bill(s) for the current month?`)) {
        document.getElementById('generateInvoiceForm').submit();
    }
}
</script>
@endsection