@extends('backend.template.layouts.template-base')
@section('title', 'Product Management - ' . $product->name . ' Details')

@section('content')

    <div class="product-top-section d-flex align-items-center justify-content-between mb-3">
        <div class="page-head-title1 mb-4">
            <a href="{{ route('backend.template.product-list.index') }}" class="d-inline-block">
                <h2 class="text-title fw-semibold mb-0 d-flex align-items-center">
                    <i class="ri-arrow-left-s-line fs-1 me-2"></i>{{ $product->name }} Details
                </h2>
            </a>
        </div>
        <div class="product-action-btns d-flex gap-3">
            <button id="statusBtn" class="{{ $product->status === 'active' ? 'btn-inactive' : 'btn-active' }}">
                {{ $product->status === 'active' ? 'Mark as Inactive' : 'Mark as Active' }}
            </button>
            <a href="{{ route('backend.template.product-list.edit-detail', $product->id) }}" class="btn-edit">Edit Product</a>
            <button class="btn-delete" data-bs-toggle="modal" data-bs-target="#deleteModal">Delete Product</button>
        </div>
    </div>

    {{-- ── Delete Modal ──────────────────────────────────────────────────── --}}
    <div id="deleteModal" class="modal fade" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content custom-modal">
                <div class="modal-header delete-header" style="height:60px;">
                    <h5 class="mt-2">Delete Product?</h5>
                </div>
                <div class="modal-body">
                    <p class="delete-para1"><strong>Are you sure you want to delete {{ $product->name }}?</strong></p>
                    <p class="text-muted">This action is permanent and cannot be undone.</p>
                </div>
                <div class="modal-footer custom-footer">
                    <button class="btn-cancel" data-bs-dismiss="modal">Cancel</button>
                    <button class="btn-delete-action" id="confirmDeleteBtn">Delete Product</button>
                </div>
            </div>
        </div>
    </div>

    {{-- ── Inactive Modal ────────────────────────────────────────────────── --}}
    <div id="inactiveModal" class="modal fade" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content custom-modal">
                <div class="modal-header inactive-header" style="height:60px;">
                    <h5 class="mt-2">Inactivate Product</h5>
                </div>
                <div class="modal-body">
                    <p><strong>Are you sure you want to Inactivate {{ $product->name }}?</strong></p>
                    <p class="text-muted">This product will no longer be visible to customers but will remain in sections.</p>
                </div>
                <div class="modal-footer custom-footer">
                    <button class="btn-cancel" data-bs-dismiss="modal">Cancel</button>
                    <button class="btn-inactive-action" id="confirmInactiveBtn">Inactivate Product</button>
                </div>
            </div>
        </div>
    </div>

    {{-- ── Activate Modal ────────────────────────────────────────────────── --}}
    <div id="activateModal" class="modal fade" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content custom-modal">
                <div class="modal-header activate-header">
                    <h5 class="mt-2">Activate Product</h5>
                </div>
                <div class="modal-body">
                    <p><strong>Are you sure you want to Activate {{ $product->name }}?</strong></p>
                    <p class="text-muted">This product will become visible in all added sections.</p>
                </div>
                <div class="modal-footer custom-footer">
                    <button class="btn-cancel" data-bs-dismiss="modal">Cancel</button>
                    <button class="btn-activate-action" id="confirmActivateBtn">Activate Product</button>
                </div>
            </div>
        </div>
    </div>

    {{-- ── Product Card ──────────────────────────────────────────────────── --}}
    <div class="product-card product-card-responsive d-flex align-items-center justify-content-between">
        <div class="product-left-section d-flex align-items-center gap-3">
            <div class="product-img">
                @if ($product->image)
                    <img src="{{ asset('storage/' . $product->image) }}" alt="{{ $product->name }}">
                @else
                    <img src="{{ asset('backend/template/svg-icon/product-img.svg') }}" alt="No Image">
                @endif
            </div>
            <div>
                <h5 class="product-name mb-1">{{ $product->name }}</h5>
                @if ($product->name_tamil)
                    <p class="product-desc mb-1">{{ $product->name_tamil }}</p>
                @endif
                @if ($product->short_description)
                    <p class="product-desc mb-1">{{ Str::limit($product->short_description, 100) }}</p>
                @endif
                <small class="product-date">Last Updated on : {{ $product->updated_at->format('d/m/Y') }}</small>
            </div>
        </div>
        <div class="text-end">
            <small class="status-label">Status</small>
            <div class="{{ $product->status === 'active' ? 'status-active' : 'status-inactive' }}">
                {{ ucfirst($product->status) }}
            </div>
        </div>
    </div>

    {{-- ── Product Info ──────────────────────────────────────────────────── --}}
    <div class="info-card mt-3">
        <h5 class="info-title">Product Info</h5>
        <hr>
        <div class="info-grid">
            <div><label>Product Name</label><p>{{ $product->name }}</p></div>
            <div><label>Product Name (Tamil/Tanglish)</label><p>{{ $product->name_tamil ?: '-' }}</p></div>
            <div><label>Group</label><p>{{ $product->group?->name ?: '-' }}</p></div>
            <div><label>Short Description</label><p>{{ $product->short_description ?: '-' }}</p></div>
            <div><label>Min Order Quantity</label><p>{{ $product->min_order_qty }}</p></div>
            <div><label>Max Order Quantity</label><p>{{ $product->max_order_qty }}</p></div>
        </div>
        @if ($product->description)
            <div class="mt-3">
                <label>Description</label>
                <div class="long-desc">{!! $product->description !!}</div>
            </div>
        @endif
        @if ($product->keywords)
            <div class="mt-3">
                <label>Keywords</label>
                <div class="tag-wrap">
                    @foreach (array_filter(preg_split('/[\s,]+/', $product->keywords)) as $kw)
                        <span class="tag">{{ $kw }}</span>
                    @endforeach
                </div>
            </div>
        @endif
        @if ($product->relatedProducts->count())
            <div class="mt-3">
                <label>Related Products</label>
                <div class="tag-wrap">
                    @foreach ($product->relatedProducts as $rp)
                        <span class="tag">{{ $rp->name }}</span>
                    @endforeach
                </div>
            </div>
        @endif
    </div>

    {{-- ── Pricing Info ──────────────────────────────────────────────────── --}}
    <div class="pricing-card mt-3 mb-3">
        <div class="pricing-header"><h5 class="pricing-title">Pricing Info</h5></div>
        <div class="table-wrap">
            <div class="pricing-scroll">
                <table class="pricing-table">
                    <thead>
                        <tr>
                            <th>Variant</th>
                            <th>Unit</th>
                            <th>Label</th>
                            <th>MRP ₹</th>
                            <th>Discount Type</th>
                            <th>Discount Value</th>
                            <th>Selling Price ₹</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($product->pricing as $price)
                            <tr>
                                <td>
                                    {{ $price->variant?->value ?: '-' }}
                                    @if ($price->is_default)
                                        <span class="badge-default">DEFAULT</span>
                                    @endif
                                </td>
                                <td>{{ $price->unit?->nickname ?: '-' }}</td>
                                <td>{{ $price->label ?: '--' }}</td>
                                <td>₹{{ number_format($price->mrp, 2) }}</td>
                                <td>{{ ucfirst($price->discount_type) }}</td>
                                <td>
                                    @if ($price->discount_type === 'percentage')
                                        {{ $price->discount_value }}%
                                    @elseif ($price->discount_type === 'fixed')
                                        -₹{{ $price->discount_value }}
                                    @else
                                        --
                                    @endif
                                </td>
                                <td>₹{{ number_format($price->selling_price, 2) }}</td>
                                <td>
                                    <span class="{{ $price->status === 'active' ? 'status-active' : 'status-inactive' }}">
                                        {{ ucfirst($price->status) }}
                                    </span>
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="8" class="text-center">No pricing added yet.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    {{-- ── SEO Settings ──────────────────────────────────────────────────── --}}
    @if ($product->seo)
    <div class="seo-card mt-3 mb-3">
        <div class="seo-header"><h5 class="seo-title">SEO Settings</h5></div>
        <div class="seo-grid">
            <div><label>Image Alt Text</label><p>{{ $product->seo->image_alt ?: '-' }}</p></div>
            <div><label>Meta Title</label><p>{{ $product->seo->meta_title ?: '-' }}</p></div>
            <div><label>Meta Description</label><p>{{ $product->seo->meta_description ?: '-' }}</p></div>
            <div><label>Schema</label><p>{{ $product->seo->schema ?: '-' }}</p></div>
            <div><label>H1</label><p>{{ $product->seo->h1 ?: '-' }}</p></div>
        </div>
    </div>
    @endif

@endsection

@section('scripts')
<script>
$(function () {
    var productId = {{ $product->id }};
    var isActive  = {{ $product->status === 'active' ? 'true' : 'false' }};
    var statusBtn = document.getElementById('statusBtn');

    // Status toggle
    $('#statusBtn').on('click', function () {
        if (isActive) {
            $('#inactiveModal').modal('show');
        } else {
            $('#activateModal').modal('show');
        }
    });

    $('#confirmInactiveBtn').on('click', function () {
        doToggle();
    });
    $('#confirmActivateBtn').on('click', function () {
        doToggle();
    });

    function doToggle() {
        $.post('{{ url("admin/product-list/products") }}/' + productId + '/toggle-status')
            .done(function (res) {
                isActive = res.status === 'active';
                $('#inactiveModal, #activateModal').modal('hide');
                statusBtn.textContent = isActive ? 'Mark as Inactive' : 'Mark as Active';
                statusBtn.className = isActive ? 'btn-inactive' : 'btn-active';
                toastr.success('Product status updated.');
            }).fail(function () { toastr.error('Failed.'); });
    }

    // Delete
    $('#confirmDeleteBtn').on('click', function () {
        $.ajax({ url: '{{ url("admin/product-list/products") }}/' + productId, type: 'DELETE' })
            .done(function (res) {
                toastr.success(res.message);
                setTimeout(function () {
                    window.location.href = '{{ route("backend.template.product-list.index") }}';
                }, 1000);
            }).fail(function () { toastr.error('Delete failed.'); });
    });
});
</script>
@endsection