@extends('panel.layouts.master')
@section('content')
    <div
            class="content transition-[margin,width] duration-100 rtl:xl:pr-3.5 ltr:xl:pl-3.5 pt-[54px] pb-16 relative z-10 group mode content--compact rtl:xl:mr-[275px] ltr:xl:ml-[275px] mode--light rtl:[&.content--compact]:xl:mr-[91px] ltr:[&.content--compact]:xl:ml-[91px]">
        <div class="px-5 mt-16">
            <div class="container">
                <div class="grid grid-cols-12 gap-x-6 gap-y-10">
                    <div class="col-span-12">
                        <div class="flex flex-col gap-y-3 md:h-10 md:flex-row md:items-center">
                            <div class="text-base font-medium group-[.mode--light]:text-white">
                                تاریخچه
                            </div>
                        </div>
                        <div class="mt-3.5 flex flex-col gap-8">
                            <div class="box box--stacked flex flex-col">
                                <div style="overflow: scroll;" class="p-5">
                                    @if (!$histories->isEmpty())
                                        @foreach ($histories as $item)
                                            @php
                                                $type = App\Models\Commission::TYPE[$item->type] ?? '';
                                                $color = 'danger';
                                                $icon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="corner-right-down" class="lucide lucide-alert-octagon stroke-[1] rtl:ml-2 ltr:mr-2 h-6 w-6"><polyline points="10 15 15 20 20 15"></polyline><path d="M4 4h7a4 4 0 0 1 4 4v12"></path></svg>';
                                                $word = 'از';

                                                if ($item->type == 'increase') {
                                                    $color = 'success';
                                                    $icon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="corner-right-up" class="lucide lucide-alert-octagon stroke-[1] rtl:ml-2 ltr:mr-2 h-6 w-6"><polyline points="10 9 15 4 20 9"></polyline><path d="M4 20h7a4 4 0 0 0 4-4V4"></path></svg>';
                                                    $word = 'به';
                                                }
                                            @endphp
                                            <div role="alert"
                                                 class="alert relative border rounded-md px-5 py-4 bg-{{ $color }} border-{{ $color }} text-white dark:border-{{ $color }} mb-2 flex items-center">
                                                {!! $icon !!}
                                                <span> پورسانت </span>
                                                <span> {{ $user->full_name }} </span>
                                                <span> به مبلغ </span>
                                                <span> {{ number_format($item->amount) }} </span>
                                                <span> تومان </span>
                                                <span>{{ $type }} </span>
                                                <span>یافت</span>
                                                <span>در تاریخ</span>
                                                <span> {{$item->from}} </span>
                                            </div>
                                        @endforeach
                                    @else
                                        <p class="text-center" style="opacity: 70%">تاریخچه موجود نمی باشد!</p>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection