@extends('layouts.app')

@section('title', __('dashboard.add_new_material'))
@section('page_heading', __('dashboard.add_new_material'))


@section('content')
<div style="display:flex;align-items:center;justify-content:flex-end;gap:.5rem;margin-bottom:1.25rem">
    <a href="{{ route('dashboard.raw-materials.index') }}" class="app-btn app-btn--secondary app-btn--sm">
        <i class="fa-solid fa-arrow-right"></i> المواد الخام
    </a>
</div>

@include('layouts.partials.workspace-page-styles')

<div class="workspace-shell">
    <div class="workspace-body">
        <div class="collection-card__header">
            <div class="collection-card__intro">
                <span class="collection-card__icon"><i class="fa-solid fa-boxes-stacked"></i></span>
                <div class="collection-card__title">
                    <h2>{{ __('dashboard.add_new_material') }}</h2>
                    <p>أضف مادة خام جديدة وحدد وحدة القياس والمخزون الافتتاحي.</p>
                </div>
            </div>
        </div>

        <form action="{{ route('dashboard.raw-materials.store') }}" method="POST" class="mt-4">
            @csrf

            <div class="app-grid gap-4">
                <div class="md:col-span-6">
                    <label class="app-label font-bold required">{{ __('dashboard.material_name') }}</label>
                    <input type="text" class="app-input @error('name') app-input--invalid @enderror" name="name" value="{{ old('name') }}" required>
                    @error('name')<div class="app-field-error">{{ $message }}</div>@enderror
                </div>

                <div class="md:col-span-6">
                    <label class="app-label font-bold required">{{ __('dashboard.unit_of_measure') }}</label>
                    <select class="app-input app-select @error('unit_of_measure_id') app-input--invalid @enderror" name="unit_of_measure_id" required>
                        <option value="">{{ __('dashboard.select_unit') }}</option>
                        @foreach($units as $unit)
                            <option value="{{ $unit->id }}" @selected(old('unit_of_measure_id') == $unit->id)>{{ $unit->name }}</option>
                        @endforeach
                    </select>
                    @error('unit_of_measure_id')<div class="app-field-error">{{ $message }}</div>@enderror
                </div>

                <div class="md:col-span-6">
                    <label class="app-label font-bold">{{ __('dashboard.initial_stock') }}</label>
                    <input type="number" step="0.01" min="0" class="app-input @error('stock') app-input--invalid @enderror" name="stock" value="{{ old('stock', 0) }}">
                    @error('stock')<div class="app-field-error">{{ $message }}</div>@enderror
                    <div class="text-xs text-slate-500 dark:text-slate-400">يمكنك تركه 0 إذا كنت ستضيف المخزون لاحقًا.</div>
                </div>

                <div class="md:col-span-6">
                    <label class="app-label font-bold">تكلفة الوحدة</label>
                    <input type="number" step="0.01" min="0" class="app-input @error('unit_cost') app-input--invalid @enderror" name="unit_cost" value="{{ old('unit_cost', 0) }}">
                    @error('unit_cost')<div class="app-field-error">{{ $message }}</div>@enderror
                    <div class="text-xs text-slate-500 dark:text-slate-400">تُستخدم في أوامر التصنيع لحساب تكلفة المواد.</div>
                </div>
            </div>

            <div class="flex justify-end gap-2 mt-5">
                <a href="{{ route('dashboard.raw-materials.index') }}" class="app-btn app-btn--secondary">{{ __('dashboard.cancel') }}</a>
                <button type="submit" class="app-btn app-btn--primary">{{ __('dashboard.save') }}</button>
            </div>
        </form>
    </div>
</div>
@endsection