@extends('layouts.master')
@section('title')
    Messages
@endsection

@section('css')
    <meta name="csrf-token" content="{{ csrf_token() }}">
@endsection

@section('content')
    @component('components.breadcrumb')
    @slot('li_1')
        Contact
    @endslot
    @slot('title')
        Messages
    @endslot
    @endcomponent

    <div class="card info-card pt-5 ps-3">
        <div class="card-body text-center">
            <h6>Name: {{ $message->name }}</h3>
            <h6>Phone: {{ $message->phone }}</h3>
            <h6>Email: {{ $message->email }}</h3>
            <br>
            <h6>Message: {{ $message->message }}</h3>
            <br>
            <h6>Status: 
                @switch($message->status)
                    @case('pending')
                        <span class="badge bg-warning status-badge" 
                            data-id="{{$message->id}}" 
                            data-status="pending" 
                            data-next="read" 
                            style="cursor:pointer;">Pending</span>
                        @break
                    @case('read')
                        <span class="badge bg-success status-badge" 
                            data-id="{{$message->id}}" 
                            data-status="read" 
                            data-next="completed" 
                            style="cursor:pointer;">Read</span>
                        @break
                    @case('completed')
                        <span class="badge bg-primary">Completed</span>
                        @break
                @endswitch

            <hr>
            <a href="{{ route('messages.all') }}" style="width: 200px" class="btn btn-secondary"><i class="fa fa-chevron-circle-left" aria-hidden="true"></i> Back</a>
        </div>
    </div>
@endsection

@section('js')
    <script>
        // Handle badge click
        $(function () {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $(document).on('click', '.status-badge', function () {
                var badge = $(this);
                var id = badge.data('id');
                var currentStatus = badge.data('status');
                var nextStatus = badge.data('next');

                if (!nextStatus) {
                    return; // no transition
                }

                $.ajax({
                    url: "{{ route('messages.update.status', ':id') }}".replace(':id', id),
                    type: 'POST',
                    data: { status: nextStatus },
                    success: function (res) {
                        if (window.toastr) {
                            toastr.success(res.message || 'Status updated');
                        }
                        location.reload();
                    },
                    error: function (xhr) {
                        var msg = 'Failed to update status';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            msg = xhr.responseJSON.message;
                        }
                        if (window.toastr) {
                            toastr.error(msg);
                        } else {
                            alert(msg);
                        }
                    }
                });
            });
        });
    </script>
@endsection