@extends('layouts.panel')

@section('title', 'ثبت نمونه‌ها ')

@section('content')
<main id="sample-registration-page" class="w-full px-4 py-8">
    <header class="flex flex-col sm:flex-row justify-between items-start sm:items-center border-b pb-4 mb-6 border-slate-700">
        <h1 class="text-2xl font-bold text-slate-100">ثبت نمونه‌ها</h1>
        <a href="{{ route(($routePrefix ?? 'admin.samples') . '.create') }}" class="mt-4 sm:mt-0 px-6 py-2 bg-blue-600 text-white font-medium rounded-xl shadow-lg hover:bg-blue-700 transition duration-300 ease-in-out">
            ثبت نمونه جدید
        </a>
    </header>

    <!-- Controls Section -->
    <section class="controls glass rounded-2xl p-5 mt-8" style="display: flex; align-items: end; gap: 16px; flex-wrap: wrap;">
        <div class="control-group" style="display: flex; flex-direction: column; gap: 4px; min-width: 75%;">
            <label for="searchInput" style="font-size: 12px; color: #9ca3af;">جستجو</label>
            <input id="searchInput" type="search" placeholder="جستجو در نام محصول، شرکت، مشتری و..." style="padding: 8px 12px; border:1px solid #374151; border-radius: 6px; background: #0b1220; color: #e5e7eb; font-size: 14px;" />
        </div>
        <div class="control-group" style="display: flex; flex-direction: column; gap: 4px;">
            <button id="resetFilters" class="btn btn-secondary" style="width: max-content !important; padding: 8px 16px; font-size: 12px; white-space: nowrap; background: #374151; color: #e5e7eb; border: 1px solid #374151; border-radius: 6px;">پاکسازی فیلترها</button>
        </div>
        <div class="control-group" style="display: flex; flex-direction: column; gap: 4px;">
            <label for="pageSize" style="font-size: 12px; color: #9ca3af;">تعداد</label>
            <select id="pageSize" style="width: max-content !important; padding: 8px 12px; border: 1px solid #374151; border-radius: 6px; background: #0b1220; color: #e5e7eb; font-size: 14px;">
                <option value="5">5</option>
                <option value="10" selected>10</option>
                <option value="25">25</option>
                <option value="50">50</option>
            </select>
        </div>
        <div class="control-group" style="display: flex; flex-direction: column; gap: 4px; min-width: 120px;">
            <label for="statusFilter" style="font-size: 12px; color: #9ca3af;">وضعیت</label>
            <select id="statusFilter" style="width: max-content !important; padding: 8px 12px; border: 1px solid #374151; border-radius: 6px; background: #0b1220; color: #e5e7eb; font-size: 14px;">
                <option style="background: #0b1220; color: #e5e7eb; font-family: IRANSans;" value="">همه</option>
                <option style="background: #0b1220; color: #e5e7eb; font-family: IRANSans;" value="pending">در انتظار پیگیری</option>
                <option style="background: #0b1220; color: #e5e7eb; font-family: IRANSans;" value="approved">تایید شده</option>
                <option style="background: #0b1220; color: #e5e7eb; font-family: IRANSans;" value="rejected">عدم تایید</option>
            </select>
        </div>
    </section>

    <section class="table-card">
        <div class="table-wrapper">
            <table id="samplesTable">
                <thead>
                    <tr>
                        <th>ردیف</th>
                        <th>تاریخ ثبت</th>
                        <th>محصول</th>
                        <th>تامین‌کننده/مشتری</th>
                        <th>نماینده فروش</th>
                        <th>مقدار و توضیحات</th>
                        <th>وضعیت</th>
                        <th>اقدامات</th>
                    </tr>
                </thead>
                <tbody id="samplesTableBody">
                </tbody>
            </table>
        </div>
        <div id="emptyState" class="empty-state hidden">
            موردی یافت نشد
        </div>
        <footer class="table-footer">
            <div id="rangeInfo" class="range-info"></div>
            <nav id="pagination" class="pagination"></nav>
        </footer>
    </section>

    <!-- Follow-up Modal -->
    <div id="followUpModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden z-50">
        <div class="relative top-20 mx-auto p-8 w-11/12 md:w-3/4 lg:w-2/3 shadow-2xl rounded-2xl glass animate-fadeIn">
            <div class="flex justify-between items-center pb-3 border-b mb-6 border-slate-800">
                <h3 class="text-xl font-bold text-slate-100">ثبت نتیجه پیگیری <span id="followUpSampleId" class="text-sm text-slate-400"></span></h3>
                <button data-modal="followUpModal" class="text-gray-400 hover:text-gray-600 text-2xl font-bold">&times;</button>
            </div>
            <div class="mb-6 p-4 glass rounded-lg border border-slate-700 space-y-3">
                <h4 class="text-lg font-semibold text-slate-200 border-b border-slate-600 pb-2 mb-3">خلاصه اطلاعات نمونه</h4>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-2 text-sm">
                    <div><span class="font-medium text-slate-400">محصول:</span> <span id="followup-product-name" class="text-slate-200"></span></div>
                    <div><span class="font-medium text-slate-400">نماینده فروش:</span> <span id="followup-sales-person" class="text-slate-200"></span></div>
                    <div><span class="font-medium text-slate-400">شرکت مبدا/مقصد:</span> <span id="followup-company-name" class="text-slate-200"></span></div>
                    <div><span class="font-medium text-slate-400">مشتری نهایی:</span> <span id="followup-customer-name" class="text-slate-200"></span></div>
                    <div><span class="font-medium text-slate-400">مقدار و توضیحات:</span> <span id="followup-quantity-grade" class="text-slate-200"></span></div>
                    <div><span class="font-medium text-slate-400">تاریخ پیگیری:</span> <span id="followup-date" class="text-slate-200"></span></div>
                </div>
            </div>
            <form id="followUpForm" class="space-y-4" method="POST">
                @csrf
                <div>
                    <label class="block text-sm font-medium text-slate-400 mb-2">نتیجه پیگیری:</label>
                    <div class="flex items-center gap-4">
                        <label class="flex items-center">
                            <input type="radio" name="result" value="approved" class="h-4 w-4 text-green-600 focus:ring-green-500" required>
                            <span class="ml-2 text-slate-200">تایید (مشتری خرید انجام می‌دهد)</span>
                        </label>
                        <label class="flex items-center">
                            <input type="radio" name="result" value="rejected" class="h-4 w-4 text-red-600 focus:ring-red-500" required>
                            <span class="ml-2 text-slate-200">عدم تایید (مشتری علاقه‌ای ندارد)</span>
                        </label>
                    </div>
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-400">توضیحات و دلایل:</label>
                    <textarea name="notes" rows="4" class="mt-1 block w-full rounded-md bg-white/5 border-slate-700 text-slate-200 focus:border-blue-500 focus:ring-blue-500" required></textarea>
                </div>
                <div class="flex justify-end pt-4">
                    <button type="submit" class="px-6 py-2 bg-green-600 text-white font-medium rounded-xl shadow-lg hover:bg-green-700 transition">ثبت نتیجه پیگیری</button>
                </div>
            </form>
        </div>
    </div>

    <!-- View Notes Modal -->
    <div id="viewNotesModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden z-50">
        <div class="relative top-20 mx-auto p-8 w-11/12 md:w-3/4 lg:w-2/3 shadow-2xl rounded-2xl glass animate-fadeIn">
            <div class="flex justify-between items-center pb-3 border-b mb-6 border-slate-800">
                <h3 class="text-xl font-bold text-slate-100">جزئیات پیگیری نمونه <span id="viewNotesSampleId" class="text-sm text-slate-400"></span></h3>
                <button data-modal="viewNotesModal" class="text-gray-400 hover:text-gray-600 text-2xl font-bold">&times;</button>
            </div>
            <div id="viewNotesContent" class="space-y-4"></div>
            <div class="flex justify-end pt-4">
                <button onclick="document.getElementById('viewNotesModal').classList.add('hidden')" class="px-6 py-2 bg-blue-600 text-white font-medium rounded-xl shadow-lg hover:bg-blue-700 transition">بستن</button>
            </div>
        </div>
    </div>

    <!-- Edit Sample Modal -->
    <div id="editSampleModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden z-50">
        <div class="relative top-20 mx-auto p-8 w-11/12 md:w-3/4 lg:w-2/3 shadow-2xl rounded-2xl glass animate-fadeIn">
            <div class="flex justify-between items-center pb-3 border-b mb-6 border-slate-800">
                <h3 class="text-xl font-bold text-slate-100">ویرایش نمونه <span id="editSampleId" class="text-sm text-slate-400"></span></h3>
                <button data-modal="editSampleModal" class="text-gray-400 hover:text-gray-600 text-2xl font-bold">&times;</button>
            </div>
            <form id="editSampleForm" class="space-y-4" method="POST">
                @csrf
                @method('PUT')
                <div>
                    <label class="block text-sm font-medium text-slate-400">نام محصول:</label>
                    <input type="text" name="product_name" id="edit_product_name" class="mt-1 block w-full rounded-md bg-white/5 border-slate-700 text-slate-200 focus:border-blue-500 focus:ring-blue-500" required>
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-400">شرکت مبدا/مقصد:</label>
                    <input type="text" name="company_name" id="edit_company_name" class="mt-1 block w-full rounded-md bg-white/5 border-slate-700 text-slate-200 focus:border-blue-500 focus:ring-blue-500" required>
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-400">نماینده فروش:</label>
                    <input type="text" name="sales_person_name" id="edit_sales_person_name" class="mt-1 block w-full rounded-md bg-white/5 border-slate-700 text-slate-200 focus:border-blue-500 focus:ring-blue-500" required>
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-400">مشتری نهایی:</label>
                    <input type="text" name="customer_name" id="edit_customer_name" class="mt-1 block w-full rounded-md bg-white/5 border-slate-700 text-slate-200 focus:border-blue-500 focus:ring-blue-500" required>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-slate-400">مقدار:</label>
                        <input type="number" name="quantity" id="edit_quantity" step="0.01" min="0.01" class="mt-1 block w-full rounded-md bg-white/5 border-slate-700 text-slate-200 focus:border-blue-500 focus:ring-blue-500" required>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-400">واحد:</label>
                        <input type="text" name="unit" id="edit_unit" class="mt-1 block w-full rounded-md bg-white/5 border-slate-700 text-slate-200 focus:border-blue-500 focus:ring-blue-500">
                    </div>
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-400">توضیحات:</label>
                    <textarea name="description" id="edit_description" rows="3" class="mt-1 block w-full rounded-md bg-white/5 border-slate-700 text-slate-200 focus:border-blue-500 focus:ring-blue-500"></textarea>
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-400">تاریخ پیگیری:</label>
                    <input type="text" 
                           id="edit_follow_up_date_shamsi" 
                           placeholder="برای انتخاب تاریخ کلیک کنید" 
                           readonly
                           class="mt-1 block w-full rounded-md bg-white/5 border-slate-700 text-slate-200 focus:border-blue-500 focus:ring-blue-500 cursor-pointer"
                           style="cursor: pointer;">
                    <input type="hidden" 
                           name="follow_up_date" 
                           id="edit_follow_up_date" 
                           required>
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-400">وضعیت:</label>
                    <select name="status" id="edit_status" class="mt-1 block w-full rounded-md bg-white/5 border-slate-700 text-slate-200 focus:border-blue-500 focus:ring-blue-500" required>
                        <option value="pending">در انتظار پیگیری</option>
                        <option value="approved">تایید شده</option>
                        <option value="rejected">عدم تایید</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-400">یادداشت‌ها:</label>
                    <textarea name="notes" id="edit_notes" rows="3" class="mt-1 block w-full rounded-md bg-white/5 border-slate-700 text-slate-200 focus:border-blue-500 focus:ring-blue-500"></textarea>
                </div>
                <div class="flex justify-end pt-4 gap-2">
                    <button type="button" data-modal="editSampleModal" class="px-6 py-2 bg-gray-600 text-white font-medium rounded-xl shadow-lg hover:bg-gray-700 transition">انصراف</button>
                    <button type="submit" class="px-6 py-2 bg-blue-600 text-white font-medium rounded-xl shadow-lg hover:bg-blue-700 transition">ذخیره تغییرات</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Delete Confirmation Modal -->
    <div id="deleteSampleModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden z-50">
        <div class="relative top-20 mx-auto p-8 w-11/12 md:w-1/2 lg:w-1/3 shadow-2xl rounded-2xl glass animate-fadeIn">
            <div class="flex justify-between items-center pb-3 border-b mb-6 border-slate-800">
                <h3 class="text-xl font-bold text-slate-100">تایید حذف نمونه</h3>
                <button data-modal="deleteSampleModal" class="text-gray-400 hover:text-gray-600 text-2xl font-bold">&times;</button>
            </div>
            <div class="mb-6">
                <p class="text-slate-300 mb-4">آیا مطمئن هستید که می‌خواهید این نمونه را حذف کنید؟</p>
                <div id="deleteSampleInfo" class="p-4 bg-red-900/20 border border-red-500/30 rounded-lg">
                    <p class="text-red-300 text-sm" id="deleteSampleName"></p>
                </div>
            </div>
            <div class="flex justify-end gap-2">
                <button data-modal="deleteSampleModal" class="px-6 py-2 bg-gray-600 text-white font-medium rounded-xl shadow-lg hover:bg-gray-700 transition">انصراف</button>
                <button id="confirmDeleteBtn" class="px-6 py-2 bg-red-600 text-white font-medium rounded-xl shadow-lg hover:bg-red-700 transition">حذف</button>
            </div>
        </div>
    </div>
</main>
@endsection

@push('styles')
<style>
@keyframes fadeIn { from { opacity: 0; transform: translateY(-20px);} to { opacity: 1; transform: translateY(0);} }
.animate-fadeIn { animation: fadeIn 0.3s ease-out forwards; }
.glass { background: rgba(255,255,255,0.05); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.1); }
/* Increase fonts inside view-notes modal as requested */
#viewNotesContent .glass.p-4.rounded-xl.text-slate-200 { font-size: 16px !important; }
#viewNotesContent .font-medium.text-slate-200 { font-size: 17px !important; }

/* Table styles matching products page */
:root {
  --bg: #0f172a;
  --card: #111827;
  --muted: #94a3b8;
  --text: #e5e7eb;
  --accent: #22d3ee;
  --accent-2: #a78bfa;
  --border: #1f2937;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
}

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1rem;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--border);
}

.header h1 {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.controls {
  display: flex;
  align-items: end;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: var(--card);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.control-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.control-group label {
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 500;
}

.control-group input,
.control-group select {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.875rem;
  transition: all 0.2s;
}

.control-group input:focus,
.control-group select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.1);
}

.table-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(180deg, #0b1220, #0f172a);
}

.table-wrapper {
  overflow: auto;
  max-height: 65vh;
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

thead th {
  position: sticky;
  top: 0;
  background: linear-gradient(180deg, #0e1626, #0d1524);
  z-index: 2;
  text-align: right;
  font-weight: 600;
  font-size: 13px;
  color: #c7d2fe;
  border-bottom: 1px solid var(--border);
  padding: 12px 1.5rem;
  white-space: nowrap;
}

th, td {
  padding: 12px 1.5rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

tbody tr:hover {
  background: rgba(167, 139, 250, 0.05);
}

tbody tr:nth-child(even) td {
  background: rgba(255,255,255,0.01);
}

.table-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 1.5rem;
  border-top: 1px solid var(--border);
  background: #0d1524;
}

.range-info {
  font-size: 12px;
  color: var(--muted);
}

.pagination {
  display: flex;
  gap: 8px;
}

.empty-state {
  text-align: center;
  padding: 2rem;
  color: var(--muted);
  font-size: 14px;
}

.btn {
  border-radius: 10px;
  padding: 10px 16px;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  font-weight: 600;
}

.btn-secondary {
  border: 1px solid var(--border);
  background: linear-gradient(180deg, #101827, #0b1220);
  color: var(--text);
  padding: 10px 12px;
}

.btn-secondary:hover {
  transform: translateY(-1px);
  border-color: rgba(167, 139, 250, 0.5);
  background: linear-gradient(180deg, #131c2c, #0b1220);
}

/* Status select styles */
.status-select {
  transition: all 0.2s;
}

.status-select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.status-select option {
  background: #0b1220;
  color: #e5e7eb;
}

.status-select option[value="pending"] {
  background: #78350f;
  color: #fbbf24;
}

.status-select option[value="approved"] {
  background: #064e3b;
  color: #34d399;
}

.status-select option[value="rejected"] {
  background: #7f1d1d;
  color: #f87171;
}
</style>
@endpush

@push('scripts')
<script>
// Global variables for samples
let samples = [];
let currentPage = 1;
let pageSize = 10;
let searchTerm = '';
let statusFilter = '';

// Initialize data from server
samples = @json($samplesJson ?? []);

// DOM elements
const samplesTableBody = document.getElementById('samplesTableBody');
const searchInput = document.getElementById('searchInput');
const resetFiltersBtn = document.getElementById('resetFilters');
const pageSizeSelect = document.getElementById('pageSize');
const statusFilterSelect = document.getElementById('statusFilter');

// Debounce function
function debounce(func, wait) {
    let timeout;
    return function executedFunction(...args) {
        const later = () => {
            clearTimeout(timeout);
            func(...args);
        };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
    };
}

// Initialize page
document.addEventListener('DOMContentLoaded', () => {
    renderTable();
    setupEventListeners();
});

// Setup event listeners
function setupEventListeners() {
    // Add event listener for modal close buttons
    document.querySelectorAll('[data-modal]').forEach(btn => {
        btn.addEventListener('click', (e) => {
            const modalId = e.target.dataset.modal;
            document.getElementById(modalId).classList.add('hidden');
        });
    });

    // Add event listener for edit form submission
    const editForm = document.getElementById('editSampleForm');
    if (editForm) {
        editForm.addEventListener('submit', async (e) => {
            e.preventDefault();
            const formData = new FormData(editForm);
            const sampleId = editForm.action.split('/').pop();
            
            try {
                const res = await fetch(`/admin/samples/${sampleId}`, {
                    method: 'PUT',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                        'Accept': 'application/json'
                    },
                    body: formData
                });
                
                if (res.ok) {
                    // Update local array
                    const updatedSample = await res.json();
                    const index = samples.findIndex(s => s.id == sampleId);
                    if (index !== -1) {
                        samples[index] = {
                            ...samples[index],
                            ...updatedSample,
                            id: parseInt(sampleId)
                        };
                    }
                    renderTable();
                    document.getElementById('editSampleModal').classList.add('hidden');
                    
                    // Show success message
                    if (typeof showSuccessMessage === 'function') {
                        showSuccessMessage('نمونه با موفقیت به‌روزرسانی شد');
                    }
                } else {
                    console.error('Error updating sample');
                }
            } catch (e) {
                console.error('Error updating sample:', e);
            }
        });
    }

    // Search
    searchInput.addEventListener('input', debounce(function(e) {
        searchTerm = e.target.value.toLowerCase();
        currentPage = 1;
        renderTable();
    }, 300));

    // Reset filters
    resetFiltersBtn.addEventListener('click', function() {
        searchInput.value = '';
        statusFilterSelect.value = '';
        searchTerm = '';
        statusFilter = '';
        currentPage = 1;
        renderTable();
    });

    // Page size
    pageSizeSelect.addEventListener('change', function(e) {
        pageSize = parseInt(e.target.value);
        currentPage = 1;
        renderTable();
    });

    // Status filter
    statusFilterSelect.addEventListener('change', function(e) {
        statusFilter = e.target.value;
        currentPage = 1;
        renderTable();
    });

    // Add event listener for table body clicks
    if (samplesTableBody) {
        samplesTableBody.addEventListener('click', (e) => {
            const btn = e.target.closest('button');
            if (!btn) return;
            const id = btn.dataset.id;
            const action = btn.dataset.action;
            if (action === 'open-follow') {
                openFollowUpModal(id);
            }
            if (action === 'view-notes') {
                viewSampleDetails(id);
            }
            if (action === 'edit') {
                openEditModal(id);
            }
            if (action === 'delete') {
                openDeleteModal(id);
            }
        });
    }
}

// Filter and search samples
function getFilteredSamples() {
    return samples.filter(sample => {
        const matchesSearch = !searchTerm || 
            (sample.product_name && sample.product_name.toLowerCase().includes(searchTerm)) ||
            (sample.company_name && sample.company_name.toLowerCase().includes(searchTerm)) ||
            (sample.customer_name && sample.customer_name.toLowerCase().includes(searchTerm)) ||
            (sample.sales_person_name && sample.sales_person_name.toLowerCase().includes(searchTerm));
        
        const matchesStatus = !statusFilter || sample.status === statusFilter;
        
        return matchesSearch && matchesStatus;
    });
}

// Render table
function renderTable() {
    const filteredSamples = getFilteredSamples();
    const totalPages = Math.ceil(filteredSamples.length / pageSize);
    const startIndex = (currentPage - 1) * pageSize;
    const endIndex = startIndex + pageSize;
    const paginatedSamples = filteredSamples.slice(startIndex, endIndex);

    // Render table body
    samplesTableBody.innerHTML = '';
    
    if (paginatedSamples.length === 0) {
        samplesTableBody.innerHTML = `
            <tr>
                <td colspan="8" class="text-center py-8 text-slate-400">
                    ${searchTerm || statusFilter ? 'موردی یافت نشد' : 'نمونه‌ای ثبت نشده است'}
                </td>
            </tr>
        `;
    } else {
        paginatedSamples.forEach((sample, index) => {
            const rowNumber = startIndex + index + 1;
            const statusClass = sample.status === 'approved' ? 'text-green-400' : (sample.status === 'rejected' ? 'text-red-400' : 'text-yellow-400');
            const statusText = sample.status === 'approved' ? 'تایید شده' : (sample.status === 'rejected' ? 'عدم تایید' : 'در انتظار پیگیری');
            
            const row = document.createElement('tr');
            row.className = 'hover:bg-white/5 transition duration-150 ease-in-out';
            row.innerHTML = `
                <td class="text-center">${rowNumber}</td>
                <td>${formatPersianDate(sample.created_at)}</td>
                <td class="font-medium">${sample.product_name || '—'}</td>
                <td>${sample.company_name || '—'} / ${sample.customer_name || '—'}</td>
                <td>${sample.sales_person_name || '—'}</td>
                <td>${formatNumber(sample.quantity)} ${sample.description ? '(' + sample.description + ')' : ''}</td>
                <td>
                    <select 
                        class="status-select px-3 py-1.5 rounded-lg text-sm font-medium ${statusClass} bg-slate-800/50 border border-slate-600 focus:outline-none focus:ring-2 focus:ring-blue-500 cursor-pointer transition-all"
                        data-id="${sample.id}"
                        data-current-status="${sample.status}"
                        onchange="updateSampleStatus(${sample.id}, this.value)"
                        style="min-width: 140px;"
                    >
                        <option value="pending" ${sample.status === 'pending' ? 'selected' : ''}>در انتظار پیگیری</option>
                        <option value="approved" ${sample.status === 'approved' ? 'selected' : ''}>تایید شده</option>
                        <option value="rejected" ${sample.status === 'rejected' ? 'selected' : ''}>عدم تایید</option>
                    </select>
                </td>
                <td class="text-left">
                    <div class="flex items-center gap-2">
                        ${sample.status === 'pending' ? 
                            `<button data-action="open-follow" data-id="${sample.id}" class="text-indigo-400 hover:text-indigo-600 transition text-sm">پیگیری</button>` :
                            `<button data-action="view-notes" data-id="${sample.id}" class="text-blue-400 hover:text-blue-600 transition text-sm">مشاهده جزئیات</button>`
                        }
                        <button data-action="edit" data-id="${sample.id}" class="text-yellow-400 hover:text-yellow-600 transition text-sm">ویرایش</button>
                        <button data-action="delete" data-id="${sample.id}" class="text-red-400 hover:text-red-600 transition text-sm">حذف</button>
                    </div>
                </td>
            `;
            samplesTableBody.appendChild(row);
        });
    }
    
    // Update range info
    updateRangeInfo(filteredSamples.length, startIndex, endIndex);
}

// Update range info
function updateRangeInfo(total, start, end) {
    const rangeInfo = document.getElementById('rangeInfo');
    if (rangeInfo) {
        rangeInfo.textContent = `نمایش ${start + 1} تا ${Math.min(end, total)} از ${total} مورد`;
    }
}

// Format Persian date
function formatPersianDate(dateString) {
    if (!dateString) return '—';
    try {
        const date = new Date(dateString);
        return date.toLocaleDateString('fa-IR');
    } catch (e) {
        return '—';
    }
}

// Format number
function formatNumber(num) {
    if (!num) return '—';
    return new Intl.NumberFormat('fa-IR').format(parseFloat(num));
}

async function viewSampleDetails(sampleId) {
    try {
        const res = await fetch(`/admin/samples/${sampleId}`);
        if (!res.ok) return;
        const s = await res.json();
        const titleSpan = document.getElementById('viewNotesSampleId');
        titleSpan.textContent = ` (ID: ${s.id} - ${s.product_name})`;
        const statusClass = s.status === 'approved' ? 'text-green-400' : 'text-red-400';
        const statusText = s.status === 'approved' ? 'تایید شده' : 'عدم تایید';
        const html = `
            <div class="flex flex-col md:flex-row md:space-x-4 md:space-x-reverse space-y-4 md:space-y-0">
                <div class="md:w-1/2">
                    <p class="text-slate-400">تاریخ ثبت:</p>
                    <p class="font-medium text-slate-200">${s.created_at || '-'}</p>
                </div>
                <div class="md:w-1/2">
                    <p class="text-slate-400">نماینده فروش:</p>
                    <p class="font-medium text-slate-200">${s.sales_person_name || '-'}</p>
                </div>
            </div>
            <div>
                <p class="text-slate-400">وضعیت پیگیری:</p>
                <p class="font-medium ${statusClass}">${statusText}</p>
            </div>
            <div>
                <p class="text-slate-400">توضیحات و دلایل:</p>
                <p class="glass p-4 rounded-xl text-slate-200">${s.notes || 'توضیحاتی ثبت نشده است.'}</p>
            </div>`;
        const container = document.getElementById('viewNotesContent');
        container.innerHTML = html;
        document.getElementById('viewNotesModal').classList.remove('hidden');
    } catch (e) {}
}

async function openFollowUpModal(sampleId) {
    try {
        const res = await fetch(`/admin/samples/${sampleId}`);
        if (!res.ok) return;
        const s = await res.json();
        document.getElementById('followUpSampleId').textContent = ` (ID: ${s.id} - ${s.product_name})`;
        document.getElementById('followup-product-name').textContent = s.product_name || '-';
        document.getElementById('followup-sales-person').textContent = s.sales_person_name || '-';
        document.getElementById('followup-company-name').textContent = s.company_name || '-';
        document.getElementById('followup-customer-name').textContent = s.customer_name || '-';
        document.getElementById('followup-quantity-grade').textContent = `${(s.quantity ?? '-')}${s.description ? ' ('+s.description+')' : ''}`;
        document.getElementById('followup-date').textContent = s.follow_up_date || '-';
        const form = document.getElementById('followUpForm');
        form.action = `/admin/samples/${sampleId}/follow-up`;
        document.getElementById('followUpModal').classList.remove('hidden');
    } catch (e) {}
}

async function openEditModal(sampleId) {
    try {
        const res = await fetch(`/admin/samples/${sampleId}`);
        if (!res.ok) return;
        const s = await res.json();
        
        document.getElementById('editSampleId').textContent = ` (ID: ${s.id} - ${s.product_name})`;
        document.getElementById('edit_product_name').value = s.product_name || '';
        document.getElementById('edit_company_name').value = s.company_name || '';
        document.getElementById('edit_sales_person_name').value = s.sales_person_name || '';
        document.getElementById('edit_customer_name').value = s.customer_name || '';
        document.getElementById('edit_quantity').value = s.quantity || '';
        document.getElementById('edit_unit').value = s.unit || '';
        document.getElementById('edit_description').value = s.description || '';
        // Set date values
        const editFollowUpDateHidden = document.getElementById('edit_follow_up_date');
        const editFollowUpDateShamsi = document.getElementById('edit_follow_up_date_shamsi');
        if (editFollowUpDateHidden) {
            editFollowUpDateHidden.value = s.follow_up_date || '';
        }
        if (editFollowUpDateShamsi && s.follow_up_date) {
            // Convert Gregorian to Persian for display
            // We'll fetch conversion or leave empty for user to select
            editFollowUpDateShamsi.value = '';
        }
        document.getElementById('edit_status').value = s.status || 'pending';
        document.getElementById('edit_notes').value = s.notes || '';
        
        const form = document.getElementById('editSampleForm');
        form.action = `/admin/samples/${sampleId}`;
        document.getElementById('editSampleModal').classList.remove('hidden');
    } catch (e) {
        console.error('Error loading sample data:', e);
    }
}

async function openDeleteModal(sampleId) {
    try {
        const res = await fetch(`/admin/samples/${sampleId}`);
        if (!res.ok) return;
        const s = await res.json();
        
        document.getElementById('deleteSampleName').textContent = `${s.product_name} - ${s.company_name}`;
        document.getElementById('confirmDeleteBtn').onclick = () => deleteSample(sampleId);
        document.getElementById('deleteSampleModal').classList.remove('hidden');
    } catch (e) {
        console.error('Error loading sample data:', e);
    }
}

async function deleteSample(sampleId) {
    try {
        const res = await fetch(`/admin/samples/${sampleId}`, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            }
        });
        
        if (res.ok) {
            // Remove from local array
            samples = samples.filter(s => s.id != sampleId);
            renderTable();
            document.getElementById('deleteSampleModal').classList.add('hidden');
            
            // Show success message
            if (typeof showSuccessMessage === 'function') {
                showSuccessMessage('نمونه با موفقیت حذف شد');
            }
        } else {
            console.error('Error deleting sample');
        }
    } catch (e) {
        console.error('Error deleting sample:', e);
    }
}

async function updateSampleStatus(sampleId, newStatus) {
    try {
        const res = await fetch(`/admin/samples/${sampleId}/status`, {
            method: 'PATCH',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            },
            body: JSON.stringify({ status: newStatus })
        });
        
        if (res.ok) {
            // Update local array
            const index = samples.findIndex(s => s.id == sampleId);
            if (index !== -1) {
                samples[index].status = newStatus;
            }
            renderTable();
            
            // Show success message
            if (typeof showSuccessMessage === 'function') {
                showSuccessMessage('وضعیت با موفقیت به‌روزرسانی شد');
            }
        } else {
            const error = await res.json();
            alert('خطا در به‌روزرسانی وضعیت: ' + (error.message || 'خطای ناشناخته'));
            // Re-render to reset the select
            renderTable();
        }
    } catch (e) {
        console.error('Error updating sample status:', e);
        alert('خطا در به‌روزرسانی وضعیت');
        // Re-render to reset the select
        renderTable();
    }
}

// Persian Calendar for edit_follow_up_date
document.addEventListener('DOMContentLoaded', function() {
    const editFollowUpDateShamsiInput = document.getElementById('edit_follow_up_date_shamsi');
    const editFollowUpDateHiddenInput = document.getElementById('edit_follow_up_date');
    
    if (editFollowUpDateShamsiInput) {
        let currentCalendarYear = null;
        let currentCalendarMonth = null;
        
        // Get current date from input or use today
        const getCurrentDate = () => {
            const currentValue = editFollowUpDateShamsiInput.value;
            if (currentValue && currentValue.includes('/')) {
                const parts = currentValue.split('/');
                return {
                    year: parseInt(parts[0]),
                    month: parseInt(parts[1])
                };
            }
            // Get from server
            @php
                $now = \Morilog\Jalali\Jalalian::now();
                $currentYear = $now->getYear();
                $currentMonth = $now->getMonth();
            @endphp
            return {
                year: {{ $currentYear }},
                month: {{ $currentMonth }}
            };
        };
        
        // Function to show Persian calendar
        window.showEditFollowUpDateCalendar = function(year, month) {
            // Remove existing calendar if any
            const existingCalendar = document.getElementById('persian-calendar-modal-edit-follow-up');
            if (existingCalendar) {
                existingCalendar.remove();
            }
            
            // Fetch calendar view from server
            const calendarUrl = '{{ route('api.calendar-view') }}';
            fetch(calendarUrl + '?year=' + year + '&month=' + month, {
                headers: {
                    'Accept': 'text/html',
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
                }
            })
                .then(response => {
                    return response.text().then(text => {
                        if (!response.ok) {
                            if (text.includes('persian-calendar-container')) {
                                return text;
                            }
                            throw new Error('Failed to load calendar: ' + response.status);
                        }
                        return text;
                    });
                })
                .then(html => {
                    if (!html || html.trim().length === 0 || !html.includes('persian-calendar-container')) {
                        throw new Error('Invalid calendar HTML');
                    }
                    
                    // Create modal container
                    const modal = document.createElement('div');
                    modal.id = 'persian-calendar-modal-edit-follow-up';
                    modal.style.cssText = 'position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; pointer-events: none;';
                    
                    // Create backdrop
                    const backdrop = document.createElement('div');
                    backdrop.style.cssText = 'position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); pointer-events: auto;';
                    backdrop.addEventListener('click', function(e) {
                        e.stopPropagation();
                        modal.remove();
                    });
                    
                    // Create calendar container
                    const calendarContainer = document.createElement('div');
                    calendarContainer.style.cssText = 'position: relative; z-index: 100000; background: transparent; pointer-events: auto;';
                    calendarContainer.innerHTML = html;
                    calendarContainer.addEventListener('click', function(e) {
                        e.stopPropagation();
                    });
                    
                    modal.appendChild(backdrop);
                    modal.appendChild(calendarContainer);
                    document.body.appendChild(modal);
                    
                    setTimeout(() => {
                        const calendarDiv = calendarContainer.querySelector('.persian-calendar-container');
                        if (calendarDiv) {
                            calendarDiv.style.display = 'block';
                            calendarDiv.style.visibility = 'visible';
                            calendarDiv.style.opacity = '1';
                        }
                    }, 50);
                    
                    // Handle day selection
                    setTimeout(() => {
                        const dayElements = calendarContainer.querySelectorAll('.calendar-day');
                        dayElements.forEach(dayEl => {
                            dayEl.addEventListener('click', function(e) {
                                e.stopPropagation();
                                
                                // Remove selected class from all days
                                dayElements.forEach(day => {
                                    day.classList.remove('selected');
                                    const dayNumber = day.querySelector('.day-number');
                                    const dayGregorian = day.querySelector('.day-gregorian');
                                    if (dayNumber) {
                                        dayNumber.style.color = '';
                                    }
                                    if (dayGregorian) {
                                        dayGregorian.style.color = '';
                                    }
                                });
                                
                                // Add selected class to clicked day
                                this.classList.add('selected');
                                const dayNumber = this.querySelector('.day-number');
                                const dayGregorian = this.querySelector('.day-gregorian');
                                if (dayNumber) {
                                    dayNumber.style.color = '#ffffff';
                                }
                                if (dayGregorian) {
                                    dayGregorian.style.color = '#ffffff';
                                }
                                
                                const gregorian = this.getAttribute('data-gregorian');
                                const shamsi = this.getAttribute('data-shamsi');
                                
                                if (editFollowUpDateShamsiInput) {
                                    editFollowUpDateShamsiInput.value = shamsi;
                                }
                                if (editFollowUpDateHiddenInput) {
                                    editFollowUpDateHiddenInput.value = gregorian;
                                }
                                
                                modal.remove();
                            });
                        });
                        
                        // Handle month navigation
                        const prevBtn = calendarContainer.querySelector('.prev-month');
                        const nextBtn = calendarContainer.querySelector('.next-month');
                        
                        if (prevBtn) {
                            prevBtn.addEventListener('click', function(e) {
                                e.stopPropagation();
                                let newYear = parseInt(this.getAttribute('data-year'));
                                let newMonth = parseInt(this.getAttribute('data-month'));
                                
                                if (newMonth < 1) {
                                    newMonth = 12;
                                    newYear--;
                                }
                                
                                currentCalendarYear = newYear;
                                currentCalendarMonth = newMonth;
                                showEditFollowUpDateCalendar(newYear, newMonth);
                            });
                        }
                        
                        if (nextBtn) {
                            nextBtn.addEventListener('click', function(e) {
                                e.stopPropagation();
                                let newYear = parseInt(this.getAttribute('data-year'));
                                let newMonth = parseInt(this.getAttribute('data-month'));
                                
                                if (newMonth > 12) {
                                    newMonth = 1;
                                    newYear++;
                                }
                                
                                currentCalendarYear = newYear;
                                currentCalendarMonth = newMonth;
                                showEditFollowUpDateCalendar(newYear, newMonth);
                            });
                        }
                        
                        // Handle "Go to Today" button
                        const todayBtn = calendarContainer.querySelector('.calendar-today-btn');
                        if (todayBtn) {
                            todayBtn.addEventListener('click', function(e) {
                                e.stopPropagation();
                                const today = getCurrentDate();
                                currentCalendarYear = today.year;
                                currentCalendarMonth = today.month;
                                showEditFollowUpDateCalendar(today.year, today.month);
                            });
                        }
                    }, 100);
                })
                .catch(error => {
                    console.error('Failed to load calendar:', error);
                });
        };
        
        // Open calendar on input click
        editFollowUpDateShamsiInput.addEventListener('click', function() {
            const currentDate = getCurrentDate();
            currentCalendarYear = currentDate.year;
            currentCalendarMonth = currentDate.month;
            showEditFollowUpDateCalendar(currentDate.year, currentDate.month);
        });
    }
});
</script>

@endpush