@extends('layouts.app')

@section('title', 'الماكينات - '.config('app.name'))

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h1 class="h4 mb-1">الماكينات</h1>
        <p class="text-muted mb-0 small">تعريف وتجميع الماكينات داخل خطوط الإنتاج</p>
    </div>
    <a href="{{ route('machines.create') }}" class="btn btn-primary">
        إضافة ماكينة
    </a>
</div>

<div class="card shadow-sm">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="table-light">
                    <tr>
                        <th>الكود</th>
                        <th>اسم الماكينة</th>
                        <th>خط الإنتاج</th>
                        <th>الحالة</th>
                        <th scope="col" class="text-center" style="width: 1%; white-space: nowrap;">الإجراءات</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($machines as $machine)
                        <tr>
                            <td>
                                <span class="badge bg-secondary">{{ $machine->code }}</span>
                            </td>
                            <td>{{ $machine->name_ar }}</td>
                            <td>
                                @if($machine->productionLine)
                                    {{ $machine->productionLine->name_ar }} ({{ $machine->productionLine->code }})
                                @else
                                    <span class="text-muted small">غير مرتبط بخط</span>
                                @endif
                            </td>
                            <td>
                                @if($machine->status === 'active')
                                    <span class="badge bg-success">نشطة</span>
                                @elseif($machine->status === 'maintenance')
                                    <span class="badge bg-warning text-dark">صيانة</span>
                                @else
                                    <span class="badge bg-secondary">متوقفة</span>
                                @endif
                            </td>
                            <td class="text-center align-middle">
                                @php $machineMenuId = 'machine-actions-'.$machine->id; @endphp
                                <x-erp-actions-dropdown :menu-id="$machineMenuId">
                                    <a href="{{ route('machines.edit', $machine) }}"
                                       class="erp-menu-item flex items-center gap-3 px-3 py-2.5 text-sm text-gray-800 transition hover:bg-gray-50 text-decoration-none"
                                       role="menuitem">
                                        <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-gray-100 text-gray-600">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-9.5 9.5a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168zM11.207 2L3 10.207V12h1.793L13 3.793z"/></svg>
                                        </span>
                                        <span class="flex-1 text-right font-medium leading-snug">تعديل الماكينة</span>
                                    </a>
                                    <div class="mx-2 my-2 border-t border-gray-100"></div>
                                    <form action="{{ route('machines.destroy', $machine) }}" method="POST" class="m-0" onsubmit="return confirm('حذف هذه الماكينة؟');">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit"
                                                class="erp-menu-item flex w-full items-center gap-3 px-3 py-2.5 text-right text-sm font-medium text-red-700 transition hover:bg-red-50"
                                                role="menuitem">
                                            <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-red-50 text-red-600">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z"/><path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z"/></svg>
                                            </span>
                                            <span class="flex-1 leading-snug">حذف الماكينة</span>
                                        </button>
                                    </form>
                                </x-erp-actions-dropdown>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="text-center text-muted py-4">
                                لا توجد ماكينات مسجلة. <a href="{{ route('machines.create') }}">أضف ماكينة جديدة</a>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection