@extends('layouts.superadmin')

@section('content')
<style>
    .chat-message {
        max-width: 75%;
        padding: 12px 16px;
        border-radius: 12px;
        margin-bottom: 10px;
    }
    .chat-left {
        background: #f1f1f1;
        text-align: left;
    }
    .chat-right {
        background: #d1e7dd;
        text-align: right;
        margin-left: auto;
    }
    .chat-meta {
        font-size: 12px;
        color: #888;
    }
</style>
<div class="container py-4">
    <h5 class="mb-3">Ticket #{{ $ticket->id }} - {{ $ticket->subject }}</h5>
    <p><strong>User:</strong> {{ $ticket->user->name }} | <strong>Category:</strong> {{ optional($ticket->category)->name }} | <strong>Priority:</strong> {{ $ticket->priority }}</p>

    <form method="POST" action="{{ route('portal.support.tickets.status', $ticket) }}" class="form-inline mb-3">
        @csrf
        @method('PATCH')
        <label class="mr-2">Update Status:</label>
        <select name="status" class="form-control mr-2">
            @foreach(['open', 'inprogress', 'closed'] as $status)
                <option value="{{ $status }}" {{ $ticket->status == $status ? 'selected' : '' }}>{{ $status }}</option>
            @endforeach
        </select>
        <button class="btn btn-sm btn-outline-success">Update</button>
    </form>

    <div class="card mb-4">
        <div class="card-body">
            <p>{!! $ticket->description !!}</p>
            <div class="text-muted small">Posted {{ $ticket->created_at->diffForHumans() }}</div>
        </div>
    </div>

    @if($ticket->replies)
        <div class="card mb-2">
            <div class="card-body">
                <h3>Reply</h3>
                @foreach($ticket->replies as $reply)
                    @php $first_letter = strtoupper(substr($reply->user_name ?? 'Guest', 0, 1)); @endphp
                    <div class="d-flex flex-row mb-3 pb-3 border-bottom">
                        <a>
                            <img alt="Profile Picture" src="https://placehold.co/150x150/orange/white?text={{ $first_letter }}" class="img-thumbnail border-0 rounded-circle list-thumbnail align-self-center xsmall">
                        </a>
                        <div class="pl-3">
                            <a>
                                <p class="font-weight-medium mb-0">{{ $reply->user->is_admin ? 'Admin' : ($reply->user_name ?? 'User') }}</p>
                                <p class="text-muted mb-0 text-small">{{ $reply->message }}</p>
                            </a>

                            @if($reply->attachment)
                                <a href="{{ asset('storage/' . $reply->attachment) }}" target="_blank" class="btn btn-sm btn-outline-primary">
                                    View Attachment
                                </a>
                            @endif
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    @endif

    {{--
    @foreach($ticket->replies as $reply)
        <div class="card mb-2 {{ $reply->user->is_admin ? 'border-success' : 'border-info' }}">
            <div class="card-body">
                <p>{{ $reply->message }}</p>
                @if($reply->attachment)
                    <a href="{{ asset('storage/' . $reply->attachment) }}" target="_blank" class="btn btn-sm btn-outline-primary">
                        View Attachment
                    </a>
                @endif
                <div class="text-muted mt-2 small">
                    <strong>{{ $reply->user->name }}</strong> ({{ $reply->user->is_admin ? 'Admin' : 'User' }}) replied {{ $reply->created_at->diffForHumans() }}
                </div>
            </div>
        </div>
    @endforeach
    --}}

    <form method="POST" action="{{ route('portal.support.tickets.reply', $ticket) }}" enctype="multipart/form-data" class="mt-4">
        @csrf
        <div class="form-group">
            <label>Reply Message</label>
            <textarea name="message" rows="4" class="form-control" required></textarea>
        </div>

        {{--<div class="form-group">
            <label>Attachment (optional)</label>
            <input type="file" name="attachment" class="form-control-file">
        </div>--}}

        <div class="form-group">
            <label for="attachment" class="form-label">Attachment (optional)</label>
            <!-- Your Dropzone UI container -->
            <!-- <div class="dz-message">Drop files or click to upload</div> -->
            <div class="dropzone" id="my-dropzone">
                <input type="file" name="attachment" id="attachment" style="display: none;">
            </div>
        </div>

        <!-- Hidden field to keep the existing image if no new one is uploaded -->
        <input type="hidden" name="attachment" value="{{ old('attachment') }}">

        <button class="btn btn-primary">Send Reply</button>
    </form>
</div>
@endsection

@section('script')
    <script src="{{ asset('/js/vendor/dropzone.min.js') }}"></script>
    <script>
        Dropzone.autoDiscover = false;
        var isReplacing = false;
        const realFileInput = document.querySelector("#attachment");

        /* 03.20. Dropzone */
        if ($().dropzone && !$(".dropzone").hasClass("disabled")) {
            $(".dropzone").dropzone({
                url: "#",
                maxFiles: 1,
                clickable: true,
                init: async function () {
                    const dz = this;
                    
                    this.on("addedfile", function (file) {
                        // Create a FileList and assign it to the hidden input
                        const dataTransfer = new DataTransfer();
                        dataTransfer.items.add(file);
                        realFileInput.files = dataTransfer.files;
                    });

                    this.on("maxfilesexceeded", function(file) {
                        if (! isReplacing) {
                            isReplacing = true;
                            this.removeAllFiles();
                            this.addFile(file);
                            isReplacing = false;
                        }
                    });
                },
                thumbnailWidth: 160,
                autoProcessQueue: false,
                previewTemplate: '<div class="dz-preview dz-file-preview mb-3"><div class="d-flex flex-row "><div class="p-0 w-30 position-relative"><div class="dz-error-mark"><span><i></i></span></div><div class="dz-success-mark"><span><i></i></span></div><div class="preview-container"><img data-dz-thumbnail class="img-thumbnail border-0" /><i class="simple-icon-doc preview-icon" ></i></div></div><div class="pl-3 pt-2 pr-2 pb-1 w-70 dz-details position-relative"><div><span data-dz-name></span></div><div class="text-primary text-extra-small" data-dz-size /><div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div><div class="dz-error-message"><span data-dz-errormessage></span></div></div></div><a href="#/" class="remove" data-dz-remove><i class="glyph-icon simple-icon-trash"></i></a></div>'
            });
        }
    </script>
@endsection