{{--
=====================================================
Etebarit - by Gisoo Web Solutions
------------------------------------------------------
Gisoo.net
------------------------------------------------------
Copyright (c) 2026 Gisoo Web Solutions
=====================================================
This code is protected by copyright
=====================================================
File: history.blade.php
------------------------------------------------------
Use: The user's credit-request history table, ported
     from the approved design. Each row links to that
     request's status page.
=====================================================
--}}

@extends('layouts.user')

@section('title', __('front.credit.history_title'))

@section('breadcrumb')
    <x-ui.breadcrumb :items="[
        ['label' => __('admin.breadcrumb.home'), 'url' => route('account.credit.form')],
        ['label' => __('front.credit.breadcrumb'), 'url' => route('account.credit.form')],
        ['label' => __('front.credit.tab_history')],
    ]" />
@endsection

@section('page')
    <div class="mb-6 flex flex-wrap items-end justify-between gap-4">
        <div>
            <h1 class="mb-1 text-2xl font-bold tracking-tight">{{ __('front.credit.history_title') }}</h1>
            <p class="text-sm text-ink-muted">{{ __('front.credit.subtitle') }}</p>
        </div>
        <div class="inline-flex gap-1 rounded-xl bg-[#eeedf3] p-1">
            <a href="{{ route('account.credit.form') }}" class="rounded-lg px-4 py-2 text-[13px] font-bold text-ink-muted transition hover:text-primary-600">{{ __('front.credit.tab_new') }}</a>
            <span class="rounded-lg bg-white px-4 py-2 text-[13px] font-bold text-primary-600 shadow-sm">{{ __('front.credit.tab_history') }}</span>
        </div>
    </div>

    <div class="rounded-[18px] border border-line bg-white p-[22px]">
        @if ($requests->isEmpty())
            <div class="rounded-2xl border border-dashed border-[#d9d6e6] px-6 py-12 text-center text-sm text-ink-muted">
                {{ __('front.credit.history_empty') }}
            </div>
        @else
            <div class="overflow-x-auto rounded-[14px] border border-[#f0eff5]">
                <table class="w-full min-w-[720px] border-collapse text-right text-[13.5px]">
                    <thead>
                        <tr class="bg-[#faf9fd] text-ink-muted">
                            <th class="px-[18px] py-3.5 font-bold">{{ __('front.credit.columns.code') }}</th>
                            <th class="px-[18px] py-3.5 font-bold">{{ __('front.credit.columns.collateral') }}</th>
                            <th class="px-[18px] py-3.5 font-bold">{{ __('front.credit.columns.amount') }}</th>
                            <th class="px-[18px] py-3.5 font-bold">{{ __('front.credit.columns.plan') }}</th>
                            <th class="px-[18px] py-3.5 font-bold">{{ __('front.credit.columns.date') }}</th>
                            <th class="px-[18px] py-3.5 font-bold">{{ __('front.credit.columns.status') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($requests as $creditRequest)
                            <tr class="cursor-pointer border-t border-[#f0eff5] transition hover:bg-[#faf9fd]"
                                x-data
                                x-on:click="window.location.href = @js(route('account.credit.show', $creditRequest))">
                                <td class="px-[18px] py-3.5 text-right text-ink-soft" dir="ltr">{{ $creditRequest->code }}</td>
                                <td class="px-[18px] py-3.5">{{ __("front.credit.collaterals.{$creditRequest->collateral_type}") }}</td>
                                <td class="px-[18px] py-3.5 font-bold">@toman($creditRequest->amount) {{ __('front.credit.toman') }}</td>
                                <td class="px-[18px] py-3.5 text-ink-soft">{{ __('front.credit.plan_summary', [
                                    'plan' => $creditRequest->plan->name,
                                    'months' => \App\Support\Format::persianDigits((string) $creditRequest->plan->months),
                                ]) }}</td>
                                <td class="px-[18px] py-3.5 text-ink-soft">@jalaliDateTime($creditRequest->created_at)</td>
                                <td class="px-[18px] py-3.5">
                                    <span @class([
                                        'rounded-2xl px-[11px] py-[5px] text-xs font-bold',
                                        'bg-[#fff5e6] text-amber-600' => $creditRequest->status === \App\Models\CreditRequest::STATUS_PENDING,
                                        'bg-[#eef2ff] text-indigo-600' => $creditRequest->status === \App\Models\CreditRequest::STATUS_APPROVED,
                                        'bg-[#e7f7ee] text-green-600' => $creditRequest->status === \App\Models\CreditRequest::STATUS_ACTIVE,
                                        'bg-secondary-50 text-secondary-500' => $creditRequest->status === \App\Models\CreditRequest::STATUS_REJECTED,
                                        'bg-[#f1f0f5] text-ink-muted' => $creditRequest->status === \App\Models\CreditRequest::STATUS_EXPIRED,
                                    ])>
                                        {{ __("front.credit.statuses.{$creditRequest->status}") }}
                                    </span>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <a href="{{ route('account.credit.form') }}" class="mt-[18px] inline-flex items-center gap-2 rounded-xl bg-primary-600 px-[22px] py-3 text-sm font-bold text-white shadow-lg shadow-primary-600/25 transition hover:bg-primary-700">
                <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
                {{ __('front.credit.new_request') }}
            </a>
        @endif
    </div>
@endsection