@extends('backend.master')

@section('content')

<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">

<style>
    :root {
        --brand: #DD3532;
        --line: #e5e7eb;
    }

    .plan-page {
        background: #f8fafc;
        min-height: 100vh;
    }

    .plan-card {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 18px;
        box-shadow: 0 8px 24px rgba(15, 23, 42, .05);
    }

    .plan-input {
        height: 52px;
        border: 1px solid var(--line);
        border-radius: 14px;
        outline: none;
    }

    .plan-input:focus {
        border-color: var(--brand);
        box-shadow: 0 0 0 4px rgba(221, 53, 50, .10);
    }

    .btn-main {
        min-height: 44px;
        border-radius: 12px;
        padding: 0 16px;
        font-weight: 800;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    .status-pill {
        display: inline-flex;
        align-items: center;
        padding: 7px 12px;
        border-radius: 999px;
        font-size: 13px;
        font-weight: 800;
    }
</style>

<div class="plan-page p-4 md:p-6">

    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-5">
        <div>
            <h1 class="text-2xl font-black text-gray-900">Erin Loan Plans</h1>
            <p class="text-gray-500 mt-1">Create, edit, delete and manage loan plans</p>
        </div>

        <a href="{{ route('admin.erin-loan-plans.create') }}"
           class="btn-main bg-[#DD3532] text-white">
            <i class="bi bi-plus-circle"></i>
            Add New Plan
        </a>
    </div>

    @if(session('success'))
        <div class="mb-4 rounded-lg bg-green-50 border border-green-200 text-green-800 px-4 py-3">
            {{ session('success') }}
        </div>
    @endif

    @if(session('error'))
        <div class="mb-4 rounded-lg bg-red-50 border border-red-200 text-red-700 px-4 py-3">
            {{ session('error') }}
        </div>
    @endif

    <div class="plan-card p-4 mb-5">
        <form method="GET" action="{{ route('admin.erin-loan-plans.index') }}" class="flex flex-col md:flex-row gap-3">
            <div class="relative flex-1">
                <span class="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400">
                    <i class="bi bi-search"></i>
                </span>

                <input type="text"
                       name="q"
                       value="{{ $q ?? '' }}"
                       class="plan-input w-full pl-11 pr-4"
                       placeholder="Search by term, amount, installment">
            </div>

            <select name="per" class="plan-input px-4">
                @foreach([10, 20, 50, 100] as $n)
                    <option value="{{ $n }}" @selected(($per ?? 20) == $n)>{{ $n }}</option>
                @endforeach
            </select>

            <button class="btn-main bg-gray-900 text-white">
                Search
            </button>
        </form>
    </div>

    <div class="plan-card overflow-hidden">
        <div class="overflow-x-auto">
            <table class="min-w-full text-sm">
                <thead class="bg-gray-50 text-gray-800">
                    <tr class="text-left">
                        <th class="px-5 py-4 font-bold">ID</th>
                        <th class="px-5 py-4 font-bold">Term</th>
                        <th class="px-5 py-4 font-bold">Amount</th>
                        <th class="px-5 py-4 font-bold">Monthly Installment</th>
                        <th class="px-5 py-4 font-bold">Interest</th>
                        <th class="px-5 py-4 font-bold">Processing</th>
                        <th class="px-5 py-4 font-bold">Status</th>
                        <th class="px-5 py-4 font-bold text-right">Actions</th>
                    </tr>
                </thead>

                <tbody class="divide-y divide-gray-200">
                    @forelse($plans as $plan)
                        <tr>
                            <td class="px-5 py-4 font-bold">
                                #{{ $plan->id }}
                            </td>

                            <td class="px-5 py-4">
                                {{ $plan->term_months }} Months
                            </td>

                            <td class="px-5 py-4 font-bold">
                                ৳{{ number_format((float) $plan->amount, 0) }}
                            </td>

                            <td class="px-5 py-4 font-bold text-blue-700">
                                ৳{{ number_format((float) $plan->monthly_installment, 0) }}
                            </td>

                            <td class="px-5 py-4">
                                {{ number_format((float) $plan->interest_rate_annual, 2) }}%
                            </td>

                            <td class="px-5 py-4">
                                {{ $plan->processing_time_hours }} Hours
                            </td>

                            <td class="px-5 py-4">
                                @if($plan->is_active)
                                    <span class="status-pill bg-green-50 text-green-700 border border-green-200">Active</span>
                                @else
                                    <span class="status-pill bg-red-50 text-red-700 border border-red-200">Inactive</span>
                                @endif
                            </td>

                            <td class="px-5 py-4">
                                <div class="flex justify-end gap-2">
                                    <a href="{{ route('admin.erin-loan-plans.edit', $plan) }}"
                                       class="btn-main bg-blue-700 text-white">
                                        <i class="bi bi-pencil"></i>
                                        Edit
                                    </a>

                                    <form method="POST" action="{{ route('admin.erin-loan-plans.toggle', $plan) }}">
                                        @csrf
                                        <button type="submit"
                                                class="btn-main {{ $plan->is_active ? 'bg-yellow-500 text-white' : 'bg-green-600 text-white' }}">
                                            {{ $plan->is_active ? 'Inactive' : 'Active' }}
                                        </button>
                                    </form>

                                    <form method="POST"
                                          action="{{ route('admin.erin-loan-plans.destroy', $plan) }}"
                                          onsubmit="return confirm('Delete this loan plan?')">
                                        @csrf
                                        @method('DELETE')

                                        <button type="submit" class="btn-main bg-red-600 text-white">
                                            <i class="bi bi-trash"></i>
                                            Delete
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="px-5 py-10 text-center text-gray-500">
                                No loan plans found.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="border-t bg-gray-50 px-5 py-4 flex flex-col md:flex-row md:items-center md:justify-between gap-3">
            <div class="text-sm text-gray-600">
                Showing {{ $plans->firstItem() ?? 0 }} - {{ $plans->lastItem() ?? 0 }} of {{ $plans->total() }}
            </div>

            <div>
                {{ $plans->links() }}
            </div>
        </div>
    </div>
</div>

@endsection