@extends('layouts.panel')

@section('title', app(\App\Services\TitleService::class)->generate())
@section('meta_description', 'مشاهده پروفایل تامین‌کننده، اطلاعات تماس و محصولات تامین‌شده در منیجینو ابزار برای مدیریت خرید و فروش مواد شیمیایی')

@push('styles')
<style>
.note-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.add-to-reminder-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.add-to-reminder-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.edit-note-btn {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.edit-note-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.delete-note-btn {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.delete-note-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.save-note-btn {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.save-note-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.cancel-edit-btn {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cancel-edit-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

#addReminderModalOverlay .form-group {
    margin-bottom: 16px;
}

#addReminderModalOverlay .form-group label {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    color: #d1d5db;
}

#addReminderModalOverlay .form-group input,
#addReminderModalOverlay .form-group select,
#addReminderModalOverlay .form-group textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 6px;
    background: rgba(255,255,255,0.1);
    color: #fff;
    font-size: 12px;
}

#addReminderModalOverlay .form-group input:focus,
#addReminderModalOverlay .form-group select:focus,
#addReminderModalOverlay .form-group textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}
</style>
@endpush

@section('content')
<div class="container">
    <header class="header">
        <h1>پروفایل: {{ $supplier->name }}
            @if($supplier->is_blacklisted)
                <span class="ms-2 inline-flex items-center text-red-600 text-xs px-2 py-0.5 rounded-full bg-red-100">لیست سیاه</span>
            @endif
        </h1>
        <a style="font-size: 12px;" href="{{ route(($routePrefix ?? 'admin.suppliers') . '.index') }}" class="btn btn-secondary">بازگشت به لیست</a>
    </header>

    <div class="profile-grid">
        <div class="profile-card profile-info">
            <h3 style="font-size: 14px;margin-bottom: 30px;">اطلاعات اصلی</h3>
            <p style="border-bottom: 1px solid #393939;margin: 10px 0px;padding: 10px 0px;"><span>نام مدیرعامل:</span> <span>{{ $supplier->ceo ?: '-' }}</span></p>
            <p style="border-bottom: 1px solid #393939;margin: 10px 0px;padding: 10px 0px;"><span>شناسه ملی:</span> <span>{{ $supplier->national_id ?: '-' }}</span></p>
            <p style="border-bottom: 1px solid #393939;margin: 10px 0px;padding: 10px 0px;"><span>شناسه اقتصادی:</span> <span>{{ $supplier->economic_id ?: '-' }}</span></p>
            <p style="border-bottom: 1px solid #393939;margin: 10px 0px;padding: 10px 0px;"><span>صنعت:</span> <span>{{ $supplier->industry ?: '-' }}</span></p>
            <p style="border-bottom: 1px solid #393939;margin: 10px 0px;padding: 10px 0px;"><span>دسته‌بندی‌ها:</span> 
                <span>
                    @if(is_array($supplier->categories) && count($supplier->categories) > 0)
                        {{ implode(', ', $supplier->categories) }}
                    @elseif(!empty($supplier->categories))
                        {{ $supplier->categories }}
                    @else
                        -
                    @endif
                </span>
            </p>
            <p style="border-bottom: 1px solid #393939;margin: 10px 0px;padding: 10px 0px;"><span>نوع فعالیت:</span> <span>{{ $supplier->activity_type ?: '-' }}</span></p>
            <p style="border-bottom: 1px solid #393939;margin: 10px 0px;padding: 10px 0px;"><span>وضعیت:</span> 
                <span>
                    @if($supplier->is_blacklisted)
                        <span class="text-red-500 font-semibold">لیست سیاه</span>
                    @else
                        <span class="text-green-500 font-semibold">فعال</span>
                    @endif
                </span>
            </p>
            <p style="border-bottom: 1px solid #393939;margin: 10px 0px;padding: 10px 0px;"><span>نام‌های دیگر:</span> <span>{{ $supplier->other_names ?: '-' }}</span></p>
            <p style="border-bottom: 1px solid #393939;margin: 10px 0px;padding: 10px 0px;"><span>تاریخ ایجاد:</span> 
                <span>
                    @if($supplier->created_at)
                        <span class="jalali-date" data-date="{{ $supplier->created_at->toISOString() }}"></span>
                        <span class="jalali-time" data-date="{{ $supplier->created_at->toISOString() }}"></span>
                    @else
                        -
                    @endif
                </span>
            </p>
            <p style="border-bottom: 1px solid #393939;margin: 10px 0px;padding: 10px 0px;"><span>آخرین ویرایش:</span> 
                <span>
                    @if($supplier->updated_at)
                        <span class="jalali-date" data-date="{{ $supplier->updated_at->toISOString() }}"></span>
                        <span class="jalali-time" data-date="{{ $supplier->updated_at->toISOString() }}"></span>
                    @else
                        -
                    @endif
                </span>
            </p>
            <p style="border-bottom: 1px solid #393939;margin: 10px 0px;padding: 10px 0px;"><span>تعداد محصولات:</span> <span>{{ $supplier->products->count() }}</span></p>
                    </div>
        
        <div class="profile-card profile-info">
            <h3 style="font-size: 14px;margin-bottom: 30px;">اطلاعات تماس و امتیاز</h3>
            <p style="border-bottom: 1px solid #393939;margin: 10px 0px;padding: 10px 0px;"><span>آدرس:</span> <span>{{ $supplier->address ?: '-' }}</span></p>
            <p style="border-bottom: 1px solid #393939;margin: 10px 0px;padding: 10px 0px;"><span>کدپستی:</span> <span>{{ $supplier->postal_code ?: '-' }}</span></p>
            <p style="border-bottom: 1px solid #393939;margin: 10px 0px;padding: 10px 0px;"><span>تلفن‌ها:</span> 
                <span>
                    @php
                        $supplierPhones = \App\Models\SupplierPhone::where('supplier_id', $supplier->id)->get();
                    @endphp
                    @if($supplierPhones && $supplierPhones->count() > 0)
                        {{ $supplierPhones->pluck('phone')->implode(' - ') }}
                    @else
                        -
                    @endif
                </span>
            </p>

            <p style="border-bottom: 1px solid #393939;margin: 10px 0px;padding: 10px 0px;"><span>وب‌سایت:</span> 
                <span>
                    @if($supplier->website)
                        <a href="{{ $supplier->website }}" target="_blank" class="text-accent">{{ $supplier->website }}</a>
                    @else
                        -
                    @endif
                </span>
            </p>
            
            <div class="space-y-2 mt-4">
                <h4 style="font-size: 12px;" class="text-accent">کارشناسان فروش:</h4>
                @if($supplier->salesExperts && $supplier->salesExperts->count() > 0)
                    @foreach($supplier->salesExperts as $expert)
                        <p><span>{{ $expert->name }}:</span> <span>{{ $expert->phone ?: '-' }}</span></p>
                    @endforeach
                @else
                    <p class="text-sm" style="color: var(--muted);">کارشناسی ثبت نشده است.</p>
                    @endif
                </div>
            <hr style="border-top: 1px solid #393939;margin: 10px 0px;padding: 10px 0px;">
            <div class="mt-4">
                <h4 style="font-size: 12px;" class="text-accent">امتیازات:</h4>
                @php
                    $ratingBreakdown = is_array($supplier->rating_breakdown) ? $supplier->rating_breakdown : [];
                    $qualityRating = $supplier->rating_quality ?: ($ratingBreakdown['quality'] ?? 0);
                    $deliveryRating = $supplier->rating_delivery ?: ($ratingBreakdown['delivery'] ?? 0);
                    $priceRating = $supplier->rating_price ?: ($ratingBreakdown['price'] ?? 0);
                    $responsivenessRating = $supplier->rating_responsiveness ?: ($ratingBreakdown['responsiveness'] ?? 0);
                @endphp
                
                <div class="grid grid-cols-2 gap-4 mb-4">
                    <p><span>کیفیت بار:</span> 
                        <span>
                            @if($qualityRating > 0)
                                @for($i = 1; $i <= 5; $i++)
                                    <span class="text-yellow-400">{{ $i <= $qualityRating ? '★' : '☆' }}</span>
                                @endfor
                            @else
                                امتیازی ثبت نشده
                    @endif
                        </span>
                    </p>
                    
                    <p><span>تحویل به موقع:</span> 
                        <span>
                            @if($deliveryRating > 0)
                                @for($i = 1; $i <= 5; $i++)
                                    <span class="text-yellow-400">{{ $i <= $deliveryRating ? '★' : '☆' }}</span>
                                @endfor
                            @else
                                امتیازی ثبت نشده
                    @endif
                        </span>
                    </p>
                    
                    <p><span>قیمت:</span> 
                        <span>
                            @if($priceRating > 0)
                                @for($i = 1; $i <= 5; $i++)
                                    <span class="text-yellow-400">{{ $i <= $priceRating ? '★' : '☆' }}</span>
                                @endfor
                            @else
                                امتیازی ثبت نشده
                    @endif
                        </span>
                    </p>
                    
                    <p><span>پاسخگویی:</span> 
                        <span>
                            @if($responsivenessRating > 0)
                                @for($i = 1; $i <= 5; $i++)
                                    <span class="text-yellow-400">{{ $i <= $responsivenessRating ? '★' : '☆' }}</span>
                                @endfor
                            @else
                                امتیازی ثبت نشده
                    @endif
                        </span>
                    </p>
                    </div>
                
                <p class="border-t pt-2 font-semibold">
                    <span>میانگین کل:</span> 
                    <span>
                        @if($supplier->rating > 0)
                                @for($i = 1; $i <= 5; $i++)
                                <span class="text-yellow-400">{{ $i <= $supplier->rating ? '★' : '☆' }}</span>
                            @endfor
                            ({{ number_format($supplier->rating, 1) }}/5)
                                    @else
                            امتیازی ثبت نشده
                                    @endif
                    </span>
                </p>
                </div>
            </div>
        </div>

    @if($supplier->description)
    <div class="profile-card">
        <h3 style="font-size: 14px;margin-bottom: 30px;">توضیحات</h3>
        <p style="line-height: 2.8;font-size: 10px;">{{ $supplier->description }}</p>
                                    </div>
                                @endif

    @if($supplier->bulk_products)
    <div class="profile-card">
        <h3 style="font-size: 14px;margin-bottom: 30px;">محصولات درج شده به صورت یکجا</h3>
        <pre style="background: #0b1220; padding: 12px; border-radius: 8px; border: 1px solid var(--border); white-space: pre-wrap;font-size: 12px; font-family: 'IRANSans-web', 'IRANSans', sans-serif; line-height: 30px;">{{ $supplier->bulk_products }}</pre>
                                    </div>
                                @endif

    @if($supplier->products && $supplier->products->count() > 0)
    <div class="profile-card">
        <h3 style="font-size: 14px;margin-bottom: 30px;">محصولات تامین شده</h3>
        <div class="table-card">
            <div class="table-wrapper">
                <table>
                    <thead>
                        <tr>
                            <th>نام محصول</th>
                            <th>برند</th>
                            <th>کشور</th>
                            <th>گرید</th>
                            <th>خلوص</th>
                            <th>قیمت</th>
                            <th>آخرین به‌روزرسانی</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($supplier->products as $product)
                        <tr>
                            <td>{{ $product->name }}</td>
                            <td>{{ $product->pivot->brand ?: '-' }}</td>
                            <td>{{ $product->pivot->country ?: '-' }}</td>
                            <td>{{ $product->pivot->grade ?: '-' }}</td>
                            <td>{{ $product->pivot->purity ?: '-' }}</td>
                            <td class="price">
                                @if($product->pivot->price)
                                    {{ number_format($product->pivot->price) }} تومان
                                @else
                                    -
                                @endif
                            </td>
                            <td>
                                @if($product->pivot->last_quoted_at)
                                    <span class="jalali-date" data-date="{{ \Carbon\Carbon::parse($product->pivot->last_quoted_at)->toISOString() }}"></span>
                                @else
                                    -
                                @endif
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
                                    </div>
                                @endif

    <div class="profile-card">
        <h3 style="font-size: 14px;margin-bottom: 30px;">یادداشت‌ها</h3>
        <div id="notesList">
            @if($supplier->notes && $supplier->notes->count() > 0)
                @foreach($supplier->notes as $note)
                                          <div class="note">
                         <p style="font-size: 12px;border-right: 2px red;margin-right: 10px;">{{ $note->note }}</p>
                         <div class="date">
                             <span class="jalali-date" data-date="{{ $note->created_at->toISOString() }}"></span>
                             <span id="time-{{ $note->id }}"></span> - 
                             توسط {{ $note->author ? $note->author->first_name . ' ' . $note->author->last_name : 'کاربر نامشخص' }}
                        </div>
                        <div class="note-actions" style="margin-top: 8px;">
                            <button class="btn btn-sm btn-secondary add-to-reminder-btn" 
                                    data-note-text="{{ $note->note }}" 
                                    style="font-size: 10px; padding: 4px 8px;">
                                ⏰ افزودن به ریماندر
                            </button>
                            <button class="btn btn-sm btn-warning edit-note-btn" 
                                    data-note-id="{{ $note->id }}" 
                                    data-note-text="{{ $note->note }}" 
                                    style="font-size: 10px; padding: 4px 8px;">
                                ✏️ ویرایش
                            </button>
                            <button class="btn btn-sm btn-danger delete-note-btn" 
                                    data-note-id="{{ $note->id }}" 
                                    style="font-size: 10px; padding: 4px 8px;">
                                🗑️ حذف
                            </button>
                        </div>
                        </div>
                    @endforeach
            @else
                <p class="text-sm" style="color: var(--muted);">یادداشتی ثبت نشده است.</p>
            @endif
        </div>
        <div class="form-group" style="margin-top: 16px;">
            <textarea id="newNoteText" placeholder="یادداشت جدید..." rows="3"></textarea>
            <button class="btn btn-primary" style="align-self: flex-start;" data-action="add-note" data-supplier-id="{{ $supplier->id }}">افزودن یادداشت</button>
    </div>
</div>

</div>

<!-- Add Reminder Modal -->
<div id="addReminderModalOverlay" class="modal-overlay hidden">
    <div class="modal delete-modal">
        <h3>افزودن وظیفه جدید</h3>
        <form id="addReminderForm">
            <div class="form-group">
                <label for="reminderTitle">عنوان وظیفه</label>
                <input type="text" id="reminderTitle" required placeholder="عنوان وظیفه را وارد کنید">
            </div>
            <div class="form-group">
                <label for="reminderDate">تاریخ</label>
                <input type="text" 
                       id="reminderDateShamsi" 
                       placeholder="برای انتخاب تاریخ کلیک کنید" 
                       readonly
                       class="w-full px-4 py-3 bg-slate-700/50 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent cursor-pointer"
                       style="cursor: pointer;">
                <input type="hidden" 
                       id="reminderDate" 
                       required>
            </div>
            <div class="form-group">
                <label for="reminderCategory">دسته‌بندی</label>
                <select id="reminderCategory">
                    <option value="personal">تسک شخصی</option>
                    <option value="supplier">تامین‌کننده</option>
                    <option value="purchasing">خرید</option>
                    <option value="financial">مالی</option>
                    <option value="accounting">حسابداری</option>
                    <option value="warehouse">انبار</option>
                    <option value="sales">فروش</option>
                    <option value="management">مدیریت</option>
                    <option value="development">توسعه</option>
                    <option value="general">عمومی</option>
                </select>
            </div>
            <div class="form-group">
                <label for="reminderImportance">اهمیت</label>
                <select id="reminderImportance">
                    <option value="low">کم</option>
                    <option value="medium" selected>متوسط</option>
                    <option value="high">زیاد</option>
                </select>
            </div>
            <div class="form-group">
                <label for="reminderDescription">توضیحات</label>
                <textarea id="reminderDescription" rows="3" placeholder="توضیحات وظیفه..."></textarea>
            </div>
            <div class="form-group">
                <label for="reminderAssignedTo">واگذار به</label>
                <select id="reminderAssignedTo">
                    <option value="">خودم</option>
                    @foreach(\App\Models\User::all() as $user)
                        <option value="{{ $user->id }}">{{ $user->first_name }} {{ $user->last_name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="actions">
                <button type="button" id="cancelReminderBtn" class="btn btn-secondary">انصراف</button>
                <button type="submit" class="btn btn-primary">افزودن وظیفه</button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
// Helper function to convert Gregorian to Jalali
function gregorianToJalali(gy, gm, gd) {
    const g_d_m = [0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334];
    let jy, jm, jd, gy2, days;
    
    if (gy <= 1600) {
        jy = 0; gy -= 621;
    } else {
        jy = 979; gy -= 1600; gm -= 1;
    }
    
    if (gm < 0) { gy--; gm += 12; }
    
    gy2 = (gm < 3) ? (gy - 1) : gy;
    days = (365 * gy) + (Math.floor((gy2 + 3) / 4)) - (Math.floor((gy2 + 99) / 100)) + 
           (Math.floor((gy2 + 399) / 400)) - 80 + gd + g_d_m[gm];
    
    jy += 33 * Math.floor(days / 12053);
    days %= 12053;
    jy += 4 * Math.floor(days / 1461);
    days %= 1461;
    
    if (days >= 366) {
        jy += Math.floor((days - 1) / 365);
        days = (days - 1) % 365;
    }
    
    if (days < 186) {
        jm = 1 + Math.floor(days / 31);
        jd = 1 + (days % 31);
    } else {
        jm = 7 + Math.floor((days - 186) / 30);
        jd = 1 + ((days - 186) % 30);
    }
    
    return [jy, jm, jd];
}

// Display local time and Jalali date for notes
document.addEventListener('DOMContentLoaded', function() {
    // Convert Jalali dates
    document.querySelectorAll('.jalali-date').forEach(function(element) {
        const date = new Date(element.getAttribute('data-date'));
        const [jy, jm, jd] = gregorianToJalali(date.getFullYear(), date.getMonth() + 1, date.getDate());
        element.textContent = jy + '/' + String(jm).padStart(2, '0') + '/' + String(jd).padStart(2, '0');
    });
    
    // Convert times
    document.querySelectorAll('.jalali-time').forEach(function(element) {
        const date = new Date(element.getAttribute('data-date'));
        element.textContent = ' ' + date.toLocaleTimeString('fa-IR', {
            hour: '2-digit',
            minute: '2-digit'
        });
    });
    
    // Display time for notes
    @if($supplier->notes && $supplier->notes->count() > 0)
        @foreach($supplier->notes as $note)
            const noteDate{{ $note->id }} = new Date('{{ $note->created_at->toISOString() }}');
            const timeSpan{{ $note->id }} = document.getElementById('time-{{ $note->id }}');
            if (timeSpan{{ $note->id }}) {
                timeSpan{{ $note->id }}.textContent = noteDate{{ $note->id }}.toLocaleTimeString('fa-IR', {
                    hour: '2-digit',
                    minute: '2-digit'
                });
            }
        @endforeach
    @endif
});

// Add note functionality
document.addEventListener('click', async function(e) {
    if (e.target.dataset.action === 'add-note') {
        const supplierId = e.target.dataset.supplierId;
        const noteText = (document.getElementById('newNoteText').value || '').trim();
        if (!noteText) {
            alert('لطفاً متن یادداشت را وارد کنید');
            return;
        }
        try {
            const url = `{{ route(($routePrefix ?? 'admin.suppliers') . '.addNote', ':supplier') }}`.replace(':supplier', supplierId);
            const formData = new FormData();
            formData.append('note', noteText);
            formData.append('_token', document.querySelector('meta[name="csrf-token"]').getAttribute('content'));
            const response = await fetch(url, {
                method: 'POST',
                body: formData,
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                credentials: 'same-origin'
            });
            const data = await response.json().catch(() => ({}));
            if (response.ok && data.ok) {
                const notesList = document.getElementById('notesList');
                const newNote = document.createElement('div');
                newNote.className = 'note';
                const now = new Date();
                const [jy, jm, jd] = gregorianToJalali(now.getFullYear(), now.getMonth() + 1, now.getDate());
                newNote.innerHTML = `
                    <p style=\"font-size: 12px;border-right: 2px red;margin-right: 10px;\">${data.note.note}</p>
                    <div class=\"date\">${jy}/${String(jm).padStart(2,'0')}/${String(jd).padStart(2,'0')} ${now.toLocaleTimeString('fa-IR',{hour:'2-digit',minute:'2-digit'})} - توسط شما</div>
                    <div class=\"note-actions\" style=\"margin-top: 8px;\">
                        <button class=\"btn btn-sm btn-secondary add-to-reminder-btn\" 
                                data-note-text=\"${data.note.note}\" 
                                style=\"font-size: 10px; padding: 4px 8px;\">
                            ⏰ افزودن به ریماندر
                        </button>
                        <button class=\"btn btn-sm btn-warning edit-note-btn\" 
                                data-note-id=\"${data.note.id}\" 
                                data-note-text=\"${data.note.note}\" 
                                style=\"font-size: 10px; padding: 4px 8px;\">
                            ✏️ ویرایش
                        </button>
                        <button class=\"btn btn-sm btn-danger delete-note-btn\" 
                                data-note-id=\"${data.note.id}\" 
                                style=\"font-size: 10px; padding: 4px 8px;\">
                            🗑️ حذف
                        </button>
                    </div>
                `;
                const noNotesMsg = notesList.querySelector('.text-sm');
                if (noNotesMsg) noNotesMsg.remove();
                notesList.prepend(newNote);
                document.getElementById('newNoteText').value = '';
                if (window.showSuccessModalWithAutoClose) {
                    window.showSuccessModalWithAutoClose('یادداشت با موفقیت ذخیره شد.');
                }
            } else {
                const msg = (data && (data.message || (data.errors && JSON.stringify(data.errors)))) || 'خطا در ذخیره یادداشت';
                alert(msg);
            }
        } catch (err) {
            console.error('Add note error:', err);
            alert('خطا در ارتباط با سرور');
        }
    }
});

// Add reminder functionality
document.addEventListener('click', function(e) {
    if (e.target.classList.contains('add-to-reminder-btn')) {
        const noteText = e.target.dataset.noteText;
        openReminderModal(noteText);
    }
    
    if (e.target.id === 'cancelReminderBtn') {
        closeReminderModal();
    }
});

// Edit note functionality
document.addEventListener('click', function(e) {
    if (e.target.classList.contains('edit-note-btn')) {
        const noteId = e.target.dataset.noteId;
        const noteText = e.target.dataset.noteText;
        const noteElement = e.target.closest('.note');
        const noteParagraph = noteElement.querySelector('p');
        
        // Create textarea for editing
        const textarea = document.createElement('textarea');
        textarea.value = noteText;
        textarea.style.width = '100%';
        textarea.style.minHeight = '60px';
        textarea.style.padding = '8px';
        textarea.style.border = '1px solid #ccc';
        textarea.style.borderRadius = '4px';
        textarea.style.fontSize = '12px';
        textarea.style.fontFamily = 'inherit';
        
        // Replace paragraph with textarea
        noteParagraph.style.display = 'none';
        noteParagraph.parentNode.insertBefore(textarea, noteParagraph);
        
        // Create save and cancel buttons
        const buttonContainer = noteElement.querySelector('.note-actions');
        const originalButtons = buttonContainer.innerHTML;
        
        buttonContainer.innerHTML = `
            <button class="btn btn-sm btn-success save-note-btn" data-note-id="${noteId}" style="font-size: 10px; padding: 4px 8px;">💾 ذخیره</button>
            <button class="btn btn-sm btn-secondary cancel-edit-btn" style="font-size: 10px; padding: 4px 8px;">❌ لغو</button>
        `;
        
        // Focus on textarea
        textarea.focus();
        textarea.select();
        
        // Add event listeners for save and cancel
        const saveBtn = buttonContainer.querySelector('.save-note-btn');
        const cancelBtn = buttonContainer.querySelector('.cancel-edit-btn');
        
        saveBtn.addEventListener('click', async function() {
            const newText = textarea.value.trim();
            if (!newText) {
                alert('لطفاً متن یادداشت را وارد کنید');
                return;
            }
            
            try {
                const url = `{{ route('suppliers.notes.update', [':supplier', ':note']) }}`
                    .replace(':supplier', {{ $supplier->id }})
                    .replace(':note', noteId);
                
                const formData = new FormData();
                formData.append('note', newText);
                formData.append('_token', document.querySelector('meta[name="csrf-token"]').getAttribute('content'));
                formData.append('_method', 'PUT');
                
                const response = await fetch(url, {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    credentials: 'same-origin'
                });
                
                const data = await response.json().catch(() => ({}));
                
                if (response.ok && data.ok) {
                    // Update the note text
                    noteParagraph.textContent = newText;
                    noteParagraph.style.display = 'block';
                    textarea.remove();
                    buttonContainer.innerHTML = originalButtons;
                    
                    // Update data attributes
                    const editBtn = buttonContainer.querySelector('.edit-note-btn');
                    const reminderBtn = buttonContainer.querySelector('.add-to-reminder-btn');
                    if (editBtn) editBtn.dataset.noteText = newText;
                    if (reminderBtn) reminderBtn.dataset.noteText = newText;
                    
                    if (window.showSuccessModalWithAutoClose) {
                        window.showSuccessModalWithAutoClose('یادداشت با موفقیت به‌روزرسانی شد.');
                    }
                } else {
                    const msg = (data && data.message) || 'خطا در به‌روزرسانی یادداشت';
                    alert(msg);
                }
            } catch (err) {
                console.error('Update note error:', err);
                alert('خطا در ارتباط با سرور');
            }
        });
        
        cancelBtn.addEventListener('click', function() {
            noteParagraph.style.display = 'block';
            textarea.remove();
            buttonContainer.innerHTML = originalButtons;
        });
    }
});

// Delete note functionality
document.addEventListener('click', function(e) {
    if (e.target.classList.contains('delete-note-btn')) {
        const noteId = e.target.dataset.noteId;
        const noteElement = e.target.closest('.note');
        const noteText = noteElement.querySelector('p')?.textContent?.trim() || 'یادداشت';
        
        // Use global delete modal if available
        if (window.showDeleteModal) {
            window.showDeleteModal(
                'حذف یادداشت',
                'آیا از حذف این یادداشت اطمینان دارید؟',
                async () => {
                    // Confirm callback
                    try {
                        const url = `{{ route('suppliers.notes.delete', [':supplier', ':note']) }}`
                            .replace(':supplier', {{ $supplier->id }})
                            .replace(':note', noteId);
                        
                        const formData = new FormData();
                        formData.append('_token', document.querySelector('meta[name="csrf-token"]').getAttribute('content'));
                        formData.append('_method', 'DELETE');
                        
                        const response = await fetch(url, {
                            method: 'POST',
                            body: formData,
                            headers: {
                                'Accept': 'application/json',
                                'X-Requested-With': 'XMLHttpRequest'
                            },
                            credentials: 'same-origin'
                        });
                        
                        const data = await response.json().catch(() => ({}));
                        
                        if (response.ok && data.ok) {
                            noteElement.remove();
                            
                            // Check if no notes left
                            const notesList = document.getElementById('notesList');
                            if (notesList.children.length === 0) {
                                notesList.innerHTML = '<p class="text-sm" style="color: var(--muted);">یادداشتی ثبت نشده است.</p>';
                            }
                            
                            if (window.showSuccessModalWithAutoClose) {
                                window.showSuccessModalWithAutoClose('یادداشت با موفقیت حذف شد.');
                            }
                        } else {
                            const msg = (data && data.message) || 'خطا در حذف یادداشت';
                            alert(msg);
                        }
                    } catch (err) {
                        console.error('Delete note error:', err);
                        alert('خطا در ارتباط با سرور');
                    }
                },
                () => {
                    // Cancel callback - do nothing
                }
            );
        } else {
            // Fallback to browser confirm
            if (confirm('آیا از حذف این یادداشت اطمینان دارید؟')) {
                (async function() {
                    try {
                        const url = `{{ route('suppliers.notes.delete', [':supplier', ':note']) }}`
                            .replace(':supplier', {{ $supplier->id }})
                            .replace(':note', noteId);
                        
                        const formData = new FormData();
                        formData.append('_token', document.querySelector('meta[name="csrf-token"]').getAttribute('content'));
                        formData.append('_method', 'DELETE');
                        
                        const response = await fetch(url, {
                            method: 'POST',
                            body: formData,
                            headers: {
                                'Accept': 'application/json',
                                'X-Requested-With': 'XMLHttpRequest'
                            },
                            credentials: 'same-origin'
                        });
                        
                        const data = await response.json().catch(() => ({}));
                        
                        if (response.ok && data.ok) {
                            noteElement.remove();
                            
                            // Check if no notes left
                            const notesList = document.getElementById('notesList');
                            if (notesList.children.length === 0) {
                                notesList.innerHTML = '<p class="text-sm" style="color: var(--muted);">یادداشتی ثبت نشده است.</p>';
                            }
                            
                            if (window.showSuccessModalWithAutoClose) {
                                window.showSuccessModalWithAutoClose('یادداشت با موفقیت حذف شد.');
                            }
                        } else {
                            const msg = (data && data.message) || 'خطا در حذف یادداشت';
                            alert(msg);
                        }
                    } catch (err) {
                        console.error('Delete note error:', err);
                        alert('خطا در ارتباط با سرور');
                    }
                })();
            }
        }
    }
});

// Handle reminder form submission
document.getElementById('addReminderForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    
    const formData = new FormData();
    formData.append('title', document.getElementById('reminderTitle').value);
    formData.append('date', document.getElementById('reminderDate').value);
    formData.append('category', document.getElementById('reminderCategory').value);
    formData.append('importance', document.getElementById('reminderImportance').value);
    formData.append('description', document.getElementById('reminderDescription').value);
    formData.append('assigned_to', document.getElementById('reminderAssignedTo').value);
    formData.append('_token', document.querySelector('meta[name="csrf-token"]').getAttribute('content'));
    
    try {
        const response = await fetch('{{ route("reminders.store") }}', {
            method: 'POST',
            body: formData,
            headers: {
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            },
            credentials: 'same-origin'
        });
        
        const data = await response.json().catch(() => ({}));
        
        if (response.ok && data.message) {
            closeReminderModal();
            if (window.showSuccessModalWithAutoClose) {
                window.showSuccessModalWithAutoClose('وظیفه با موفقیت اضافه شد.');
            }
        } else {
            const msg = data.message || 'خطا در افزودن وظیفه';
            alert(msg);
        }
    } catch (error) {
        console.error('Add reminder error:', error);
        alert('خطا در ارتباط با سرور');
    }
});

function openReminderModal(noteText) {
    const modal = document.getElementById('addReminderModalOverlay');
    const descriptionField = document.getElementById('reminderDescription');
    
    // Set default values
    document.getElementById('reminderTitle').value = 'وظیفه مربوط به تامین‌کننده';
    document.getElementById('reminderCategory').value = 'supplier';
    // Date will be set by calendar when user selects
    
    // Pre-fill description with note text
    if (noteText) {
        descriptionField.value = `یادداشت: ${noteText}`;
    }
    
    modal.classList.remove('hidden');
}

function closeReminderModal() {
    const modal = document.getElementById('addReminderModalOverlay');
    modal.classList.add('hidden');
    
    // Reset form
    document.getElementById('addReminderForm').reset();
}

// Close modal on overlay click
document.getElementById('addReminderModalOverlay').addEventListener('click', function(e) {
    if (e.target === this) {
        closeReminderModal();
    }
});
</script>
@endpush

@push('scripts')
<script>
// Persian Calendar for reminderDate in suppliers show page
document.addEventListener('DOMContentLoaded', function() {
    const reminderDateShamsiInput = document.getElementById('reminderDateShamsi');
    const reminderDateHiddenInput = document.getElementById('reminderDate');
    
    if (reminderDateShamsiInput) {
        let currentCalendarYear = null;
        let currentCalendarMonth = null;
        
        // Get current date from input or use today
        const getCurrentDate = () => {
            const currentValue = reminderDateShamsiInput.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.showSupplierReminderDateCalendar = function(year, month) {
            // Remove existing calendar if any
            const existingCalendar = document.getElementById('persian-calendar-modal-supplier-reminder');
            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-supplier-reminder';
                    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 (reminderDateShamsiInput) {
                                    reminderDateShamsiInput.value = shamsi;
                                }
                                if (reminderDateHiddenInput) {
                                    reminderDateHiddenInput.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;
                                showSupplierReminderDateCalendar(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;
                                showSupplierReminderDateCalendar(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;
                                showSupplierReminderDateCalendar(today.year, today.month);
                            });
                        }
                    }, 100);
                })
                .catch(error => {
                    console.error('Failed to load calendar:', error);
                });
        };
        
        // Open calendar on input click
        reminderDateShamsiInput.addEventListener('click', function() {
            const currentDate = getCurrentDate();
            currentCalendarYear = currentDate.year;
            currentCalendarMonth = currentDate.month;
            showSupplierReminderDateCalendar(currentDate.year, currentDate.month);
        });
    }
});
</script>
@endpush
@endsection