@extends('layouts.admin')

@section('title', setting('school_name', 'ShulePoint') . ' | New Message')
@section('page-title', 'New Message')

@section('content')
@push('scripts')
<script>
(function () {
    var form = document.getElementById('compose-form');
    if (!form) return;
    var fileInput = form.querySelector('input[type="file"]');
    var bar = document.getElementById('upload-bar');
    var wrap = document.getElementById('upload-progress');
    var btn = document.getElementById('send-btn');
    var label = document.getElementById('send-label');
    form.addEventListener('submit', function (e) {
        if (!fileInput || !fileInput.files.length) return; // plain submit, no file
        e.preventDefault();
        btn.disabled = true;
        wrap.classList.remove('d-none');
        var xhr = new XMLHttpRequest();
        xhr.open('POST', form.action, true);
        xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
        xhr.upload.addEventListener('progress', function (ev) {
            if (!ev.lengthComputable) return;
            var pct = Math.round(ev.loaded / ev.total * 100);
            bar.style.width = pct + '%';
            bar.setAttribute('aria-valuenow', pct);
            if (label) label.textContent = 'Uploading ' + pct + '%…';
        });
        xhr.addEventListener('load', function () {
            if (label) label.textContent = 'Sent ✓';
            window.location.href = xhr.responseURL || "{{ route('messages.inbox') }}";
        });
        xhr.addEventListener('error', function () {
            btn.disabled = false;
            if (label) label.textContent = 'Send';
            alert('Upload failed — please try again.');
        });
        xhr.send(new FormData(form));
    });
    if (fileInput) {
        fileInput.addEventListener('change', function () {
            var lbl = fileInput.nextElementSibling;
            if (lbl && fileInput.files.length) lbl.textContent = fileInput.files[0].name;
        });
    }
})();
</script>
@endpush
<div class="mb-3"><a href="{{ route('messages.inbox') }}" class="btn btn-sm btn-outline-secondary"><i class="fas fa-arrow-left mr-1"></i> Back to Inbox</a></div>
<div class="row">
    <div class="col-lg-8">
        <div class="card card-outline card-primary shadow-sm">
            <div class="card-header"><h3 class="card-title"><i class="fas fa-pen mr-1"></i> {{ isset($replyTo) ? 'Reply' : 'New message' }}</h3></div>
            <form action="{{ route('messages.store') }}" method="POST" enctype="multipart/form-data" id="compose-form">
                @csrf
                @if(isset($replyTo))
                    <input type="hidden" name="parent_id" value="{{ $replyTo->threadRoot()->id }}">
                @endif
                <div class="card-body">
                    @if(isset($replyTo))
                        @php $root = $replyTo->threadRoot(); $other = $root->sender_id === auth()->id() ? $root->recipient : $root->sender; @endphp
                        <div class="alert alert-info py-2 small">Replying to <strong>{{ $other->name ?? 'User' }}</strong> — thread: “{{ $root->subject ?: \Illuminate\Support\Str::limit($root->body, 50) }}”.</div>
                        <input type="hidden" name="recipient_id" value="{{ $other->id }}">
                    @else
                        <div class="form-group">
                            <label class="fld-label">To <span class="text-danger">*</span></label>
                            <select name="recipient_id" class="form-control form-control-sm @error('recipient_id') is-invalid @enderror" required>
                                <option value="">— Select a user —</option>
                                @foreach ($users as $u)
                                    <option value="{{ $u->id }}" @selected((string) old('recipient_id', request('to')) === (string) $u->id)>{{ $u->name }} ({{ ucfirst($u->role ?? 'user') }})</option>
                                @endforeach
                            </select>
                            @error('recipient_id')<span class="invalid-feedback d-block">{{ $message }}</span>@enderror
                        </div>
                    @endif
                    <div class="form-group">
                        <label class="fld-label">Subject</label>
                        <input type="text" name="subject" value="{{ old('subject', isset($replyTo) ? '' : '') }}" class="form-control form-control-sm" placeholder="Subject (optional)">
                    </div>
                    <div class="form-group">
                        <label class="fld-label">Message <span class="text-danger">*</span></label>
                        <textarea name="body" rows="6" class="form-control form-control-sm @error('body') is-invalid @enderror" placeholder="Write your message…" required>{{ old('body') }}</textarea>
                        @error('body')<span class="invalid-feedback d-block">{{ $message }}</span>@enderror
                    </div>
                    <div class="form-group">
                        <label class="fld-label">Attachment <small class="text-muted">(optional — image, PDF, doc, max 10MB)</small></label>
                        <div class="custom-file">
                            <input type="file" name="attachment" id="attachment" class="custom-file-input @error('attachment') is-invalid @enderror">
                            <label class="custom-file-label col-form-label-sm" for="attachment">Choose file…</label>
                        </div>
                        @error('attachment')<span class="invalid-feedback d-block">{{ $message }}</span>@enderror
                    </div>
                </div>
                <div class="card-footer">
                    <div class="progress mb-2 d-none" id="upload-progress" style="height:8px;">
                        <div class="progress-bar progress-bar-striped progress-bar-animated" id="upload-bar" role="progressbar" style="width:0%;background-color:#f97316;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                    <div class="d-flex justify-content-between align-items-center">
                        <a href="{{ route('messages.inbox') }}" class="btn btn-sm btn-outline-secondary">Cancel</a>
                        <button type="submit" class="btn btn-sm btn-primary" id="send-btn"><i class="fas fa-paper-plane mr-1"></i> <span id="send-label">Send</span></button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="card shadow-sm">
            <div class="card-header"><h3 class="card-title"><i class="fas fa-info-circle mr-1"></i> Tips</h3></div>
            <div class="card-body">
                <p class="small text-muted mb-2">Message any <strong>active user</strong> in the system — all roles included.</p>
                <p class="small text-muted mb-0">The recipient gets a <strong>portal bell notification</strong> plus an unread badge on the envelope icon.</p>
            </div>
        </div>
    </div>
</div>
@endsection