@extends('layouts.admin.index')

@section('content')

<!-- Include SweetAlert2 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<div class="row">
  <div class="col-sm-12">
    <div class="home-tab">
      <div class="tab-content tab-content-basic">
        <div class="tab-pane fade show active" id="overview" role="tabpanel" aria-labelledby="overview">
          <div class="container-fluid">

            <!-- Page Heading -->
            <div class="d-sm-flex align-items-center justify-content-between mb-4">
                <h1 class="h3 mb-0 text-gray-800">Inbox Messages</h1>
                <a href="{{ route('admin.inbox.create') }}" class="btn btn-primary">Create New Message</a>
            </div>

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

            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Inbox List</h6>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                    <table class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th width="5%">ID</th>
                                <th width="20%">Title</th>
                                <th>Message</th>
                                <th width="10%">Type</th>
                                <th width="15%">User</th>
                                <th width="15%">Created At</th>
                                <th width="15%">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($messages as $msg)
                                <tr>
                                    <td>{{ $msg->id }}</td>
                                    <td>{{ $msg->title }}</td>
                                    <td>{{ $msg->message }}</td>
                                    <td>
                                        <span class="badge bg-info text-dark">{{ $msg->type }}</span>
                                    </td>
                                    <td>
                                        @if($msg->user)
                                            {{ $msg->user->name }}
                                        @else
                                            <span class="text-muted">All Users</span>
                                        @endif
                                    </td>
                                    <td>{{ $msg->created_at->format('d M Y h:i A') }}</td>

                                    <td>
                                        @if ($msg->user_id === null)
                                            <button class="btn btn-sm btn-primary blast-btn" data-id="{{ $msg->id }}">Blast</button>
                                        @else
                                            <span class="badge bg-secondary">Single User</span>
                                        @endif

                                        <button class="btn btn-sm btn-danger delete-btn" data-id="{{ $msg->id }}">Delete</button>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="text-center text-muted">
                                        No inbox messages yet.
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                    </div>
                </div>
            </div>

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

<!-- SweetAlert2 Script -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    // DELETE
    const deleteButtons = document.querySelectorAll('.delete-btn');
    deleteButtons.forEach(btn => {
        btn.addEventListener('click', function() {
            const id = this.dataset.id;
            Swal.fire({
                title: 'Are you sure?',
                text: "This will permanently delete the message!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    const form = document.createElement('form');
                    form.method = 'POST';
                    form.action = `{{ route('admin.inbox.destroy', '') }}/${id}`;
                    form.innerHTML = `@csrf @method('DELETE')`;
                    document.body.appendChild(form);
                    form.submit();
                }
            });
        });
    });

    // BLAST
    const blastButtons = document.querySelectorAll('.blast-btn');
    blastButtons.forEach(btn => {
        btn.addEventListener('click', function() {
            const id = this.dataset.id;
            Swal.fire({
                title: 'Blast this message?',
                text: "It will be sent to all devices!",
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#aaa',
                confirmButtonText: 'Yes, blast it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    window.location.href = `/admin/inbox/send/${id}`;
                }
            });
        });
    });
});
</script>

@endsection