@extends('admin.layouts.app')

@section('title', 'إدارة قناني الغاز')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <h3 class="card-title">
                            <i class="fas fa-fire text-danger"></i>
                            إدارة قناني الغاز
                        </h3>
                        <div>
                            <a href="{{ route('admin.gas.create') }}" class="btn btn-primary">
                                <i class="fas fa-plus"></i>
                                إضافة قنينة جديدة
                            </a>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <!-- فلترة وبحث -->
                    <div class="row mb-3">
                        <div class="col-md-3">
                            <select class="form-control" id="filter-type">
                                <option value="">جميع الأنواع</option>
                                <option value="بلاستك">بلاستك</option>
                                <option value="حديد">حديد</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <select class="form-control" id="filter-size">
                                <option value="">جميع الأحجام</option>
                                <option value="12">12 كجم</option>
                                <option value="25">25 كجم</option>
                                <option value="50">50 كجم</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <select class="form-control" id="filter-status">
                                <option value="">جميع الحالات</option>
                                <option value="1">متوفر</option>
                                <option value="0">غير متوفر</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <input type="text" class="form-control" id="search" placeholder="البحث...">
                        </div>
                    </div>

                    <!-- جدول قناني الغاز -->
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped">
                            <thead class="bg-primary text-white">
                                <tr>
                                    <th>#</th>
                                    <th>الصورة</th>
                                    <th>الاسم</th>
                                    <th>النوع</th>
                                    <th>المادة</th>
                                    <th>الحجم</th>
                                    <th>الوزن</th>
                                    <th>السعر (دينار عراقي)</th>
                                    <th>الكمية المتوفرة</th>
                                    <th>الحالة</th>
                                    <th>الإجراءات</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($cylinders as $cylinder)
                                <tr>
                                    <td>{{ $cylinder->id }}</td>
                                    <td>
                                        @if($cylinder->image)
                                            <img src="{{ asset('storage/' . $cylinder->image) }}"
                                                 alt="{{ $cylinder->name }}"
                                                 class="img-thumbnail"
                                                 style="width: 50px; height: 50px;">
                                        @else
                                            <div class="bg-secondary text-white d-flex align-items-center justify-content-center"
                                                 style="width: 50px; height: 50px;">
                                                <i class="fas fa-fire"></i>
                                            </div>
                                        @endif
                                    </td>
                                    <td>
                                        <strong>{{ $cylinder->name }}</strong>
                                        @if($cylinder->brand)
                                            <br><small class="text-muted">{{ $cylinder->brand }}</small>
                                        @endif
                                    </td>
                                    <td>
                                        <span class="badge badge-info">{{ $cylinder->type }}</span>
                                    </td>
                                    <td>
                                        @if($cylinder->material == 'بلاستك')
                                            <span class="badge badge-success">
                                                <i class="fas fa-recycle"></i> بلاستك
                                            </span>
                                        @else
                                            <span class="badge badge-warning">
                                                <i class="fas fa-cog"></i> حديد
                                            </span>
                                        @endif
                                    </td>
                                    <td>
                                        <span class="badge badge-primary">{{ $cylinder->size }} كجم</span>
                                    </td>
                                    <td>{{ $cylinder->weight_kg }} كجم</td>
                                    <td>
                                        <strong class="text-success">
                                            {{ number_format($cylinder->price, 0) }} د.ع
                                        </strong>
                                    </td>
                                    <td>
                                        @if($cylinder->stock_quantity > 0)
                                            <span class="badge badge-success">{{ $cylinder->stock_quantity }}</span>
                                        @else
                                            <span class="badge badge-danger">نفذت</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if($cylinder->is_available)
                                            <span class="badge badge-success">متوفر</span>
                                        @else
                                            <span class="badge badge-danger">غير متوفر</span>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="btn-group" role="group">
                                            <a href="{{ route('admin.gas.show', $cylinder->id) }}"
                                               class="btn btn-sm btn-info"
                                               title="عرض">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            <a href="{{ route('admin.gas.edit', $cylinder->id) }}"
                                               class="btn btn-sm btn-warning"
                                               title="تعديل">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                            <button type="button"
                                                    class="btn btn-sm btn-danger"
                                                    title="حذف"
                                                    onclick="deleteCylinder({{ $cylinder->id }})">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="11" class="text-center text-muted">
                                        <i class="fas fa-info-circle"></i>
                                        لا توجد قناني غاز مسجلة
                                    </td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    <!-- ترقيم الصفحات -->
                    <div class="d-flex justify-content-between align-items-center mt-4">
                        <div class="text-muted small pagination-info">
                            عرض {{ $cylinders->firstItem() ?? 0 }} إلى {{ $cylinders->lastItem() ?? 0 }} من أصل {{ $cylinders->total() }} قنينة غاز
                        </div>
                        <div class="d-flex justify-content-center">
                            {{ $cylinders->appends(request()->query())->links('pagination::bootstrap-4') }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- نموذج حذف قنينة -->
<form id="delete-form" method="POST" style="display: none;">
    @csrf
    @method('DELETE')
</form>
@endsection

@section('scripts')
<script>
function deleteCylinder(id) {
    if (confirm('هل أنت متأكد من حذف هذه القنينة؟')) {
        const form = document.getElementById('delete-form');
        form.action = `/admin/gas/${id}`;
        form.submit();
    }
}

// فلترة الجدول
document.addEventListener('DOMContentLoaded', function() {
    const filterType = document.getElementById('filter-type');
    const filterSize = document.getElementById('filter-size');
    const filterStatus = document.getElementById('filter-status');
    const search = document.getElementById('search');

    function filterTable() {
        const typeValue = filterType.value;
        const sizeValue = filterSize.value;
        const statusValue = filterStatus.value;
        const searchValue = search.value.toLowerCase();

        const rows = document.querySelectorAll('tbody tr');

        rows.forEach(row => {
            let show = true;

            // فلترة حسب النوع
            if (typeValue && row.cells[3].textContent.trim() !== typeValue) {
                show = false;
            }

            // فلترة حسب الحجم
            if (sizeValue && !row.cells[5].textContent.includes(sizeValue)) {
                show = false;
            }

            // فلترة حسب الحالة
            if (statusValue !== '') {
                const isAvailable = row.cells[8].textContent.includes('متوفر');
                if ((statusValue === '1' && !isAvailable) || (statusValue === '0' && isAvailable)) {
                    show = false;
                }
            }

            // فلترة حسب البحث
            if (searchValue) {
                const text = row.textContent.toLowerCase();
                if (!text.includes(searchValue)) {
                    show = false;
                }
            }

            row.style.display = show ? '' : 'none';
        });
    }

    filterType.addEventListener('change', filterTable);
    filterSize.addEventListener('change', filterTable);
    filterStatus.addEventListener('change', filterTable);
    search.addEventListener('input', filterTable);
});
</script>
@endsection