@extends('admin.layouts.app')

@section('panel')
@php $pageTitle = 'Vendor Product Details'; @endphp

@push('breadcrumb-plugins')
    <a href="{{ route('admin.vendor-products.index') }}" class="btn btn-outline--primary btn-sm">
        <i class="las la-arrow-left"></i> Back
    </a>
@endpush

<div class="pe-page">
    @php
        $status = $product->vendor_product_status ?? 'approved';
        $badge = ['pending'=>'badge--warning','approved'=>'badge--success','rejected'=>'badge--danger'][$status] ?? 'badge--secondary';
        $autoShow = (bool)($product->auto_show_on_approve ?? false);
    @endphp

    <div class="pe-hero">
        <div>
            <div class="pe-kicker">PRODUCT REVIEW</div>
            <h3>{{ $product->name }}</h3>
            <p>Vendor product details, image, price, stock এবং approval action।</p>
        </div>
        <div>
            <span class="badge {{ $badge }}">{{ ucfirst($status) }}</span>
            @if($autoShow)
                <span class="badge badge--success">Auto Show</span>
            @endif
        </div>
    </div>

    <div class="row gy-3">
        <div class="col-lg-5">
            <div class="card pe-card">
                <div class="card-body">
                    <div class="pe-gallery">
                        @forelse($product->images as $image)
                            <img src="{{ $image->image_url }}" alt="product">
                        @empty
                            <div class="pe-no-img"><i class="las la-image"></i><span>No image</span></div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-7">
            <div class="card pe-card">
                <div class="card-body">
                    <h4 class="pe-title">{{ $product->name }}</h4>

                    <div class="pe-grid">
                        <div><span>Code</span><strong>{{ $product->product_code ?? $product->code ?? '-' }}</strong></div>
                        <div><span>Category</span><strong>{{ $product->category->name ?? '-' }}</strong></div>
                        <div><span>Sub Category</span><strong>{{ $product->subCategory->name ?? '-' }}</strong></div>
                        <div><span>Stock</span><strong>{{ $product->stock ?? 0 }}</strong></div>
                        <div><span>Customer Price</span><strong>৳{{ number_format((float)($product->customer_price ?? 0), 2) }}</strong></div>
                        <div><span>Reseller Price</span><strong>৳{{ number_format((float)($product->reseller_price ?? 0), 2) }}</strong></div>
                        <div><span>Auto Show</span>
                            <strong>
                                @if($autoShow)
                                    <span class="badge badge--success">Enabled</span>
                                @else
                                    <span class="badge badge--secondary">Disabled</span>
                                @endif
                            </strong>
                        </div>
                    </div>

                    <div class="pe-vendor-box mt-3">
                        <div class="pe-avatar">{{ strtoupper(substr($product->vendor->name ?? 'V', 0, 1)) }}</div>
                        <div>
                            <strong>{{ $product->vendor->name ?? '-' }}</strong>
                            <small>{{ $product->vendor->mobile ?? $product->vendor->email ?? '-' }}</small>
                        </div>
                    </div>

                    <div class="mt-3">
                        <label class="fw-bold">Description</label>
                        <div class="pe-desc">{!! nl2br(e($product->description ?? 'No description')) !!}</div>
                    </div>

                    @if(!empty($product->rejected_reason))
                        <div class="alert alert--danger mt-3">
                            <strong>Rejected Reason:</strong> {{ $product->rejected_reason }}
                        </div>
                    @endif

                    <div class="pe-actions mt-3">
                        @if($status === 'pending')
                            <form method="POST" action="{{ route('admin.vendor-products.approve', $product->id) }}">
                                @csrf
                                <div class="row g-2">
                                    <div class="col-12">
                                        <label class="pe-check">
                                            <input type="checkbox" name="auto_show" value="1" @checked($autoShow)>
                                            <span>Auto Show on Store (পণ্য সরাসরি স্টোরে দেখাবে)</span>
                                        </label>
                                    </div>
                                    <div class="col-12">
                                        <button class="btn btn--success w-100 h-45">Approve Product</button>
                                    </div>
                                </div>
                            </form>

                            <form method="POST" action="{{ route('admin.vendor-products.reject', $product->id) }}">
                                @csrf
                                <div class="row g-2">
                                    <div class="col-12">
                                        <textarea name="reason" rows="2" class="form-control" placeholder="Reject reason (optional)"></textarea>
                                    </div>
                                    <div class="col-12">
                                        <button class="btn btn--danger w-100 h-45">Reject Product</button>
                                    </div>
                                </div>
                            </form>
                        @endif

                        @if($status === 'approved')
                            <form method="POST" action="{{ route('admin.vendor-products.toggle-auto-show', $product->id) }}">
                                @csrf
                                <button class="btn btn--warning w-100 h-45">
                                    {{ $autoShow ? 'Disable Auto Show' : 'Enable Auto Show' }}
                                </button>
                            </form>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('style')
<style>
.pe-page{--blue:#0878f7;--navy:#06194a;--border:#dbeafe}
.pe-hero{background:linear-gradient(135deg,#fff,#eaf5ff 55%,#0878f7);border:1px solid var(--border);border-radius:18px;padding:22px;margin-bottom:16px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 10px 30px rgba(8,120,247,.10)}
.pe-kicker{font-size:12px;font-weight:900;color:var(--blue)}.pe-hero h3{font-weight:900;color:var(--navy);margin:4px 0}.pe-hero p{font-weight:700;color:#64748b;margin:0}
.pe-card{border:1px solid var(--border);border-radius:16px;box-shadow:0 8px 24px rgba(15,23,42,.05)}
.pe-gallery{display:grid;grid-template-columns:1fr 1fr;gap:10px}.pe-gallery img{width:100%;height:170px;object-fit:cover;border-radius:16px;border:1px solid #e2e8f0}
.pe-no-img{height:250px;grid-column:1/-1;background:#eaf5ff;border-radius:18px;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#0878f7;font-size:44px;font-weight:900}
.pe-title{font-weight:900;color:#06194a}
.pe-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.pe-grid div{background:#f8fafc;border:1px solid #e2e8f0;border-radius:14px;padding:12px}.pe-grid span{display:block;color:#64748b;font-weight:800;font-size:12px}.pe-grid strong{color:#06194a;font-weight:900}
.pe-vendor-box{background:#eaf5ff;border:1px solid #bfdbfe;border-radius:16px;padding:12px;display:flex;gap:10px;align-items:center}.pe-vendor-box small{display:block;color:#64748b;font-weight:800}
.pe-avatar{width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,#06194a,#0878f7);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900}
.pe-desc{background:#f8fafc;border:1px solid #e2e8f0;border-radius:14px;padding:12px;font-weight:700;color:#334155;line-height:1.7}
.pe-actions{display:flex;gap:8px;flex-wrap:wrap}.pe-actions form{flex:1}
.pe-check{display:flex;align-items:center;gap:8px;font-weight:900;color:#334155;background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:10px}.pe-check input{width:17px;height:17px}
</style>
@endpush