@extends('user.layouts')

@section('title', 'Read Help Center')

@section('header')

<link rel="stylesheet"
    href="{{ asset('/assets') }}/css/datatable/dataTables.bootstrap5.min.css">

<style>

.help-page {
    padding-top: 22px;
    padding-bottom: 35px;
}

.help-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-bottom: 22px;
}

.help-title {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    color: #20242a;
}

.help-subtitle {
    margin: 5px 0 0;
    color: #7b8494;
    font-size: 13px;
}

.back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    border: 1px solid #dfe5ec;
    border-radius: 9px;
    background: #fff;
    color: #475569;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.help-card {
    background: #fff;
    border: 1px solid #edf0f4;
    border-radius: 16px;
    box-shadow: 0 5px 18px rgba(15,23,42,.05);
    overflow: hidden;
}

.help-card-header {
    padding: 20px 22px;
    border-bottom: 1px solid #edf0f4;
}

.help-card-body {
    padding: 20px 22px;
}

.help-table {
    width: 100% !important;
}

.help-table thead th {
    padding: 13px 12px !important;
    background: #f8fafc;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.help-table tbody td {
    padding: 14px 12px !important;
    border-bottom: 1px solid #f0f2f5;
    color: #374151;
    font-size: 13px;
    vertical-align: middle;
}

.read-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 20px;
    background: #dcfce7;
    color: #15803d;
    font-size: 11px;
    font-weight: 700;
}

.view-btn {
    border: 0;
    border-radius: 8px;
    padding: 7px 12px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 12px;
    font-weight: 600;
}

.message-modal {
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.8;
}

</style>

@endsection


@section('content')

<div class="container-fluid page-wrapper help-page">


    <div class="help-header">

        <div>

            <h3 class="help-title">
                Read Help Center
            </h3>

            <p class="help-subtitle">
                Previously read help requests
            </p>

        </div>


        <a
            href="{{ route('helpcentre') }}"
            class="back-btn">

            <i class="fa-solid fa-arrow-left"></i>

            Unread Requests

        </a>

    </div>


    <div class="help-card">

        <div class="help-card-header">

            <strong>
                Read Requests ({{ $helpcentre->count() }})
            </strong>

        </div>


        <div class="help-card-body">

            <div class="table-responsive">

                <table
                    id="data-table"
                    class="table help-table align-middle nowrap">

                    <thead>

                        <tr>
                            <th>S.NO</th>
                            <th>USER</th>
                            <th>AGENT ID</th>
                            <th>SUBJECT</th>
                            <th>DATE & TIME</th>
                            <th>STATUS</th>
                            <th>ACTION</th>
                        </tr>

                    </thead>


                    <tbody>

                        @foreach($helpcentre as $item)

                            <tr>

                                <td>
                                    {{ $loop->iteration }}
                                </td>

                                <td>

                                    <strong>
                                        {{ optional($item->user)->name ?? 'N/A' }}
                                    </strong>

                                    <div class="small text-muted">

                                        User ID:
                                        {{ $item->user_id }}

                                    </div>

                                </td>

                                <td>

                                    {{ optional($item->user)->agent_code ?? 'N/A' }}

                                </td>

                                <td>

                                    {{ $item->subject ?? 'N/A' }}

                                </td>

                                <td
                                    data-order="{{ optional($item->created_at)->timestamp ?? 0 }}">

                                    @if($item->created_at)

                                        {{ $item->created_at->format('d-m-Y') }}

                                        <div class="small text-muted">

                                            {{ $item->created_at->format('h:i A') }}

                                        </div>

                                    @else

                                        N/A

                                    @endif

                                </td>

                                <td>

                                    <span class="read-status">

                                        <i class="fa-solid fa-check"></i>

                                        Read

                                    </span>

                                </td>

                                <td>

                                    <button
                                        type="button"
                                        class="view-btn"
                                        data-bs-toggle="modal"
                                        data-bs-target="#readModal{{ $item->id }}">

                                        <i class="fa-regular fa-eye me-1"></i>

                                        View

                                    </button>

                                </td>

                            </tr>


                            {{-- VIEW MODAL --}}

                            <div
                                class="modal fade"
                                id="readModal{{ $item->id }}"
                                tabindex="-1">

                                <div class="modal-dialog modal-dialog-centered modal-lg">

                                    <div class="modal-content">

                                        <div class="modal-header">

                                            <h5 class="modal-title">

                                                {{ $item->subject }}

                                            </h5>

                                            <button
                                                type="button"
                                                class="btn-close"
                                                data-bs-dismiss="modal">
                                            </button>

                                        </div>


                                        <div class="modal-body">

                                            <div class="mb-3">

                                                <strong>User:</strong>

                                                {{ optional($item->user)->name ?? 'N/A' }}

                                            </div>


                                            <div class="mb-3">

                                                <strong>Agent ID:</strong>

                                                {{ optional($item->user)->agent_code ?? 'N/A' }}

                                            </div>


                                            <div class="mb-3">

                                                <strong>Date:</strong>

                                                {{ optional($item->created_at)->format('d-m-Y h:i A') ?? 'N/A' }}

                                            </div>


                                            <hr>


                                            <div class="message-modal">{{ $item->content }}</div>

                                        </div>


                                        <div class="modal-footer">

                                            <button
                                                type="button"
                                                class="btn btn-secondary"
                                                data-bs-dismiss="modal">

                                                Close

                                            </button>

                                        </div>

                                    </div>

                                </div>

                            </div>

                        @endforeach

                    </tbody>

                </table>

            </div>

        </div>

    </div>

</div>

@endsection


@section('footer')

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script src="{{ asset('/assets') }}/js/datatable/jquery.dataTables.min.js"></script>

<script src="{{ asset('/assets') }}/js/datatable/dataTables.bootstrap5.min.js"></script>

<script>

$(document).ready(function () {

    $('#data-table').DataTable({

        pageLength: 10,

        order: [
            [4, 'desc']
        ],

        columnDefs: [
            {
                targets: [0, 6],
                orderable: false
            }
        ]

    });

});

</script>

@endsection