@extends('layouts.app')

@section('title', 'Loan Products Management')

@section('content')
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="container py-4">
    @if (session('success'))
        <div class="alert alert-success alert-dismissible fade show">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="card shadow mb-4">
        <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
            <h2 class="mb-0"><i class="fas fa-list me-2"></i> Loan Products</h2>
            <button class="btn btn-light" data-bs-toggle="modal" data-bs-target="#addProductModal">
                <i class="fas fa-plus me-1"></i> Add Product
            </button>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-striped table-hover table-bordered">
                    <thead class="table-dark">
                        <tr>
                            <th>ID</th>
                            <th>Product Name</th>
                            <th>Type</th>
                            <th>Repayment</th>
                            <th>Interest Rate</th>
                            <th>Installments</th>
                            <th>Rental Value</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($products as $product)
                        <tr>
                            <td>{{ $product->id }}</td>
                            <td>{{ $product->name }}</td>
                            <td>{{ ucfirst(str_replace('_', ' ', $product->product_type)) }}</td>
                            <td>{{ ucfirst($product->repayment_method) }}</td>
                            <td>{{ number_format($product->interest_rate, 2) }}%</td>
                            <td>{{ $product->installments }}</td>
                            <td>Rs. {{ number_format($product->rental_value, 2) }}</td>
                            <td>
                                <span class="badge rounded-pill {{ $product->status == 'active' ? 'bg-success' : 'bg-secondary' }}">
                                    {{ ucfirst($product->status) }}
                                </span>
                            </td>
                            <td class="action-btns">
                                @if ($product->status == 'active')
                                    <a href="{{ route('loan-products.toggle-status', $product->id) }}" class="btn btn-warning btn-sm" title="Deactivate">
                                        <i class="fas fa-toggle-off"></i>
                                    </a>
                                @else
                                    <a href="{{ route('loan-products.toggle-status', $product->id) }}" class="btn btn-success btn-sm" title="Activate">
                                        <i class="fas fa-toggle-on"></i>
                                    </a>
                                @endif
                                <a href="{{ route('loan-products.edit', $product->id) }}" class="btn btn-info btn-sm" title="Edit">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <form action="{{ route('loan-products.destroy', $product->id) }}" method="POST" style="display: inline-block;">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-danger btn-sm" title="Delete" onclick="return confirm('Are you sure you want to delete this product?')">
                                        <i class="fas fa-trash-alt"></i>
                                    </button>
                                </form>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Add Product Modal -->
<div class="modal fade" id="addProductModal" tabindex="-1" aria-labelledby="addProductModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title" id="addProductModalLabel"><i class="fas fa-plus-circle me-2"></i> Add New Loan Product</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form method="POST" action="{{ route('loan-products.store') }}" id="loanProductForm">
                    @csrf
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label required">Product Name</label>
                                <input type="text" name="name" class="form-control" required>
                            </div>
                            
                            <div class="mb-3">
                                <label class="form-label required">Repayment Method</label>
                                <select name="repayment_method" class="form-select" required>
                                    <option value="">-- Select Method --</option>
                                    <option value="weekly">Weekly</option>
                                    <option value="daily">Daily</option>
                                    <option value="monthly">Monthly</option>
                                </select>
                            </div>
                            
                            <div class="mb-3">
                                <label class="form-label required">Interest Type</label>
                                <select name="interest_type" class="form-select" required>
                                    <option value="">-- Select Type --</option>
                                    <option value="flat_rate">Flat Rate</option>
                                    <option value="interest_only">Interest Only</option>
                                    <option value="declining">Declining</option>
                                </select>
                            </div>
                            
                            <div class="mb-3">
                                <label class="form-label required">Product Type</label>
                                <select name="product_type" class="form-select" required>
                                    <option value="">-- Select Product --</option>
                                    <option value="micro_loan">Micro Loan</option>
                                    <option value="business_loan">Business Loan</option>
                                    <option value="daily_loan">Daily Loan</option>
                                    <option value="leasing">Leasing Loan</option>
                                    <option value="mortgage_loan">Mortgage Loan</option>
                                </select>
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="calculation-card">
                                <h5><i class="fas fa-calculator me-2"></i>Financial Parameters</h5>
                                
                                <div class="mb-3">
                                    <label class="form-label required">Loan Amount (Rs.)</label>
                                    <input type="number" name="loan_amount" class="form-control" min="1" step="0.01" required>
                                </div>
                                
                                <div class="mb-3">
                                    <label class="form-label required">No of Installments</label>
                                    <input type="number" name="installments" class="form-control" min="1" required>
                                </div>
                                
                                <div class="mb-3">
                                    <label class="form-label required">Interest Rate (%)</label>
                                    <input type="number" name="interest_rate" class="form-control" min="0.0001" step="0.0001" required>
                                </div>
                                
                                <div class="mb-3">
                                    <label class="form-label">Rental Value (Rs.)</label>
                                    <input type="text" name="rental_value" class="form-control" id="rental_value" readonly>
                                </div>
                                
                                <div class="mb-3">
                                    <label class="form-label">Total Interest (Rs.)</label>
                                    <input type="text" class="form-control" id="total_interest" readonly>
                                </div>
                                
                                <div class="mb-3">
                                    <label class="form-label">Total Repayment (Rs.)</label>
                                    <input type="text" class="form-control" id="total_repayment" readonly>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save Product</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@section('scripts')
<!-- JavaScript Libraries -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>

<script>
document.addEventListener("DOMContentLoaded", function() {
    // Calculate loan details when inputs change
    const form = document.getElementById("loanProductForm");
    const calculationInputs = form.querySelectorAll(
        "[name='loan_amount'], [name='installments'], [name='interest_rate'], [name='repayment_method']"
    );
    
    calculationInputs.forEach(input => {
        input.addEventListener("input", calculateLoanDetails);
    });
    
    function calculateLoanDetails() {
        const loanAmount = parseFloat(form.querySelector("[name='loan_amount']").value) || 0;
        const installments = parseInt(form.querySelector("[name='installments']").value) || 1;
        const interestRate = parseFloat(form.querySelector("[name='interest_rate']").value) || 0;
        const repaymentMethod = form.querySelector("[name='repayment_method']").value;
        
        if (loanAmount > 0 && interestRate > 0 && repaymentMethod) {
            // Calculate effective rate
            let effectiveRate = interestRate / 100;
            switch(repaymentMethod) {
                case "weekly": effectiveRate /= 52; break;
                case "monthly": effectiveRate /= 12; break;
                case "daily": effectiveRate /= 365; break;
            }
            
            // Calculate financials
            const totalInterest = loanAmount * effectiveRate * installments;
            const totalRepayment = loanAmount + totalInterest;
            const rentalValue = totalRepayment / installments;
            
            // Update display
            document.getElementById("rental_value").value = rentalValue.toFixed(2);
            document.getElementById("total_interest").value = totalInterest.toFixed(2);
            document.getElementById("total_repayment").value = totalRepayment.toFixed(2);
        }
    }
    
    // Initialize calculation when modal opens
    $('#addProductModal').on('shown.bs.modal', function() {
        calculateLoanDetails();
    });
    
    // Auto-close alerts after 5 seconds
    setTimeout(() => {
        const alerts = document.querySelectorAll('.alert');
        alerts.forEach(alert => {
            new bootstrap.Alert(alert).close();
        });
    }, 5000);
    
    // Form validation
    form.addEventListener("submit", function(e) {
        if (!form.checkValidity()) {
            e.preventDefault();
            e.stopPropagation();
            
            Swal.fire({
                icon: 'error',
                title: 'Missing Information',
                text: 'Please fill all required fields with valid values',
            });
        }
        form.classList.add('was-validated');
    }, false);
    
    // Initialize tooltips
    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[title]'));
    tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });
});
</script>
@endsection
@endsection