@extends('layouts.seller')

@section('title', 'Inquiries')

@section('content')
<div class="page-header d-flex justify-content-between align-items-center mb-3">
    <div>
        <h4 class="page-title fw-bold text-dark fs-5 mb-0">Inquiries</h4>
        <p class="text-muted small mb-0">Manage buyer messages.</p>
    </div>
    <div class="d-none d-md-block">
        <span class="badge bg-white text-muted border px-2 py-1 rounded-pill shadow-sm small fw-normal">
            <i class="bi bi-clock me-1"></i> Response: <strong class="text-dark">24h Avg</strong>
        </span>
    </div>
</div>

@php
    $hasSubscription = Auth::user()->seller->hasActiveSubscription();
@endphp

@if(!$hasSubscription)
    <div class="alert alert-warning border-0 shadow-sm d-flex align-items-center mb-3 p-2 rounded-3 bg-warning-subtle text-dark">
        <div class="bg-warning text-white p-1 rounded-circle me-2 flex-shrink-0" style="width: 32px; height: 32px; display: grid; place-items: center;">
            <i class="bi bi-lock-fill small"></i>
        </div>
        <div class="flex-grow-1 lh-1">
            <span class="fw-bold fs-xs text-uppercase">Locked</span>
            <span class="small opacity-75 ms-1">Upgrade to view contact details.</span>
        </div>
        <a href="{{ route('seller.subscription.index') }}" class="btn btn-dark btn-sm ms-3 fw-bold flex-shrink-0 rounded-pill px-3 py-0 pb-1" style="font-size: 0.75rem;">Upgrade</a>
    </div>
@endif

<!-- Compact Stats Row -->
<div class="row g-2 mb-3">
    <div class="col-6 col-md-3">
        <div class="card border-0 shadow-sm rounded-3 bg-white h-100">
             <div class="card-body p-3 d-flex justify-content-between align-items-center">
                <div>
                     <div class="text-uppercase fw-bold text-muted extra-small">Total Inquiries</div>
                     <div class="h5 fw-bold mb-0 text-dark mt-1">{{ $inquiries->total() }}</div>
                </div>
                <div class="bg-primary bg-opacity-10 text-primary p-2 rounded">
                    <i class="bi bi-envelope-fill"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card border-0 shadow-sm rounded-3 overflow-hidden">
    <div class="card-header bg-white py-2 px-3 border-bottom d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-2">
        <h6 class="fw-bold mb-0 text-dark small text-uppercase">
            Recent Inquiries
        </h6>
        <div class="position-relative" style="max-width: 100%; width: 250px;">
            <i class="bi bi-search position-absolute top-50 start-0 translate-middle-y ms-3 text-muted small"></i>
            <input type="text" class="form-control form-control-sm bg-light border-0 ps-5 rounded-pill" placeholder="Search...">
        </div>
    </div>
    
    <!-- Mobile View (Compact List) -->
    <div class="d-md-none">
        @forelse($inquiries as $inquiry)
            <div class="p-3 border-bottom hover-bg-light">
                <div class="d-flex justify-content-between align-items-start mb-1">
                    <span class="fw-bold text-dark text-truncate" style="max-width: 60%;">{{ $inquiry->name }}</span>
                    <small class="text-muted extra-small">{{ $inquiry->created_at->diffForHumans() }}</small>
                </div>
                <div class="mb-2">
                     <p class="mb-0 text-muted small line-clamp-2 text-wrap lh-sm">{{ Str::limit($inquiry->message, 80) }}</p>
                </div>
                <button class="btn btn-sm btn-outline-primary rounded-pill px-3 py-0 fs-xs w-100" data-bs-toggle="modal" data-bs-target="#inquiryModal{{ $inquiry->id }}">
                    View Details
                </button>
            </div>
        @empty
            <div class="text-center py-4 text-muted small">No inquiries found.</div>
        @endforelse
    </div>

    <!-- Desktop View (Table) -->
    <div class="table-responsive d-none d-md-block">
        <table class="table table-hover align-middle mb-0">
            <thead class="bg-light">
                <tr>
                    <th class="ps-3 py-2 text-secondary small text-uppercase w-25">Buyer</th>
                    <th class="py-2 text-secondary small text-uppercase w-25">Product</th>
                    <th class="py-2 text-secondary small text-uppercase w-25">Message</th>
                    <th class="py-2 text-secondary small text-uppercase">Date</th>
                    <th class="text-end pe-3 py-2 text-secondary small text-uppercase">Action</th>
                </tr>
            </thead>
            <tbody>
                @forelse($inquiries as $inquiry)
                    <tr>
                        <td class="ps-3 py-2">
                            <span class="d-block fw-bold text-dark small">{{ $inquiry->name }}</span>
                            @if($hasSubscription)
                                <small class="text-muted d-block text-truncate" style="max-width: 180px;">{{ $inquiry->email }}</small>
                            @else
                                <small class="text-muted d-block"><i class="bi bi-lock-fill small"></i> Locked</small>
                            @endif
                        </td>
                        <td class="py-2">
                             @if($inquiry->product)
                                <span class="d-block text-truncate small" style="max-width: 180px;">{{ $inquiry->product->name }}</span>
                            @else
                                <span class="badge bg-light text-secondary border small fw-normal">General</span>
                            @endif
                        </td>
                        <td class="py-2">
                            <p class="mb-0 text-muted small text-truncate" style="max-width: 200px;">{{ $inquiry->message }}</p>
                        </td>
                        <td class="py-2 small text-muted">
                             {{ $inquiry->created_at->format('M d') }}
                        </td>
                        <td class="text-end pe-3 py-2">
                            <button class="btn btn-sm btn-light border text-muted px-2 py-0" data-bs-toggle="modal" data-bs-target="#inquiryModal{{ $inquiry->id }}">
                                Review
                            </button>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="5" class="text-center py-4 small text-muted">No inquiries found.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($inquiries->hasPages())
        <div class="card-footer bg-white py-2 border-top-0 d-flex justify-content-center">
            {{ $inquiries->links() }}
        </div>
    @endif
</div>

<!-- Detailed Inquiry Modals (Optimized) -->
@foreach($inquiries as $inquiry)
    <div class="modal fade" id="inquiryModal{{ $inquiry->id }}" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content border-0 shadow rounded-4 overflow-hidden">
                <div class="modal-header border-bottom bg-light py-2 px-3">
                    <h6 class="modal-title fw-bold text-dark">Inquiry from {{ $inquiry->name }}</h6>
                    <button type="button" class="btn-close btn-sm" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-0">
                    <div class="row g-0">
                        <!-- Left: Info -->
                        <div class="col-md-4 bg-light p-3 border-end">
                             <div class="mb-3">
                                <label class="extra-small text-uppercase text-muted fw-bold mb-1">Contact Details</label>
                                @if($hasSubscription)
                                    <div class="small text-dark mb-1"><i class="bi bi-envelope me-2 text-muted"></i>{{ $inquiry->email }}</div>
                                    @if($inquiry->phone)
                                        <div class="small text-dark"><i class="bi bi-phone me-2 text-muted"></i>{{ $inquiry->phone }}</div>
                                    @endif
                                @else
                                     <div class="text-center bg-white rounded p-3 border">
                                        <i class="bi bi-lock-fill text-warning mb-1 d-block"></i>
                                        <small class="d-block text-muted lh-sm mb-2">Upgrade to view contact info</small>
                                        <a href="{{ route('seller.subscription.index') }}" class="btn btn-dark btn-sm rounded-pill py-0 w-100 fs-xs">Upgrade</a>
                                    </div>
                                @endif
                             </div>
                             <div class="mb-0">
                                <label class="extra-small text-uppercase text-muted fw-bold mb-1">Product</label>
                                @if($inquiry->product)
                                    <div class="d-flex align-items-center bg-white border rounded p-2">
                                         @php
                                            $images = is_string($inquiry->product->images_json) ? json_decode($inquiry->product->images_json, true) : $inquiry->product->images_json;
                                            $thumb = $images[0]['thumbnail'] ?? ($images[0] ?? null);
                                        @endphp
                                         <img src="{{ $thumb ? asset('storage/'.$thumb) : 'https://placehold.co/40' }}" width="40" height="40" class="rounded me-2 border object-fit-cover">
                                         <div class="small fw-bold text-truncate" style="max-width: 120px;">{{ $inquiry->product->name }}</div>
                                    </div>
                                @else
                                    <div class="small text-muted">General Inquiry</div>
                                @endif
                             </div>
                        </div>
                        <!-- Right: Message -->
                        <div class="col-md-8 p-3 bg-white">
                            <div class="mb-3">
                                <label class="extra-small text-uppercase text-muted fw-bold mb-1">Message</label>
                                <div class="bg-light p-2 rounded small text-dark border-start border-3 border-primary">
                                    "{{ $inquiry->message }}"
                                </div>
                            </div>
                            
                            @if($inquiry->seller_response)
                                 <div class="bg-success-subtle p-2 rounded border border-success-subtle small">
                                    <strong class="text-success"><i class="bi bi-check-circle-fill me-1"></i>Replied:</strong> {{ $inquiry->seller_response }}
                                </div>
                            @elseif($hasSubscription)
                                <form action="{{ route('seller.inquiries.reply', $inquiry->id) }}" method="POST">
                                    @csrf
                                    <label class="extra-small text-uppercase text-muted fw-bold mb-1">Reply</label>
                                    <textarea name="message" class="form-control form-control-sm bg-light border-0 mb-2" rows="3" placeholder="Write your reply..." required></textarea>
                                    <div class="text-end">
                                        <button type="submit" class="btn btn-primary btn-sm rounded-pill px-3 fw-bold">Send</button>
                                    </div>
                                </form>
                            @else
                                <div class="alert alert-warning border-0 small py-2 mb-0">
                                    <i class="bi bi-lock-fill me-1"></i> Upgrade to reply.
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endforeach

<style>
    .extra-small { font-size: 0.65rem; }
    .fs-xs { font-size: 0.75rem; }
    .line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
</style>
@endsection