@include('Partials.sidebar')
<section class="main_content dashboard_part large_header_bg">
@include('Partials.header')
<div class="main_content_iner default_main_contaner_iner">
<div class="page-body">

    <div class="container-fluid">
        <div class="page-title">
            <div class="row align-items-center">
                <div class="col-sm-6 ps-0">
                    <h3><i class="fas fa-reply mr-2" style="color:#c9a96e"></i>Feedback Detail</h3>
                </div>
                <div class="col-sm-6 pe-0">
                    <ol class="bc">
                        <li><a href="/admin/dashboard" class="bc-home"><i class="fas fa-home"></i></a></li>
                        <li class="bc-sep">›</li>
                        <li><a href="/admin/feedback" class="bc-link">Feedback</a></li>
                        <li class="bc-sep">›</li>
                        <li class="bc-active">#{{ $feedback->id }}</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    @foreach(['success','error'] as $t)
        @if(session($t))
        <div class="container-fluid mb-2">
            <div class="alert alert-{{ $t==='error'?'danger':$t }} alert-dismissible fade show">
                {{ session($t) }}<button type="button" class="close" data-dismiss="alert">&times;</button>
            </div>
        </div>
        @endif
    @endforeach

    @php
        $ratingColor = $feedback->rating >= 4 ? '#22c55e' : ($feedback->rating >= 3 ? '#f59e0b' : '#ef4444');
    @endphp

    <div class="container-fluid">
        <div class="row">

            {{-- Left: Feedback detail --}}
            <div class="col-lg-7">

                {{-- User + rating card --}}
                <div class="card shadow-sm mb-3" style="border-top:3px solid {{ $ratingColor }}">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start flex-wrap" style="gap:12px">
                            <div>
                                <div style="font-size:16px;font-weight:800;color:#1e293b">{{ $feedback->user?->name }}</div>
                                <div style="font-size:13px;color:#94a3b8">{{ $feedback->user?->email }}</div>
                                @if($feedback->booking)
                                    <div style="font-size:12px;color:#64748b;margin-top:4px">
                                        <i class="fas fa-home mr-1"></i>Unit {{ $feedback->booking->plot_number }}
                                        <span class="text-muted">· {{ $feedback->booking->plot_type }}</span>
                                    </div>
                                @endif
                            </div>
                            <div style="text-align:right">
                                <div style="font-size:24px;color:{{ $ratingColor }};font-weight:800;line-height:1">
                                    {{ str_repeat('★',$feedback->rating) }}<span style="color:#e2e8f0;font-size:18px">{{ str_repeat('★',5-$feedback->rating) }}</span>
                                </div>
                                <div style="font-size:12px;color:#94a3b8">{{ $feedback->rating }}/5 · {{ ucfirst($feedback->category) }}</div>
                            </div>
                        </div>

                        <div style="margin-top:16px;padding:14px 16px;background:#f8f9fa;border-radius:8px;border:1px solid #e2e8f0">
                            <div style="font-weight:700;color:#1e293b;font-size:14px;margin-bottom:8px">
                                {{ $feedback->subject }}
                            </div>
                            <div style="color:#475569;font-size:13px;line-height:1.75;white-space:pre-line">{{ $feedback->message }}</div>
                        </div>

                        <div style="margin-top:10px;font-size:12px;color:#94a3b8">
                            <i class="fas fa-clock mr-1"></i>Submitted {{ $feedback->created_at->format('d M Y, H:i') }}
                            ({{ $feedback->created_at->diffForHumans() }})
                            <span class="badge {{ $feedback->statusBadgeClass() }} ml-2" style="text-transform:capitalize">{{ $feedback->status }}</span>
                        </div>
                    </div>
                </div>

                {{-- Existing reply (if any) --}}
                @if($feedback->admin_reply)
                <div class="card shadow-sm mb-3" style="border-left:4px solid #22c55e">
                    <div class="card-header" style="background:#f0fdf4">
                        <h6 class="mb-0 text-success">
                            <i class="fas fa-check-circle mr-2"></i>Reply Sent
                            @if($feedback->repliedBy)
                                <span style="font-weight:400;font-size:12px;color:#16a34a"> by {{ $feedback->repliedBy->name }}</span>
                            @endif
                            @if($feedback->replied_at)
                                <span style="font-weight:400;font-size:12px;color:#94a3b8"> · {{ $feedback->replied_at->format('d M Y, H:i') }}</span>
                            @endif
                        </h6>
                    </div>
                    <div class="card-body">
                        <div style="color:#166534;font-size:13px;line-height:1.75;white-space:pre-line">{{ $feedback->admin_reply }}</div>
                    </div>
                </div>
                @endif

                {{-- Reply form --}}
                <div class="card shadow-sm" style="border-top:3px solid #c9a96e">
                    <div class="card-header" style="background:linear-gradient(135deg,#1a1a2e,#16213e)">
                        <h6 class="mb-0 text-white">
                            <i class="fas fa-reply mr-2" style="color:#c9a96e"></i>
                            {{ $feedback->admin_reply ? 'Update Reply' : 'Send Reply' }}
                        </h6>
                    </div>
                    <div class="card-body">
                        <form method="POST" action="/admin/feedback/{{ $feedback->id }}/reply">
                            @csrf
                            <div class="form-group mb-3">
                                <label style="font-size:12px;font-weight:600">Reply Message *</label>
                                <textarea name="admin_reply" class="form-control" rows="5"
                                    required maxlength="2000"
                                    placeholder="Write your reply...">{{ $feedback->admin_reply }}</textarea>
                                <div style="font-size:11px;color:#94a3b8;text-align:right;margin-top:3px">
                                    <span id="replyCount">{{ strlen($feedback->admin_reply ?? '') }}</span>/2000
                                </div>
                            </div>
                            <div class="form-group mb-3">
                                <label style="font-size:12px;font-weight:600">Mark Status *</label>
                                <select name="status" class="form-control form-control-sm" style="max-width:180px">
                                    <option value="reviewed" {{ $feedback->status==='reviewed'?'selected':'' }}>Reviewed</option>
                                    <option value="resolved" {{ $feedback->status==='resolved'?'selected':'' }}>Resolved</option>
                                </select>
                            </div>
                            <div class="d-flex gap-2" style="gap:8px">
                                <button class="btn btn-warning" style="color:#fff;font-weight:700">
                                    <i class="fas fa-paper-plane mr-1"></i>Send Reply
                                </button>
                                <a href="/admin/feedback" class="btn btn-outline-secondary">← Back</a>
                            </div>
                        </form>
                    </div>
                </div>

            </div>

            {{-- Right: Quick actions --}}
            <div class="col-lg-5">
                <div class="card shadow-sm">
                    <div class="card-header"><h6 class="mb-0">Quick Actions</h6></div>
                    <div class="card-body">
                        <form method="POST" action="/admin/feedback/{{ $feedback->id }}/status" class="mb-3">
                            @csrf @method('PATCH')
                            <label style="font-size:12px;font-weight:600">Change Status</label>
                            <div class="d-flex mt-1" style="gap:6px">
                                @foreach(['pending','reviewed','resolved'] as $s)
                                    <button type="submit" name="status" value="{{ $s }}"
                                        class="btn btn-sm {{ $feedback->status===$s ? 'btn-secondary' : 'btn-outline-secondary' }}"
                                        style="text-transform:capitalize;{{ $feedback->status===$s ? 'opacity:0.6;cursor:default' : '' }}"
                                        {{ $feedback->status===$s ? 'disabled' : '' }}>
                                        {{ $s }}
                                    </button>
                                @endforeach
                            </div>
                        </form>

                        <hr>

                        <form method="POST" action="/admin/feedback/{{ $feedback->id }}"
                              onsubmit="return confirm('Delete this feedback permanently?')">
                            @csrf @method('DELETE')
                            <button class="btn btn-sm btn-outline-danger btn-block">
                                <i class="fas fa-trash mr-1"></i>Delete Feedback
                            </button>
                        </form>
                    </div>
                </div>

                {{-- User info card --}}
                <div class="card shadow-sm mt-3">
                    <div class="card-header"><h6 class="mb-0">User Info</h6></div>
                    <div class="card-body" style="font-size:13px">
                        <div class="d-flex justify-content-between mb-2">
                            <span class="text-muted">Name</span>
                            <strong>{{ $feedback->user?->name }}</strong>
                        </div>
                        <div class="d-flex justify-content-between mb-2">
                            <span class="text-muted">Email</span>
                            <span>{{ $feedback->user?->email }}</span>
                        </div>
                        <div class="d-flex justify-content-between mb-2">
                            <span class="text-muted">Role</span>
                            <span class="badge badge-info" style="text-transform:capitalize">{{ $feedback->user?->role }}</span>
                        </div>
                        <div class="d-flex justify-content-between">
                            <span class="text-muted">Status</span>
                            <span class="badge {{ $feedback->user?->status==='active'?'badge-success':'badge-danger' }}">
                                {{ $feedback->user?->status }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

</div>
</div>
</section>
@include('Partials.footer')

<script>
document.querySelector('textarea[name="admin_reply"]').addEventListener('input', function() {
    document.getElementById('replyCount').textContent = this.value.length;
});
</script>