@extends('backend.template.layouts.template-base')
@section('title', 'Vital Kitchen - ' . $product->name)

@section('content')
<section class="Kitchen-product-details">
    {{-- Header --}}
    <div class="product-top-section d-flex align-items-center justify-content-between mb-3">
        <div class="page-head-title">
            <a href="{{ route('backend.template.vk.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 Details
                </h2>
            </a>
        </div>
        <div class="product-action-btns d-flex gap-3">
            @if ($product->status === 'active')
                <button id="statusBtn" class="btn-inactive" data-id="{{ $product->id }}" data-status="active">Mark as Inactive</button>
            @else
                <button id="statusBtn" class="btn-active" data-id="{{ $product->id }}" data-status="inactive">Mark as Active</button>
            @endif
            <button class="btn-delete d-flex align-items-center gap-2" id="openDeleteProductModal">
                <img src="{{ asset('backend/template/svg-icon/delete-outline-w.svg') }}" alt="icon">
                Delete Product
            </button>
            <a href="{{ route('backend.template.vk.products.edit', $product->id) }}" class="btn-edit d-flex align-items-center gap-2">
                <img src="{{ asset('backend/template/svg-icon/edit-outline-w.svg') }}" alt="icon">
                Edit Product
            </a>
            <a href="{{ route('backend.template.vk.products.duplicate', $product->id) }}" class="button-blue d-flex align-items-center gap-2 fs-13">
                <img src="{{ asset('backend/template/images/svg/duplicate.svg') }}" alt="icon">
                Duplicate Product
            </a>
        </div>
    </div>

    {{-- Hero card --}}
    <div class="product-card shadow-sm product-card-responsive d-flex align-items-center justify-content-between bg-color-lightBlue">
        <div class="product-left-section d-flex align-items-center gap-3">
            <div class="product-img-wrapper">
                <div class="product-img">
                    @if ($product->image)
                        <img src="{{ asset('storage/' . $product->image) }}" alt="product">
                    @else
                        <img src="{{ asset('backend/template/images/svg/product-empty-image.svg') }}" alt="image">
                    @endif
                </div>
            </div>
            <div>
                <h5 class="product-name mb-1">{{ $product->name }}</h5>
                @if ($product->short_description)
                    <p class="product-desc mb-1">{{ $product->short_description }}</p>
                @endif
                <small class="product-date">Last Updated on : {{ $product->updated_at->format('d/m/Y') }}</small>
            </div>
        </div>
        <div class="Status-info text-end" id="heroStatusWrap">
            <small class="status-label">Status</small>
            <div class="{{ $product->status === 'active' ? 'status-active' : 'status-inactive' }}" id="heroStatus">
                {{ ucfirst($product->status) }}
            </div>
        </div>
    </div>

    {{-- Product Info --}}
    <div class="info-card mt-3">
        <h5 class="info-title mb-0 p-3 border-bottom">Product Info</h5>
        <div class="row g-3 p-3">
            <div class="col-md-3 col-6">
                <label>Product Name</label>
                <p>{{ $product->name }}</p>
            </div>
            <div class="col-md-3 col-6">
                <label>Product Name (Tamil/Tanglish)</label>
                <p>{{ $product->name_tamil ?: '-' }}</p>
            </div>
            <div class="col-md-3 col-6">
                <label>Group</label>
                <p>{{ $product->group?->name ?: '-' }}</p>
            </div>
            <div class="col-md-3 col-6">
                <label>Product Code</label>
                <p>{{ $product->product_code }}</p>
            </div>
            <div class="col-md-3 col-6">
                <label>Min Order Quantity</label>
                <p>{{ $product->min_order_qty }}</p>
            </div>
            <div class="col-md-3 col-6">
                <label>Max Order Quantity</label>
                <p>{{ $product->max_order_qty }}</p>
            </div>
        </div>
        <div class="p-3">
            @if ($product->description)
                <div class="mt-2">
                    <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 (preg_split('/[\s,]+/', $product->keywords, -1, PREG_SPLIT_NO_EMPTY) 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>
    </div>

    {{-- Ingredients --}}
    <div class="pricing-card mt-3 mb-3 p-0 overflow-hidden">
        <div class="pricing-header p-3 d-flex justify-content-between align-items-center">
            <h5 class="pricing-title mb-0">
                Ingredients
                <small class="text-muted fw-normal fs-14 ms-2">
                    Total: {{ $product->ingredients->count() }} &nbsp;|&nbsp;
                    MRP (Standards): ₹{{ number_format($product->ingredients->where('pivot.ingredient_type', 'standard')->sum('mrp'), 2) }}
                </small>
            </h5>
        </div>
        <div class="table-wrap">
            <div class="pricing-scroll">
                <div class="table-responsive rounded-4">
                    <table class="table align-middle table-accordion mb-0">
                        <thead>
                            <tr>
                                <th class="table-head-content text-center">S.No</th>
                                <th class="table-head-content">Image</th>
                                <th class="table-head-content">Ingredient Name</th>
                                <th class="table-head-content">Variant &amp; Units</th>
                                <th class="table-head-content">Price ₹</th>
                                <th class="table-head-content">Type</th>
                                <th class="table-head-content">Pre-Suggested</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php
                                $allIngredients = $product->ingredients;
                                $ungrouped = $allIngredients->filter(fn($i) => is_null($i->pivot->group_id));
                                $grouped   = $allIngredients->filter(fn($i) => !is_null($i->pivot->group_id));
                                $sno = 1;
                            @endphp

                            {{-- Ungrouped --}}
                            @foreach ($ungrouped as $ing)
                                <tr>
                                    <td class="table-body-content text-center">{{ $sno++ }}</td>
                                    <td class="table-body-content">
                                        @if ($ing->image)
                                            <img src="{{ asset('storage/' . $ing->image) }}" class="product-image-size" alt="">
                                        @else
                                            <img src="{{ asset('backend/template/svg-icon/product-img.svg') }}" class="product-image-size" alt="">
                                        @endif
                                    </td>
                                    <td class="table-body-content">{{ $ing->name }}<br><small class="text-muted">{{ $ing->name_tamil }}</small></td>
                                    <td class="table-body-content">{{ $ing->variant_label }}</td>
                                    <td class="table-body-content">₹{{ number_format($ing->mrp, 2) }}</td>
                                    <td class="table-body-content">
                                        @if ($ing->pivot->ingredient_type === 'standard')
                                            <span class="standard-pill">Standard</span>
                                        @else
                                            <span class="dressing-pill">Dressing</span>
                                        @endif
                                    </td>
                                    <td class="table-body-content">
                                        @if ($ing->pivot->ingredient_type === 'standard')
                                            <span class="text-muted small">Mandatory</span>
                                        @else
                                            @if ($ing->pivot->is_suggested)
                                                <span class="text-success small fw-semibold">Yes</span>
                                            @else
                                                <span class="text-muted small">No</span>
                                            @endif
                                        @endif
                                    </td>
                                </tr>
                            @endforeach

                            {{-- Grouped --}}
                            @foreach ($product->ingredientGroups as $group)
                                @php $members = $grouped->filter(fn($i) => $i->pivot->group_id === $group->id); @endphp
                                @if ($members->count())
                                    <tr class="table-acc-head show-group" data-group="grp-{{ $group->id }}">
                                        <td class="table-body-content text-center">{{ $sno++ }}</td>
                                        <td colspan="5" class="table-body-content fw-semibold">
                                            {{ $group->label }}
                                            <span class="fw-normal text-muted fs-12">
                                                &nbsp;• {{ $members->count() }} ingredients
                                                @if($group->section_type) &nbsp;| {{ str_replace('_', ' ', $group->section_type) }} @endif
                                                @if($group->min_dressings || $group->max_dressings) &nbsp;| Pick {{ $group->min_dressings }}–{{ $group->max_dressings }} @endif
                                            </span>
                                        </td>
                                        <td class="text-end">
                                            <img class="table-grp-arrow" src="{{ asset('backend/template/images/svg/table-down-arrow.svg') }}" alt="arrow">
                                        </td>
                                    </tr>
                                    @foreach ($members as $ing)
                                        <tr class="table-acc-row grp-{{ $group->id }}">
                                            <td colspan="2" class="table-body-content">
                                                <div class="d-flex align-items-center justify-content-center gap-4">
                                                    <span class="text-muted small">{{ $loop->iteration }}</span>
                                                    @if ($ing->image)
                                                        <img src="{{ asset('storage/' . $ing->image) }}" class="product-image-size" alt="">
                                                    @else
                                                        <img src="{{ asset('backend/template/svg-icon/product-img.svg') }}" class="product-image-size" alt="">
                                                    @endif
                                                </div>
                                            </td>
                                            <td class="table-body-content">{{ $ing->name }}<br><small class="text-muted">{{ $ing->name_tamil }}</small></td>
                                            <td class="table-body-content">{{ $ing->variant_label }}</td>
                                            <td class="table-body-content">₹{{ number_format($ing->mrp, 2) }}</td>
                                            <td class="table-body-content">
                                                @if ($ing->pivot->ingredient_type === 'standard')
                                                    <span class="standard-pill">Standard</span>
                                                @else
                                                    <span class="dressing-pill">Dressing</span>
                                                @endif
                                            </td>
                                            <td class="table-body-content">
                                                @if ($ing->pivot->ingredient_type === 'standard')
                                                    <span class="text-muted small">Mandatory</span>
                                                @elseif ($ing->pivot->is_suggested)
                                                    <span class="text-success small fw-semibold">Yes</span>
                                                @else
                                                    <span class="text-muted small">No</span>
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach
                                @endif
                            @endforeach

                            @if ($product->ingredients->isEmpty())
                                <tr>
                                    <td colspan="7" class="text-center p-4 secondary-text">No ingredients added.</td>
                                </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

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

{{-- Activate Modal --}}
<div class="modal fade" id="ActivateProductModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content rounded-16 overflow-hidden">
            <div class="modal-header bg-color-lightGreen">
                <h3 class="color-green modal-title mb-0">Activate Product</h3>
                <button type="button" class="btn-close opacity-0" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p class="mb-0">Are you sure you want to activate <strong>{{ $product->name }}</strong>?</p>
                <p class="mb-0 secondary-text mt-1">This product will become visible to customers.</p>
            </div>
            <div class="modal-footer">
                <button class="button-outline" data-bs-dismiss="modal">Cancel</button>
                <button class="button-green" id="confirmActivateProduct">Activate Product</button>
            </div>
        </div>
    </div>
</div>

{{-- Inactivate Modal --}}
<div class="modal fade" id="InactivateProductModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content rounded-16 overflow-hidden">
            <div class="modal-header bg-color-lightOrange">
                <h3 class="color-orange modal-title mb-0">Inactivate Product</h3>
                <button type="button" class="btn-close opacity-0" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p class="mb-0">Are you sure you want to inactivate <strong>{{ $product->name }}</strong>?</p>
                <p class="mb-0 secondary-text mt-1">Product will be hidden from customers.</p>
            </div>
            <div class="modal-footer">
                <button class="button-outline" data-bs-dismiss="modal">Cancel</button>
                <button class="button-orange" id="confirmInactivateProduct">Inactivate</button>
            </div>
        </div>
    </div>
</div>

{{-- Delete Modal --}}
<div id="DeleteProductModal" 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">
                <div class="modal-Card-border p-3 mb-2">
                    <div class="row gy-2">
                        <div class="col-6 secondary-text">Product Name</div>
                        <div class="col-6 text-title text-end">{{ $product->name }}{{ $product->name_tamil ? ' (' . $product->name_tamil . ')' : '' }}</div>
                        <div class="col-6 secondary-text">Product Code</div>
                        <div class="col-6 text-title text-end">{{ $product->product_code }}</div>
                        <div class="col-6 secondary-text">Total Ingredients</div>
                        <div class="col-6 text-title text-end">{{ $product->ingredients->count() }}</div>
                    </div>
                </div>
                <p class="text-title"><strong>Are you sure you want to delete {{ $product->name }}?</strong></p>
                <p class="text-muted">This 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="doDeleteProduct">Delete Product</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
$(function () {
    var productId = {{ $product->id }};
    var toggleUrl = '{{ route("backend.template.vk.products.toggle-status", $product->id) }}';
    var deleteUrl = '{{ route("backend.template.vk.products.destroy", $product->id) }}';
    var indexUrl  = '{{ route("backend.template.vk.index") }}';

    var currentStatus = '{{ $product->status }}';

    // Status toggle
    $('#statusBtn').on('click', function () {
        if (currentStatus === 'active') {
            $('#InactivateProductModal').modal('show');
        } else {
            $('#ActivateProductModal').modal('show');
        }
    });

    function doToggle(newStatus) {
        $.post(toggleUrl, { _token: '{{ csrf_token() }}' }, function (res) {
            currentStatus = res.status;
            var isActive = res.status === 'active';
            $('#statusBtn')
                .attr('data-status', res.status)
                .text(isActive ? 'Mark as Inactive' : 'Mark as Active')
                .removeClass('btn-inactive btn-active')
                .addClass(isActive ? 'btn-inactive' : 'btn-active');
            $('#heroStatus')
                .text(isActive ? 'Active' : 'Inactive')
                .removeClass('status-active status-inactive')
                .addClass(isActive ? 'status-active' : 'status-inactive');
            toastr.success('Status updated.');
        }).fail(function () { toastr.error('Failed to update status.'); });
    }

    $('#confirmActivateProduct').on('click', function () {
        $('#ActivateProductModal').modal('hide');
        doToggle('active');
    });
    $('#confirmInactivateProduct').on('click', function () {
        $('#InactivateProductModal').modal('hide');
        doToggle('inactive');
    });

    // Delete
    $('#openDeleteProductModal').on('click', function () {
        $('#DeleteProductModal').modal('show');
    });
    $('#doDeleteProduct').on('click', function () {
        $.ajax({ url: deleteUrl, type: 'DELETE', data: { _token: '{{ csrf_token() }}' } })
            .done(function () {
                toastr.success('Product deleted.');
                setTimeout(function () { window.location.href = indexUrl; }, 700);
            }).fail(function () { toastr.error('Failed to delete.'); });
    });

    // Accordion for grouped ingredients
    document.querySelectorAll('.table-acc-head').forEach(function (head) {
        var group = head.getAttribute('data-group');
        var rows  = document.querySelectorAll('.table-acc-row.' + group);
        head.addEventListener('click', function () {
            rows.forEach(function (r) { r.classList.toggle('acc-hide'); });
            head.classList.toggle('acc-close');
        });
    });
});
</script>
@endsection