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

@section('content')
    <section>
        <div class="page-head-title mb-3">
            <div class="d-flex align-items-center justify-content-between">
                <a href="{{ route('backend.template.product.category.manage-category') }}" 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>Section Details
                    </h2>
                </a>

                <div class="section-btn d-flex align-items-center gap-3">
                    @if ($section->status === 'active')
                        @if ($section->products->count() > 0)
                            <a href="javascript:void(0);"
                                class="button-orange-light d-flex flex-row gap-2 align-items-center px-3"
                                data-bs-toggle="modal" data-bs-target="#InactivateSectionModal">
                                Mark as Inactive
                            </a>
                        @else
                            <a href="javascript:void(0);"
                                class="button-orange-light d-flex flex-row gap-2 align-items-center px-3"
                                data-bs-toggle="modal" data-bs-target="#InactivateSectionModal">
                                Mark as Inactive
                            </a>
                        @endif
                    @else
                        @if ($section->products->count() > 0)
                            <a href="javascript:void(0);"
                                class="button-green-light d-flex flex-row gap-2 align-items-center px-3"
                                data-bs-toggle="modal" data-bs-target="#ActivateSectionModal">
                                Mark as Active
                            </a>
                        @else
                            <a href="javascript:void(0);"
                                class="button-green-light d-flex flex-row gap-2 align-items-center px-3"
                                data-bs-toggle="modal" data-bs-target="#ActivationRestrictedModal">
                                Mark as Active
                            </a>
                        @endif
                    @endif

                    <a href="{{ route('backend.template.sections.edit', $section->id) }}"
                        class="button-green d-flex flex-row gap-2 align-items-center px-3">
                        <span class="review-edit">
                            <img src="{{ asset('backend/template/svg-icon/edit-outline-w.svg') }}" alt="icon">
                        </span>
                        Edit Section
                    </a>

                    <a href="javascript:void(0);" class="button-red d-flex flex-row gap-2 align-items-center px-3"
                        data-bs-toggle="modal" data-bs-target="#DeleteSectionModal">
                        <span class="review-edit">
                            <img src="{{ asset('backend/template/svg-icon/delete-outline-w.svg') }}" alt="icon">
                        </span>
                        Delete Section
                    </a>
                </div>
            </div>
        </div>

        {{-- ── Section Summary Card ──────────────────────────────────────────────── --}}
        <div class="card bg-color-lightGreen2 shadow-light rounded-3 p-3 p-md-4">
            <div class="row align-items-center">
                <div class="col-md-8 col-12">
                    <div class="admin-card d-flex flex-row align-items-center gap-2">
                        <div>
                            @if ($section->background_image)
                                <img src="{{ asset('storage/' . $section->background_image) }}" alt="{{ $section->name }}"
                                    class="section-product-img">
                            @else
                                <img src="{{ asset('backend/template/svg-icon/product-image-dark.svg') }}" alt="Image"
                                    class="section-product-img">
                            @endif
                        </div>
                        <div>
                            <div class="d-flex gap-2 align-items-center flex-wrap">
                                <h5 class="box-title mb-1">{{ $section->name }}</h5>
                                @if ($section->category)
                                    <span class="badge bg-secondary">{{ $section->category->name }}</span>
                                @endif
                                @if ($section->section_type)
                                    <span class="badge bg-info text-dark">{{ ucfirst($section->section_type) }}</span>
                                @endif
                            </div>
                            @if ($section->short_description)
                                <p class="mb-1 text-sub-heading">{{ Str::limit($section->short_description, 120) }}</p>
                            @endif
                            <span class="mb-0 secondary-text fs-12 d-flex gap-2 align-items-center">
                                Total Products: {{ $section->products->count() }}
                                @if ($section->scheduled_from || $section->scheduled_to)
                                    &nbsp;|&nbsp;
                                    <span class="schedule-time-txt d-flex align-items-center gap-1">
                                        <img src="{{ asset('backend/template/images/svg/int-clock-outline.svg') }}"
                                            alt="icon">
                                        @if ($section->scheduled_from)
                                            From {{ $section->scheduled_from->format('d/m/Y H:i') }}
                                        @endif
                                        @if ($section->scheduled_to)
                                            &nbsp;- To {{ $section->scheduled_to->format('d/m/Y H:i') }}
                                        @endif
                                    </span>
                                @else
                                    &nbsp;|&nbsp; Last Updated on: {{ $section->updated_at->format('d/m/Y') }}
                                @endif
                            </span>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-12">
                    <div class="d-flex flex-column align-items-end gap-2">
                        <p class="mb-0 secondary-text">Status</p>
                        <h3 class="mb-0 fw-semibold {{ $section->status === 'active' ? 'status-green' : 'status-red' }}">
                            {{ ucfirst($section->status) }}
                        </h3>
                    </div>
                </div>
            </div>
        </div>

        {{-- ── Products List ─────────────────────────────────────────────────────── --}}
        <div class="modal-sub-headings fs-20 my-2">Product list under {{ $section->name }}</div>

        <div class="card-border1 p-3">
            <div class="table-responsive">
                <table class="table table-nowrap align-middle rounded-10 overflow-hidden">
                    <thead>
                        <tr class="all-table-head text-capitalize">
                            <th colspan="2" class="p-3 table-head-content text-end">S.no</th>
                            <th class="p-3 table-head-content">Product Group</th>
                            <th class="p-3 table-head-content">Product Img</th>
                            <th class="p-3 table-head-content">Product Name</th>
                            <th class="p-3 table-head-content">Variant &amp; Units</th>
                            <th class="p-3 table-head-content">Base<br>Price ₹</th>
                            <th class="p-3 table-head-content">Selling<br>Price ₹</th>
                            <th class="p-3 table-head-content">Action</th>
                        </tr>
                    </thead>
                    <tbody id="sectionProductsBody">
                        @forelse ($section->products as $i => $product)
                            <tr data-id="{{ $product->id }}">
                                <th scope="row" class="p-3">
                                    <img src="{{ asset('backend/template/svg-icon/drag-bar.svg') }}" class="drag-handle"
                                        alt="drag-icon" style="cursor:grab;">
                                </th>
                                <td class="table-body-content p-3">{{ $i + 1 }}</td>
                                <td class="table-body-content p-3">{{ $product->group?->name ?? '-' }}</td>
                                <td class="table-body-content p-3">
                                    @if ($product->image)
                                        <img src="{{ asset('storage/' . $product->image) }}" class="product-image-size"
                                            alt="{{ $product->name }}">
                                    @else
                                        <img src="{{ asset('backend/template/svg-icon/product-img.svg') }}"
                                            class="product-image-size" alt="product-image">
                                    @endif
                                </td>
                                <td class="table-body-content p-3">
                                    <div class="d-flex flex-column gap-1">
                                        <span>{{ $product->name }}</span>
                                        @if ($product->name_tamil)
                                            <span class="secondary-text fs-11">{{ $product->name_tamil }}</span>
                                        @endif
                                    </div>
                                </td>
                                <td class="table-body-content p-3">
                                    @php $defaultPricing = $product->pricing->firstWhere('is_default', true) ?? $product->pricing->first(); @endphp
                                    @if ($defaultPricing)
                                        {{ $defaultPricing->variant?->value ?? '-' }}
                                        @if ($defaultPricing->unit)
                                            / {{ $defaultPricing->unit->nickname ?? $defaultPricing->unit->name }}
                                        @endif
                                        @if ($product->pricing->count() > 1)
                                            <small class="text-muted">(+{{ $product->pricing->count() - 1 }} more)</small>
                                        @endif
                                    @else
                                        -
                                    @endif
                                </td>
                                <td class="table-body-content p-3">
                                    @if ($defaultPricing)
                                        ₹{{ number_format($defaultPricing->mrp, 2) }}
                                    @else
                                        -
                                    @endif
                                </td>
                                <td class="table-body-content p-3">
                                    @if ($defaultPricing)
                                        ₹{{ number_format($defaultPricing->selling_price, 2) }}
                                    @else
                                        -
                                    @endif
                                </td>
                                <td class="table-body-content p-3">
                                    <div class="d-flex align-items-center gap-3">
                                        <a
                                            href="{{ route('backend.template.product-list.product-detail', $product->id) }}">
                                            <img src="{{ asset('backend/template/svg-icon/view-blue.svg') }}"
                                                alt="view">
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="9" class="text-center p-4 text-muted">No products in this section.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        {{-- ── SEO Settings ──────────────────────────────────────────────────────── --}}
        @if ($section->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>{{ $section->seo->image_alt ?: '-' }}</p>
                    </div>
                    <div><label>Meta Title</label>
                        <p>{{ $section->seo->meta_title ?: '-' }}</p>
                    </div>
                    <div><label>Meta Description</label>
                        <p>{{ $section->seo->meta_description ?: '-' }}</p>
                    </div>
                    <div><label>Schema</label>
                        <p>{{ $section->seo->schema ?: '-' }}</p>
                    </div>
                    <div><label>H1</label>
                        <p>{{ $section->seo->h1 ?: '-' }}</p>
                    </div>
                </div>
            </div>
        @endif

        {{-- ── Delete Section Modal ─────────────────────────────────────────────── --}}
        <div class="modal fade" id="DeleteSectionModal" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content rounded-16 overflow-hidden">
                    <div class="modal-header bg-color-lightRed">
                        <h3 class="text-color-error modal-title mb-0">Delete Section</h3>
                        <button type="button" class="btn-close opacity-0" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <p class="mb-0 text-title">Are you sure you want to delete <span
                                class="fw-bold">{{ $section->name }}?</span></p>
                        <p class="mt-2 mb-0 secondary-text fs-14">
                            This section contains <span class="fw-bold">{{ $section->products->count() }} products</span>.
                            Deleting it will remove the section and all product associations.
                        </p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="button-outline w-button" data-bs-dismiss="modal">Cancel</button>
                        <button class="button-red" id="confirmDeleteSectionBtn">Delete Section</button>
                    </div>
                </div>
            </div>
        </div>

        {{-- ── Activate Section Modal ───────────────────────────────────────────── --}}
        <div class="modal fade" id="ActivateSectionModal" 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 Section</h3>
                        <button type="button" class="btn-close opacity-0" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <p class="mb-0 text-title">Are you sure you want to Activate <span
                                class="fw-semibold">{{ $section->name }}?</span></p>
                        <p class="mb-0 secondary-text">This section will be enabled and visible within its
                            {{ $section->category?->name ?? 'category' }}.
                            Users will be able to view and interact with its associated content.
                        </p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="button-outline" data-bs-dismiss="modal">Cancel</button>
                        <button class="button-green" id="confirmActivateSectionBtn">Activate Section</button>
                    </div>
                </div>
            </div>
        </div>

        {{-- ── Inactivate Section Modal ─────────────────────────────────────────── --}}
        <div class="modal fade" id="InactivateSectionModal" 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 Section</h3>
                        <button type="button" class="btn-close opacity-0" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <p class="mb-0 text-title">Are you sure you want to Inactivate <span
                                class="fw-semibold">{{ $section->name }}?</span></p>
                        <p class="mb-0 secondary-text">This section will be hidden and no longer available for user
                            interaction. Any associated data will remain intact and can be reactivated later.</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="button-outline" data-bs-dismiss="modal">Cancel</button>
                        <button class="button-orange" id="confirmInactivateSectionBtn">Inactivate Section</button>
                    </div>
                </div>
            </div>
        </div>

        {{-- ── Activation Restricted Modal ──────────────────────────────────────── --}}
        <div class="modal fade" id="ActivationRestrictedModal" 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 d-flex align-items-center gap-2">
                            <img src="{{ asset('backend/template/images/svg/alert-triage.svg') }}" alt="icon">
                            Activation Restricted
                        </h3>
                        <button type="button" class="btn-close opacity-0" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <p class="mb-0 text-title">You cannot Activate <span
                                class="fw-semibold">{{ $section->name }}.</span></p>
                        <p class="my-2 secondary-text">There are no products added inside <span
                                class="fw-bold">{{ $section->name }}</span>. Please add products before activating the
                            section.</p>
                        <div class="d-flex align-items-center gap-2 bg-color-lightOrange rounded-3 p-2">
                            <img src="{{ asset('backend/template/svg-icon/alert-muted.svg') }}" alt="icon"
                                width="16" height="16" class="fillter-orange">
                            <p class="mb-0 fs-12 color-orange">
                                Add products to activate the section.
                                <a href="{{ route('backend.template.sections.edit', $section->id) }}"
                                    class="fw-bold text-decoration-underline color-orange">Add Products</a>
                            </p>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="button-outline" data-bs-dismiss="modal">Cancel</button>
                    </div>
                </div>
            </div>
        </div>

    </section>
@endsection

@section('scripts')
    <script>
        $(function() {
            var sectionId = {{ $section->id }};

            // Status toggle
            $('#confirmActivateSectionBtn, #confirmInactivateSectionBtn').on('click', function() {
                $.post('{{ route('backend.template.sections.toggle-status', $section->id) }}')
                    .done(function(res) {
                        toastr.success('Section status updated.');
                        setTimeout(function() {
                            location.reload();
                        }, 800);
                    })
                    .fail(function() {
                        toastr.error('Failed to update status.');
                    });
            });

            // Delete
            $('#confirmDeleteSectionBtn').on('click', function() {
                $.ajax({
                    url: '{{ route('backend.template.sections.destroy', $section->id) }}',
                    type: 'DELETE',
                }).done(function(res) {
                    toastr.success(res.message || 'Section deleted.');
                    setTimeout(function() {
                        window.location.href =
                            '{{ route('backend.template.product.category.manage-category') }}';
                    }, 800);
                }).fail(function() {
                    toastr.error('Delete failed.');
                });
            });

            // Sortable drag-reorder — persists product order via AJAX
            if (typeof Sortable !== 'undefined') {
                var _reorderProductsUrl =
                    '{{ route('backend.template.sections.reorder-products', $section->id) }}';

                Sortable.create(document.getElementById('sectionProductsBody'), {
                    animation: 150,
                    handle: '.drag-handle',
                    ghostClass: 'sortable-ghost',
                    onEnd: function() {
                        // renumber S.no column
                        $('#sectionProductsBody tr').each(function(i) {
                            $(this).find('td:nth-child(2)').text(i + 1);
                        });

                        // collect product IDs in new order
                        var ids = [];
                        $('#sectionProductsBody tr[data-id]').each(function() {
                            ids.push(parseInt($(this).data('id')));
                        });

                        if (!ids.length) return;

                        $.post(_reorderProductsUrl, {
                                ids: ids,
                                _token: '{{ csrf_token() }}'
                            })
                            .done(function() {
                                toastr.success('Product order saved.');
                            })
                            .fail(function() {
                                toastr.error('Failed to save product order.');
                            });
                    },
                });
            }
        });
    </script>
@endsection