@extends('admin.master')

@section('content')
<style>
    .cus_review_page_wrap {
        padding: 24px 24px 40px;
        background: #f4f6fb;
        min-height: calc(100vh - 80px);
    }

    .cus_review_container {
        width: 100%;
    }

    .cus_review_header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 24px;
    }

    .cus_review_header_left h1 {
        margin: 0 0 6px;
        font-size: 28px;
        font-weight: 700;
        color: #16213e;
        line-height: 1.2;
    }

    .cus_review_header_left p {
        margin: 0;
        font-size: 14px;
        color: #6b7280;
    }

    .cus_review_alert {
        padding: 14px 16px;
        border-radius: 12px;
        margin-bottom: 18px;
        font-size: 14px;
        font-weight: 500;
        border: 1px solid transparent;
    }

    .cus_review_alert_success {
        background: #ecfdf3;
        color: #027a48;
        border-color: #abefc6;
    }

    .cus_review_alert_danger {
        background: #fef3f2;
        color: #b42318;
        border-color: #fecdca;
    }

    .cus_review_alert_danger ul {
        margin: 0;
        padding-left: 18px;
    }

    .cus_review_stats_grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 18px;
        margin-bottom: 24px;
    }

    .cus_review_stat_card {
        position: relative;
        overflow: hidden;
        border-radius: 18px;
        background: #ffffff;
        border: 1px solid #e5e7eb;
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
        padding: 22px 20px;
    }

    .cus_review_stat_card::after {
        content: "";
        position: absolute;
        right: -25px;
        top: -25px;
        width: 100px;
        height: 100px;
        border-radius: 999px;
        opacity: 0.08;
    }

    .cus_review_stat_card_total::after {
        background: #2563eb;
    }

    .cus_review_stat_card_pending::after {
        background: #f59e0b;
    }

    .cus_review_stat_card_approved::after {
        background: #10b981;
    }

    .cus_review_stat_card_rejected::after {
        background: #ef4444;
    }

    .cus_review_stat_title {
        margin: 0 0 8px;
        font-size: 14px;
        font-weight: 600;
        color: #6b7280;
    }

    .cus_review_stat_value {
        margin: 0;
        font-size: 30px;
        line-height: 1;
        font-weight: 800;
        color: #111827;
    }

    .cus_review_filter_card {
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 18px;
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
        margin-bottom: 24px;
        overflow: hidden;
    }

    .cus_review_filter_head {
        padding: 16px 20px;
        border-bottom: 1px solid #eef2f7;
        background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
    }

    .cus_review_filter_head h3 {
        margin: 0;
        font-size: 18px;
        font-weight: 700;
        color: #111827;
    }

    .cus_review_filter_body {
        padding: 20px;
    }

    .cus_review_filter_grid {
        display: grid;
        grid-template-columns: 2fr 1fr auto;
        gap: 16px;
        align-items: end;
    }

    .cus_review_form_group {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .cus_review_form_group label {
        margin: 0;
        font-size: 13px;
        font-weight: 700;
        color: #374151;
    }

    .cus_review_input,
    .cus_review_select,
    .cus_review_textarea {
        width: 100%;
        border: 1px solid #d1d5db;
        background: #ffffff;
        color: #111827;
        border-radius: 12px;
        font-size: 14px;
        transition: 0.2s ease;
        outline: none;
        box-shadow: none;
    }

    .cus_review_input,
    .cus_review_select {
        height: 48px;
        padding: 0 14px;
    }

    .cus_review_textarea {
        min-height: 120px;
        padding: 14px;
        resize: vertical;
    }

    .cus_review_input:focus,
    .cus_review_select:focus,
    .cus_review_textarea:focus {
        border-color: #2563eb;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
    }

    .cus_review_btn_group {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    .cus_review_btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 46px;
        padding: 0 18px;
        border: 0;
        border-radius: 12px;
        font-size: 14px;
        font-weight: 700;
        text-decoration: none !important;
        cursor: pointer;
        transition: 0.2s ease;
        white-space: nowrap;
    }

    .cus_review_btn:hover {
        transform: translateY(-1px);
    }

    .cus_review_btn_primary {
        background: #2563eb;
        color: #ffffff;
    }

    .cus_review_btn_primary:hover {
        background: #1d4ed8;
        color: #ffffff;
    }

    .cus_review_btn_secondary {
        background: #eef2f7;
        color: #374151;
    }

    .cus_review_btn_secondary:hover {
        background: #e5e7eb;
        color: #111827;
    }

    .cus_review_btn_success {
        background: #16a34a;
        color: #ffffff;
    }

    .cus_review_btn_success:hover {
        background: #15803d;
        color: #ffffff;
    }

    .cus_review_empty {
        background: #ffffff;
        border: 1px dashed #cbd5e1;
        border-radius: 18px;
        padding: 60px 20px;
        text-align: center;
        color: #6b7280;
        font-size: 15px;
        font-weight: 600;
    }

    .cus_review_card {
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 20px;
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
        margin-bottom: 24px;
        overflow: hidden;
    }

    .cus_review_card_body {
        padding: 24px;
    }

    .cus_review_topbar {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 16px;
        margin-bottom: 18px;
    }

    .cus_review_product_title {
        margin: 0 0 8px;
        font-size: 24px;
        font-weight: 800;
        color: #111827;
        line-height: 1.25;
    }

    .cus_review_meta {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 18px;
        font-size: 13px;
        color: #6b7280;
    }

    .cus_review_meta span strong {
        color: #111827;
        font-weight: 700;
    }

    .cus_review_badges {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }

    .cus_review_badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 8px 14px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: 0.2px;
    }

    .cus_review_badge_approved {
        background: #dcfce7;
        color: #166534;
    }

    .cus_review_badge_pending {
        background: #fef3c7;
        color: #92400e;
    }

    .cus_review_badge_rejected {
        background: #fee2e2;
        color: #991b1b;
    }

    .cus_review_badge_verified {
        background: #dbeafe;
        color: #1d4ed8;
    }

    .cus_review_title {
        margin: 0 0 10px;
        font-size: 19px;
        font-weight: 800;
        color: #0f172a;
    }

    .cus_review_comment {
        margin: 0 0 18px;
        font-size: 15px;
        line-height: 1.9;
        color: #374151;
        word-break: break-word;
    }

    .cus_review_image_grid {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-bottom: 20px;
    }

    .cus_review_image_item {
        width: 90px;
        height: 90px;
        border-radius: 14px;
        overflow: hidden;
        border: 1px solid #dbe2ea;
        background: #f8fafc;
        display: block;
    }

    .cus_review_image_item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .cus_review_reply_box {
        padding: 16px 18px;
        border-radius: 16px;
        margin-bottom: 16px;
        border: 1px solid transparent;
    }

    .cus_review_reply_box h6 {
        margin: 0 0 8px;
        font-size: 15px;
        font-weight: 800;
    }

    .cus_review_reply_box p {
        margin: 0 0 8px;
        font-size: 14px;
        line-height: 1.8;
    }

    .cus_review_reply_box small {
        font-size: 12px;
        color: #6b7280;
    }

    .cus_review_reply_seller {
        background: #eff6ff;
        border-color: #bfdbfe;
    }

    .cus_review_reply_seller h6 {
        color: #1d4ed8;
    }

    .cus_review_reply_admin {
        background: #fff7ed;
        border-color: #fed7aa;
    }

    .cus_review_reply_admin h6 {
        color: #c2410c;
    }

    .cus_review_action_grid {
        display: grid;
        grid-template-columns: 320px 1fr;
        gap: 18px;
        margin-top: 24px;
    }

    .cus_review_action_box {
        border: 1px solid #e5e7eb;
        background: #f8fafc;
        border-radius: 18px;
        padding: 18px;
        height: 100%;
    }

    .cus_review_action_box h5 {
        margin: 0 0 14px;
        font-size: 17px;
        font-weight: 800;
        color: #111827;
    }

    .cus_review_status_form .cus_review_btn {
        width: 100%;
        margin-top: 12px;
    }

    .cus_review_reply_form .cus_review_btn {
        margin-top: 12px;
    }

    .cus_review_pagination_wrap {
        display: flex;
        justify-content: flex-end;
        margin-top: 24px;
    }

    .cus_review_pagination_wrap nav {
        width: 100%;
    }

    .cus_review_pagination_wrap svg {
        width: 18px;
        height: 18px;
    }

    .cus_review_pagination_wrap .pagination {
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 6px;
    }

    .cus_review_pagination_wrap .page-link {
        border-radius: 10px !important;
        border: 1px solid #dbe2ea;
        color: #374151;
        min-width: 40px;
        text-align: center;
    }

    .cus_review_pagination_wrap .page-item.active .page-link {
        background: #2563eb;
        border-color: #2563eb;
        color: #ffffff;
    }

    @media (max-width: 1199px) {
        .cus_review_stats_grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .cus_review_action_grid {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 991px) {
        .cus_review_page_wrap {
            padding: 18px 14px 30px;
        }

        .cus_review_filter_grid {
            grid-template-columns: 1fr;
        }

        .cus_review_topbar {
            flex-direction: column;
        }

        .cus_review_product_title {
            font-size: 21px;
        }

        .cus_review_card_body {
            padding: 18px;
        }
    }

    @media (max-width: 767px) {
        .cus_review_stats_grid {
            grid-template-columns: 1fr;
        }

        .cus_review_header {
            flex-direction: column;
        }

        .cus_review_header_left h1 {
            font-size: 24px;
        }

        .cus_review_meta {
            flex-direction: column;
            gap: 6px;
        }

        .cus_review_badges {
            width: 100%;
        }

        .cus_review_image_item {
            width: 72px;
            height: 72px;
        }

        .cus_review_btn_group {
            width: 100%;
            flex-direction: column;
        }

        .cus_review_btn_group .cus_review_btn {
            width: 100%;
        }

        .cus_review_pagination_wrap {
            justify-content: center;
        }

        .cus_review_pagination_wrap .pagination {
            justify-content: center;
        }
    }
</style>

<div class="cus_review_page_wrap">
    <div class="cus_review_container">

        <div class="cus_review_header">
            <div class="cus_review_header_left">
                <h1>Review Management</h1>
                <p>Manage customer reviews, approval status, admin responses, and verified purchase feedback.</p>
            </div>
        </div>

        @if(session('success'))
            <div class="cus_review_alert cus_review_alert_success">
                {{ session('success') }}
            </div>
        @endif

        @if($errors->any())
            <div class="cus_review_alert cus_review_alert_danger">
                <ul>
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="cus_review_stats_grid">
            <div class="cus_review_stat_card cus_review_stat_card_total">
                <p class="cus_review_stat_title">Total Reviews</p>
                <h3 class="cus_review_stat_value">{{ $stats['total'] ?? 0 }}</h3>
            </div>

            <div class="cus_review_stat_card cus_review_stat_card_pending">
                <p class="cus_review_stat_title">Pending Reviews</p>
                <h3 class="cus_review_stat_value">{{ $stats['pending'] ?? 0 }}</h3>
            </div>

            <div class="cus_review_stat_card cus_review_stat_card_approved">
                <p class="cus_review_stat_title">Approved Reviews</p>
                <h3 class="cus_review_stat_value">{{ $stats['approved'] ?? 0 }}</h3>
            </div>

            <div class="cus_review_stat_card cus_review_stat_card_rejected">
                <p class="cus_review_stat_title">Rejected Reviews</p>
                <h3 class="cus_review_stat_value">{{ $stats['rejected'] ?? 0 }}</h3>
            </div>
        </div>

        <div class="cus_review_filter_card">
            <div class="cus_review_filter_head">
                <h3>Filter Reviews</h3>
            </div>

            <div class="cus_review_filter_body">
                <form method="GET" action="{{ route('admin.reviews.index') }}">
                    <div class="cus_review_filter_grid">
                        <div class="cus_review_form_group">
                            <label for="cus_review_search">Search</label>
                            <input
                                type="text"
                                id="cus_review_search"
                                name="search"
                                class="cus_review_input"
                                value="{{ request('search') }}"
                                placeholder="Search by product, customer, title, comment"
                            >
                        </div>

                        <div class="cus_review_form_group">
                            <label for="cus_review_status">Status</label>
                            <select
                                id="cus_review_status"
                                name="status"
                                class="cus_review_select"
                            >
                                <option value="">All Status</option>
                                <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>Pending</option>
                                <option value="approved" {{ request('status') == 'approved' ? 'selected' : '' }}>Approved</option>
                                <option value="rejected" {{ request('status') == 'rejected' ? 'selected' : '' }}>Rejected</option>
                            </select>
                        </div>

                        <div class="cus_review_btn_group">
                            <button type="submit" class="cus_review_btn cus_review_btn_primary">
                                Filter Reviews
                            </button>
                            <a href="{{ route('admin.reviews.index') }}" class="cus_review_btn cus_review_btn_secondary">
                                Reset
                            </a>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        @forelse($reviews as $review)
            <div class="cus_review_card" id="cus_review_card_{{ $review->id }}">
                <div class="cus_review_card_body">

                    <div class="cus_review_topbar">
                        <div>
                            <h2 class="cus_review_product_title">
                                {{ $review->product->name ?? 'Product Not Found' }}
                            </h2>

                            <div class="cus_review_meta">
                                <span><strong>Customer:</strong> {{ $review->user->name ?? 'Anonymous' }}</span>
                                <span><strong>Rating:</strong> {{ $review->rating }}/5</span>
                                <span><strong>Helpful:</strong> {{ $review->helpful_count ?? 0 }}</span>
                                <span><strong>Date:</strong> {{ optional($review->created_at)->format('d M, Y h:i A') }}</span>
                            </div>
                        </div>

                        <div class="cus_review_badges">
                            @if($review->status === 'approved')
                                <span class="cus_review_badge cus_review_badge_approved">Approved</span>
                            @elseif($review->status === 'pending')
                                <span class="cus_review_badge cus_review_badge_pending">Pending</span>
                            @else
                                <span class="cus_review_badge cus_review_badge_rejected">Rejected</span>
                            @endif

                            @if($review->is_verified_purchase)
                                <span class="cus_review_badge cus_review_badge_verified">Verified Purchase</span>
                            @endif
                        </div>
                    </div>

                    @if($review->title)
                        <h3 class="cus_review_title">{{ $review->title }}</h3>
                    @endif

                    <p class="cus_review_comment">
                        {{ $review->comment }}
                    </p>

                    @if(!empty($review->images) && is_array($review->images))
                        <div class="cus_review_image_grid">
                            @foreach($review->images as $image)
                                <a
                                    href="{{ asset('storage/' . $image) }}"
                                    target="_blank"
                                    class="cus_review_image_item"
                                >
                                    <img src="{{ asset('storage/' . $image) }}" alt="Review Image">
                                </a>
                            @endforeach
                        </div>
                    @endif

                    @if(!empty($review->seller_reply))
                        <div class="cus_review_reply_box cus_review_reply_seller">
                            <h6>Seller Reply</h6>
                            <p>{{ $review->seller_reply }}</p>
                            <small>
                                By {{ $review->sellerReplyUser->name ?? 'Seller' }}
                                @if($review->seller_reply_at)
                                    | {{ $review->seller_reply_at->format('d M, Y h:i A') }}
                                @endif
                            </small>
                        </div>
                    @endif

                    @if(!empty($review->admin_reply))
                        <div class="cus_review_reply_box cus_review_reply_admin">
                            <h6>Admin Reply</h6>
                            <p>{{ $review->admin_reply }}</p>
                            <small>
                                By {{ $review->adminReplyUser->name ?? 'Admin' }}
                                @if($review->admin_reply_at)
                                    | {{ $review->admin_reply_at->format('d M, Y h:i A') }}
                                @endif
                            </small>
                        </div>
                    @endif

                    <div class="cus_review_action_grid">
                        <div class="cus_review_action_box">
                            <h5>Update Status</h5>

                            <form
                                method="POST"
                                action="{{ route('admin.reviews.update-status', $review->id) }}"
                                class="cus_review_status_form"
                            >
                                @csrf
                                @method('PATCH')

                                <div class="cus_review_form_group">
                                    <label for="cus_review_status_{{ $review->id }}">Select Status</label>
                                    <select
                                        id="cus_review_status_{{ $review->id }}"
                                        name="status"
                                        class="cus_review_select"
                                    >
                                        <option value="pending" {{ $review->status == 'pending' ? 'selected' : '' }}>Pending</option>
                                        <option value="approved" {{ $review->status == 'approved' ? 'selected' : '' }}>Approved</option>
                                        <option value="rejected" {{ $review->status == 'rejected' ? 'selected' : '' }}>Rejected</option>
                                    </select>
                                </div>

                                <button type="submit" class="cus_review_btn cus_review_btn_success">
                                    Save Status
                                </button>
                            </form>
                        </div>

                        <div class="cus_review_action_box">
                            <h5>Admin Reply</h5>

                            <form
                                method="POST"
                                action="{{ route('admin.reviews.reply', $review->id) }}"
                                class="cus_review_reply_form"
                            >
                                @csrf

                                <div class="cus_review_form_group">
                                    <label for="cus_review_reply_{{ $review->id }}">Write Reply</label>
                                    <textarea
                                        id="cus_review_reply_{{ $review->id }}"
                                        name="admin_reply"
                                        rows="5"
                                        class="cus_review_textarea"
                                        placeholder="Write admin reply..."
                                    >{{ old('admin_reply', $review->admin_reply) }}</textarea>
                                </div>

                                <button type="submit" class="cus_review_btn cus_review_btn_primary">
                                    Submit Reply
                                </button>
                            </form>
                        </div>
                    </div>

                </div>
            </div>
        @empty
            <div class="cus_review_empty">
                No reviews found.
            </div>
        @endforelse

        @if(method_exists($reviews, 'links'))
            <div class="cus_review_pagination_wrap">
                {{ $reviews->links() }}
            </div>
        @endif

    </div>
</div>
@endsection