@extends('administrator.layout')
@section('admintitle', 'Rank')

@section('content')
<style>
    #products-data {
        border: 1px solid lightgray;
        padding: 5px;
        width: 100%;
        background: white;
    }
</style>

<!-- Table Start -->
<div class="container-fluid pt-4 px-4">
    <div class="row g-4">
        <div class="col-12">
            <div class="bg-light rounded h-100 p-4">

                @if (session()->has('success'))
                <div class="alert alert-success alert-dismissible fade show mb-2" role="alert">
                    <i class="fa fa-exclamation-circle me-2"></i><strong>{{ __('text.success') }} !</strong> {{ session()->get('success') }}.
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
                @endif

                @if (session()->has('error'))
                <div class="alert alert-danger alert-dismissible fade show mb-2" role="alert">
                    <i class="fa fa-exclamation-circle me-2"></i><strong>{{ __('text.error') }} !</strong> {{ session()->get('error') }}.
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
                @endif

                <div class="row mb-4 mt-0">
                    <div class="col-md-9 mt-3"><h5>{{ isset($data) ? __('text.edit') : __('text.add') }} {{ __('text.rank') }}</h5></div>
                    <div class="col-md-3 mt-1 text-end"><a href="/administrator/rank"><button class="btn btn-warning rounded-pill" data-toggle="modal" data-target="#create">{{ __('text.view') }}</button></a></div>
                </div>

                <form action="{{ isset($data) ? route('admin_update_rank', ['id' => $data[0]->id]) : route('admin_add_rank') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                     <input type="hidden" name="page" value="{{ $currentPage }}">

                    <div class="row mb-3">
                        <label for="inputfname" class="col-sm-2 col-form-label">{{ __('text.name') }}<span class="text-danger">*</span></label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputfname" placeholder="{{ __('text.name') }}" name="name" value="{{ isset($data) ? $data[0]->name : old('name') }}">
                            @error('name')<p class="text-danger">{{ $message }}</p>@enderror
                        </div>
                    </div>

                     <div class="row mb-3">
                        <label for="search-input" class="col-sm-2 col-form-label">{{ __('text.products') }}<span class="text-danger">*</span></label>
                        <div class="col-sm-10">
                           <input type="text" class="form-control" id="search-input"  placeholder="{{ __('text.search') }} {{ __('text.products') }}" >
                            
                            <div class="error-message mb-2" id="error-message" style="display: none;">{{ __('text.Noreu') }}</div>
                            <div id="searchable-dropdown" class="dropdown-menu" style="display: none;">
                                @foreach($products as $p)
                                <a class="dropdown-item product-item" data-product-id="{{ $p->productDes_id }}">{{ $p->name }}</a>
                                @endforeach
                            </div>
                             <div class="selected-products-container">
                            <input type="hidden" class="form-control" name="productIds">
                            @error('productIds')<p class="text-danger">{{ $message }}</p>@enderror
                        </div>

                        </div>
                    </div>

                    <div class="row mb-3">
                        <label for="inputlname" class="col-sm-2 col-form-label">{{ __('text.bonus') }}</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputlname" name="bonus"
                            placeholder="{{ __('text.bonus') }}" value="{{ isset($data) ? $data[0]->bonus : old('bonus') }}">
                            @error('bonus')<p class="text-danger">{{ $message }}</p>@enderror
                        </div>
                    </div>

                    <div class="row mb-3">
                        <label for="inputlname" class="col-sm-2 col-form-label">{{ __('text.sort_order') }}</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputlname" name="sort_order"
                            placeholder="{{ __('text.sort_order') }}" value="{{ isset($data) ? $data[0]->sort_order : old('sort_order') }}">
                            @error('sort_order')<p class="text-danger">{{ $message }}</p>@enderror
                        </div>
                    </div>

                    <div class="row mb-3">
                        <label for="inputlname" class="col-sm-2 col-form-label">{{ __('text.image') }}</label>
                        <div class="col-sm-10">
                            <input type="file" class="form-control" id="inputlname" name="image" accept=".jpg, .png, .jpeg" onchange="validateImage()" placeholder="{{ __('text.image') }}">
                             @if(isset($data) && isset($data[0]->image))
    @if($data[0]->image)
        <img src="{{ asset('/public/storage/ranks/'.$data[0]->image) }}" style="width: 100px;">
    @else
        <img src="{{ asset('/public/storage/blog/no imge.jpg') }}" style="width: 100px;">
    @endif
@endif
                     @error('image')<p class="text-danger">{{ $message }}</p>@enderror
                        </div>
                    </div>

                    <div class="text-end">
                        
                        <button type="submit" class="btn btn-primary">{{ isset($data) ? __('text.update') : __('text.submit') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- Table End -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<!--script section -->
<script>
   $(document).ready(function () {
       
    
    var selectedProducts = []; // Array to store selected product IDs
    
   @if(isset($product) && count($product) > 0)
        @foreach($product as $prod)
            selectedProducts.push({ id: {{ $prod->productDes_id }}, name: '{{ $prod->name }}' });
        @endforeach

        // Populate selected products container
        selectedProducts.forEach(function (product) {
            var productHtml = '<div class="selected-product" data-product-id="' + product.id + '">' + product.name + 
                ' <button type="button" class="remove-product btn btn-link btn-sm">&times;</button></div>';
            $('.selected-products-container').append(productHtml);
        });
    @endif

    $('#search-input').on('click', function () {
        $('#searchable-dropdown').toggle();
    });

    // Function to update the hidden input with the selected product IDs
    function updateHiddenInput() {
        var productIds = selectedProducts.map(function (product) {
            return product.id;
        });
        $('input[name="productIds"]').val(JSON.stringify(productIds));
    }

    // Function to add selected product to the input box
    function addProduct(selectedOption, selectedProductId) {
        selectedProducts.push({ id: selectedProductId, name: selectedOption });

        // Display selected product in the selected products container
        var productHtml = '<div class="selected-product" data-product-id="' + selectedProductId + '">' + selectedOption + 
            ' <button type="button" class="remove-product btn btn-link btn-sm">&times;</button></div>';
        $('.selected-products-container').append(productHtml);

        // Clear the input field after selecting
        $('#search-input').text('');

        // Hide dropdown after selection
        $('#searchable-dropdown').hide();

        // Update hidden input
        updateHiddenInput();
    }

    // Event handler for clicking on product item
    $('.product-item').on('click', function () {
        var selectedOption = $(this).text();
        var selectedProductId = $(this).data('product-id');

        // Check if the product is already selected
        if (!isSelected(selectedProductId)) {
            addProduct(selectedOption, selectedProductId);
        } else {
            // Product already selected, handle error or alert
            alert('Product already selected.');
        }
    });

    // Event handler for removing selected product
    $('.selected-products-container').on('click', '.remove-product', function () {
        var productId = $(this).parent().data('product-id');

        // Remove product from selectedProducts array
        selectedProducts = selectedProducts.filter(function (product) {
            return product.id !== productId;
        });

        // Remove product from display
        $(this).parent().remove();

        // Update hidden input
        updateHiddenInput();
    });

    // Function to check if product is already selected
    function isSelected(productId) {
        for (var i = 0; i < selectedProducts.length; i++) {
            if (selectedProducts[i].id === productId) {
                return true;
            }
        }
        return false;
    }

    // Event handler for filtering dropdown based on input
    $('#search-input').on('keyup', function () {
        var searchTerm = $(this).val().toLowerCase();
        var hasVisibleOptions = false;

        $('#searchable-dropdown .product-item').each(function () {
            var text = $(this).text().toLowerCase();
            var isVisible = text.indexOf(searchTerm) > -1;
            $(this).toggle(isVisible);
            if (isVisible) hasVisibleOptions = true;
        });

        if (!hasVisibleOptions && searchTerm) {
            $('#error-message').slideDown();
            $('#search-input').addClass('is-invalid');
        } else {
            $('#error-message').slideUp();
            $('#search-input').removeClass('is-invalid');
        }
        
    });
    
     // Form submission validation
    $('form').on('submit', function () {
        return validateForm();
    });

    // Function to validate form submission
    function validateForm() {
        if (selectedProducts.length === 0) {
            alert('At least one product must be selected.');
            return false; // Prevent form submission or action
        }
        return true; // Proceed with form submission or action
    }
    
});

</script>

@endsection