@extends('layouts.master')
@section('title', 'Loans')

@section('page-header')
<header class="header bg-ui-general">
    <div class="header-info">
        <h1 class="header-title">
            <strong>Loans</strong>
        </h1>
    </div>

    <div class="header-action">
        <nav class="nav">
            <a class="nav-link active" href="{{ route('loans.index') }}">
                Loan List
            </a>
            <a class="nav-link" href="{{ route('loans.create') }}">
                <i class="fa fa-plus"></i>
                New Loan
            </a>
        </nav>
    </div>
</header>
@endsection

@section('content')
<div class="col-md-12">

    <div class="card card-body mb-2">
        <form method="GET" action="{{ route('loans.index') }}" class="mb-4">
            <div class="form-row">
                <!-- Customer -->
                <div class="form-group col-md-3">
                    <select name="customer_id" class="form-control" data-provide="selectpicker" data-live-search="true" data-size="10">
                        <option value="">Select Customer</option>
                        @foreach($customers as $customer)
                        <option value="{{ $customer->id }}"
                            {{ old(key: 'customer_id') == $customer->id ? 'selected' : '' }}>
                            {{ $customer->name }} ({{ $customer->mobile_no }}) ({{ $customer->account_no }})
                        </option>
                        @endforeach
                    </select>
                </div>

                <!-- Status -->
                <div class="form-group col-md-3">
                    <select name="status" class="form-control">
                        <option value="">Select Status</option>
                        <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>Pending</option>
                        <option value="accept" {{ request('status') == 'accept' ? 'selected' : '' }}>Accept</option>
                        <option value="completed" {{ request('status') == 'completed' ? 'selected' : '' }}>Completed
                        </option>
                        <option value="overdue" {{ request('status') == 'overdue' ? 'selected' : '' }}>Overdue</option>
                    </select>
                </div>

                <!-- Start Date -->
                <div class="form-group col-md-2">
                    <input type="text" class="form-control" data-provide="datepicker" data-date-format="yyyy-mm-dd"
                        name="start_date" placeholder="Start Date" value="{{ request('start_date') }}">
                </div>

                <!-- End Date -->
                <div class="form-group col-md-2">
                    <input type="text" class="form-control" data-provide="datepicker" data-date-format="yyyy-mm-dd"
                        name="end_date" placeholder="End Date" value="{{ request('end_date') }}">
                </div>

                <!-- Buttons -->
                <div class="form-group col-md-2">
                    <button type="submit" class="btn btn-primary">Filter</button>
                    <a href="{{ route('loans.index') }}" class="btn btn-info">Reset</a>
                </div>
            </div>
        </form>
    </div>

    <div class="card">
        <div class="card-header">
            <h4 class="card-title fw-400">All Loans</h4>
        </div>

        <div class="card-body table-responsive">
            <table class="table table-bordered table-hover">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Customer</th>
                        <th>Loan Amount</th>
                        <th>Total Interest (Rate%)</th>
                        <th>Total Payable</th>
                        <th>Installments</th>
                        <th>Status</th>
                        <!-- <th>Issued On</th> -->
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($loans as $loan)
                    <tr>
                        <td>{{ $loop->iteration }}</td>
                        <td>{{ $loan->customer->name ?? 'N/A' }} - {{ $loan->customer->account_no ?? 'N/A' }}</td>
                        <td>{{ number_format($loan->loan_amount, 2) }}</td>
                        <td>{{ number_format($loan->total_interest, 2) }} ({{ $loan->interest_rate }}%)</td>
                        <td>{{ number_format($loan->total_payable, 2) }}</td>
                        <td>{{ $loan->installment_count }}</td>
                        <td>
                            <span class="{{ $loan->status_badge_class }}">
                                {{ ucfirst($loan->status ?? $loan->computed_status) }}
                            </span>
                        </td>
                        <!-- <td>{{ \Carbon\Carbon::parse($loan->issue_date)->format('d M, Y') }}</td> -->
                        <td>
                            <div class="btn-group">
                                <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"
                                    aria-expanded="false">
                                    <i class="fa fa-cogs"></i>
                                </button>
                                <div class="dropdown-menu">
                                    @can('show-loan')
                                    <a class="dropdown-item" href="{{ route('loans.show', $loan->id) }}">
                                        <i class="fa fa-eye"></i> View
                                    </a>
                                     @endcan
                                    @can('edit-loan')
                                    <a class="dropdown-item" href="{{ route('loans.edit', $loan->id) }}">
                                        <i class="fa fa-edit"></i> Edit
                                    </a>
                                    @endcan
                                    @can('loan_payment')
                                    <a class="dropdown-item" href="{{ route('loans.installments', $loan->id) }}">
                                        <i class="fa fa-list"></i> Collection
                                    </a>
                                    @endcan
                                    <a class="dropdown-item" href="{{ route('loans.payments', $loan->id) }}">
                                        <i class="fa fa-history"></i> Payments
                                    </a>
                                    @can('withdraw-loan-savings')
                                    <a class="dropdown-item" href="{{ route('loan.savings.withdraw.form') }}?loan_id={{ $loan->id }}">
                                        <i class="fa fa-money"></i> Withdraw Savings
                                    </a>
                                    @endcan
                                    @can('delete-loan')
                                    <form action="{{ route('loans.destroy', $loan->id) }}" method="POST"
                                        class="d-inline" onsubmit="return confirm('Are you sure?');">
                                        @csrf
                                        @method('DELETE')
                                        <button class="dropdown-item text-danger" type="submit">
                                            <i class="fa fa-trash"></i> Delete
                                        </button>
                                    </form> 
                                    @endcan
                                </div>
                            </div>
                        </td>


                    </tr>
                    @endforeach
                </tbody>
            </table>

            <div class="mt-3">
                {{ $loans->links() }}
            </div>
        </div>
    </div>
</div>
@endsection

@section('styles')
<style>
    /* Custom styles if needed */

</style>
@endsection

@section('scripts')
<script>
    /* Optional scripts if needed */

</script>
@endsection
