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

@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-box" style="color:var(--c-primary)"></i>
            {{ __('dashboard.sidebar_raw_materials') }}
            <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($materials->total()) }}</span>
        </div>
        <div style="display:flex;align-items:center;gap:.5rem;flex-wrap:wrap">
            <div style="display:flex;border:1px solid var(--border);border-radius:8px;overflow:hidden">
                @foreach(['active' => __('dashboard.status_active'), 'trashed' => __('dashboard.status_deleted'), 'all' => __('dashboard.all')] as $val => $lbl)
                <a href="{{ route('dashboard.raw-materials.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>
            <form method="GET" action="{{ route('dashboard.raw-materials.index') }}" style="display:flex;align-items:center;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--surface-50)">
                <input type="hidden" name="state" value="{{ $currentState }}">
                <span style="padding:0 .6rem;color:var(--text-muted);font-size:.8rem"><i class="fa-solid fa-magnifying-glass"></i></span>
                <input type="text" name="search" value="{{ request('search') }}" placeholder="{{ __('dashboard.Search') }}..." style="border:0;outline:none;background:transparent;font-size:.8rem;font-weight:600;color:var(--text-primary);padding:.4rem 0;min-width:150px">
                <button type="submit" style="padding:0 .6rem;border:0;background:transparent;color:var(--text-muted);cursor:pointer"><i class="fa-solid fa-circle-arrow-left"></i></button>
            </form>
            @can('create raw materials')
            <a href="{{ route('dashboard.raw-materials.purchase') }}" class="app-btn app-btn--secondary app-btn--sm"><i class="fa-solid fa-truck me-1"></i>{{ __('dashboard.purchase_request') }}</a>
            <a href="{{ route('dashboard.raw-materials.create') }}" class="app-btn app-btn--primary app-btn--sm"><i class="fa-solid fa-plus me-1"></i>{{ __('dashboard.add_new_material') }}</a>
            @endcan
        </div>
    </div>

    @if($materials->isEmpty())
        <div style="padding:3rem;text-align:center">@include('layouts.partials.index-empty-state',['icon'=>'fa-solid fa-box','title'=>__('dashboard.no_materials_found'),'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)">
                @foreach(['#',__('dashboard.name'),__('dashboard.unit_of_measure'),__('dashboard.current_stock'),'تكلفة الوحدة'] as $h)
                <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;white-space:nowrap">{{ $h }}</th>
                @endforeach
                <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($materials as $m)
                <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)">{{ $m->name }}</div>
                        @if($m->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">{{ __('dashboard.deleted') }}</span>@endif
                    </td>
                    <td style="padding:.875rem 1.25rem;color:var(--text-secondary)">{{ $m->unitOfMeasure->name }}</td>
                    <td style="padding:.875rem 1.25rem">
                        <span style="display:inline-flex;align-items:center;padding:.2rem .6rem;border-radius:999px;font-size:.7rem;font-weight:700;background:{{ $m->stock > 0 ? '#f0fdf4' : '#fef2f2' }};color:{{ $m->stock > 0 ? '#16a34a' : '#dc2626' }}">{{ $m->stock }}</span>
                    </td>
                    <td style="padding:.875rem 1.25rem;font-weight:800;color:var(--text-primary)">{{ number_format((float)$m->unit_cost, 2) }}</td>
                    <td style="padding:.875rem 1.25rem;text-align:end">
                        @if($m->trashed())
                            <form action="{{ route('dashboard.trash.restore', ['type'=>'raw_materials','id'=>$m->id]) }}" method="POST" style="display:inline">@csrf<button type="submit" class="app-btn app-btn--secondary app-btn--sm">{{ __('dashboard.restore') }}</button></form>
                        @else
                        <div class="custom-dropdown">
                            <button class="custom-dropdown__toggle">{{ __('dashboard.actions') }}</button>
                            <div class="custom-dropdown__menu custom-dropdown__menu--end">
                                @can('view raw materials')<a href="{{ route('dashboard.raw-materials.show', $m) }}" class="custom-dropdown__item"><i class="fa-solid fa-clock-rotate-left me-2"></i>{{ __('dashboard.history') }}</a>@endcan
                                @can('edit raw materials')<a href="{{ route('dashboard.raw-materials.edit', $m) }}" class="custom-dropdown__item"><i class="fa-solid fa-pen me-2"></i>{{ __('dashboard.edit') }}</a>@endcan
                                @can('delete raw materials')
                                <form action="{{ route('dashboard.raw-materials.destroy', $m) }}" 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
                            </div>
                        </div>
                        @endif
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    <div style="padding:.75rem 1.25rem;border-top:1px solid var(--border-subtle)">{{ $materials->appends(request()->query())->links() }}</div>
    @endif
</div>
@endsection