@extends('admin.layouts.app')

@section('title', 'Product Details')
@section('page_title', 'Product Details')

@section('content')

@php
    $images = is_array($product->images)
        ? $product->images
        : json_decode($product->images ?? '[]', true);

    $images = is_array($images) ? $images : [];
    $firstImage = $images[0] ?? null;
@endphp

<div class="page-heading">
    <div>
        <h2>{{ $product->title }}</h2>
        <p>Created by {{ optional($product->user)->name ?: 'Deleted user' }}</p>
    </div>

    <div class="action-row">
        <form method="POST" action="{{ route('admin.products.toggle-approval', $product) }}">
            @csrf
            @method('PATCH')

            <button type="submit"
                    class="button {{ $product->is_approved ? 'button-warning' : 'button-primary' }}">
                {{ $product->is_approved ? 'Move to pending' : 'Approve product' }}
            </button>
        </form>

        <form method="POST" action="{{ route('admin.products.toggle-status', $product) }}">
            @csrf
            @method('PATCH')

            <button type="submit" class="button button-secondary">
                Mark {{ $product->status === 'sold' ? 'available' : 'sold' }}
            </button>
        </form>

        <form method="POST"
              action="{{ route('admin.products.destroy', $product) }}"
              onsubmit="return confirmDelete('Delete this product permanently?')">
            @csrf
            @method('DELETE')

            <button type="submit" class="button button-danger">Delete product</button>
        </form>
    </div>
</div>

<div class="detail-grid">
    <div class="detail-card">
        @if($firstImage)
            <img src="{{ asset('storage/' . $firstImage) }}"
                 alt="{{ $product->title }}"
                 class="detail-image">
        @else
            <div class="detail-image"
                 style="display:grid;place-items:center;color:#94a3b8;font-weight:900">
                No image
            </div>
        @endif

        @if(count($images) > 1)
            <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px">
                @foreach($images as $image)
                    <img src="{{ asset('storage/' . $image) }}"
                         alt=""
                         style="width:100%;aspect-ratio:1;border-radius:10px;object-fit:cover">
                @endforeach
            </div>
        @endif
    </div>

    <div class="detail-card">
        <div class="detail-list">
            <div class="detail-item">
                <span>Seller</span>
                {{ optional($product->user)->name ?: 'Deleted user' }}
            </div>

            <div class="detail-item">
                <span>Seller email</span>
                {{ optional($product->user)->email ?: '-' }}
            </div>

            <div class="detail-item">
                <span>Category</span>
                {{ $product->category }}
            </div>

            <div class="detail-item">
                <span>Brand</span>
                {{ $product->brand ?: '-' }}
            </div>

            <div class="detail-item">
                <span>Size</span>
                {{ $product->size ?: '-' }}
            </div>

            <div class="detail-item">
                <span>Condition</span>
                {{ $product->condition ?: '-' }}
            </div>

            <div class="detail-item">
                <span>Price</span>
                ${{ number_format($product->price, 2) }}
            </div>

            <div class="detail-item">
                <span>Discount price</span>
                {{ $product->discount_price ? '$' . number_format($product->discount_price, 2) : '-' }}
            </div>

            <div class="detail-item">
                <span>Approval</span>
                <span class="badge {{ $product->is_approved ? 'badge-success' : 'badge-warning' }}">
                    {{ $product->is_approved ? 'Approved' : 'Pending' }}
                </span>
            </div>

            <div class="detail-item">
                <span>Status</span>
                <span class="badge {{ $product->status === 'sold' ? 'badge-danger' : 'badge-success' }}">
                    {{ ucfirst($product->status ?: 'available') }}
                </span>
            </div>

            <div class="detail-item">
                <span>Location</span>
                {{ $product->location ?: '-' }}
            </div>

            <div class="detail-item">
                <span>Created</span>
                {{ optional($product->created_at)->format('M d, Y H:i') }}
            </div>
        </div>

        <div style="margin-top:18px;padding:17px;border-radius:15px;background:#f8fafc">
            <strong>Description</strong>
            <p style="margin:9px 0 0;color:#475569;line-height:1.7">
                {{ $product->description ?: 'No description.' }}
            </p>
        </div>
    </div>
</div>

@endsection