@extends('layouts.admin-master')
@section('title', 'Vendor Detail')
@section('style')
@include('admin.style')
<style>
    .profile-hero {
        background: linear-gradient(135deg, #0f766e 0%, #065f46 100%);
        border-radius: 16px 16px 0 0;
        padding: 32px 28px 56px;
        text-align: center;
        position: relative;
    }
    .profile-hero .avatar {
        width: 100px; height: 100px; border-radius: 50%; object-fit: cover;
        border: 4px solid rgba(255,255,255,.6); box-shadow: 0 4px 20px rgba(0,0,0,.2);
    }
    .profile-hero .avatar-initials {
        width: 100px; height: 100px; border-radius: 50%;
        background: rgba(255,255,255,.2); border: 4px solid rgba(255,255,255,.4);
        display: flex; align-items: center; justify-content: center;
        font-size: 36px; font-weight: 800; color: #fff; margin: 0 auto;
    }
    .profile-hero h4 { color: #fff; font-weight: 700; margin: 12px 0 4px; font-size: 20px; }
    .profile-hero .role-chip {
        display: inline-block; background: rgba(255,255,255,.18); color: #fff;
        font-size: 11px; font-weight: 600; padding: 3px 12px; border-radius: 20px; letter-spacing: .4px;
    }
    .profile-stat-strip {
        background: #fff; border-radius: 12px; border: 1px solid #e5e7eb;
        padding: 16px 20px; margin-bottom: 6px; display: flex; gap: 0;
    }
    .profile-stat { flex: 1; text-align: center; padding: 0 12px; }
    .profile-stat + .profile-stat { border-left: 1px solid #f0f0f0; }
    .profile-stat .val { font-size: 15px; font-weight: 700; color: #111; }
    .profile-stat .lbl { font-size: 11px; color: #9ca3af; margin-top: 2px; }
    .contact-row { display: flex; align-items: center; padding: 11px 0; border-bottom: 1px solid #f3f4f6; gap: 12px; }
    .contact-row:last-child { border-bottom: none; }
    .contact-icon { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
    .contact-row .lbl { font-size: 11px; color: #9ca3af; margin-bottom: 1px; }
    .contact-row .val { font-size: 13px; font-weight: 500; color: #111; }
    .info-row { display: flex; padding: 11px 0; border-bottom: 1px solid #f3f4f6; align-items: center; }
    .info-row:last-child { border-bottom: none; }
    .info-row .info-label { width: 150px; flex-shrink: 0; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: #9ca3af; }
    .info-row .info-value { font-size: 13px; font-weight: 500; color: #111; }
    .section-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; overflow: hidden; margin-bottom: 20px; }
    .section-card-header { padding: 16px 24px; border-bottom: 1px solid #f3f4f6; display: flex; align-items: center; gap: 10px; }
    .section-card-header .icon-circle { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; }
    .section-card-header h6 { margin: 0; font-weight: 700; font-size: 14px; }
    .section-card-body { padding: 20px 24px; }
    .admin-action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .admin-btn { border: none; border-radius: 10px; padding: 10px 14px; font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 8px; cursor: pointer; transition: transform .15s, opacity .15s; text-decoration: none; }
    .admin-btn:hover { transform: translateY(-1px); opacity: .88; }
    .admin-btn.green  { background: #d1fae5; color: #065f46; }
    .admin-btn.red    { background: #fee2e2; color: #991b1b; }
    .admin-btn.blue   { background: #dbeafe; color: #1e40af; }
    .admin-btn.amber  { background: #fef3c7; color: #92400e; }
    .admin-btn.gray   { background: #f3f4f6; color: #374151; }
    .admin-btn.full   { grid-column: 1/-1; }
    .doc-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: #9ca3af; border: none; padding: 10px 14px; }
    .doc-table td { vertical-align: middle; padding: 12px 14px; border-color: #f3f4f6; font-size: 13px; }
    .doc-table tbody tr:hover { background: #fafafa; }
    .kyc-modal .modal-content { border: none; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.2); }
    .kyc-modal .modal-header { border-radius: 16px 16px 0 0; padding: 20px 24px; border-bottom: none; }
    .kyc-modal .modal-header.reject-hdr { background: linear-gradient(135deg,#c62828,#b71c1c); }
    .kyc-modal .modal-title { color: #fff; font-weight: 700; font-size: 16px; }
    .kyc-modal .btn-close { filter: invert(1); opacity: .8; }
    .kyc-modal .modal-body { padding: 24px; }
    .kyc-modal .modal-footer { padding: 14px 24px 22px; border-top: 1px solid #f0f0f0; }
    .kyc-modal textarea { width: 100%; border: 1.5px solid #e5e7eb; border-radius: 10px; padding: 12px 14px; font-size: 13px; min-height: 90px; outline: none; transition: border-color .2s; }
    .kyc-modal textarea:focus { border-color: #c62828; box-shadow: 0 0 0 3px rgba(198,40,40,.1); }
</style>
@endsection

@section('content')
<aside class="sidebar-nav-wrapper">@include('admin.sidenav')</aside>
<div class="overlay"></div>

<main class="main-wrapper">
    @include('admin.header')

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

            <div class="title-wrapper pt-30">
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <div class="d-flex align-items-center gap-3">
                            <a href="{{ route('vendor') }}" class="action-btn view" title="Back to list">
                                <i class="lni lni-arrow-left"></i>
                            </a>
                            <div class="title mb-0"><h2>Vendor Profile</h2></div>
                        </div>
                   
                    </div>
                    <div class="col-md-6"></div>
                </div>
            </div>

            @php $address = $vendor->user->addresses->first(); @endphp

            <div class="row mt-3 g-4">

                {{-- ── LEFT COLUMN ── --}}
                <div class="col-lg-4">

                    <div class="section-card" style="overflow:visible;">
                        <div class="profile-hero">
                            @if($vendor->brand_logo)
                                <img src="{{ $vendor->brand_logo_url }}" alt="{{ $vendor->vendor_name }}" class="avatar">
                            @else
                                <div class="avatar-initials">
                                    {{ strtoupper(substr($vendor->vendor_name ?? 'V', 0, 1)) }}
                                </div>
                            @endif
                            <h4>{{ $vendor->vendor_name }}</h4>
                            <span class="role-chip">Vendor</span>
                        </div>

                        <div style="padding: 0 20px; margin-top: -20px; position:relative; z-index:2;">
                            <div class="profile-stat-strip">
                                <div class="profile-stat">
                                    <div class="val">
                                        @if($vendor->user->is_kyc_completed ?? false)
                                            <span style="color:#0a5132;">✓</span>
                                        @else
                                            <span style="color:#856404;">—</span>
                                        @endif
                                    </div>
                                    <div class="lbl">KYC</div>
                                </div>
                                <div class="profile-stat">
                                    <div class="val">
                                        @if($vendor->user->is_phone_verified ?? false)
                                            <span style="color:#0a5132;">✓</span>
                                        @else
                                            <span style="color:#856404;">—</span>
                                        @endif
                                    </div>
                                    <div class="lbl">Phone</div>
                                </div>
                                <div class="profile-stat">
                                    @if($vendor->status === 'suspended')
                                        <div class="val"><span class="badge-status badge-suspended" style="font-size:10px;">Suspended</span></div>
                                    @elseif($vendor->status === 'approved')
                                        <div class="val"><span class="badge-status badge-approved" style="font-size:10px;">Approved</span></div>
                                    @else
                                        <div class="val"><span class="badge-status badge-pending" style="font-size:10px;">{{ ucfirst($vendor->status ?? 'pending') }}</span></div>
                                    @endif
                                    <div class="lbl">Status</div>
                                </div>
                            </div>
                        </div>

                        <div style="padding: 8px 28px 24px;">
                            <div class="contact-row">
                                <div class="contact-icon" style="background:#fce7f3;">
                                    <i class="fas fa-phone" style="color:#be185d;"></i>
                                </div>
                                <div>
                                    <div class="lbl">Phone</div>
                                    <div class="val">{{ $vendor->user->phone ?? '—' }}</div>
                                </div>
                            </div>
                            <div class="contact-row">
                                <div class="contact-icon" style="background:#e0f2fe;">
                                    <i class="fas fa-envelope" style="color:#0369a1;"></i>
                                </div>
                                <div>
                                    <div class="lbl">Email</div>
                                    <div class="val">{{ $vendor->user->email ?? '—' }}</div>
                                </div>
                            </div>
                            <div class="contact-row">
                                <div class="contact-icon" style="background:#f0fdf4;">
                                    <i class="fas fa-map-marker-alt" style="color:#15803d;"></i>
                                </div>
                                <div>
                                    <div class="lbl">Location</div>
                                    <div class="val">{{ $address->district ?? '—' }}, {{ $address->state ?? '—' }}</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Admin Actions --}}
                    <div class="section-card">
                        <div class="section-card-header">
                            <div class="icon-circle" style="background:#e8f0fe;">
                                <i class="fas fa-shield-alt" style="color:#365CF5;"></i>
                            </div>
                            <h6>Admin Actions</h6>
                        </div>
                        <div class="section-card-body">
                            <div class="admin-action-grid">

                                <a href="{{ route('vendor.edit', $vendor->id) }}" class="admin-btn blue full">
                                    <i class="lni lni-pencil"></i> Edit Vendor Details
                                </a>

                                <form action="{{ route('vendor.kyc', $vendor->id) }}" method="POST"
                                    data-confirm="Approve KYC for {{ $vendor->vendor_name }}?"
                                    data-confirm-title="Approve KYC"
                                    data-confirm-ok="Approve" data-confirm-class="btn-success">
                                    @csrf
                                    <input type="hidden" name="action" value="approve">
                                    <button type="submit" class="admin-btn green w-100">
                                        <i class="lni lni-checkmark-circle"></i> Approve KYC
                                    </button>
                                </form>

                                <button type="button" class="admin-btn red w-100"
                                    data-bs-toggle="modal" data-bs-target="#kycRejectModal">
                                    <i class="lni lni-close"></i> Reject KYC
                                </button>

                                @if(!($vendor->user->is_phone_verified ?? true))
                                <form action="{{ route('vendor.verify.phone', $vendor->id) }}" method="POST"
                                    data-confirm="Manually mark phone as verified?"
                                    data-confirm-title="Verify Phone"
                                    data-confirm-ok="Verify" data-confirm-class="btn-info">
                                    @csrf @method('PATCH')
                                    <button type="submit" class="admin-btn blue w-100">
                                        <i class="fas fa-phone-alt"></i> Verify Phone
                                    </button>
                                </form>
                                @else
                                <span class="admin-btn gray" style="cursor:default;">
                                    <i class="fas fa-check-circle" style="color:#15803d;"></i> Phone Verified
                                </span>
                                @endif

                                {{-- Approve Vendor (shown whenever not already approved) --}}
                                @if(strtolower($vendor->status ?? '') !== 'approved')
                                <form action="{{ route('vendor.updateStatus', $vendor->id) }}" method="POST"
                                    data-confirm="Approve this vendor account?"
                                    data-confirm-title="Approve Vendor"
                                    data-confirm-ok="Approve" data-confirm-class="btn-success">
                                    @csrf @method('PATCH')
                                    <input type="hidden" name="status" value="approved">
                                    <button type="submit" class="admin-btn green w-100">
                                        <i class="fas fa-user-check"></i> Approve Vendor
                                    </button>
                                </form>
                                @else
                                <span class="admin-btn green" style="cursor:default;">
                                    <i class="fas fa-check-circle"></i> Vendor Approved
                                </span>
                                @endif

                                {{-- Suspend / Reactivate --}}
                                <form action="{{ route('vendor.suspend', $vendor->id) }}" method="POST"
                                    data-confirm="{{ $vendor->status === 'suspended' ? 'Reactivate this vendor account?' : 'Suspend this vendor account?' }}"
                                    data-confirm-title="{{ $vendor->status === 'suspended' ? 'Reactivate' : 'Suspend' }} Account"
                                    data-confirm-ok="{{ $vendor->status === 'suspended' ? 'Reactivate' : 'Suspend' }}"
                                    data-confirm-class="{{ $vendor->status === 'suspended' ? 'btn-success' : 'btn-warning' }}">
                                    @csrf @method('PATCH')
                                    <button type="submit" class="admin-btn {{ $vendor->status === 'suspended' ? 'green' : 'amber' }} w-100">
                                        <i class="fas {{ $vendor->status === 'suspended' ? 'fa-user-check' : 'fa-user-slash' }}"></i>
                                        {{ $vendor->status === 'suspended' ? 'Reactivate' : 'Suspend' }} Account
                                    </button>
                                </form>

                            </div>
                        </div>
                    </div>

                </div>

                {{-- ── RIGHT COLUMN ── --}}
                <div class="col-lg-8">

                    {{-- Business & Contact Info --}}
                    <div class="section-card">
                        <div class="section-card-header">
                            <div class="icon-circle" style="background:#ecfdf5;">
                                <i class="fas fa-store" style="color:#059669;"></i>
                            </div>
                            <h6>Business Information</h6>
                        </div>
                        <div class="section-card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="info-row">
                                        <span class="info-label">Vendor Name</span>
                                        <span class="info-value">{{ $vendor->vendor_name ?? '—' }}</span>
                                    </div>
                                    <div class="info-row">
                                        <span class="info-label">Business Name</span>
                                        <span class="info-value">{{ $vendor->business_name ?? '—' }}</span>
                                    </div>
                                    <div class="info-row">
                                        <span class="info-label">Vendor Type</span>
                                        <span class="info-value">{{ $vendor->vendor_type ?? '—' }}</span>
                                    </div>
                                    <div class="info-row">
                                        <span class="info-label">Contact Person</span>
                                        <span class="info-value">{{ $vendor->contact_person ?? '—' }}</span>
                                    </div>
                                    <div class="info-row">
                                        <span class="info-label">Registered</span>
                                        <span class="info-value">{{ $vendor->created_at ? $vendor->created_at->format('d M Y') : '—' }}</span>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="info-row">
                                        <span class="info-label">Village</span>
                                        <span class="info-value">{{ $address->village ?? '—' }}</span>
                                    </div>
                                    <div class="info-row">
                                        <span class="info-label">Taluka</span>
                                        <span class="info-value">{{ $address->taluka ?? '—' }}</span>
                                    </div>
                                    <div class="info-row">
                                        <span class="info-label">District</span>
                                        <span class="info-value">{{ $address->district ?? '—' }}</span>
                                    </div>
                                    <div class="info-row">
                                        <span class="info-label">State</span>
                                        <span class="info-value">{{ $address->state ?? '—' }}</span>
                                    </div>
                                    <div class="info-row">
                                        <span class="info-label">Pincode</span>
                                        <span class="info-value">{{ $address->pin_code ?? '—' }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Verification Status --}}
                    <div class="section-card">
                        <div class="section-card-header">
                            <div class="icon-circle" style="background:#fef3c7;">
                                <i class="fas fa-check-double" style="color:#d97706;"></i>
                            </div>
                            <h6>Verification Status</h6>
                        </div>
                        <div class="section-card-body">
                            <div class="row g-3">
                                @php
                                    $checks = [
                                        ['label'=>'Phone Verified', 'ok'=>($vendor->user->is_phone_verified ?? false), 'icon'=>'fa-phone'],
                                        ['label'=>'KYC Completed',  'ok'=>($vendor->user->is_kyc_completed ?? false),  'icon'=>'fa-id-card'],
                                        ['label'=>'Account Active', 'ok'=>($vendor->status !== 'suspended'),            'icon'=>'fa-user-check'],
                                    ];
                                @endphp
                                @foreach($checks as $chk)
                                <div class="col-md-4">
                                    <div class="d-flex align-items-center gap-3 p-3 rounded-3"
                                        style="background:{{ $chk['ok'] ? '#f0fdf4' : '#fff7ed' }};border:1px solid {{ $chk['ok'] ? '#bbf7d0' : '#fed7aa' }};">
                                        <div style="width:36px;height:36px;border-radius:10px;background:{{ $chk['ok'] ? '#dcfce7' : '#ffedd5' }};display:flex;align-items:center;justify-content:center;">
                                            <i class="fas {{ $chk['icon'] }}" style="color:{{ $chk['ok'] ? '#15803d' : '#c2410c' }};font-size:15px;"></i>
                                        </div>
                                        <div>
                                            <div style="font-size:11px;color:#9ca3af;font-weight:600;text-transform:uppercase;letter-spacing:.4px;">{{ $chk['label'] }}</div>
                                            <div style="font-size:13px;font-weight:700;color:{{ $chk['ok'] ? '#15803d' : '#c2410c' }};">{{ $chk['ok'] ? 'Yes' : 'No' }}</div>
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                    </div>

                    {{-- Documents --}}
                    <div class="section-card">
                        <div class="section-card-header">
                            <div class="icon-circle" style="background:#ede9fe;">
                                <i class="fas fa-file-alt" style="color:#7c3aed;"></i>
                            </div>
                            <h6>Uploaded Documents</h6>
                        </div>
                        <div class="section-card-body" style="padding:0;">
                            <table class="table doc-table mb-0">
                                <thead style="background:#fafafa;">
                                    <tr>
                                        <th>#</th>
                                        <th>Document Type</th>
                                        <th>Number</th>
                                        <th>Status</th>
                                        <th class="text-end">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($vendor->user->documents as $doc)
                                    <tr>
                                        <td>{{ $loop->iteration }}</td>
                                        <td class="fw-500">{{ $doc->type->type_name ?? $doc->document_type ?? 'N/A' }}</td>
                                        <td class="text-gray">{{ $doc->document_number ?? '—' }}</td>
                                        <td>
                                            @if($doc->status === 'verified')
                                                <span class="badge-status badge-verified">Verified</span>
                                            @elseif($doc->status === 'rejected')
                                                <span class="badge-status badge-rejected">Rejected</span>
                                            @else
                                                <span class="badge-status badge-pending">Pending</span>
                                            @endif
                                        </td>
                                        <td>
                                            <div class="d-flex gap-1 justify-content-end">
                                                <a href="{{ asset('storage/'.$doc->document_url) }}" target="_blank"
                                                    class="action-btn view" title="View Document">
                                                    <i class="lni lni-eye"></i>
                                                </a>
                                                <form action="{{ route('vendor.document.update', $doc->id) }}" method="POST"
                                                    data-confirm="Approve this document?"
                                                    data-confirm-title="Approve Document"
                                                    data-confirm-ok="Approve" data-confirm-class="btn-success">
                                                    @csrf @method('PATCH')
                                                    <input type="hidden" name="status" value="verified">
                                                    <button type="submit" class="action-btn restore" title="Approve">
                                                        <i class="lni lni-checkmark"></i>
                                                    </button>
                                                </form>
                                                <button type="button" class="action-btn delete" title="Reject"
                                                    data-bs-toggle="modal" data-bs-target="#docRejectModal"
                                                    onclick="setDocReject('{{ route('vendor.document.update', $doc->id) }}')">
                                                    <i class="lni lni-close"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    @empty
                                    <tr>
                                        <td colspan="5" class="text-center py-4 text-muted">
                                            <i class="fas fa-file-upload" style="font-size:28px;opacity:.25;"></i>
                                            <p class="mt-2 mb-0">No documents uploaded yet</p>
                                        </td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>

                </div>
            </div>

        </div>
    </section>

    @include('admin.footer')
</main>

{{-- KYC Reject Modal --}}
<div class="modal fade kyc-modal" id="kycRejectModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" style="max-width:440px;">
        <form action="{{ route('vendor.kyc', $vendor->id) }}" method="POST">
            @csrf <input type="hidden" name="action" value="reject">
            <div class="modal-content">
                <div class="modal-header reject-hdr">
                    <div class="d-flex align-items-center gap-2">
                        <div style="width:32px;height:32px;border-radius:8px;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;">
                            <i class="lni lni-close" style="color:#fff;"></i>
                        </div>
                        <h5 class="modal-title mb-0">Reject KYC</h5>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p class="text-sm text-gray mb-3">Provide a reason. This will be logged in the audit trail.</p>
                    <label style="font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:#6b7280;margin-bottom:6px;display:block;">Remarks <span class="text-muted fw-normal">(optional)</span></label>
                    <textarea name="remarks" placeholder="Enter reason for rejection…"></textarea>
                </div>
                <div class="modal-footer justify-content-end gap-2">
                    <button type="button" class="btn-cancel-rate" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn-save-rate" style="background:linear-gradient(135deg,#c62828,#b71c1c);">
                        <i class="lni lni-close"></i> Confirm Reject
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

{{-- Document Reject Modal --}}
<div class="modal fade kyc-modal" id="docRejectModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" style="max-width:440px;">
        <form id="docRejectForm" method="POST">
            @csrf @method('PATCH')
            <input type="hidden" name="status" value="rejected">
            <div class="modal-content">
                <div class="modal-header reject-hdr">
                    <div class="d-flex align-items-center gap-2">
                        <div style="width:32px;height:32px;border-radius:8px;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;">
                            <i class="fas fa-file" style="color:#fff;"></i>
                        </div>
                        <h5 class="modal-title mb-0">Reject Document</h5>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <label style="font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:#6b7280;margin-bottom:6px;display:block;">Reason for rejection</label>
                    <textarea name="comment" placeholder="Explain why this document is being rejected…"></textarea>
                </div>
                <div class="modal-footer justify-content-end gap-2">
                    <button type="button" class="btn-cancel-rate" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn-save-rate" style="background:linear-gradient(135deg,#c62828,#b71c1c);">
                        <i class="lni lni-close"></i> Reject Document
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

@endsection
@section('script')
@include('admin.script')
<script>
function setDocReject(url) {
    document.getElementById('docRejectForm').action = url;
}
</script>
@endsection