@extends('layouts.app')
@section('content')
    <div class="dashboard-main-body">
        <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-24">
            <h6 class="fw-semibold mb-0">Contact Messages</h6>
            <ul class="d-flex align-items-center gap-2">
                <li class="fw-medium">
                    <a href="#" class="d-flex align-items-center gap-1 hover-text-primary">
                        <iconify-icon icon="solar:home-smile-angle-outline" class="icon text-lg"></iconify-icon>
                        Setup
                    </a>
                </li>
                <li>-</li>
                <li class="fw-medium">Contact Messages</li>
            </ul>
        </div>

        @include('components.crudalerts')

        <div class="card basic-data-table">
            <div class="card-body">
                <div class="overflow-x-auto">
                    <table class="table bordered-table mb-0" id="dataTable" data-page-length='10' style="width: 100%;">
                        <thead>
                            <tr>
                                <th scope="col">#</th>
                                <th scope="col">Name</th>
                                <th scope="col">Email</th>
                                <th scope="col">Mobile</th>
                                <th scope="col">Subject</th>
                                <th scope="col">Description</th>
                                <th scope="col">Status</th>
                                <th scope="col">Replies</th>
                                <th scope="col">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($contactmessages as $message)
                                <tr>
                                    <td>{{ $loop->iteration }}</td>
                                    <td>{{ $message->Name }}</td>
                                    <td>{{ $message->EmailAddress }}</td>
                                    <td>{{ $message->MobileNumber }}</td>
                                    <td>{{ Str::limit($message->Subject, 30) }}</td>
                                    <td>{{ Str::limit($message->Description, 50) }}</td>
                                    <td>
                                        @if ($message->Status == 1)
                                            <span
                                                class="bg-success-focus text-success-main px-16 py-4 rounded-pill fw-normal text-sm d-inline-flex align-items-center">
                                                <iconify-icon icon="solar:check-circle-outline"
                                                    class="me-1"></iconify-icon>
                                                Active
                                            </span>
                                        @elseif ($message->Status == 2)
                                            <span
                                                class="bg-info-focus text-info-main px-16 py-4 rounded-pill fw-normal text-sm d-inline-flex align-items-center">
                                                <iconify-icon icon="solar:chat-round-outline" class="me-1"></iconify-icon>
                                                Replied
                                            </span>
                                        @else
                                            <span
                                                class="bg-warning-focus text-warning-main px-16 py-4 rounded-pill fw-normal text-sm d-inline-flex align-items-center">
                                                <iconify-icon icon="solar:clock-circle-outline"
                                                    class="me-1"></iconify-icon>
                                                Pending
                                            </span>
                                        @endif
                                    </td>
                                    <td>
                                        @if ($message->replies->count() > 0)
                                            <div class="d-flex align-items-center gap-2">
                                                <span class="badge bg-info">{{ $message->replies->count() }}</span>
                                                <a href="{{ route('contactus.reply', $message->Id) }}"
                                                    class="btn btn-sm btn-outline-info d-flex align-items-center gap-1">
                                                    <iconify-icon icon="solar:eye-outline"></iconify-icon>
                                                    View Replies
                                                </a>
                                            </div>
                                        @else
                                            <a href="{{ route('contactus.reply', $message->Id) }}"
                                                class="btn btn-sm btn-outline-primary d-flex align-items-center gap-1">
                                                <iconify-icon icon="solar:chat-line-linear"></iconify-icon>
                                                Reply
                                            </a>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center gap-2">
                                            <a href="{{ route('contactus.reply', $message->Id) }}"
                                                class="w-32-px h-32-px bg-info-focus text-info-main rounded-circle d-inline-flex align-items-center justify-content-center"
                                                title="Reply">
                                                <iconify-icon icon="solar:chat-line-linear"></iconify-icon>
                                            </a>
                                            <a href="{{ route('contactus.edit', $message->Id) }}"
                                                class="w-32-px h-32-px bg-success-focus text-success-main rounded-circle d-inline-flex align-items-center justify-content-center"
                                                title="Edit">
                                                <iconify-icon icon="lucide:edit"></iconify-icon>
                                            </a>
                                            <a href="javascript:void(0)" onclick="DeleteMsg({{ $message->Id }})"
                                                class="w-32-px h-32-px bg-danger-focus text-danger-main rounded-circle d-inline-flex align-items-center justify-content-center"
                                                title="Delete">
                                                <iconify-icon icon="mingcute:delete-2-line"></iconify-icon>
                                            </a>
                                        </div>

                                        <!-- Delete Confirmation Modal -->
                                        <div class="modal fade" id="exampleModal{{ $message->Id }}" tabindex="-1"
                                            aria-labelledby="exampleModalLabel" aria-hidden="true">
                                            <div class="modal-dialog">
                                                <div class="modal-content">
                                                    <div class="modal-body">
                                                        <div
                                                            class="alert alert-danger border-0 bg-danger alert-dismissible fade show py-2">
                                                            <div class="d-flex align-items-center">
                                                                <div class="font-35 text-white">
                                                                    <iconify-icon
                                                                        icon="solar:trash-bin-minimalistic-outline"></iconify-icon>
                                                                </div>
                                                                <div class="ms-3">
                                                                    <h6 class="mb-0 text-white">Are you sure you want to
                                                                        delete this message and all its replies?</h6>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-secondary"
                                                            data-bs-dismiss="modal">Cancel</button>
                                                        <a type="button" class="btn btn-danger"
                                                            href="{{ route('contactus.delete', $message->Id) }}">

                                                            Delete
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script>
        function DeleteMsg(id) {
            $(`#exampleModal${id}`).modal('show');
        }
    </script>
@endsection