@extends('user.layouts')

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

@section('header')

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

<link rel="stylesheet"
    href="{{ asset('/assets') }}/css/datatable/responsive.bootstrap.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;
    font-size: 13px;
    color: #7b8494;
}

.read-history-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 9px;
    background: #2563eb;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.read-history-btn:hover {
    background: #1d4ed8;
    color: #fff;
}


/* CARD */

.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-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
}

.unread-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 27px;
    height: 25px;
    margin-left: 7px;
    padding: 0 8px;
    border-radius: 20px;
    background: #fee2e2;
    color: #dc2626;
    font-size: 11px;
    font-weight: 700;
}

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


/* TABLE */

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

.help-table thead th {
    padding: 13px 12px !important;
    background: #f8fafc;
    color: #64748b;
    border-bottom: 1px solid #e5e7eb !important;
    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;
}

.user-name {
    font-weight: 600;
    color: #1f2937;
}

.agent-code {
    display: inline-block;
    padding: 5px 9px;
    border-radius: 6px;
    background: #f1f5f9;
    font-size: 11px;
    font-weight: 600;
}

.content-preview {
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #64748b;
}

.date-main {
    font-weight: 600;
    white-space: nowrap;
}

.time-text {
    margin-top: 3px;
    color: #94a3b8;
    font-size: 11px;
}


/* READ BUTTON */

.read-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 0;
    border-radius: 8px;
    padding: 8px 13px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 12px;
    font-weight: 600;
}

.read-btn:hover {
    background: #2563eb;
    color: #fff;
}


/* MODAL */

.help-modal .modal-content {
    border: 0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.18);
}

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

.help-modal .modal-title {
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
}

.help-modal .modal-body {
    padding: 24px;
}

.modal-user-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    margin-bottom: 20px;
    background: #f8fafc;
    border-radius: 12px;
}

.modal-avatar {
    width: 44px;
    height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef4ff;
    color: #2563eb;
    border-radius: 50%;
    font-weight: 700;
}

.modal-user-name {
    color: #1f2937;
    font-weight: 700;
}

.modal-agent {
    margin-top: 3px;
    color: #64748b;
    font-size: 12px;
}

.modal-label {
    margin-bottom: 6px;
    color: #94a3b8;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.modal-value {
    color: #1f2937;
    font-size: 14px;
    font-weight: 600;
}

.modal-message {
    margin-top: 18px;
    padding: 16px;
    background: #f8fafc;
    border: 1px solid #edf0f4;
    border-radius: 12px;
    color: #475569;
    font-size: 14px;
    line-height: 1.8;
    white-space: pre-wrap;
    word-break: break-word;
}

.modal-date {
    color: #64748b;
    font-size: 12px;
}


/* DARK */

body.dark-mode .help-card,
body.dark-mode .help-modal .modal-content {
    background: #172033;
    color: #e2e8f0;
}

body.dark-mode .help-title,
body.dark-mode .help-card-title,
body.dark-mode .user-name,
body.dark-mode .modal-title,
body.dark-mode .modal-user-name,
body.dark-mode .modal-value {
    color: #f1f5f9;
}

body.dark-mode .help-modal .modal-header,
body.dark-mode .modal-user-box,
body.dark-mode .modal-message {
    background: #111827;
    border-color: #273449;
}

@media(max-width:767px) {

    .help-header {
        align-items: flex-start;
        flex-direction: column;
    }
}

</style>

@endsection


@section('content')

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

    <div class="help-header">

        <div>

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

            <p class="help-subtitle">
                Unread help and support requests
            </p>

        </div>


        <a
            href="{{ route('read_help_center') }}"
            class="read-history-btn">

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

            Read Help Center

        </a>

    </div>


    <div class="help-card">

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

            <h5 class="help-card-title">

                Unread Requests

                <span
                    class="unread-count"
                    id="unreadCount">

                    {{ $helpcentre->count() }}

                </span>

            </h5>

        </div>


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

            <div class="table-responsive">

                <table
                    id="data-table"
                    class="table help-table align-middle nowrap"
                    style="width:100%">

                    <thead>

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

                    </thead>


                    <tbody>

                        @foreach($helpcentre as $item)

                            <tr id="help-row-{{ $item->id }}">

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

                                <td>

                                    <div class="user-name">
                                        {{ optional($item->user)->name ?? 'N/A' }}
                                    </div>

                                    <small class="text-muted">
                                        User ID: {{ $item->user_id }}
                                    </small>

                                </td>

                                <td>

                                    <span class="agent-code">

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

                                    </span>

                                </td>

                                <td>

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

                                </td>

                                <td>

                                    <div class="content-preview">

                                        {{ \Illuminate\Support\Str::limit(
                                            $item->content,
                                            70
                                        ) }}

                                    </div>

                                </td>

                             @php
    $receivedAt = optional($item->created_at)
        ? $item->created_at->copy()->setTimezone('Asia/Kolkata')
        : null;
@endphp

<td data-order="{{ $receivedAt?->timestamp ?? 0 }}">

    @if($receivedAt)

        <div class="date-main">
            {{ $receivedAt->format('d-m-Y') }}
        </div>

        <div class="time-text">
            {{ $receivedAt->format('h:i A') }}
        </div>

    @else

        N/A

    @endif

</td>
                                <td>

                                    <button
                                        type="button"
                                        class="read-btn"
                                        data-id="{{ $item->id }}">

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

                                        Read

                                    </button>

                                </td>

                            </tr>

                        @endforeach

                    </tbody>

                </table>

            </div>

        </div>

    </div>

</div>



{{-- ==========================================
     READ POPUP
========================================== --}}

<div
    class="modal fade help-modal"
    id="helpReadModal"
    tabindex="-1"
    aria-hidden="true">

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

        <div class="modal-content">

            <div class="modal-header">

                <h5 class="modal-title">

                    <i class="fa-regular fa-envelope-open me-2"></i>

                    Help Request

                </h5>

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

            </div>


            <div class="modal-body">


                <div class="modal-user-box">

                    <div
                        class="modal-avatar"
                        id="modalAvatar">

                        U

                    </div>


                    <div>

                        <div
                            class="modal-user-name"
                            id="modalUserName">

                            -

                        </div>

                        <div
                            class="modal-agent"
                            id="modalAgent">

                            -

                        </div>

                    </div>

                </div>


                <div class="row g-3">

                    <div class="col-md-8">

                        <div class="modal-label">
                            Subject
                        </div>

                        <div
                            class="modal-value"
                            id="modalSubject">

                            -

                        </div>

                    </div>


                    <div class="col-md-4">

                        <div class="modal-label">
                            Date & Time
                        </div>

                        <div
                            class="modal-date"
                            id="modalDate">

                            -

                        </div>

                    </div>

                </div>


                <div class="mt-4">

                    <div class="modal-label">
                        Message
                    </div>

                    <div
                        class="modal-message"
                        id="modalContent">

                        -

                    </div>

                </div>

            </div>


            <div class="modal-footer">

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

                    Close

                </button>

            </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 () {

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

        pageLength: 10,

        order: [
            [5, 'desc']
        ],

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


    let currentReadId = null;


    $(document).on('click', '.read-btn', function () {

        const button = $(this);

        const id = button.data('id');

        currentReadId = id;


        button.prop('disabled', true);

        button.html(
            '<i class="fa-solid fa-spinner fa-spin"></i> Loading'
        );


        $.ajax({

            url:
                "{{ route('help_center.mark_read', ':id') }}"
                    .replace(':id', id),

            type: "POST",

            data: {
                _token: "{{ csrf_token() }}"
            },


            success: function (response) {

                if (!response.success) {

                    alert(response.message);

                    return;
                }


                const data = response.data;


                $('#modalUserName')
                    .text(data.user_name);


                $('#modalAgent')
                    .text(
                        'Agent ID: ' +
                        data.agent_code
                    );


                $('#modalSubject')
                    .text(data.subject);


                $('#modalContent')
                    .text(data.content);


                $('#modalDate')
                    .text(
                        data.created_date +
                        ' • ' +
                        data.created_time
                    );


                const firstLetter =
                    data.user_name &&
                    data.user_name !== 'N/A'
                        ? data.user_name
                            .charAt(0)
                            .toUpperCase()
                        : 'U';


                $('#modalAvatar')
                    .text(firstLetter);


                const modal =
                    new bootstrap.Modal(
                        document.getElementById(
                            'helpReadModal'
                        )
                    );


                modal.show();

            },


            error: function () {

                alert(
                    'Unable to open help request.'
                );

            },


            complete: function () {

                button.prop(
                    'disabled',
                    false
                );

                button.html(
                    '<i class="fa-regular fa-eye"></i> Read'
                );

            }

        });

    });



    /*
    |--------------------------------------------------------------------------
    | MODAL CLOSED
    |--------------------------------------------------------------------------
    |
    | Record DB-la already is_read = 1.
    | Popup close pannumbothu unread table-la irunthu remove pannuvom.
    |
    */

    $('#helpReadModal').on(
        'hidden.bs.modal',
        function () {

            if (!currentReadId) {
                return;
            }


            const row =
                $('#help-row-' + currentReadId);


            if (row.length) {

                table
                    .row(row)
                    .remove()
                    .draw(false);

            }


            const count =
                table.rows().count();


            $('#unreadCount')
                .text(count);


            currentReadId = null;

        }
    );

});

</script>

@endsection