@extends('layout.main')
@section('content')
    <div class="container grid px-6 mx-auto">
        <h2 class="my-6 text-2xl font-semibold text-gray-700 dark:text-gray-200">
            Loan Product Penalties: {{ $loanproduct->product_name }}
        </h2>

        <!-- Penalty Summary Cards -->
        <div class="grid gap-6 mb-8 md:grid-cols-2 xl:grid-cols-4">
            <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
                <div class="p-3 mr-4 text-orange-500 bg-orange-100 rounded-full dark:text-orange-100 dark:bg-orange-500">
                    <i class="fa fa-exclamation-triangle w-5 h-5"></i>
                </div>
                <div>
                    <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
                        Total Penalties
                    </p>
                    <p class="text-lg font-semibold text-gray-700 dark:text-gray-200">
                        {{ $penaltySummary['total_penalties'] }}
                    </p>
                </div>
            </div>

            <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
                <div class="p-3 mr-4 text-blue-500 bg-blue-100 rounded-full dark:text-blue-100 dark:bg-blue-500">
                    <i class="fa fa-clock w-5 h-5"></i>
                </div>
                <div>
                    <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
                        One-Time
                    </p>
                    <p class="text-lg font-semibold text-gray-700 dark:text-gray-200">
                        {{ $penaltySummary['one_time_penalties'] }}
                    </p>
                </div>
            </div>

            <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
                <div class="p-3 mr-4 text-green-500 bg-green-100 rounded-full dark:text-green-100 dark:bg-green-500">
                    <i class="fa fa-repeat w-5 h-5"></i>
                </div>
                <div>
                    <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
                        Recurring
                    </p>
                    <p class="text-lg font-semibold text-gray-700 dark:text-gray-200">
                        {{ $penaltySummary['recurring_penalties'] }}
                    </p>
                </div>
            </div>

            <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
                <div class="p-3 mr-4 text-purple-500 bg-purple-100 rounded-full dark:text-purple-100 dark:bg-purple-500">
                    <i class="fa fa-percentage w-5 h-5"></i>
                </div>
                <div>
                    <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
                        Percentage Based
                    </p>
                    <p class="text-lg font-semibold text-gray-700 dark:text-gray-200">
                        {{ $penaltySummary['percentage_penalties'] }}
                    </p>
                </div>
            </div>
        </div>

        <div class="flex flex-col flex-wrap mb-8 md:flex-row md:items-center gap-4">
            @can('loans-products-penalty-create')
                <a href="{{ route('loanproduct.penalties.create', ['loanproduct' => $loanproduct]) }}"
                    class="flex items-center justify-between align-items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple">
                    <i class="fa fa-add"></i>
                    <span class="ml-2">Add New Penalty</span>
                </a>
            @endcan

            @can('loans-products-list')
                <x-link route="{{ route('loan-products.index') }}" isButton class="bg-purple-600">
                    View Loan Products
                </x-link>
            @endcan
        </div>

        <h4 class="mb-4 text-lg font-semibold text-gray-600 dark:text-gray-300">
            Penalty List
        </h4>

        <div class="w-full overflow-hidden rounded-lg shadow-xs p-2">
            <div class="w-full overflow-x-auto">
                <x-table.table datatable>
                    <x-table.head>
                        <th>Name</th>
                        <th>Type</th>
                        <th>Frequency</th>
                        <th>Days In Arrears</th>
                        <th>Grace Period</th>
                        <th>Value</th>
                        <th>Recurring Interval</th>
                        <th>Max Applications</th>
                        <th>Description</th>
                        <th>Date Created</th>
                        <th>Action</th>
                    </x-table.head>
                    <x-table.body>
                        @forelse ($loanproduct->penalties as $penalty)
                            <x-table.row>
                                <x-table.cell>
                                    <div class="flex items-center space-x-2">
                                        <span>{{ $penalty->name }}</span>
                                        @if($penalty->frequency_type === 'recurring')
                                            <span class="px-2 py-1 text-xs font-semibold text-green-800 bg-green-100 rounded-full">
                                                Recurring
                                            </span>
                                        @else
                                            <span class="px-2 py-1 text-xs font-semibold text-blue-800 bg-blue-100 rounded-full">
                                                One-Time
                                            </span>
                                        @endif
                                    </div>
                                </x-table.cell>
                                <x-table.cell>
                                    <span class="px-2 py-1 text-xs font-semibold rounded-full
                                        {{ $penalty->type == 1 ? 'text-purple-800 bg-purple-100' : 'text-orange-800 bg-orange-100' }}">
                                        {{ \App\Constants\LoanTypePenaltyConstants::getTypeName($penalty->type) }}
                                    </span>
                                </x-table.cell>
                                <x-table.cell>
                                    {{ \App\Constants\LoanTypePenaltyConstants::getFrequencyTypeName($penalty->frequency_type) }}
                                </x-table.cell>
                                <x-table.cell>
                                    <span class="font-medium">{{ number_format($penalty->period) }}</span> days
                                </x-table.cell>
                                <x-table.cell>
                                    <span class="font-medium">{{ number_format($penalty->grace_period_days) }}</span> days
                                </x-table.cell>
                                <x-table.cell>
                                    <span class="font-semibold text-gray-900">
                                        {{ number_format($penalty->amount, 2) }}{{ $penalty->type == 2 ? '%' : '' }}
                                    </span>
                                </x-table.cell>
                                <x-table.cell>
                                    @if($penalty->frequency_type === 'recurring')
                                        <span class="text-sm">
                                            Every {{ $penalty->recurring_interval_days }} day(s)
                                        </span>
                                    @else
                                        <span class="text-gray-400">N/A</span>
                                    @endif
                                </x-table.cell>
                                <x-table.cell>
                                    @if($penalty->frequency_type === 'recurring')
                                        <span class="text-sm">
                                            {{ $penalty->max_applications ? number_format($penalty->max_applications) : 'Unlimited' }}
                                        </span>
                                    @else
                                        <span class="text-gray-400">N/A</span>
                                    @endif
                                </x-table.cell>
                                <x-table.cell>
                                    <div class="max-w-xs truncate" title="{{ $penalty->description }}">
                                        {{ $penalty->description }}
                                    </div>
                                </x-table.cell>
                                <x-table.cell>{{ $penalty->created_at->format('d M Y') }}</x-table.cell>
                                <x-table.cell>
                                    <div class="flex align-items-center gap-2">
                                        @can('loans-products-penalty-edit')
                                            <a href="{{ route('loanproduct.penalties.edit', ['loanproduct' => $loanproduct, 'penalty' => $penalty]) }}"
                                                class="text-purple-600 dark:text-white" title="Edit Penalty">
                                                <i class="fa fa-edit"></i>
                                            </a>
                                        @endcan

                                        @can('loans-products-penalty-delete')
                                            <x-delete-button
                                                route="{{ route('loanproduct.penalties.destroy', ['loanproduct' => $loanproduct, 'penalty' => $penalty]) }}" />
                                        @endcan
                                    </div>
                                </x-table.cell>
                            </x-table.row>
                        @empty
                            <x-table.row>
                                <x-table.cell colspan="11" class="text-center py-8">
                                    <div class="flex flex-col items-center">
                                        <i class="fa fa-exclamation-triangle text-4xl text-gray-400 mb-4"></i>
                                        <p class="text-gray-500 text-lg">No penalties configured for this loan product</p>
                                        <p class="text-gray-400 text-sm mt-2">Click "Add New Penalty" to get started</p>
                                    </div>
                                </x-table.cell>
                            </x-table.row>
                        @endforelse
                    </x-table.body>
                </x-table.table>
            </div>
        </div>
    </div>
@endsection