@extends('layouts.app')

@section('title', 'Previous Sales 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 Sales 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.sales-invoices.index') }}">Sales Invoice</a></li>
                            <li class="breadcrumb-item active">Previous Invoices</li>
                        </ol>
                    </nav>
                </div>
                <div>
                    <a href="{{ route('reseller.sales-invoices.index') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left mr-2"></i>Back to Sales 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.sales-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="Invoice No, Customer">
                                </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="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>Pending</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group mb-0">
                                    <label for="customer" class="mb-1" style="font-size: 0.875rem;">Customer</label>
                                    <select class="form-control form-control-sm" id="customer" name="customer">
                                        <option value="">All Customers</option>
                                        @foreach($customers as $customer)
                                            <option value="{{ $customer->id }}" {{ request('customer') == $customer->id ? 'selected' : '' }}>
                                                {{ $customer->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group mb-0">
                                    <label>&nbsp;</label>
                                    <div class="d-flex">
                                        <button type="submit" class="btn btn-primary btn-sm flex-fill mr-1">
                                            <i class="fas fa-search mr-1"></i>Filter
                                        </button>
                                        <a href="{{ route('reseller.sales-invoices.previous') }}" class="btn btn-secondary btn-sm flex-fill">
                                            <i class="fas fa-times mr-1"></i>Clear
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Sales 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">Sales Invoices 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($invoices->count() > 0)
                        <form id="generateInvoiceForm" action="{{ route('reseller.sales-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>Company Name</th>
                                            <th>Customer</th>
                                            <th>Invoice No</th>
                                            <th>Customer Invoice</th>
                                            <th>Invoice Month</th>
                                            <th>Total VAT</th>
                                            <th>Amount</th>
                                            <th>Paid</th>
                                            <th>Discount</th>
                                            <th>Due</th>
                                            <th>Status</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($invoices as $index => $invoice)
                                        <tr>
                                            <td>
                                                <input type="checkbox" class="invoice-checkbox" name="invoice_ids[]" value="{{ $invoice->id }}">
                                            </td>
                                            <td>{{ $invoices->firstItem() + $index }}</td>
                                            <td>
                                                <div class="font-weight-bold">{{ $invoice->customer ? ($invoice->customer->company_name ?? $invoice->customer->name) : ($invoice->customer_name ?? 'N/A') }}</div>
                                                @if($invoice->customer && $invoice->customer->email)
                                                    <div class="text-muted small">{{ $invoice->customer->email }}</div>
                                                @elseif($invoice->customer_email)
                                                    <div class="text-muted small">{{ $invoice->customer_email }}</div>
                                                @endif
                                            </td>
                                            <td>
                                                <div class="font-weight-bold">{{ $invoice->customer ? $invoice->customer->name : ($invoice->customer_name ?? 'N/A') }}</div>
                                                @if($invoice->customer && $invoice->customer->phone)
                                                    <div class="text-muted small">{{ $invoice->customer->phone }}</div>
                                                @elseif($invoice->customer_phone)
                                                    <div class="text-muted small">{{ $invoice->customer_phone }}</div>
                                                @endif
                                            </td>
                                            <td><strong>{{ $invoice->invoice_no }}</strong></td>
                                            <td>{{ $invoice->customer_invoice ?: 'N/A' }}</td>
                                            <td>{{ $invoice->invoice_month }}</td>
                                            <td class="text-right">৳{{ number_format($invoice->items->sum('total_vat') ?? 0, 2) }}</td>
                                            <td class="text-right">৳{{ number_format($invoice->invoice_amount, 2) }}</td>
                                            <td class="text-right">৳{{ number_format($invoice->transections()->where('transaction_type', 'payment')->sum('amount'), 2) }}</td>
                                            <td class="text-right">৳{{ number_format($invoice->discount_amount ?? 0, 2) }}</td>
                                            <td class="text-right">৳{{ number_format($invoice->due_amount, 2) }}</td>
                                            <td>
                                                @if($invoice->due_amount <= 0)
                                                    <span class="badge badge-success">Paid</span>
                                                @else
                                                    <span class="badge badge-warning">Due</span>
                                                @endif
                                            </td>
                                            <td>
                                                <div class="btn-group" role="group">
                                                    <a href="{{ route('reseller.sales-invoices.show', $invoice->id) }}" 
                                                       class="btn btn-sm btn-outline-info" title="View">
                                                        <i class="fas fa-eye"></i>
                                                    </a>
                                                    <a href="{{ route('reseller.sales-invoices.edit-sales', $invoice->id) }}" 
                                                       class="btn btn-sm btn-outline-warning" title="Edit">
                                                        <i class="fas fa-edit"></i>
                                                    </a>
                                                    <a href="{{ route('reseller.sales-invoices.download', $invoice->id) }}" 
                                                       class="btn btn-sm btn-outline-secondary" title="Download PDF">
                                                        <i class="fas fa-download"></i>
                                                    </a>
                                                </div>
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                    <tfoot class="thead-light">
                                        <tr>
                                            <th colspan="7" class="text-right">Total:</th>
                                            <th class="text-right">৳{{ number_format($invoices->sum(function($invoice) { return $invoice->items->sum('total_vat') ?? 0; }), 2) }}</th>
                                            <th class="text-right">৳{{ number_format($invoices->sum('invoice_amount'), 2) }}</th>
                                            <th class="text-right">৳{{ number_format($stats['filtered']['paid_amount'], 2) }}</th>
                                            <th class="text-right">৳{{ number_format($invoices->sum('discount_amount') ?? 0, 2) }}</th>
                                            <th class="text-right">৳{{ number_format($invoices->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 {{ $invoices->firstItem() }} to {{ $invoices->lastItem() }} of {{ $invoices->total() }} entries
                            </div>
                            <div>
                                {{ $invoices->appends(request()->query())->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 sales invoices found</h5>
                            <p class="text-muted">No invoices match your search criteria.</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Toggle select all checkboxes
function toggleSelectAll() {
    const selectAll = document.getElementById('selectAll');
    const checkboxes = document.querySelectorAll('.invoice-checkbox');
    
    checkboxes.forEach(function(checkbox) {
        checkbox.checked = selectAll.checked;
    });
    updateGenerateInvoiceButton();
}

// Update Generate Invoice button state based on checkbox selection
function updateGenerateInvoiceButton() {
    const generateBtn = document.getElementById('generateInvoiceBtn');
    const checkedBoxes = document.querySelectorAll('.invoice-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');
    }
}

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

// Initial call on page load
document.addEventListener('DOMContentLoaded', function() {
    updateGenerateInvoiceButton();
    
    // Add event listeners to all checkboxes
    document.querySelectorAll('.invoice-checkbox').forEach(checkbox => {
        checkbox.addEventListener('change', updateGenerateInvoiceButton);
    });
    
    // Add event listener to selectAll checkbox
    const selectAll = document.getElementById('selectAll');
    if (selectAll) {
        selectAll.addEventListener('change', updateGenerateInvoiceButton);
    }
});

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