@include('admin.header')

<style>
    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        background-color: #3779eb !important;
        border: 1px solid #3779eb !important;
        color: #ffffff;
        border-radius: 4px;
        cursor: default;
        float: left;
        margin-right: 5px;
        margin-top: 5px;
        padding: 0 5px;
    }
</style>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<!-- MAIN-CONTENT -->
<div class="main-content app-content">
    <div class="main-container container-fluid">
        <div class="breadcrumb-header justify-content-between">
            <div class="my-auto">
                <h4 class="page-title">Home Page </h4>
            </div>
            <div class="d-flex my-xl-auto right-content align-items-center">


            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <div class="card-body">
                    <div class="row">
                        <h2>Trending Products</h2>

                        @if (session('success'))
                            <div class="alert alert-success">{{ session('success') }}</div>
                        @endif

                        <form method="POST" action="{{ route('admin.home-trending-products.store') }}">
                            @csrf

                            <div class="mb-3 form-group">
                                <label>Select 10 Trending Products</label>
                                <select name="product_ids[]" id="trending-products" class="form-control" multiple
                                    required></select>
                                <small class="text-muted">Search and select exactly 10 products.</small>
                            </div>

                            <button type="submit" class="btn btn-primary">Save</button>
                        </form>

                    </div>
                    @if ($selectedProducts->count())
                        <div class="mt-4 card">
                            <div class="card-header">
                                <h5 class="mb-0">Currently Selected Trending Products</h5>
                            </div>
                            <div class="card-body">
                                <ul class="list-group">
                                    @foreach ($selectedProducts as $productName)
                                        <li class="list-group-item d-flex justify-content-between align-items-center">
                                            {{ $productName }}
                                            <span class="badge bg-success">Trending</span>
                                        </li>
                                    @endforeach
                                </ul>
                                <p class="mt-2 text-muted">To update, simply select a new set of 10 products above and
                                    click "Save".</p>
                            </div>
                        </div>
                    @endif

                </div>
            </div>
        </div>
        <!-- /.row -->

        <!-- /.row (main row) -->
    </div><!-- /.container-fluid -->
    </section>
    <!-- /.content -->
</div>
<!-- /.content-wrapper -->

</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
</section>
@include('admin.footer')

<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
    var preselectedProducts = @json($selected);
    $(document).ready(function() {
        $('#trending-products').select2({
            ajax: {
                url: '{{ route('admin.products.search') }}',
                dataType: 'json',
                delay: 250,
                data: function(params) {
                    return {
                        q: params.term
                    };
                },
                processResults: function(data) {
                    return {
                        results: data
                    };
                },
                cache: true
            },
            minimumInputLength: 2,
            placeholder: 'Search products...',
        });

        // Load pre-selected products
        var preselected = preselectedProducts || [];
        for (let item of preselected) {
            var option = new Option(item.text, item.id, true, true);
            $('#trending-products').append(option).trigger('change');
        }
    });
</script>