@extends('layouts.help')

@push('styles')
    <style>
        /* Reset */
        main {margin-left: 0 !important;}
    </style>
    <script>window.asset_url='{{ asset('')}}';</script>
@endpush

@section('content')
<div class="container py-4">
    <div class="mb-4">
        <a href="{{ route('front.support.index') }}" class="btn btn-secondary">← Back to Tickets</a>
    </div>
    
    <div class="card mb-4">
        <div class="card-body">
            <h5 class="mb-3">Ticket: {{ $ticket->subject }}</h5>
            <p><strong>Status:</strong> {{ $ticket->status }} | <strong>Priority:</strong> {{ $ticket->priority }}</p>
            <p><strong>Category:</strong> {{ optional($ticket->category)->name ?? 'N/A' }}</p>

            <br>
            
            <p>{{ $ticket->description }}</p>
            <div class="text-muted small">{{ $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)
        <h3 class="mb-3">Reply</h3>
        <div class="card mb-2 {{ $reply->user_id == auth()->id() ? 'bg-light' : '' }}">
            <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-info">
                        View Attachment
                    </a>
                @endif

                <div class="text-muted small mt-2">
                    <strong>{{ $reply->user->name }}</strong> replied {{ $reply->created_at->diffForHumans() }}
                </div>
            </div>
        </div>
    @endforeach

--}}

    <form action="{{ route('front.support.tickets.reply', $ticket) }}" method="POST" enctype="multipart/form-data" class="mt-4">
        @csrf

        <div class="form-group">
            <label>Your Reply</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-success">Send Reply</button>
    </form>
</div>
@endsection

@push('scripts')
    <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>
@endpush