@extends('backend.admin.layouts.app')

@section('content')
    <div class="pagetitle">
        <h1>Dashboard</h1>
        <nav>
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="{{ route('admin.dashboard') }}">Home</a>
                </li>
                <li class="breadcrumb-item">Dashboard</li>
                <li class="breadcrumb-item active">{{ $PageTitle ?? 'Home Sections' }}</li>
            </ol>
        </nav>
    </div><!-- End Page Title -->

    <section class="section dashboard">
        <div class="row">
            <div class="col-lg-12">

                <div class="card">
                    <div class="card-body mt-3">

                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h5 class="card-title mb-0">Home Sections</h5>

                            <a href="{{ route('admin.home-section.create') }}">
                                <button type="button" class="btn btn-primary">
                                    + Add Home Section
                                </button>
                            </a>
                        </div>

                        <!-- Table with stripped rows -->
                        <table class="table table-striped align-middle">
                            <thead>
                                <tr>
                                    <th scope="col">#</th>
                                    <th scope="col">Section Title</th>
                                    <th scope="col">Category</th>
                                    <th scope="col">Max Products</th>
                                    <th scope="col">Order</th>
                                    <th scope="col">Status</th>
                                    <th scope="col" class="text-end">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($sections as $section)
                                    <tr>
                                        <th scope="row">{{ $loop->iteration }}</th>

                                        <td>
                                            {{ $section->title ?: '—' }}
                                            @if($section->subtitle)
                                                <div class="text-muted small">
                                                    {{ $section->subtitle }}
                                                </div>
                                            @endif
                                        </td>

                                        <td>
                                            {{ optional($section->menu)->name ?: 'N/A' }}
                                        </td>

                                        <td>
                                            {{ $section->max_products }}
                                        </td>

                                        <td>
                                            {{ $section->order }}
                                        </td>

                                        <td>
                                            @if($section->is_active)
                                                <span class="badge bg-success">Active</span>
                                            @else
                                                <span class="badge bg-secondary">Inactive</span>
                                            @endif
                                        </td>

                                        <td class="text-end">
                                            {{-- Manage Products --}}
                                            <a href="{{ route('admin.home-section.products', $section->id) }}"
                                               class="btn btn-sm btn-outline-secondary me-1"
                                               title="Manage Products">
                                                <i class="fa-solid fa-boxes-stacked"></i>
                                            </a>

                                            {{-- Edit --}}
                                            <a href="{{ route('admin.home-section.edit', $section->id) }}"
                                               class="btn btn-sm btn-outline-primary me-1"
                                               title="Edit">
                                                <i class="fa-solid fa-pen"></i>
                                            </a>

                                            {{-- Delete --}}
                                            <a href="#"
                                               class="btn btn-sm btn-outline-danger deleteItem"
                                               data-formid="delete_row_form_{{ $section->id }}">
                                                <i class="fa-solid fa-trash"></i>
                                            </a>

                                            <form action="{{ route('admin.home-section.destroy', $section->id) }}"
                                                  method="POST"
                                                  id="delete_row_form_{{ $section->id }}"
                                                  style="display: none;">
                                                @csrf
                                                @method('DELETE')
                                            </form>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="7" class="text-center text-muted">
                                            No home sections found. Click "Add Home Section" to create one.
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                        <!-- End Table with stripped rows -->

                    </div>
                </div>

            </div>
        </div>
    </section>
@endsection

@push('style')
    <style>
        .deleteItem {
            color: rgb(201, 4, 4);
            text-decoration: none;
        }
    </style>
@endpush

@push('script')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const deleteButtons = document.querySelectorAll('.deleteItem');
            deleteButtons.forEach(btn => {
                btn.addEventListener('click', function (e) {
                    e.preventDefault();
                    const formId = this.getAttribute('data-formid');
                    if (confirm('Are you sure you want to delete this section?')) {
                        document.getElementById(formId).submit();
                    }
                });
            });
        });
    </script>
@endpush