@extends('admin.layouts.app')

@section('page-title', 'Profile Update Requests')

@section('content')
<div class="container-fluid px-0">

@php
    $perPage = 5;
    $currentPage = request()->get('page', 1);
    $currentPage = max(1, (int)$currentPage);
    $total = $requests->count();
    $currentItems = $requests->slice(($currentPage - 1) * $perPage, $perPage);
@endphp

<style>
/* ===== Card Wrapper ===== */
.request-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 18px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.05);
}

/* ===== Header Row ===== */
.request-header {
    display: grid;
    grid-template-columns: 60px 1.5fr 1fr 1.2fr 1fr;
    gap: 14px;
    align-items: center;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 12px;
    margin-bottom: 14px;
}

.request-header strong {
    font-size: 14px;
}

/* ===== Badges ===== */
.badge {
    padding: 6px 14px;
    font-size: 12px;
    border-radius: 999px;
    font-weight: 700;
}

.badge-pending {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fed7aa;
}

.badge-approved {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}

.badge-rejected {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

/* ===== Action Buttons ===== */
.actions {
    display: flex;
    gap: 10px;
}

.actions .btn {
    padding: 6px 14px;
    font-size: 13px;
    border-radius: 999px;
    font-weight: 600;
}

/* ===== Detail Grid ===== */
.detail-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 12px;
}

/* ===== Detail Box ===== */
.detail-box {
    background: #f8fafc;
    border-radius: 10px;
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
}

.detail-box.changed {
    background: linear-gradient(145deg, #fff7ed, #ffedd5);
    border-left: 4px solid #f59e0b;
}

.detail-label {
    font-size: 12px;
    font-weight: 700;
    color: #334155;
}

.old {
    font-size: 12px;
    color: #64748b;
}

.new {
    font-size: 14px;
    font-weight: 700;
    color: #020617;
}

/* ===== Responsive ===== */
@media (max-width: 992px) {
    .request-header {
        grid-template-columns: 1fr;
    }

    .detail-grid {
        grid-template-columns: 1fr;
    }
}
</style>

<h4 class="fw-bold my-3">Profile Update Requests ({{ $total }})</h4>

@foreach($currentItems as $index => $req)
@php
    $user = $req->user;
    $newData = is_array($req->data) ? $req->data : json_decode($req->data, true);
@endphp

<div class="request-card">

    <!-- HEADER -->
    <div class="request-header">
        <strong>#{{ ($currentPage - 1) * $perPage + $index + 1 }}</strong>

        <div>
            <strong>{{ $user->customer_name }}</strong><br>
            <small>{{ $user->email }}</small><br>
            <small>ID: {{ $user->customer_id }}</small>
        </div>

        <div>
            @if($req->status == 'pending')
                <span class="badge badge-pending">Pending</span>
            @elseif($req->status == 'approved')
                <span class="badge badge-approved">Approved</span>
            @else
                <span class="badge badge-rejected">Rejected</span>
            @endif
        </div>

        <div>{{ $req->created_at->format('d M Y, h:i A') }}</div>

        <div class="actions">
            @if($req->status == 'pending')
                <a href="{{ route('admin.profile.approve', $req->id) }}" class="btn btn-success btn-sm">
                    ✔ Approve
                </a>
                <a href="{{ route('admin.profile.reject', $req->id) }}" class="btn btn-danger btn-sm">
                    ✖ Reject
                </a>
            @else
                <span class="text-muted">Completed</span>
            @endif
        </div>
    </div>

    <!-- DETAILS ROW 1 -->
    <div class="detail-grid">
        @foreach(['customer_name','company_name','email'] as $field)
            @php
                $old = $user->$field ?? '—';
                $new = $newData[$field] ?? $old;
            @endphp
            <div class="detail-box {{ $old != $new ? 'changed' : '' }}">
                <div class="detail-label">{{ ucfirst(str_replace('_',' ', $field)) }}</div>
                <div class="old">Old: {{ $old }}</div>
                <div class="new">New: {{ $new }}</div>
            </div>
        @endforeach
    </div>

    <!-- DETAILS ROW 2 -->
    <div class="detail-grid">
       @foreach(['mobile_no','address','pincode'] as $field)

            @php
                $old = $user->$field ?? '—';
                $new = $newData[$field] ?? $old;
            @endphp
            <div class="detail-box {{ $old != $new ? 'changed' : '' }}">
                <div class="detail-label">{{ ucfirst(str_replace('_',' ', $field)) }}</div>
                <div class="old">Old: {{ $old }}</div>
                <div class="new">New: {{ $new }}</div>
            </div>
        @endforeach
    </div>

</div>
@endforeach

</div>
@endsection