@extends('layouts.app')
@section('title', __('dashboard.sidebar_units_measure'))
@section('page_heading', __('dashboard.sidebar_units_measure'))

@section('content')
@php $currentState = $state ?? request('state', 'active'); @endphp

<div style="background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);overflow:hidden">
    <div style="display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.875rem 1.25rem;border-bottom:1px solid var(--border-subtle);flex-wrap:wrap">
        <div style="display:flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:800;color:var(--text-primary)">
            <i class="fa-solid fa-ruler" style="color:var(--c-primary)"></i>
            {{ __('dashboard.units_of_measure') }}
            <span style="font-size:.7rem;font-weight:700;padding:.15rem .55rem;border-radius:999px;background:var(--c-primary-bg);color:var(--c-primary)">{{ number_format($units->total()) }}</span>
        </div>
        <div style="display:flex;align-items:center;gap:.5rem">
            <div style="display:flex;border:1px solid var(--border);border-radius:8px;overflow:hidden">
                @foreach(['active'=>'النشط','trashed'=>'المحذوف','all'=>'الكل'] as $val=>$lbl)
                <a href="{{ route('dashboard.units-of-measure.index', array_merge(request()->except('page'), ['state'=>$val])) }}"
                   style="padding:.3rem .75rem;font-size:.75rem;font-weight:700;text-decoration:none;{{ $currentState===$val ? 'background:var(--c-primary);color:#fff' : 'color:var(--text-muted)' }}">{{ $lbl }}</a>
                @endforeach
            </div>
            @can('create units of measure')
            <a href="{{ route('dashboard.units-of-measure.create') }}" class="app-btn app-btn--primary app-btn--sm"><i class="fa-solid fa-plus me-1"></i>{{ __('dashboard.add_new_unit') }}</a>
            @endcan
        </div>
    </div>

    @if($units->isEmpty())
        <div style="padding:3rem;text-align:center">@include('layouts.partials.index-empty-state',['icon'=>'fa-solid fa-ruler','title'=>'لا توجد وحدات قياس','message'=>''])</div>
    @else
    <div style="overflow-x:auto">
        <table style="width:100%;border-collapse: collapse;font-size:.83rem">
            <thead><tr style="background:var(--border-subtle)">
                <th style="padding:.75rem 1.25rem;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);text-align:start">#</th>
                <th style="padding:.75rem 1.25rem;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);text-align:start">{{ __('dashboard.name') }}</th>
                <th style="padding:.75rem 1.25rem;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);text-align:start">{{ __('dashboard.created_at') }}</th>
                <th style="padding:.75rem 1.25rem;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);text-align:end">{{ __('dashboard.actions') }}</th>
            </tr></thead>
            <tbody>
                @foreach($units as $unit)
                <tr style="border-top:1px solid var(--border-subtle)" onmouseover="this.style.background='var(--border-subtle)'" onmouseout="this.style.background=''">
                    <td style="padding:.875rem 1.25rem;font-weight:700;color:var(--text-muted);font-size:.78rem">{{ $loop->iteration }}</td>
                    <td style="padding:.875rem 1.25rem">
                        <div style="font-weight:800;color:var(--text-primary)">{{ $unit->name }}</div>
                        @if($unit->trashed())<span style="display:inline-flex;align-items:center;padding:.15rem .5rem;border-radius:999px;font-size:.65rem;font-weight:700;background:#fef2f2;color:#dc2626;margin-top:.2rem">محذوف</span>@endif
                    </td>
                    <td style="padding:.875rem 1.25rem;font-size:.78rem;color:var(--text-muted)">{{ $unit->created_at->format('Y-m-d') }}</td>
                    <td style="padding:.875rem 1.25rem;text-align:end">
                        @canany(['edit units of measure','delete units of measure'])
                        <div class="custom-dropdown">
                            <button class="custom-dropdown__toggle">{{ __('dashboard.actions') }}</button>
                            <div class="custom-dropdown__menu custom-dropdown__menu--end">
                                @if($unit->trashed())
                                    <form action="{{ route('dashboard.trash.restore', ['type'=>'units','id'=>$unit->id]) }}" method="POST">@csrf<button type="submit" class="custom-dropdown__item custom-dropdown__item--success"><i class="fa-solid fa-rotate-left me-2"></i>استرجاع</button></form>
                                @else
                                    @can('edit units of measure')<a href="{{ route('dashboard.units-of-measure.edit', $unit) }}" class="custom-dropdown__item"><i class="fa-solid fa-pen me-2"></i>{{ __('dashboard.edit') }}</a>@endcan
                                    @can('delete units of measure')
                                    <form action="{{ route('dashboard.units-of-measure.destroy', $unit) }}" method="POST">@csrf @method('DELETE')<button type="submit" class="custom-dropdown__item custom-dropdown__item--danger" data-confirm-delete="{{ __('dashboard.are_you_sure') }}"><i class="fa-solid fa-trash me-2"></i>{{ __('dashboard.delete') }}</button></form>
                                    @endcan
                                @endif
                            </div>
                        </div>
                        @endcanany
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    <div style="padding:.75rem 1.25rem;border-top:1px solid var(--border-subtle)">{{ $units->appends(request()->query())->links() }}</div>
    @endif
</div>
@endsection