@extends('front.layouts.app')

@section('title', 'لوحة تحكم الملفات الدوائية - MedExchange')

@section('styles')
    <link rel="stylesheet" href="{{ asset('css/pharmaceutical-files.css') }}">
    <style>
        .type-choice { display: flex; gap: 20px; align-items: center; background: #f8fafc; padding: 10px; border-radius: 8px; border: 1px solid #e2e8f0; }
        .type-choice label { display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; color: #475569; }
        .type-choice input { width: 18px; height: 18px; }
        .badge-status { padding: 4px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: bold; }
        .bg-pending { background: #fef9c3; color: #854d0e; }
        .bg-approved { background: #dcfce7; color: #166534; }
        .bg-rejected { background: #fee2e2; color: #991b1b; }
    </style>
    <meta name="csrf-token" content="{{ csrf_token() }}">
@endsection

@section('content')
<main class="main-content">
    <div class="container">
        <div class="page-header">
            <div class="page-title-section">
                <div class="page-title-content">
                    <h1 class="page-title">إدارة الملفات الدوائية</h1>
                    <p class="page-subtitle">أهلاً بك، يمكنك إضافة وإدارة ملفاتك الدوائية هنا</p>
                </div>
                <div class="page-actions">
                    <a href="{{ route('jobs.my-ads') }}" class="btn-submit-file" style="background: var(--primary-color); text-decoration: none; padding: 10px 20px; font-size: 0.9rem;">
                        <i class="fas fa-briefcase"></i> إدارة إعلانات الوظائف
                    </a>
                </div>
            </div>
        </div>

        <!-- Add File Form -->
        <div class="file-form-card">
            <div class="card-header">
                <div class="card-title">
                    <i class="fas fa-plus-circle"></i>
                    <h3>إضافة ملف دوائي جديد</h3>
                </div>
            </div>
            <div class="card-body">
                <form id="pharmaceuticalFileForm" class="file-form">
                    <div class="form-row">
                        <div class="form-group full-width">
                            <label for="fileName"><i class="fas fa-file-signature"></i> اسم الملف الدوائي</label>
                            <input type="text" id="fileName" name="name" placeholder="مثال: ملف مكملات غذائية مرخص" required>
                        </div>

                        <div class="form-group">
                            <label for="fileCategory"><i class="fas fa-tags"></i> تصنيف الملف</label>
                            <select id="fileCategory" name="category" required>
                                <option value="أدوية">أدوية</option>
                                <option value="مكملات غذائية">مكملات غذائية</option>
                                <option value="مستحضرات تجميل">مستحضرات تجميل</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="filePrice"><i class="fas fa-money-bill-wave"></i> السعر المتوقع (جنيه)</label>
                            <input type="number" id="filePrice" name="price" placeholder="0.00" required>
                        </div>

                        <div class="form-group full-width">
                            <label><i class="fas fa-hand-holding-usd"></i> خيارات التعامل مع الملف</label>
                            <div class="type-choice">
                                <label><input type="checkbox" name="allow_direct_sale" value="1"> بيع مباشر</label>
                                <label><input type="checkbox" name="allow_investment" value="1"> استثمار ملف (تسويق)</label>
                            </div>
                        </div>

                        <div class="form-group full-width">
                            <label for="fileDescription"><i class="fas fa-align-right"></i> وصف الملف (اختياري)</label>
                            <textarea id="fileDescription" name="description" rows="3" placeholder="أدخل تفاصيل إضافية عن الملف..."></textarea>
                        </div>

                        <div class="form-group full-width">
                            <label><i class="fas fa-star"></i> المميزات</label>
                            <div class="features-checkboxes" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px;">
                                <label class="feature-option"><input type="checkbox" name="features[]" value="تصريح ساري"> <span>تصريح ساري ومُحدَّث</span></label>
                                <label class="feature-option"><input type="checkbox" name="features[]" value="علاقات تجارية"> <span>علاقات تجارية قائمة</span></label>
                                <label class="feature-option"><input type="checkbox" name="features[]" value="قاعدة عملاء"> <span>قاعدة عملاء موجودة</span></label>
                                <label class="feature-option"><input type="checkbox" name="features[]" value="نقل فوري"> <span>إمكانية النقل الفوري</span></label>
                                <label class="feature-option"><input type="checkbox" name="features[]" value="دعم فني"> <span>دعم فني بعد البيع</span></label>
                            </div>
                        </div>

                        <div class="form-group full-width">
                            <button type="submit" class="btn-submit-file" style="width: 100%;">إرسال الملف للمراجعة</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!-- Files List -->
        <div class="files-table-card">
            <div class="card-header"><h3>ملفاتي المضافة</h3></div>
            <div class="card-body">
                <div class="table-wrapper" style="display: block;">
                    <table class="files-table">
                        <thead>
                            <tr>
                                <th>اسم الملف</th>
                                <th>الفئة</th>
                                <th>السعر</th>
                                <th>نوع التعامل</th>
                                <th>حالة المراجعة</th>
                                <th>إجراءات</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($files as $file)
                            <tr>
                                <td>{{ $file->name }}</td>
                                <td>{{ $file->category }}</td>
                                <td>{{ number_format($file->price, 2) }} ج.م</td>
                                <td>
                                    @if($file->allow_direct_sale) <span class="badge-status bg-blue-100 text-blue-700" style="background:#dbeafe;">بيع</span> @endif
                                    @if($file->allow_investment) <span class="badge-status bg-purple-100 text-purple-700" style="background:#f3e8ff;">استثمار</span> @endif
                                </td>
                                <td>
                                    <span class="badge-status bg-{{ $file->admin_status }}">
                                        {{ $file->admin_status == 'pending' ? 'قيد المراجعة' : ($file->admin_status == 'approved' ? 'مقبول' : 'مرفوض') }}
                                    </span>
                                </td>
                                <td>
                                    <button onclick="deleteFile({{ $file->id }}, this)" class="text-red-500 hover:text-red-700" style="background:none; border:none; cursor:pointer;">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</main>

<!-- Success Modal -->
<div class="modal" id="successModal">
    <div class="modal-overlay"></div>
    <div class="modal-content">
        <div class="modal-icon success"><i class="fas fa-check-circle"></i></div>
        <h3>تم بنجاح!</h3>
        <p id="modalMsg">تم إرسال الملف للإدارة بنجاح</p>
        <button class="btn-modal-close" onclick="document.getElementById('successModal').classList.remove('show'); location.reload();">إغلاق</button>
    </div>
</div>
@endsection

@section('scripts')
<script>
    document.getElementById('pharmaceuticalFileForm').addEventListener('submit', async (e) => {
        e.preventDefault();
        const formData = new FormData(e.target);
        
        try {
            const response = await fetch("{{ route('pharmaceutical-files.store') }}", {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    'Accept': 'application/json'
                },
                body: formData
            });
            const result = await response.json();
            if (result.success) {
                document.getElementById('modalMsg').textContent = result.message;
                document.getElementById('successModal').classList.add('show');
            }
        } catch (error) {
            alert('حدث خطأ أثناء الحفظ');
        }
    });

    async function deleteFile(id, btn) {
        if (!confirm('هل أنت متأكد من الحذف؟')) return;
        try {
            const response = await fetch(`/pharmaceutical-files/${id}`, {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    'Accept': 'application/json'
                }
            });
            const result = await response.json();
            if (result.success) {
                btn.closest('tr').remove();
            }
        } catch (error) {
            alert('فشل في الحذف');
        }
    }
</script>
@endsection