@extends('layouts.app')

@section('title', "Request {$request->request_number}")

@section('content')
<div class="space-y-6" x-data="{ activeTab: 'overview', showApproveModal: false, showChangesModal: false }">

    <!-- Top Header Banner -->
    <div class="bg-white rounded-lg border border-slate-200 shadow-sm p-6 space-y-4">

        <!-- Top Bar: Request ID, Badges & Back Button -->
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 pb-4 border-b border-slate-100">
            <div class="flex items-center space-x-3">
                <span class="font-black text-2xl text-harcourts-navy tracking-tight">{{ $request->request_number }}</span>
                <span class="px-2.5 py-1 bg-slate-100 text-slate-800 text-xs font-bold uppercase rounded border border-slate-200">
                    {{ $request->requestType->name }}
                </span>
                <x-priority-badge :priority="$request->calculated_priority" :isOverdue="$request->is_overdue" />
                <x-status-badge :status="$request->status" />
            </div>

            <div class="flex items-center space-x-2">
                <a href="{{ route('requests.index') }}" class="px-3 py-1.5 bg-slate-100 hover:bg-slate-200 text-slate-700 font-semibold rounded text-xs transition-colors">
                    &larr; Back to Requests
                </a>

                @if($request->property_url)
                    <a href="{{ $request->property_url }}" target="_blank" class="px-4 py-1.5 bg-harcourts-blue hover:bg-blue-800 text-white font-bold text-xs uppercase tracking-wider rounded shadow transition-colors flex items-center space-x-1">
                        <span>Open Property Listing</span>
                        <svg class="w-3.5 h-3.5 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
                    </a>
                @endif
            </div>
        </div>

        <!-- Request Summary Metadata Bar -->
        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-4 text-xs">
            <div>
                <span class="text-slate-400 font-bold uppercase block text-[10px]">Property Address</span>
                <span class="font-semibold text-slate-800">{{ $request->property_address ?? 'Not specified' }}</span>
            </div>

            <div>
                <span class="text-slate-400 font-bold uppercase block text-[10px]">Agent</span>
                <span class="font-semibold text-slate-800">{{ $request->agent ? $request->agent->name : 'N/A' }}</span>
            </div>

            <div>
                <span class="text-slate-400 font-bold uppercase block text-[10px]">Submitted Date / Time</span>
                <span class="font-semibold text-slate-800">
                    {{ $request->submitted_at ? $request->submitted_at->format('d M Y, g:i A') : '' }}
                </span>
                <span class="text-[10px] text-slate-400 block">by {{ $request->submitter ? $request->submitter->name : 'Admin' }}</span>
            </div>

            <div>
                <span class="text-slate-400 font-bold uppercase block text-[10px]">Required By</span>
                <span class="font-semibold text-slate-800">
                    {{ $request->required_at ? $request->required_at->format('d M Y, g:i A') : '' }}
                </span>
            </div>

            <div>
                <span class="text-slate-400 font-bold uppercase block text-[10px]">Assigned Designer</span>
                <span class="font-semibold text-slate-800">{{ $request->designer ? $request->designer->name : 'Unassigned' }}</span>
            </div>

            <div>
                <span class="text-slate-400 font-bold uppercase block text-[10px]">Versions & Revisions</span>
                <span class="font-bold text-harcourts-navy">
                    Total Versions: {{ $request->versions_count }} | Revisions: {{ $request->revisions_count }}
                </span>
            </div>
        </div>

        <!-- Workflow Action Bar -->
        <div class="pt-4 border-t border-slate-100 flex flex-wrap items-center justify-between gap-3">
            <div class="flex items-center space-x-2">
                @if($request->status === 'NEW' && (auth()->user()->isDesigner() || auth()->user()->isSuperAdmin()))
                    <form method="POST" action="{{ route('requests.start-work', $request->id) }}">
                        @csrf
                        <button type="submit" class="px-4 py-2 bg-amber-600 hover:bg-amber-700 text-white font-bold text-xs uppercase tracking-wider rounded shadow transition-colors">
                            Start Work
                        </button>
                    </form>
                @endif

                @if($request->status === 'CHANGES_REQUESTED' && (auth()->user()->isDesigner() || auth()->user()->isSuperAdmin()))
                    <form method="POST" action="{{ route('requests.start-revision', $request->id) }}">
                        @csrf
                        <button type="submit" class="px-4 py-2 bg-rose-600 hover:bg-rose-700 text-white font-bold text-xs uppercase tracking-wider rounded shadow transition-colors">
                            Start Revision
                        </button>
                    </form>
                @endif

                @if(in_array($request->status, ['IN_PROGRESS', 'IN_REVISION', 'AWAITING_ADMIN_REVIEW']) && (auth()->user()->isDesigner() || auth()->user()->isSuperAdmin()))
                    <button @click="activeTab = 'proofs'" class="px-4 py-2 bg-purple-700 hover:bg-purple-800 text-white font-bold text-xs uppercase tracking-wider rounded shadow transition-colors">
                        + Upload Proof Version
                    </button>
                @endif

                @if($request->status === 'AWAITING_ADMIN_REVIEW' && (auth()->user()->isHarcourtsAdmin() || auth()->user()->isSuperAdmin()))
                    <button @click="showApproveModal = true" class="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white font-bold text-xs uppercase tracking-wider rounded shadow transition-colors">
                        Approve Design
                    </button>

                    <button @click="showChangesModal = true" class="px-4 py-2 bg-rose-600 hover:bg-rose-700 text-white font-bold text-xs uppercase tracking-wider rounded shadow transition-colors">
                        Request Changes
                    </button>
                @endif

                @if($request->status === 'APPROVED')
                    <form method="POST" action="{{ route('requests.complete', $request->id) }}">
                        @csrf
                        <button type="submit" class="px-4 py-2 bg-slate-800 hover:bg-black text-white font-bold text-xs uppercase tracking-wider rounded shadow transition-colors">
                            Mark Completed
                        </button>
                    </form>
                @endif
            </div>

            @if(in_array($request->status, ['NEW', 'IN_PROGRESS']) && (auth()->user()->isSuperAdmin() || $request->submitted_by === auth()->id()))
                <form method="POST" action="{{ route('requests.cancel', $request->id) }}" onsubmit="return confirm('Are you sure you want to cancel this marketing request?')">
                    @csrf
                    <button type="submit" class="text-xs text-rose-600 font-semibold hover:underline">
                        Cancel Request
                    </button>
                </form>
            @endif
        </div>

    </div>

    <!-- Main Navigation Tabs -->
    <div class="border-b border-slate-200">
        <nav class="flex space-x-6 text-xs font-bold uppercase tracking-wider">
            <button @click="activeTab = 'overview'" :class="activeTab === 'overview' ? 'border-harcourts-blue text-harcourts-blue border-b-2' : 'text-slate-500 hover:text-slate-800'" class="pb-3 px-1 transition-colors">
                Overview
            </button>
            <button @click="activeTab = 'proofs'" :class="activeTab === 'proofs' ? 'border-harcourts-blue text-harcourts-blue border-b-2' : 'text-slate-500 hover:text-slate-800'" class="pb-3 px-1 transition-colors relative">
                Proofs & Review
                @if($request->versions_count > 0)
                    <span class="ml-1 bg-purple-100 text-purple-700 px-1.5 py-0.2 rounded-full text-[10px]">{{ $request->versions_count }}</span>
                @endif
            </button>
            <button @click="activeTab = 'revisions'" :class="activeTab === 'revisions' ? 'border-harcourts-blue text-harcourts-blue border-b-2' : 'text-slate-500 hover:text-slate-800'" class="pb-3 px-1 transition-colors">
                Revision History
                @if($request->revisions_count > 0)
                    <span class="ml-1 bg-rose-100 text-rose-700 px-1.5 py-0.2 rounded-full text-[10px]">{{ $request->revisions_count }}</span>
                @endif
            </button>
            <button @click="activeTab = 'activity'" :class="activeTab === 'activity' ? 'border-harcourts-blue text-harcourts-blue border-b-2' : 'text-slate-500 hover:text-slate-800'" class="pb-3 px-1 transition-colors">
                Activity Timeline
            </button>
            <button @click="activeTab = 'files'" :class="activeTab === 'files' ? 'border-harcourts-blue text-harcourts-blue border-b-2' : 'text-slate-500 hover:text-slate-800'" class="pb-3 px-1 transition-colors">
                Files & Attachments
            </button>
        </nav>
    </div>

    <!-- TAB 1: OVERVIEW -->
    <div x-show="activeTab === 'overview'" class="space-y-6">
        <div class="bg-white rounded-lg border border-slate-200 p-6 shadow-sm space-y-6">
            <div>
                <h3 class="text-xs font-bold text-harcourts-navy uppercase tracking-wider mb-2">Instructions / Creative Notes</h3>
                <div class="bg-slate-50 p-4 rounded-md border border-slate-200 text-xs text-slate-800 whitespace-pre-line leading-relaxed">
                    {{ $request->instructions ?: 'No additional instructions provided.' }}
                </div>
            </div>

            <!-- Campaign Details if present -->
            @if($request->campaign_details)
                <div>
                    <h3 class="text-xs font-bold text-blue-900 uppercase tracking-wider mb-2">Paid Advertising Campaign Specification</h3>
                    <div class="bg-blue-50/70 border border-blue-200 rounded-md p-4 grid grid-cols-2 md:grid-cols-4 gap-4 text-xs">
                        <div>
                            <span class="text-slate-500 block text-[10px] uppercase font-bold">Platform</span>
                            <span class="font-bold text-slate-800">{{ $request->campaign_details['platform'] ?? 'N/A' }}</span>
                        </div>
                        <div>
                            <span class="text-slate-500 block text-[10px] uppercase font-bold">Objective</span>
                            <span class="font-bold text-slate-800">{{ $request->campaign_details['objective'] ?? 'N/A' }}</span>
                        </div>
                        <div>
                            <span class="text-slate-500 block text-[10px] uppercase font-bold">Budget</span>
                            <span class="font-bold text-slate-800">{{ $request->campaign_details['budget'] ?? 'N/A' }}</span>
                        </div>
                        <div>
                            <span class="text-slate-500 block text-[10px] uppercase font-bold">CTA</span>
                            <span class="font-bold text-slate-800">{{ $request->campaign_details['cta'] ?? 'N/A' }}</span>
                        </div>
                        <div class="col-span-2">
                            <span class="text-slate-500 block text-[10px] uppercase font-bold">Target Areas</span>
                            <span class="font-semibold text-slate-800">{{ $request->campaign_details['target_areas'] ?? 'N/A' }}</span>
                        </div>
                        <div class="col-span-2">
                            <span class="text-slate-500 block text-[10px] uppercase font-bold">Campaign Dates</span>
                            <span class="font-semibold text-slate-800">
                                {{ $request->campaign_details['start_date'] ?? '' }} to {{ $request->campaign_details['end_date'] ?? '' }}
                            </span>
                        </div>
                    </div>
                </div>
            @endif

            <!-- Attachments Summary -->
            <div>
                <h3 class="text-xs font-bold text-harcourts-navy uppercase tracking-wider mb-2">Initial Request Attachments</h3>
                @if($request->attachments->count() > 0)
                    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3">
                        @foreach($request->attachments as $att)
                            <div class="flex items-center justify-between p-3 border border-slate-200 rounded-md bg-slate-50 text-xs">
                                <div class="truncate mr-2">
                                    <span class="font-semibold text-slate-800 block truncate">{{ $att->original_filename }}</span>
                                    <span class="text-[10px] text-slate-400">{{ round($att->file_size / 1024, 1) }} KB</span>
                                </div>
                                <a href="{{ route('files.attachment.download', $att->id) }}" class="px-2.5 py-1 bg-harcourts-blue text-white text-[11px] font-bold rounded hover:bg-blue-800">
                                    Download
                                </a>
                            </div>
                        @endforeach
                    </div>
                @else
                    <p class="text-xs text-slate-400 italic">No attachments were uploaded with the initial request.</p>
                @endif
            </div>
        </div>
    </div>

    <!-- TAB 2: PROOFS & REVIEW -->
    <div x-show="activeTab === 'proofs'" class="space-y-6">

        <!-- Upload Proof Section (Designer / Super Admin) -->
        @if(in_array($request->status, ['IN_PROGRESS', 'IN_REVISION', 'AWAITING_ADMIN_REVIEW']) && (auth()->user()->isDesigner() || auth()->user()->isSuperAdmin()))
            <div class="bg-purple-50 border border-purple-200 rounded-lg p-5 shadow-sm space-y-4">
                <h3 class="text-xs font-bold text-purple-900 uppercase tracking-wider flex items-center space-x-2">
                    <svg class="w-4 h-4 text-purple-700" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/></svg>
                    <span>Upload New Proof Version (Version {{ $request->versions_count + 1 }})</span>
                </h3>

                <form method="POST" action="{{ route('requests.upload-proof', $request->id) }}" enctype="multipart/form-data" class="flex flex-col sm:flex-row items-center gap-4">
                    @csrf
                    <input type="file" name="proof_file" required accept=".jpg,.jpeg,.png,.pdf"
                        class="w-full sm:w-auto text-xs text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded file:border-0 file:text-xs file:font-semibold file:bg-purple-700 file:text-white hover:file:bg-purple-800 cursor-pointer">
                    <button type="submit" class="w-full sm:w-auto px-6 py-2 bg-purple-700 hover:bg-purple-800 text-white font-bold text-xs uppercase tracking-wider rounded shadow transition-colors">
                        Upload & Submit Proof
                    </button>
                </form>
                <p class="text-[11px] text-purple-700">Uploading creates an immutable version record. Status will change to <strong>AWAITING ADMIN REVIEW</strong>.</p>
            </div>
        @endif

        <!-- Active / Latest Proof Display -->
        @if($request->latestVersion)
            <div class="bg-white rounded-lg border border-slate-200 shadow-sm overflow-hidden">
                <div class="px-6 py-4 border-b border-slate-200 bg-slate-50 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
                    <div>
                        <span class="font-bold text-sm text-slate-900">Current Proof — Version {{ $request->latestVersion->version_number }}</span>
                        <span class="text-xs text-slate-500 block">Uploaded by {{ $request->latestVersion->uploader->name }} on {{ $request->latestVersion->uploaded_at->format('d M Y, g:i A') }}</span>
                    </div>

                    <div class="flex items-center space-x-2">
                        <a href="{{ route('files.proof.download', $request->latestVersion->id) }}" class="px-3 py-1.5 bg-slate-800 hover:bg-black text-white font-bold text-xs rounded transition-colors">
                            Download Proof
                        </a>

                        @if($request->status === 'AWAITING_ADMIN_REVIEW' && (auth()->user()->isHarcourtsAdmin() || auth()->user()->isSuperAdmin()))
                            <button @click="showApproveModal = true" class="px-3 py-1.5 bg-emerald-600 hover:bg-emerald-700 text-white font-bold text-xs uppercase tracking-wider rounded">
                                Approve Design
                            </button>
                            <button @click="showChangesModal = true" class="px-3 py-1.5 bg-rose-600 hover:bg-rose-700 text-white font-bold text-xs uppercase tracking-wider rounded">
                                Request Changes
                            </button>
                        @endif
                    </div>
                </div>

                <!-- Proof Creative Preview Frame -->
                <div class="p-6 bg-slate-100 flex justify-center items-center min-h-[400px]">
                    @if($request->latestVersion->isImage())
                        <img src="{{ route('files.proof.view', $request->latestVersion->id) }}" alt="Proof Preview" class="max-h-[600px] w-auto object-contain rounded shadow-lg border border-slate-300">
                    @elseif($request->latestVersion->isPdf())
                        <div class="w-full h-[600px]">
                            <iframe src="{{ route('files.proof.view', $request->latestVersion->id) }}" class="w-full h-full rounded border border-slate-300"></iframe>
                        </div>
                    @else
                        <div class="text-center p-8">
                            <p class="text-sm font-semibold text-slate-700">Preview not available directly in browser.</p>
                            <a href="{{ route('files.proof.download', $request->latestVersion->id) }}" class="inline-block mt-3 px-4 py-2 bg-harcourts-blue text-white font-bold text-xs rounded">
                                Download {{ $request->latestVersion->original_filename }}
                            </a>
                        </div>
                    @endif
                </div>
            </div>
        @else
            <div class="bg-white rounded-lg border border-slate-200 p-12 text-center text-slate-400">
                <svg class="w-12 h-12 mx-auto text-slate-300 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                <p class="font-semibold text-sm text-slate-600">No creative proofs uploaded yet.</p>
                <p class="text-xs mt-1">The assigned designer will upload Version 1 once work begins.</p>
            </div>
        @endif
    </div>

    <!-- TAB 3: REVISION HISTORY -->
    <div x-show="activeTab === 'revisions'" class="space-y-6">
        <div class="bg-white rounded-lg border border-slate-200 p-6 shadow-sm">
            <h3 class="text-sm font-bold text-harcourts-navy uppercase tracking-wider mb-6 pb-2 border-b border-slate-100">
                Revision & Feedback History
            </h3>

            @if($request->revisions->count() > 0)
                <div class="space-y-6 relative before:absolute before:inset-0 before:left-4 before:w-0.5 before:bg-slate-200">
                    @foreach($request->revisions as $rev)
                        <div class="relative pl-10">
                            <!-- Bullet -->
                            <div class="absolute left-2.5 top-1.5 -translate-x-1/2 w-4 h-4 rounded-full bg-rose-600 border-2 border-white ring-2 ring-rose-200"></div>

                            <div class="bg-slate-50 border border-slate-200 rounded-md p-4 shadow-sm space-y-2">
                                <div class="flex items-center justify-between text-xs">
                                    <span class="font-bold text-rose-700 uppercase">Revision #{{ $rev->revision_number }}</span>
                                    <span class="text-slate-400">{{ $rev->requested_at ? $rev->requested_at->format('d M Y, g:i A') : '' }}</span>
                                </div>

                                <div class="text-xs text-slate-800 bg-white p-3 rounded border border-slate-200 font-medium whitespace-pre-line">
                                    "{{ $rev->feedback }}"
                                </div>

                                <div class="flex items-center justify-between text-[11px] text-slate-500 pt-1">
                                    <span>Requested by: <strong>{{ $rev->requester->name }}</strong></span>
                                    @if($rev->resolved_at)
                                        <span class="text-emerald-700 font-semibold">Resolved on {{ $rev->resolved_at->format('d M Y, g:i A') }}</span>
                                    @else
                                        <span class="text-amber-600 font-semibold">Pending Designer Revision</span>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            @else
                <div class="text-center py-8 text-slate-400 text-xs">
                    No change requests or revisions have been made for this request.
                </div>
            @endif
        </div>
    </div>

    <!-- TAB 4: ACTIVITY TIMELINE -->
    <div x-show="activeTab === 'activity'" class="space-y-6">
        <div class="bg-white rounded-lg border border-slate-200 p-6 shadow-sm">
            <h3 class="text-sm font-bold text-harcourts-navy uppercase tracking-wider mb-6 pb-2 border-b border-slate-100">
                Permanent Activity Audit Log
            </h3>

            <div class="space-y-4 relative before:absolute before:inset-0 before:left-4 before:w-0.5 before:bg-slate-200">
                @foreach($request->activityLogs as $log)
                    <div class="relative pl-10">
                        <div class="absolute left-2.5 top-1 -translate-x-1/2 w-3 h-3 rounded-full bg-harcourts-blue border-2 border-white"></div>
                        <div class="text-xs">
                            <div class="flex items-center space-x-2">
                                <span class="font-bold text-slate-900">{{ $log->description }}</span>
                                <span class="text-[10px] text-slate-400">({{ $log->created_at ? $log->created_at->format('d M Y, g:i A') : '' }})</span>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

    <!-- TAB 5: FILES & ATTACHMENTS -->
    <div x-show="activeTab === 'files'" class="space-y-6">
        <div class="bg-white rounded-lg border border-slate-200 p-6 shadow-sm space-y-6">
            <h3 class="text-sm font-bold text-harcourts-navy uppercase tracking-wider pb-2 border-b border-slate-100">
                All Request File Versions
            </h3>

            <div class="space-y-4">
                <h4 class="text-xs font-bold text-slate-700 uppercase">Proof Versions</h4>
                <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3">
                    @forelse($request->versions as $v)
                        <div class="p-3 border border-slate-200 rounded-md bg-slate-50 text-xs flex items-center justify-between">
                            <div>
                                <span class="font-bold text-slate-900 block">Version {{ $v->version_number }}</span>
                                <span class="text-[10px] text-slate-500 block truncate max-w-[150px]">{{ $v->original_filename }}</span>
                                <span class="text-[10px] text-slate-400 block">{{ $v->uploaded_at->format('d M, g:i A') }}</span>
                            </div>
                            <a href="{{ route('files.proof.download', $v->id) }}" class="px-2.5 py-1 bg-harcourts-navy text-white text-[11px] font-bold rounded">
                                Download
                            </a>
                        </div>
                    @empty
                        <p class="text-xs text-slate-400 italic">No proof versions available.</p>
                    @endforelse
                </div>
            </div>
        </div>
    </div>

    <!-- MODAL: APPROVE DESIGN -->
    <div x-show="showApproveModal" x-cloak class="fixed inset-0 z-50 overflow-y-auto bg-slate-900/60 backdrop-blur-sm flex items-center justify-center p-4">
        <div class="bg-white rounded-lg max-w-md w-full p-6 shadow-2xl space-y-4">
            <h3 class="text-lg font-bold text-slate-900">Approve Design Confirmation</h3>
            <p class="text-xs text-slate-600 leading-relaxed">
                Are you sure you want to approve <strong>Version {{ $request->latestVersion ? $request->latestVersion->version_number : 1 }}</strong> of request <strong>{{ $request->request_number }}</strong>?
                This will lock the design as approved and notify the designer to mark it completed.
            </p>

            <form method="POST" action="{{ route('requests.approve', $request->id) }}" class="flex items-center justify-end space-x-3 pt-4 border-t border-slate-100">
                @csrf
                <button type="button" @click="showApproveModal = false" class="px-4 py-2 text-xs font-semibold text-slate-600 hover:text-slate-900">
                    Cancel
                </button>
                <button type="submit" class="px-5 py-2 bg-emerald-600 hover:bg-emerald-700 text-white font-bold text-xs uppercase tracking-wider rounded shadow">
                    Yes, Approve Design
                </button>
            </form>
        </div>
    </div>

    <!-- MODAL: REQUEST CHANGES -->
    <div x-show="showChangesModal" x-cloak class="fixed inset-0 z-50 overflow-y-auto bg-slate-900/60 backdrop-blur-sm flex items-center justify-center p-4">
        <div class="bg-white rounded-lg max-w-lg w-full p-6 shadow-2xl space-y-4">
            <h3 class="text-lg font-bold text-slate-900">Request Design Changes</h3>
            <p class="text-xs text-slate-600">
                Please describe the requested changes clearly for the designer. (e.g. "Make property photo brighter", "Remove footer line", "Adjust auction date text").
            </p>

            <form method="POST" action="{{ route('requests.request-changes', $request->id) }}" class="space-y-4">
                @csrf
                <div>
                    <label for="feedback" class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-2">
                        Revision Feedback <span class="text-red-500">*</span>
                    </label>
                    <textarea name="feedback" id="feedback" rows="4" required minlength="3"
                        placeholder="Type detailed change instructions here..."
                        class="w-full px-3 py-2 text-xs border border-slate-300 rounded-md focus:ring-2 focus:ring-rose-500 focus:border-rose-500"></textarea>
                </div>

                <div class="flex items-center justify-end space-x-3 pt-3 border-t border-slate-100">
                    <button type="button" @click="showChangesModal = false" class="px-4 py-2 text-xs font-semibold text-slate-600 hover:text-slate-900">
                        Cancel
                    </button>
                    <button type="submit" class="px-5 py-2 bg-rose-600 hover:bg-rose-700 text-white font-bold text-xs uppercase tracking-wider rounded shadow">
                        Submit Revision Request
                    </button>
                </div>
            </form>
        </div>
    </div>

</div>
@endsection
