@extends('layouts.Admin.master')
@section('title')
    ادارة الاهتمامات
@endsection
@section('css')
    <div class="container">
        <h3 class="mb-4 text-center">اهتمامات العملاء</h3>

        <table class="table table-bordered text-center" dir="rtl">
            <thead>
                <tr>
                    <th>#</th>
                    <th>اسم العميل</th>
                    <th>رقم الجوال</th>
                    <th>عدد الاهتمامات</th>
                    <th>آخر تاريخ اهتمام</th>
                    <th>عرض التفاصيل</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($interests as $clientId => $clientInterests)
                    @php
                        $first = $clientInterests->first();
                        $count = $clientInterests->count();
                        $latestDate = $clientInterests->max('created_at');
                    @endphp
                    <tr>
                        <td>{{ $loop->iteration }}</td>
                        <td>{{ $first->client_name }}</td>
                        <td>{{ $first->client_phone }}</td>
                        <td>{{ $count }}</td>
                        <td>{{ \Carbon\Carbon::parse($latestDate)->format('d-m-Y') }}</td>
                        <td>
                            <!-- Trigger Modal -->
                            <button class="btn btn-info btn-sm" data-bs-toggle="modal"
                                data-bs-target="#clientModal{{ $clientId }}">
                                عرض التفاصيل
                            </button>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6">لا توجد بيانات حالياً</td>
                    </tr>
                @endforelse
            </tbody>
        </table>

        <!-- Modals should be outside the table -->
        @foreach ($interests as $clientId => $clientInterests)
            @php $first = $clientInterests->first(); @endphp
            <div class="modal fade" id="clientModal{{ $clientId }}" tabindex="-1"
                aria-labelledby="modalLabel{{ $clientId }}" aria-hidden="true">
                <div class="modal-dialog modal-lg modal-dialog-scrollable modal-dialog-centered">
                    <div class="modal-content text-center">
                        <div class="modal-header">
                            <h5 class="modal-title" id="modalLabel{{ $clientId }}">تفاصيل اهتمامات:
                                {{ $first->client_name }}</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button>
                        </div>
                        <div class="modal-body">
                            <table class="table table-striped table-sm text-center">
                                <thead>
                                    <tr>
                                        <th>المدينة</th>
                                        <th>الحي</th>
                                        <th>العقار</th>
                                        <th>تاريخ التسجيل</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($clientInterests as $interest)
                                        <tr>
                                            <td>{{ $interest->city_name }}</td>
                                            <td>{{ $interest->neighborhood_name }}</td>
                                            <td>{{ $interest->property_name }}</td>
                                            <td>{{ \Carbon\Carbon::parse($interest->created_at)->format('d-m-Y') }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        <div class="modal-footer">
                            <a href="{{ route('interests.export', ['client_id' => $clientId]) }}"
                                class="btn btn-success">تصدير Excel</a>
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إغلاق</button>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    <!-- Bootstrap 5 CSS & JS (include these only once in layout or here if needed) -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
@endsection