@extends('layouts.admin.master')
@section('tab-name','درخواست‌های تماس')
@section('content')
    <div class="body d-flex py-3">
        <div class="container-fluid">
            <div class="page-header">
                <div class="card-header py-3 no-bg bg-transparent border-0 px-0 flex-wrap">
                    <h3 class="fw-bolder ms-1">
                        درخواست‌های تماس
                    </h3>
                    <div class="d-flex align-items-center">
                        @include('admin.search-modal.search', [
                            'route' => route('admin.contact.index'),
                            'hasTitle' => true,
                            'email' => true,
                            'hasReadStatus' => true,
                            'hasDate' => true,

                            'hasTitle' => false,
                            'hasStatus' => false,
                            'hasUrl' => false,
                            'hasShowInFirstPage' => false,
                            'hasCategory' => false,
                        ])
                    </div>
                </div>
            </div>
        </div>
        <div class="container-fluid">
            <div class="card-block row">
                <div class="col-sm-12 col-lg-12 col-xl-12">
                    <div class="table-responsive d-flex align-items-center">
                        <table id="myDataTable" class="table align-middle border-custom mb-0">
                            <thead class="text-center text-light">
                            <tr>
                                <th class="fw-bolder">#</th>
                                <th class="fw-bolder">نام فرستنده</th>
                                <th class="fw-bolder">موبایل</th>
                                <th class="fw-bolder">ایمیل</th>
                                <th class="fw-bolder" style="width: 25%;">خلاصه پیام</th>
                                <th class="fw-bolder">وضعیت</th>
                                <th class="fw-bolder">تاریخ ارسال</th>
                                <th class="fw-bolder">عملیات</th>
                            </tr>
                            </thead>
                            <tbody class="text-center text-light">
                            @forelse($contacts as $request)
                                <tr>
                                    <td>{{ $loop->iteration }}</td>
                                    <td>{{ $request->name }}</td>
                                    <td><span class="ltr">{{ $request->mobile }}</span></td>
                                    <td>{{ $request->email }}</td>
                                    <td>
                                        <span class="d-inline-block text-truncate" style="max-width: 200px;"
                                              title="{{ $request->message }}">
                                                {{ Str::limit($request->message, 50, '...') }}
                                        </span>
                                    </td>
                                    <td id="status-cell-contact-{{ $request->id }}">
                                        @if($request->is_read)
                                            <span
                                                class="badge bg-success bg-opacity-75 rounded-pill px-3 py-2 fw-normal">خوانده شده</span>
                                        @else
                                            <span
                                                class="badge bg-danger rounded-pill px-3 py-2 fw-normal animated-pulse">جدید</span>
                                        @endif
                                    </td>
                                    <td>
                                        {{ jdate_format('Y/m/d', strtotime($request->created_at)) }}
                                    </td>
                                    <td>
                                        <div class="btn-group" role="group">
                                            {{-- دکمه مشاهده جزئیات --}}
                                            <button type="button"
                                                    class="list-inline-item btn-custom-b border-0 rounded p-2 m-1"
                                                    onclick="openContactModal('{{ route('admin.contact.show', $request->id) }}', {{ $request->id }})">
                                                <i class="d-flex bi bi-eye fs-6"></i>
                                            </button>

                                            {{-- دکمه حذف --}}
                                            <form action="{{ route('admin.contact.destroy', $request->id) }}"
                                                  method="POST"
                                                  class="d-inline delete-form">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit"
                                                        class="list-inline-item btn-custom-b border-0 rounded p-2 m-1 text-danger">
                                                    <i class="d-flex bi bi-trash fs-6"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="8" class="text-center py-4 text-muted">
                                        متاسفانه هیچ درخواست تماسی یافت نشد.
                                    </td>
                                </tr>
                            @endforelse
                            </tbody>
                        </table>
                    </div>

                    <div class="mt-4">
                        {{ $contacts->links() }}
                    </div>

                </div>
            </div>
        </div>
    </div>

    {{-- مودال نمایش جزئیات پیام --}}
    <div class="modal fade" id="contactDetailsModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content text-dark text-start">
                <div class="modal-header">
                    <h5 class="modal-title fw-bold">جزئیات پیام: <span id="modal-contact-name"
                                                                       class="text-primary"></span></h5>
                    <button type="button" class="btn-close m-0" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div id="modal-contact-loading" class="modal-body text-center py-5">
                    <div class="spinner-border text-primary" role="status"></div>
                    <p class="mt-2 text-muted">در حال بارگذاری...</p>
                </div>

                <div id="modal-contact-content" class="modal-body d-none">
                    <div class="mb-3 bg-light p-2 rounded border-dashed text-center">
                        <label class="fw-bold text-muted small d-block mb-1">شماره موبایل فرستنده:</label>
                        <span id="modal-contact-mobile" class="h5 fw-bold ltr text-dark"></span>
                    </div>

                    <div class="mb-3">
                        <label class="fw-bold text-muted small">متن کامل پیام:</label>
                        <div id="modal-contact-message" class="p-3 bg-white rounded border mt-1"
                             style="white-space: pre-wrap; font-size: 0.95rem; line-height: 1.6; min-height: 100px;"></div>
                    </div>

                    <div class="text-end text-muted" style="font-size: 0.75rem;">
                        <i class="bi bi-clock me-1"></i> زمان ارسال: <span id="modal-contact-date"></span>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary px-4" data-bs-dismiss="modal">بستن</button>
                </div>
            </div>
        </div>
    </div>
@stop

@push('scripts')
    <script>
        function openContactModal(url, id) {
            const modalElement = document.getElementById('contactDetailsModal');
            const modal = new bootstrap.Modal(modalElement);

            document.getElementById('modal-contact-loading').classList.remove('d-none');
            document.getElementById('modal-contact-content').classList.add('d-none');
            modal.show();

            // دریافت اطلاعات
            fetch(url, {headers: {'X-Requested-With': 'XMLHttpRequest'}})
                .then(response => response.json())
                .then(data => {
                    document.getElementById('modal-contact-name').innerText = data.name;
                    document.getElementById('modal-contact-mobile').innerText = data.mobile;
                    document.getElementById('modal-contact-message').innerText = data.message;
                    document.getElementById('modal-contact-date').innerText = data.created_at;

                    document.getElementById('modal-contact-loading').classList.add('d-none');
                    document.getElementById('modal-contact-content').classList.remove('d-none');
                });

            // تغییر وضعیت به خوانده شده
            fetch(`/admin/contact/${id}/mark-read`, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Content-Type': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        const statusCell = document.getElementById(`status-cell-contact-${id}`);
                        if (statusCell) {
                            statusCell.innerHTML = '<span class="badge bg-success bg-opacity-75 rounded-pill px-3 py-2 fw-normal">خوانده شده</span>';
                        }
                    }
                });
        }
    </script>
@endpush