@extends('admin.layout')
@section('title', 'Support Chat')
@section('content')

<style>
    .chat-wrapper {
        max-width: 900px;
        margin: 30px auto;
        background: #fff;
        border-radius: 15px;
        box-shadow: 0 5px 20px rgba(0,0,0,0.05);
        padding: 25px;
    }

    .chat-header {
        border-bottom: 1px solid #eee;
        padding-bottom: 15px;
        margin-bottom: 20px;
        font-weight: bold;
        font-size: 18px;
    }

    .chat-messages {
        max-height: 400px;
        overflow-y: auto;
        margin-bottom: 20px;
    }

    .message {
        margin-bottom: 15px;
    }

    .user-message {
        background-color: #dcf8c6;
        align-self: flex-start;
        padding: 12px 18px;
        border-radius: 18px;
        max-width: 70%;
    }

    .admin-message {
        background-color: #e9e9eb;
        align-self: flex-end;
        padding: 12px 18px;
        border-radius: 18px;
        max-width: 70%;
        text-align: right;
    }

    .message-container {
        display: flex;
        flex-direction: column;
    }

    .timestamp {
        font-size: 12px;
        color: #999;
        margin-top: 5px;
    }

    .chat-footer {
        display: flex;
        gap: 10px;
    }

    .chat-footer input {
        flex-grow: 1;
        padding: 12px;
        border: 1px solid #ddd;
        border-radius: 10px;
    }

    .chat-footer button {
        padding: 12px 20px;
        background-color: #0d6efd;
        color: #fff;
        border: none;
        border-radius: 10px;
    }

    .alert-warning {
        background-color: #fff3cd;
        border: 1px solid #ffeeba;
        padding: 12px 20px;
        border-radius: 6px;
        color: #856404;
        margin-bottom: 20px;
        text-align: center;
    }
</style>

<div class="container">
    <div class="chat-wrapper">
        <div class="chat-header d-flex justify-content-between align-items-center">
            <div>
                Chat - Ticket #{{ $ticket->id }} | {{ $ticket->title }}<br>
                <small class="text-muted">Created: {{ $ticket->created_at->format('Y-m-d H:i') }}</small>
            </div>
            @if (!$ticket->closed_at)
                <button class="btn btn-sm btn-danger" data-bs-toggle="modal" data-bs-target="#closeTicketModal">Close</button>
            @endif
        </div>

        @if ($ticket->closed_at)
            <div class="alert alert-warning">
                This ticket was closed on {{ \Carbon\Carbon::parse($ticket->closed_at)->format('Y-m-d H:i') }}.
            </div>
        @endif

        <div class="chat-messages d-flex flex-column">

            {{-- First user message from ticket description --}}
            <div class="message-container align-self-start">
                <div class="user-message">
                    {{ $ticket->description }}
                </div>
                <div class="timestamp">
                    {{ $ticket->created_at->format('H:i d M Y') }}
                </div>
            </div>

            {{-- All subsequent messages --}}
            @foreach ($messages as $message)
                <div class="message-container {{ $message->admin_msg ? 'align-self-end' : 'align-self-start' }}">
                    <div class="{{ $message->admin_msg ? 'admin-message' : 'user-message' }}">
                        {{ $message->message }}
                    </div>
                    <div class="timestamp">
                        {{ \Carbon\Carbon::parse($message->created_at)->format('H:i d M Y') }}
                    </div>
                </div>
            @endforeach
        </div>

        @if (!$ticket->closed_at)
            <form action="{{ route('admin_send_message') }}" method="POST" class="chat-footer">
                @csrf
                <input type="hidden" name="ticket_id" value="{{ $ticket->id }}">
                <input type="text" name="message" placeholder="Type your reply..." required>
                <button type="submit"><i class="fa fa-paper-plane"></i> Send</button>
            </form>
        @endif
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="closeTicketModal" tabindex="-1" aria-labelledby="closeTicketModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <form action="{{ route('close_ticket') }}" method="POST">
            @csrf
            <input type="hidden" name="ticket_id" value="{{ $ticket->id }}">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Confirm Close Ticket</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    Are you sure you want to close this ticket?
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-danger">Yes, Close</button>
                </div>
            </div>
        </form>
    </div>
</div>

@endsection