@extends('layout.master')

@push('plugin-styles')
  <link href="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.css') }}" rel="stylesheet" />
@endpush

@section('content')
<div class="container my-1">
    <div class="row mb-3">
        <div class="col-lg-12">
            <h1 class="display-4 mb-1">Direct Line Admin</h1>
            <p class="lead text-muted">Manage and respond to user inquiries efficiently through the admin message center.</p>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                    <h6 class="card-title">Messages Direct Line</h6>
                    <p class="text-muted mb-3">This table displays all user messages.</p>

                    @if(session('success'))
                        <div class="alert alert-success">{{ session('success') }}</div>
                    @endif

                    <div class="table-responsive">
                        <table id="dataTableExample" class="table">
                            <thead>
                                <tr>
                                    <th>User</th>
                                    <th>Email</th>
                                    <th>Message</th>
                                    <th>Date & Time</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($messages as $message)
                                <tr data-message-id="{{ $message->id }}">
                                    <td>{{ $message->name }}</td>
                                    <td>{{ $message->email }}</td>
                                    <td>{{ Str::limit($message->message, 30) }}</td>
                                    <td>{{ $message->datetime }}</td>
                                    <td>
                                        <span id="status-badge-{{ $message->id }}" class="badge 
                                            {{ $message->status == 'remark' ? 'bg-success' : 'bg-danger' }}">
                                            <i class="bi 
                                                {{ $message->status == 'remark' ? 'bi-check-circle' : 'bi-exclamation-circle' }}"></i> 
                                            {{ $message->status == 'remark' ? 'Read' : 'Unread' }}
                                        </span>
                                    </td>
                                    <td>
                                        <button type="button" class="btn btn-info btn-sm" data-bs-toggle="modal" data-bs-target="#viewMessageModal{{ $message->id }}">
                                            View
                                        </button>

                                        <!-- Modal -->
<div class="modal fade" id="viewMessageModal{{ $message->id }}" tabindex="-1" aria-labelledby="viewMessageLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" style="max-width: 600px; width: 100%;">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title fw-bold">Message Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <!-- Message Information -->
                    <div class="row mb-3">
                        <div class="col-md-6 text-start">
                            <p><strong>User:</strong> {{ $message->name }}</p>
                            <p><strong>Email:</strong> {{ $message->email }}</p>
                        </div>
                        <div class="col-md-6 text-md-end">
                            <p><strong>Date & Time:</strong> {{ $message->datetime }}</p>
                            <p>
                                <strong>Status:</strong> 
                                <span id="modal-status-{{ $message->id }}" class="badge 
                                    {{ $message->status == 'remark' ? 'bg-success' : 'bg-danger' }}">
                                    <i class="bi 
                                        {{ $message->status == 'remark' ? 'bi-check-circle' : 'bi-exclamation-circle' }}"></i> 
                                    {{ $message->status == 'remark' ? 'Read' : 'Unread' }}
                                </span>
                            </p>
                        </div>
                    </div>

                    <!-- Message Content -->
                    <div class="card border-0 shadow-sm">
                        <div class="card-header bg-light fw-bold">Message Content</div>
                        <div class="card-body text-start">
                            <p class="text-dark" 
                               style="font-size: 16px; line-height: 1.5; 
                                      white-space: normal; word-wrap: break-word; overflow-wrap: break-word;">
                                {{ $message->message }}
                            </p>
                        </div>
                    </div>

                    <!-- ✅ Paparkan File Jika Ada -->
                    @if($message->file_path)
                        <div class="mt-3">
                            <strong>Attached File:</strong> 
                            <br>
                            @if(Str::endsWith($message->file_path, ['.jpg', '.jpeg', '.png', '.gif'])) 
                                <!-- If Image -->
                                <img src="{{ asset('storage/' . $message->file_path) }}" class="img-fluid mt-2" style="max-width: 100%;" alt="Uploaded Image">
                            @else
                                <!-- If Other File -->
                                <a href="{{ asset('storage/' . $message->file_path) }}" target="_blank">Download File</a>
                            @endif
                        </div>
                    @endif

                    <!-- Action Buttons -->
                    <div class="row mt-3">
                        <div class="col-md-12 text-center">
                            @if($message->status == 'pending')
                                <button type="button" class="btn btn-success mark-as-read" data-id="{{ $message->id }}">
                                    <i class="bi bi-check-circle"></i> Mark as Read
                                </button>
                            @endif
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                                <i class="bi bi-x-circle"></i> Close
                            </button>
                        </div>
                    </div>

                </div> <!-- End container -->
            </div>
        </div>
    </div>
</div>
<!-- End Modal -->

                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div> <!-- Table responsive -->
                </div> <!-- Card body -->
            </div> <!-- Card -->
        </div> <!-- Col-md-12 -->
    </div> <!-- Row -->
</div> <!-- Container -->
@endsection

@push('plugin-scripts')
  <script src="{{ asset('assets/plugins/datatables-net/jquery.dataTables.js') }}"></script>
  <script src="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.js') }}"></script>
@endpush

@push('custom-scripts')
<script>
    $(document).ready(function () {
        $('#dataTableExample').DataTable({
            "order": [[3, "desc"]], // Sort by datetime (column index 3)
            "pageLength": 10 // Default pagination size
        });

        // AJAX untuk update status ke 'Read' tanpa reload page
        $('.mark-as-read').on('click', function () {
            var messageId = $(this).data('id'); // Ambil ID mesej
            var button = $(this); // Simpan button untuk diubah status

            $.ajax({
                url: "/admin/messages/" + messageId,
                type: "PATCH",
                data: {
                    _token: "{{ csrf_token() }}"
                },
                success: function (response) {
                    // Update status di modal
                    $('#modal-status-' + messageId)
                        .removeClass('bg-danger')
                        .addClass('bg-success')
                        .html('<i class="bi bi-check-circle"></i> Read');

                    // Update status di table (tanpa reload page)
                    $('#status-badge-' + messageId)
                        .removeClass('bg-danger')
                        .addClass('bg-success')
                        .html('<i class="bi bi-check-circle"></i> Read');

                    // Hilangkan button "Mark as Read"
                    button.remove();
                },
                error: function () {
                    alert("Something went wrong. Please try again.");
                }
            });
        });
    });
</script>
@endpush