@extends('layouts.app')
@section('title','Loan Applications')

@push('styles')
<style>
@media (min-width: 900px) {
    .mf-table-toolbar--single-row {
        display: grid !important;
        grid-template-columns: minmax(240px, 1fr) minmax(150px, 210px) minmax(150px, 210px) auto auto auto;
        align-items: center;
        gap: 8px 12px;
    }

    .mf-table-toolbar--single-row > .mf-table-toolbar-left,
    .mf-table-toolbar--single-row > .mf-table-toolbar-actions,
    .mf-table-toolbar--single-row .mf-table-quick-filters {
        display: contents !important;
    }

    .mf-table-toolbar--single-row .mf-table-search {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    .mf-table-toolbar--single-row .mf-quick-filter {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    .mf-table-toolbar--single-row .mf-btn,
    .mf-table-toolbar--single-row .mf-columns-menu {
        white-space: nowrap;
        justify-self: start;
    }
}
</style>
@endpush

@section('content')
@php
    $filters=[];
    if(request()->filled('search')) $filters[]=['label'=>'Search','value'=>request('search'),'removeUrl'=>route('loans.index',request()->except(['search','page']))];
    if(request()->filled('status')) $filters[]=['label'=>'Status','value'=>str(request('status'))->replace('_',' ')->title(),'removeUrl'=>route('loans.index',request()->except(['status','page']))];
    if(request()->filled('product')) { $p=$products->firstWhere('id',(int)request('product')); if($p) $filters[]=['label'=>'Product','value'=>$p->name,'removeUrl'=>route('loans.index',request()->except(['product','page']))]; }
    if(request()->filled('branch')) { $b=$branches->firstWhere('id',(int)request('branch')); if($b) $filters[]=['label'=>'Branch','value'=>$b->name,'removeUrl'=>route('loans.index',request()->except(['branch','page']))]; }
    $tabs=array_merge([['label'=>'All','value'=>'']],collect($statuses)->map(fn($status)=>['label'=>str($status)->replace('_',' ')->title()->toString(),'value'=>$status])->all());
@endphp

<x-ui.page-toolbar title="Loan Applications" description="Create and track loan applications, contracts, supporting documents and proposed repayment schedules." :breadcrumbs="[['label'=>'Dashboard','url'=>route('dashboard')],['label'=>'Loan Applications']]">
    <x-slot:actions>@if(auth()->user()->can('loans.create'))<a class="mf-btn mf-btn-primary" href="{{ route('loans.create') }}">+ New application</a>@endif</x-slot:actions>
</x-ui.page-toolbar>

<x-ui.quick-status-tabs :tabs="$tabs" />
<x-ui.table-toolbar class="mf-table-toolbar--single-row" table-id="loan-table" search-placeholder="Search loan number, customer, phone…" :filter-names="['product','branch']" :columns="['loan'=>'Loan','customer'=>'Customer','product'=>'Product','branch'=>'Branch','principal'=>'Principal','total'=>'Total','status'=>'Status']" export-filename="loan-applications.csv">
    <x-slot:filters>
        <select class="mf-input mf-quick-filter" name="product"><option value="">All products</option>@foreach($products as $product)<option value="{{ $product->id }}" @selected((int)request('product')===$product->id)>{{ $product->name }}</option>@endforeach</select>
        <select class="mf-input mf-quick-filter" name="branch"><option value="">All branches</option>@foreach($branches as $branch)<option value="{{ $branch->id }}" @selected((int)request('branch')===$branch->id)>{{ $branch->name }}</option>@endforeach</select>
    </x-slot:filters>
</x-ui.table-toolbar>
<x-ui.applied-filter-chips :filters="$filters" :clear-url="route('loans.index')" />

<div class="mf-table-frame"><table id="loan-table" class="mf-table" data-standard-table>
<thead><tr><th data-table-column="loan">Loan</th><th data-table-column="customer">Customer</th><th data-table-column="product">Product</th><th data-table-column="branch">Branch</th><th data-table-column="principal">Principal</th><th data-table-column="total">Total repayment</th><th data-table-column="status">Status</th><th data-no-export></th></tr></thead>
<tbody>
@forelse($loans as $loan)
<tr>
<td data-table-column="loan"><a class="font-medium text-primary hover:underline" href="{{ route('loans.show',$loan) }}">{{ $loan->loan_number }}</a><div class="text-xs text-muted-foreground">{{ $loan->created_at->format('d M Y') }}</div></td>
<td data-table-column="customer"><span class="font-medium">{{ $loan->customer->full_name }}</span><div class="text-xs text-muted-foreground">{{ $loan->customer->customer_number }} · {{ $loan->customer->phone }}</div></td>
<td data-table-column="product">{{ $loan->product->name }}</td>
<td data-table-column="branch">{{ $loan->branch->name }}</td>
<td data-table-column="principal">{{ number_format((float)$loan->principal,2) }}</td>
<td data-table-column="total">{{ number_format((float)$loan->total_repayment,2) }}</td>
<td data-table-column="status"><span class="mf-badge {{ in_array($loan->status,['contract_signed','under_review','ready_for_disbursement','active'])?'mf-badge-success':'mf-badge-muted' }}">{{ str($loan->status)->replace('_',' ')->title() }}</span></td>
<td data-no-export class="mf-table-row-actions"><a class="text-sm text-primary hover:underline" href="{{ route('loans.show',$loan) }}">View</a></td>
</tr>
@empty<tr><td colspan="8" class="text-center text-muted-foreground">No loan applications found.</td></tr>@endforelse
</tbody></table></div>
<div class="mt-4">{{ $loans->links() }}</div>
@endsection
