@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" />

<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>

        <div class="card">
            <div class="card-body">
                <h2>New Arrivals</h2>

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

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

                    <div class="mb-3 form-group">
                        <label>Select 10 New Arrival Products</label>
                        <select name="product_ids[]" id="new-arrival-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>

                @if ($selectedProducts->count())
                    <div class="mt-4 card">
                        <div class="card-header">
                            <h5 class="mb-0">Currently Selected New Arrival 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-info">New Arrival</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>
</div>

@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 () {
        $('#new-arrival-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
        var preselected = preselectedProducts || [];
        for (let item of preselected) {
            var option = new Option(item.text, item.id, true, true);
            $('#new-arrival-products').append(option).trigger('change');
        }
    });
</script>