@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>
        <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 </span>
                </a>
            @endcan
            @can ('loans-products-list')
                <x-link route="{{ route('loan-products.index') }}" isButton class="bg-purple-600">View Loan Product
                    </x-link>
            @endcan

        </div>
        <h4 class="mb-4 text-lg font-semibold text-gray-600 dark:text-gray-300">
            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>Days In Arrears</th>
                        <th>Value</th>
                        <th>Description</th>
                        <th>Date</th>
                        <th>Action</th>
                    </x-table.head>
                    <x-table.body>
                        @foreach ($loanproduct->penalties as $penalty)
                            <x-table.row>
                                <x-table.cell>{{ $penalty->name }}</x-table.cell>
                                <x-table.cell>{{ \App\Constants\LoanTypePenaltyContants::getTypeName($penalty->type) }}</x-table.cell>
                                <x-table.cell>{{ $penalty->period }}</x-table.cell>
                                <x-table.cell>{{ number_format($penalty->amount) }}</x-table.cell>
                                <x-table.cell>{{ $penalty->description }}</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 Record">
                                                <i class="fa fa-edit"></i>
                                            </a>
                                        @endcan
                                        <x-delete-button
                                            route="{{ route('loanproduct.penalties.destroy', ['loanproduct' => $loanproduct, 'penalty' => $penalty]) }}" />
                                    </div>
                                </x-table.cell>
                            </x-table.row>
                        @endforeach
                    </x-table.body>
                </x-table.table>
            </div>

        </div>
    </div>
@endsection