@extends('layouts.app')

@section('title', __('dashboard.material_history') . ' - ' . $rawMaterial->name)
@section('page_heading', $rawMaterial->name)


@section('content')
<div style="display:flex;align-items:center;justify-content:flex-end;gap:.5rem;margin-bottom:1.25rem">
    @can('edit raw materials')
    <a href="{{ route('dashboard.raw-materials.edit', $rawMaterial) }}" class="app-btn app-btn--secondary app-btn--sm">
        <i class="fa-solid fa-pen"></i> {{ __('dashboard.edit') }}
    </a>
    @endcan
    <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="app-grid gap-4">
    <div class="xl:col-span-4">
        <div class="workspace-shell mb-4">
            <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.material_details') }}</h2></div>
                    </div>
                </div>
                <div class="flex flex-col gap-3 mt-4">
                    <div class="flex justify-between">
                        <span class="text-slate-500 dark:text-slate-400 font-bold" style="font-size:.8rem">{{ __('dashboard.name') }}</span>
                        <span class="font-bold">{{ $rawMaterial->name }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-slate-500 dark:text-slate-400 font-bold" style="font-size:.8rem">{{ __('dashboard.current_stock') }}</span>
                        <span class="font-bold text-base">{{ $rawMaterial->stock }} {{ $rawMaterial->unitOfMeasure->name }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-slate-500 dark:text-slate-400 font-bold" style="font-size:.8rem">تكلفة الوحدة</span>
                        <span class="font-bold">{{ number_format((float)$rawMaterial->unit_cost, 2) }}</span>
                    </div>
                </div>
            </div>
        </div>

        <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-arrows-rotate"></i></span>
                        <div class="collection-card__title"><h2>{{ __('dashboard.update_stock_quantity') }}</h2></div>
                    </div>
                </div>
                <form action="{{ route('dashboard.raw-materials.updateStock', $rawMaterial) }}" method="POST" class="mt-4">
                    @csrf
                    <div class="app-grid gap-3">
                        <div class="col-span-12">
                            <label class="app-label font-bold required">{{ __('dashboard.transaction_type') }}</label>
                            <select name="type" class="app-input app-select" required>
                                <option value="add">{{ __('dashboard.add_quantity') }}</option>
                                <option value="subtract">{{ __('dashboard.subtract_quantity') }}</option>
                            </select>
                        </div>
                        <div class="col-span-12">
                            <label class="app-label font-bold required">{{ __('dashboard.quantity') }}</label>
                            <input type="number" step="0.01" name="quantity" class="app-input" required>
                        </div>
                        <div class="col-span-12">
                            <label class="app-label font-bold">{{ __('dashboard.notes') }}</label>
                            <textarea name="notes" class="app-input" rows="2"></textarea>
                        </div>
                        <div class="col-span-12 flex justify-end">
                            <button type="submit" class="app-btn app-btn--primary">{{ __('dashboard.execute') }}</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="xl:col-span-8">
        <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-clock-rotate-left"></i></span>
                        <div class="collection-card__title"><h2>{{ __('dashboard.stock_transaction_history') }}</h2></div>
                    </div>
                </div>
                <div class="app-table-wrap mt-4">
                    <table class="app-table app-table--striped collection-table">
                        <thead>
                            <tr>
                                <th>{{ __('dashboard.date') }}</th>
                                <th>{{ __('dashboard.type') }}</th>
                                <th>{{ __('dashboard.quantity') }}</th>
                                <th>{{ __('dashboard.user') }}</th>
                                <th>{{ __('dashboard.notes') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($transactions as $transaction)
                            <tr>
                                <td class="text-slate-500 dark:text-slate-400" style="font-size:.8rem">{{ $transaction->created_at->format('Y-m-d H:i') }}</td>
                                <td>
                                    @if($transaction->type === 'add')
                                        <span class="app-badge app-badge--success">{{ __('dashboard.add') }}</span>
                                    @else
                                        <span class="app-badge app-badge--danger">{{ __('dashboard.subtract') }}</span>
                                    @endif
                                </td>
                                <td class="font-bold">{{ $transaction->quantity }}</td>
                                <td>{{ $transaction->user->name ?? __('dashboard.system') }}</td>
                                <td class="text-slate-500 dark:text-slate-400">{{ $transaction->notes }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <div class="mt-4">{{ $transactions->links() }}</div>
            </div>
        </div>
    </div>
</div>
@endsection