@extends('admin.layouts.app')

@section('title', 'قناني الغاز - ' . $gasOffice->name)

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">قناني الغاز - {{ $gasOffice->name }}</h3>
                    <div class="card-tools">
                        <a href="{{ route('admin.gas-offices.show', $gasOffice) }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left"></i> العودة للمكتب
                        </a>
                        <a href="{{ route('admin.gas-offices.index') }}" class="btn btn-info">
                            <i class="fas fa-building"></i> جميع المكاتب
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    <!-- فلترة -->
                    <div class="row mb-3">
                        <div class="col-md-12">
                            <form method="GET" action="{{ route('admin.gas-offices.cylinders', $gasOffice) }}" class="form-inline">
                                <div class="form-group mr-3">
                                    <label for="search" class="mr-2">البحث:</label>
                                    <input type="text" name="search" id="search" class="form-control" 
                                           value="{{ request('search') }}" placeholder="اسم القنينة">
                                </div>
                                <div class="form-group mr-3">
                                    <label for="size" class="mr-2">الحجم:</label>
                                    <select name="size" id="size" class="form-control">
                                        <option value="">جميع الأحجام</option>
                                        <option value="12 كجم" {{ request('size') == '12 كجم' ? 'selected' : '' }}>12 كجم</option>
                                        <option value="25 كجم" {{ request('size') == '25 كجم' ? 'selected' : '' }}>25 كجم</option>
                                        <option value="50 كجم" {{ request('size') == '50 كجم' ? 'selected' : '' }}>50 كجم</option>
                                        <option value="100 كجم" {{ request('size') == '100 كجم' ? 'selected' : '' }}>100 كجم</option>
                                    </select>
                                </div>
                                <div class="form-group mr-3">
                                    <label for="type" class="mr-2">النوع:</label>
                                    <select name="type" id="type" class="form-control">
                                        <option value="">جميع الأنواع</option>
                                        <option value="طبخ" {{ request('type') == 'طبخ' ? 'selected' : '' }}>طبخ</option>
                                        <option value="تدفئة" {{ request('type') == 'تدفئة' ? 'selected' : '' }}>تدفئة</option>
                                        <option value="صناعي" {{ request('type') == 'صناعي' ? 'selected' : '' }}>صناعي</option>
                                    </select>
                                </div>
                                <div class="form-group mr-3">
                                    <label for="material" class="mr-2">المادة:</label>
                                    <select name="material" id="material" class="form-control">
                                        <option value="">جميع المواد</option>
                                        <option value="حديد" {{ request('material') == 'حديد' ? 'selected' : '' }}>حديد</option>
                                        <option value="بلاستيك" {{ request('material') == 'بلاستيك' ? 'selected' : '' }}>بلاستيك</option>
                                    </select>
                                </div>
                                <div class="form-group mr-3">
                                    <label for="is_available" class="mr-2">الحالة:</label>
                                    <select name="is_available" id="is_available" class="form-control">
                                        <option value="">جميع الحالات</option>
                                        <option value="1" {{ request('is_available') == '1' ? 'selected' : '' }}>متاحة</option>
                                        <option value="0" {{ request('is_available') == '0' ? 'selected' : '' }}>غير متاحة</option>
                                    </select>
                                </div>
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-search"></i> بحث
                                </button>
                                <a href="{{ route('admin.gas-offices.cylinders', $gasOffice) }}" class="btn btn-secondary">
                                    <i class="fas fa-times"></i> مسح
                                </a>
                            </form>
                        </div>
                    </div>

                    <!-- جدول قناني الغاز -->
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <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" class="img-circle" style="width: 40px; height: 40px; object-fit: cover;">
                                        @else
                                            <i class="fas fa-image text-muted"></i>
                                        @endif
                                    </td>
                                    <td>
                                        <strong>{{ $cylinder->name }}</strong>
                                        @if($cylinder->description)
                                            <br><small class="text-muted">{{ Str::limit($cylinder->description, 50) }}</small>
                                        @endif
                                    </td>
                                    <td>{{ $cylinder->size }}</td>
                                    <td>{{ $cylinder->type }}</td>
                                    <td>
                                        <span class="badge badge-{{ $cylinder->material == 'حديد' ? 'dark' : 'info' }}">
                                            {{ $cylinder->material }}
                                        </span>
                                    </td>
                                    <td>{{ $cylinder->brand ?? 'غير محدد' }}</td>
                                    <td>{{ number_format($cylinder->price, 2) }} د.ع</td>
                                    <td>
                                        <span class="badge badge-{{ $cylinder->stock_quantity > 10 ? 'success' : ($cylinder->stock_quantity > 0 ? 'warning' : 'danger') }}">
                                            {{ $cylinder->stock_quantity }}
                                        </span>
                                    </td>
                                    <td>{{ $cylinder->weight_kg }} كجم</td>
                                    <td>
                                        <span class="badge badge-{{ $cylinder->is_available ? 'success' : 'danger' }}">
                                            {{ $cylinder->is_available ? 'متاحة' : 'غير متاحة' }}
                                        </span>
                                    </td>
                                    <td>
                                        <div class="btn-group" role="group">
                                            <button type="button" class="btn btn-info btn-sm" 
                                                    data-toggle="modal" data-target="#cylinderModal{{ $cylinder->id }}" title="عرض">
                                                <i class="fas fa-eye"></i>
                                            </button>
                                            <button type="button" class="btn btn-warning btn-sm" 
                                                    data-toggle="modal" data-target="#editModal{{ $cylinder->id }}" title="تعديل">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            <button type="button" class="btn btn-success btn-sm" 
                                                    data-toggle="modal" data-target="#stockModal{{ $cylinder->id }}" title="تحديث المخزون">
                                                <i class="fas fa-boxes"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>

                                <!-- Modal لعرض التفاصيل -->
                                <div class="modal fade" id="cylinderModal{{ $cylinder->id }}" tabindex="-1">
                                    <div class="modal-dialog modal-lg">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title">تفاصيل قنينة الغاز</h5>
                                                <button type="button" class="close" data-dismiss="modal">
                                                    <span>&times;</span>
                                                </button>
                                            </div>
                                            <div class="modal-body">
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        @if($cylinder->image)
                                                            <img src="{{ asset('storage/' . $cylinder->image) }}" 
                                                                 alt="Cylinder" class="img-fluid" style="max-height: 200px; object-fit: cover;">
                                                        @endif
                                                    </div>
                                                    <div class="col-md-6">
                                                        <p><strong>الاسم:</strong> {{ $cylinder->name }}</p>
                                                        <p><strong>الوصف:</strong> {{ $cylinder->description ?? 'غير محدد' }}</p>
                                                        <p><strong>الحجم:</strong> {{ $cylinder->size }}</p>
                                                        <p><strong>النوع:</strong> {{ $cylinder->type }}</p>
                                                        <p><strong>المادة:</strong> {{ $cylinder->material }}</p>
                                                        <p><strong>العلامة التجارية:</strong> {{ $cylinder->brand ?? 'غير محدد' }}</p>
                                                        <p><strong>السعر:</strong> {{ number_format($cylinder->price, 2) }} دينار عراقي</p>
                                                        <p><strong>المخزون:</strong> {{ $cylinder->stock_quantity }}</p>
                                                        <p><strong>الوزن:</strong> {{ $cylinder->weight_kg }} كجم</p>
                                                        <p><strong>الحالة:</strong> 
                                                            <span class="badge badge-{{ $cylinder->is_available ? 'success' : 'danger' }}">
                                                                {{ $cylinder->is_available ? 'متاحة' : 'غير متاحة' }}
                                                            </span>
                                                        </p>
                                                    </div>
                                                </div>
                                                @if($cylinder->safety_instructions)
                                                <div class="mt-3">
                                                    <strong>تعليمات السلامة:</strong>
                                                    <p>{{ $cylinder->safety_instructions }}</p>
                                                </div>
                                                @endif
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary" data-dismiss="modal">إغلاق</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Modal لتحديث المخزون -->
                                <div class="modal fade" id="stockModal{{ $cylinder->id }}" tabindex="-1">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title">تحديث المخزون</h5>
                                                <button type="button" class="close" data-dismiss="modal">
                                                    <span>&times;</span>
                                                </button>
                                            </div>
                                            <form method="POST" action="{{ route('admin.gas-offices.cylinders.update-stock', $cylinder) }}">
                                                @csrf
                                                @method('PATCH')
                                                <div class="modal-body">
                                                    <div class="form-group">
                                                        <label>القنينة: {{ $cylinder->name }}</label>
                                                    </div>
                                                    <div class="form-group">
                                                        <label>المخزون الحالي: {{ $cylinder->stock_quantity }}</label>
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="operation">العملية:</label>
                                                        <select name="operation" id="operation" class="form-control" required>
                                                            <option value="set">تعيين قيمة جديدة</option>
                                                            <option value="add">إضافة</option>
                                                            <option value="subtract">طرح</option>
                                                        </select>
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="stock_quantity">الكمية:</label>
                                                        <input type="number" name="stock_quantity" id="stock_quantity" 
                                                               class="form-control" min="0" required>
                                                    </div>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">إلغاء</button>
                                                    <button type="submit" class="btn btn-primary">تحديث</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                                @empty
                                <tr>
                                    <td colspan="12" class="text-center">لا توجد قناني غاز</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    <!-- Pagination -->
                    <div class="d-flex justify-content-center">
                        {{ $cylinders->appends(request()->query())->links() }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection