@extends('backend.layouts.app')
@push('style')
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
    <style>
        .list-group-item {
            padding: 5px !important;
        }
    </style>
@endpush
@section('content')
    <div class="row">


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

            <div class="card shadow-sm mb-4">
                <div class="card-body">
                    <h5 class="fw-bold mb-2">{{ $ticket->subject }}</h5>
                    <p class="mb-0 text-muted small">
                        Ticket ID: {{ $ticket->ticket_number }} |
                        Created: {{ $ticket->created_at->format('d M Y, h:i A') }} |
                        Status:
                        <span class="badge bg-{{ $ticket->status == 'open' ? 'success' : 'secondary' }}">
                            {{ ucfirst($ticket->status) }}
                        </span>
                    </p>
                    <hr>
                    <p class="mt-2">{{ $ticket->details }}</p>
                </div>
            </div>
            {{-- conversation messages --}}
            <div class="card shadow-sm mb-4 p-2">
                <div class="card-body p-2" style="max-height: 500px; overflow-y: auto;" id="conversationBody">
                    @forelse($ticket->replies as $reply)
                        <div class="d-flex mb-3 {{ $reply->is_admin ? 'justify-content-end' : 'justify-content-start' }}"
                            data-reply-id="{{ $reply->id }}">
                            @if (!$reply->is_admin)
                                <div class="flex-shrink-0 me-2">
                                    <img src="{{ asset('assets/backend/images/avater.png') }}" alt="User Avatar"
                                        class="rounded-circle" style="width:35px;height:35px;">
                                </div>
                            @endif
                            <div class="d-flex flex-column" style="max-width:80%;">
                                <div class="position-relative px-3 py-2 rounded-4 shadow-sm {{ $reply->is_admin ? 'bg-success text-white' : 'bg-light text-dark' }}"
                                    style="word-break:break-word; border-bottom-{{ $reply->is_admin ? 'right' : 'left' }}-radius:.25rem;">
                                    {{-- delete cross --}}
                                    <button type="button" class="btn-close position-absolute top-0 end-0 m-1 delete-reply"
                                        data-reply-id="{{ $reply->id }}" style="font-size:0.6rem;"></button>
                                    {{ $reply->reply_text }}
                                    @if ($reply->attachment)
                                        <div class="mt-2">
                                            <a href="{{ asset('storage/' . $reply->attachment) }}" target="_blank"
                                                class="text-decoration-underline {{ $reply->is_admin ? 'text-white' : 'text-success' }}">
                                                📎 View Attachment
                                            </a>
                                        </div>
                                    @endif
                                    <small class="d-block text-end mt-1 opacity-75" style="font-size:.7rem;">
                                        {{ $reply->created_at->format('d M Y, h:i A') }}
                                    </small>
                                </div>
                            </div>
                            @if ($reply->is_admin)
                                <div class="flex-shrink-0 ms-2">
                                    <img src="{{ asset('assets/backend/images/avater.png') }}" alt="Admin Avatar"
                                        class="rounded-circle" style="width:35px;height:35px;">
                                </div>
                            @endif
                        </div>
                    @empty

                        <p class="text-muted text-center">No messages yet.</p>
                    @endforelse
                </div>
            </div>


            {{-- reply form --}}
            @if ($ticket->status == 'open')
                <div class="card shadow-sm mb-4 border-0">
                    <div class="card-body py-2 px-3">
                        <form action="{{ route('support_manage.replyStore', $ticket->ticket_number) }}" method="POST"
                            enctype="multipart/form-data" id="replyForm">
                            @csrf
                            <div class="d-flex align-items-center gap-2">

                                {{-- paperclip icon as file input --}}
                                <div class="position-relative">
                                    <label for="attachment" class="btn btn-light border shadow-sm rounded-circle p-2 mb-0"
                                        style="width: 40px; height: 40px; cursor: pointer;">
                                        <i class="fas fa-paperclip text-secondary"></i>
                                    </label>
                                    <input type="file" name="attachment" id="attachment" class="d-none"
                                        accept=".jpg,.jpeg,.png,.pdf,.doc,.docx,.txt">
                                </div>

                                {{-- chat-style input --}}
                                <textarea name="message" class="form-control rounded-pill border shadow-sm" rows="1" style="resize: none;"
                                    placeholder="Type a message" required></textarea>

                                {{-- send button --}}
                                <button
                                    class="btn btn-success rounded-circle d-flex justify-content-center align-items-center"
                                    style="width: 40px; height: 40px;">
                                    <i class="fas fa-paper-plane"></i>
                                </button>
                            </div>

                            @error('message')
                                <div class="text-danger small mt-1">{{ $message }}</div>
                            @enderror
                            @error('attachment')
                                <div class="text-danger small mt-1">{{ $message }}</div>
                            @enderror
                        </form>
                    </div>
                </div>
            @else
                <div class="alert alert-secondary text-center">
                    This ticket is closed. You cannot reply further.
                </div>
            @endif
        </div>


        <div class="col-md-3">
            {{-- sidebar --}}
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-primary text-white fw-bold py-1">Tickets</div>
                <div class="list-group list-group-flush">
                    @foreach ($tickets as $t)
                        <div
                            class="list-group-item d-flex justify-content-between align-items-center
    {{ $ticket->id == $t->id ? 'bg-primary text-white' : '' }}">
                            <a href="{{ route('support_manage.show', $t->ticket_number) }}"
                                class="text-decoration-none {{ $ticket->id == $t->id ? 'text-white' : 'text-dark' }}">
                                #{{ $t->ticket_number }}
                            </a>
                            <div class="form-check form-switch">
                                <input class="form-check-input toggle-status" type="checkbox" role="switch"
                                    data-ticket-id="{{ $t->id }}" {{ $t->status === 'open' ? 'checked' : '' }}>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>

    </div>
@endsection

@push('script')
    <script>
        $(document).on('click', '.delete-reply', function() {
            if (!confirm('Are you sure you want to delete this message?')) return;

            let replyId = $(this).data('reply-id');

            $.ajax({
                url: `/admin/support-manage/reply/${replyId}`,
                type: 'DELETE',
                data: {
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.success) {
                        toastr.success('Reply deleted successfully.');
                        // find the container and remove
                        $(`[data-reply-id="${replyId}"]`).remove();
                    } else {
                        toastr.error('Could not delete reply');
                    }
                },
                error: function() {
                    toastr.error('Server error while deleting');
                }
            });
        });




        $(document).on('change', '.toggle-status', function() {
            let checkbox = $(this);
            let ticketId = checkbox.data('ticket-id');
            let status = checkbox.is(':checked') ? 'open' : 'closed';

            $.ajax({
                url: `/admin/support-manage/${ticketId}/switch-status`,
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    status: status
                },
                success: function(response) {
                    if (response.success) {
                        toastr.success(`Ticket marked as ${status}`);
                    } else {
                        toastr.error('Failed to update status');
                        // rollback the switch visually
                        checkbox.prop('checked', status === 'closed');
                    }
                },
                error: function() {
                    toastr.error('Server error. Please try again');
                    // rollback the switch visually
                    checkbox.prop('checked', status === 'closed');
                }
            });
        });

        $(document).on('submit', '#replyForm', function(e) {
            e.preventDefault();

            let form = $(this);
            let formData = new FormData(this);

            $.ajax({
                url: form.attr('action'),
                type: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                success: function(response) {
                    if (response.success) {
                        toastr.success('Reply sent successfully.');
                        // append the new message to the conversation
                        let messageHtml = `
    <div class="d-flex mb-3 justify-content-end" data-reply-id="${response.reply_id}">
        <div class="d-flex flex-column" style="max-width: 80%;">
            <div class="px-3 py-2 rounded-4 position-relative bg-success text-white shadow-sm"
                 style="word-break: break-word; border-bottom-right-radius: 0.25rem;">
                 
                <!-- delete cross -->
                <button type="button" class="btn-close position-absolute top-0 end-0 m-1 delete-reply" 
                        data-reply-id="${response.reply_id}" style="font-size:0.6rem;"></button>
                
                ${response.reply_text}
                ${response.attachment ? `
                        <div class="mt-2">
                            <a href="${response.attachment_url}" target="_blank" class="text-white text-decoration-underline">
                                📎 View Attachment
                            </a>
                        </div>` : ''}

                <small class="d-block text-end mt-1 opacity-75" style="font-size: 0.7rem;">
                    just now
                </small>
            </div>
        </div>
        <div class="flex-shrink-0 ms-2">
            <img src="{{ asset('assets/backend/images/avater.png') }}" alt="Admin Avatar"
                class="rounded-circle" style="width: 35px; height: 35px;">
        </div>
    </div>
`;

                        $('#conversationBody').append(messageHtml);

                        // clear input
                        form.find('textarea[name="message"]').val('');
                        form.find('input[name="attachment"]').val('');

                        // auto-scroll to bottom
                        $('#conversationBody').scrollTop($('#conversationBody')[0].scrollHeight);
                    } else {
                        toastr.error('Could not send reply');
                    }
                },
                error: function(xhr) {
                    toastr.error('Server error, please try again.');
                }
            });
        });
    </script>
@endpush