@extends('layouts.admin_dynamic')

@section('content')
<div class="content-wrapper">
    <div id="customerDetails">
        <!-- Content Header -->
        <section class="content-header m-3">
            <h1>Tickets -  {{ $complaint->title }}
            </h1>
          </section>

        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-12">
                    <div class="box box-success">
                        <div class="box-header">                   
                        

                       

                            <!-- Filter Form -->
                            <form action="{{ route('complaints.status', $complaint->id) }}" method="POST">
                                @csrf
                                <div class="row g-3">
                                    <div class="col-md-3">
                                        <label for="customer_name" class="form-label">Customer Name</label>
                                      <input type="text" value="{{ $complaint->user->name }}" class="form-control" readonly>
                                    </div>

                                    <div class="col-md-3">
                                        <label for="complaint_type" class="form-label">Complain Type</label>
                                        <input type="text" value="{{ $complaint->category }}" class="form-control" readonly>

                                    </div>

                                    <div class="col-md-3">
                                        <label for="complaint_type" class="form-label">Priority</label>
                                        <input type="text" value="{{ $complaint->priority }}" class="form-control" readonly>

                                    </div>

                                    <div class="col-md-3">
                                        <label for="complaint_status" class="form-label">Complain Status</label>
                                        <select name="complaint_status" id="complaint_status" class="form-control" required>
                                            <option>---Select---</option>
                                            <option value="open">Open</option>
                                            <option value="in_progress">In Progress</option>
                                            <option value="resolved">Resolved</option>
                                            <option value="closed">Closed</option>
                                        </select>
                                    </div>

                                    {{-- <div class="col-md-3">
                                        <label for="assigned_person" class="form-label">Assign Person</label>
                                        <select  name="assigned_person" id="assigned_person" class="form-control" required>
                                            <option>---Select---</option>
                                            <option value="asad">Asad</option>
                                        </select>
                                    </div> --}}

                                   
                                    <div class="col-md-3">
                                        <button type="submit" class="btn btn-primary w-100">
                                            <i class="fa fa-pencil me-1"></i> Update
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                            <div class="box-body">

                          
                                <h5 class="mb-3">Conversation</h5>

                            
<div class="chat-box mb-3 px-2 py-3 bg-light rounded" style="max-height: 300px; overflow-y: auto;">
    @forelse($replies as $reply)
        @if($reply->is_support)
            <!-- Admin reply -->
            <div class="d-flex justify-content-start mb-3">
                <div class="bg-white border-start border-5 border-info p-3 rounded shadow-sm">
                    <strong class="text-dark">{{ $reply->admin ? $reply->admin->name : 'Admin' }}</strong>
                    <p class="mb-1 text-dark">{{ $reply->message }}</p>
                    <small class="text-muted">{{ $reply->created_at ? $reply->created_at->diffForHumans() : 'Just now' }}</small>
                </div>
            </div>
        @else
            <!-- User reply -->
            <div class="d-flex justify-content-end mb-3">
                <div class="bg-primary text-white p-3 rounded shadow-sm">
                    <strong>{{ $reply->user ? $reply->user->name : 'User' }}</strong>
                    <p class="mb-1">{{ $reply->message }}</p>
                    <small class="text-white-50">{{ $reply->created_at ? $reply->created_at->diffForHumans() : 'Just now' }}</small>
                </div>
            </div>
        @endif
    @empty
        <div class="text-center text-muted py-3">No replies yet.</div>
    @endforelse
</div>

                                <!-- Reply Form -->
                                <form action="{{ route('complaints.reply', $complaint->id) }}" method="POST">
                                    @csrf
                                    <div class="input-group">
                                        <textarea name="message" class="form-control" placeholder="Type your message..." required></textarea>
                                        <button class="btn btn-success" type="submit">
                                            <i class="fa fa-paper-plane me-1"></i> Send
                                        </button>
                                    </div>
                                </form>
                        
                        </div> <!-- /.card-body -->
                    </div> <!-- /.card -->
                </div> <!-- /.col-12 -->
            </div> <!-- /.row -->
        </section>
    </div>
</div>
@endsection