@extends('admin.layouts.master')

@section('css')
    <style>
        .info-section {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
        }

        .badge {
            font-size: 0.85rem;
            padding: 0.5em 0.75em;
        }

        .notes-section {
            max-height: 300px;
            overflow-y: auto;
            background: #f8f9fa;
            border-radius: 8px;
            padding: 15px;
        }

        .note-item {
            border-left: 3px solid #007bff;
            padding-left: 10px;
            margin-bottom: 15px;
            background: white;
            border-radius: 5px;
            padding: 10px;
        }

        .tag-item {
            display: inline-block;
            background: #e9ecef;
            padding: 5px 10px;
            margin: 2px;
            border-radius: 15px;
            font-size: 0.8rem;
        }
    </style>
@endsection

@section('page-header')
    <div class="breadcrumb-header justify-content-between">
        <div class="my-auto">
            <div class="d-flex">
                <h4 class="content-title mb-0 my-auto">إدارة التحديثات</h4>
                <span class="text-muted mt-1 tx-13 mr-2 mb-0">/ عرض التحديث</span>
            </div>
        </div>
        <div class="d-flex my-xl-auto right-content">
            <a href="{{ route('admin.updates.edit', $update->id) }}" class="btn btn-warning mr-2">
                <x-lucide-pencil width="20" height="20" /> تعديل
            </a>
            <a href="{{ route('admin.updates.index') }}" class="btn btn-secondary">
                <x-lucide-arrow-left width="20" height="20" /> العودة للقائمة
            </a>
        </div>
    </div>
@endsection

@section('content')

    <div class="row">
        <!-- Main Content -->
        <div class="col-lg-8">
            <!-- Basic Information -->
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h3 class="card-title mb-0">{{ $update->title }}</h3>
                    <div>
                        <span
                            class="badge {{ $update->type_badge }}">{{ ucfirst(str_replace('_', ' ', $update->type)) }}</span>
                        <span class="badge {{ $update->priority_badge }}">{{ ucfirst($update->priority) }}</span>
                        <span
                            class="badge {{ $update->status_badge }}">{{ ucfirst(str_replace('_', ' ', $update->status)) }}</span>
                    </div>
                </div>
                <div class="card-body">
                    <div class="info-section">
                        <h5><x-lucide-info width="20" height="20" /> الوصف</h5>
                        <p class="mb-0">{{ $update->description }}</p>
                    </div>

                    @if ($update->tags && count($update->tags) > 0)
                        <div class="info-section">
                            <h5><x-lucide-tags width="20" height="20" /> العلامات</h5>
                            @foreach ($update->tags as $tag)
                                <span class="tag-item">{{ $tag }}</span>
                            @endforeach
                        </div>
                    @endif

                    @if ($update->notes)
                        <div class="info-section">
                            <h5><x-lucide-sticky-note width="20" height="20" /> الملاحظات</h5>
                            <div class="notes-section">
                                @php
                                    $noteEntries = explode("\n\n", $update->notes);
                                @endphp
                                @foreach ($noteEntries as $entry)
                                    @if (trim($entry))
                                        @php
                                            $lines = explode("\n", $entry);
                                            $header = $lines[0] ?? '';
                                            $content = implode("\n", array_slice($lines, 1));
                                        @endphp
                                        <div class="note-item">
                                            <div class="text-muted small mb-2">{{ $header }}</div>
                                            <div>{{ $content }}</div>
                                        </div>
                                    @endif
                                @endforeach
                            </div>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Quick Actions -->
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0"><x-lucide-zap width="20" height="20" /> إجراءات سريعة</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>تغيير الحالة:</label>
                                <select class="form-control" id="quickStatusChange">
                                    <option value="">اختر الحالة الجديدة</option>
                                    <option value="pending" {{ $update->status == 'pending' ? 'disabled' : '' }}>في
                                        الانتظار</option>
                                    <option value="in_progress" {{ $update->status == 'in_progress' ? 'disabled' : '' }}>
                                        قيد التنفيذ</option>
                                    <option value="completed" {{ $update->status == 'completed' ? 'disabled' : '' }}>مكتملة
                                    </option>
                                    <option value="on_hold" {{ $update->status == 'on_hold' ? 'disabled' : '' }}>مؤجلة
                                    </option>
                                    <option value="cancelled" {{ $update->status == 'cancelled' ? 'disabled' : '' }}>ملغية
                                    </option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label>&nbsp;</label>
                            <button type="button" class="btn btn-primary btn-block" onclick="updateStatus()">
                                <x-lucide-save width="20" height="20" /> تحديث الحالة
                            </button>
                        </div>
                    </div>

                    <hr>

                    <div class="form-group">
                        <label>إضافة ملاحظة سريعة:</label>
                        <div class="input-group">
                            <textarea class="form-control" id="quickNote" rows="2" placeholder="اكتب ملاحظتك هنا..."></textarea>
                            <div class="input-group-append">
                                <button class="btn btn-success" type="button" onclick="addQuickNote()">
                                    <x-lucide-plus width="20" height="20" /> إضافة
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="col-lg-4">
            <!-- Details Card -->
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0"><x-lucide-info width="20" height="20" /> تفاصيل التحديث</h5>
                </div>
                <div class="card-body">
                    <table class="table table-borderless">
                        <tr>
                            <td><strong>النوع:</strong></td>
                            <td><span
                                    class="badge {{ $update->type_badge }}">{{ ucfirst(str_replace('_', ' ', $update->type)) }}</span>
                            </td>
                        </tr>
                        <tr>
                            <td><strong>الأولوية:</strong></td>
                            <td><span class="badge {{ $update->priority_badge }}">{{ ucfirst($update->priority) }}</span>
                            </td>
                        </tr>
                        <tr>
                            <td><strong>الحالة:</strong></td>
                            <td><span
                                    class="badge {{ $update->status_badge }}">{{ ucfirst(str_replace('_', ' ', $update->status)) }}</span>
                            </td>
                        </tr>
                        <tr>
                            <td><strong>تم الإنشاء بواسطة:</strong></td>
                            <td>{{ $update->createdBy->name ?? 'غير محدد' }}</td>
                        </tr>
                        <tr>
                            <td><strong>مُعيَّن إلى:</strong></td>
                            <td>{{ $update->assignedTo->name ?? 'غير محدد' }}</td>
                        </tr>
                        <tr>
                            <td><strong>تاريخ الإنشاء:</strong></td>
                            <td>{{ $update->created_at->format('Y-m-d H:i') }}</td>
                        </tr>
                        <tr>
                            <td><strong>آخر تحديث:</strong></td>
                            <td>{{ $update->updated_at->format('Y-m-d H:i') }}</td>
                        </tr>
                        @if ($update->due_date)
                            <tr>
                                <td><strong>تاريخ الاستحقاق:</strong></td>
                                <td>
                                    {{ $update->due_date->format('Y-m-d') }}
                                    @if ($update->due_date->isPast() && $update->status != 'completed')
                                        <span class="badge badge-danger">متأخر</span>
                                    @endif
                                </td>
                            </tr>
                        @endif
                    </table>
                </div>
            </div>

            <!-- Progress Card -->
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0"><x-lucide-trending-up width="20" height="20" /> حالة التقدم</h5>
                </div>
                <div class="card-body">
                    @php
                        $progress = 0;
                        switch ($update->status) {
                            case 'pending':
                                $progress = 0;
                                break;
                            case 'in_progress':
                                $progress = 50;
                                break;
                            case 'on_hold':
                                $progress = 25;
                                break;
                            case 'completed':
                                $progress = 100;
                                break;
                            case 'cancelled':
                                $progress = 0;
                                break;
                        }
                        $progressColor = $progress == 100 ? 'success' : ($progress > 0 ? 'info' : 'warning');
                    @endphp

                    <div class="progress mb-3" style="height: 20px;">
                        <div class="progress-bar bg-{{ $progressColor }}" role="progressbar"
                            style="width: {{ $progress }}%" aria-valuenow="{{ $progress }}" aria-valuemin="0"
                            aria-valuemax="100">
                            {{ $progress }}%
                        </div>
                    </div>

                    <div class="d-flex justify-content-between text-small">
                        <span class="text-muted">البداية</span>
                        <span class="text-muted">الإنجاز</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('js')
    <script>
        function updateStatus() {
            let newStatus = $('#quickStatusChange').val();
            if (!newStatus) {
                toastr.error('يرجى اختيار الحالة الجديدة');
                return;
            }

            $.ajax({
                url: "{{ route('admin.updates.update-status') }}",
                method: 'POST',
                data: {
                    _token: "{{ csrf_token() }}",
                    id: {{ $update->id }},
                    status: newStatus
                },
                success: function(response) {
                    if (response.success) {
                        toastr.success(response.message);
                        setTimeout(() => {
                            location.reload();
                        }, 1000);
                    }
                },
                error: function() {
                    toastr.error('حدث خطأ أثناء تحديث الحالة');
                }
            });
        }

        function addQuickNote() {
            let note = $('#quickNote').val().trim();
            if (!note) {
                toastr.error('يرجى كتابة الملاحظة');
                return;
            }

            $.ajax({
                url: "{{ route('admin.updates.add-note', $update->id) }}",
                method: 'POST',
                data: {
                    _token: "{{ csrf_token() }}",
                    note: note
                },
                success: function(response) {
                    if (response.success) {
                        toastr.success(response.message);
                        $('#quickNote').val('');
                        setTimeout(() => {
                            location.reload();
                        }, 1000);
                    }
                },
                error: function() {
                    toastr.error('حدث خطأ أثناء إضافة الملاحظة');
                }
            });
        }
    </script>
@endsection