@extends('administrator.layout')
@section('admintitle', 'Listing')
@section('content')

            <!-- 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.track') }}</h5></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
                                                
                                                                     
                            <div class="row mb-3">
                            <label for="inputlname" class="col-sm-2 col-form-label">{{ __('text.trackgen') }}<span class="text-danger">*</span></label>
                         <div class="col-sm-10">
                                                        
            <input type="text" class="form-control" id="search-input" >
    <div class="error-message mb-2" id="error-message" style="display: none;">No results found.</div>
    <div id="searchable-dropdown" class="dropdown-menu" style="display: none;">
      @foreach($product as $p)
    <a class="dropdown-item" id="product_drop" href="#" data-product-id="{{ $p->product_id }}">{{ $p->name }}</a>
@endforeach
    </div>

     </div>
                 </div>                             
                                                
                                                <div class="row mb-3">
    <label for="inputfname" class="col-sm-2 col-form-label">{{ __('text.track') }}<span class="text-danger">*</span></label>
    <div class="col-sm-10">
        <textarea rows="4" cols="50" class="form-control" id="Porductlinks" name="Porductlinks"></textarea>
    </div>
</div>

                          
    
                                              

                                                <div class="text-end">
                                                <button type="reset" class="btn btn-secondary">{{ __('text.reset') }}</button>
                                                <button type="submit" class="btn btn-primary">{{ __('text.submit') }}</button>
                                                </div>
                                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Table End -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script>
       $(document).ready(function () {
    $('#search-input').on('click', function() {
        $('#searchable-dropdown').toggle();
    });

    $('#search-input').on('keyup', function() {
        var searchTerm = $(this).val().toLowerCase();
        var hasVisibleOptions = false;

        $('#searchable-dropdown a').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');
        }
    });

    $('#searchable-dropdown a').on('click', function() {
       
        var selectedOption = $(this).text();
        
        $('#search-input').val(selectedOption);
        
     var selectedProductId = $(this).data('product-id');
        

      var staticText = "https://ulevel.multishippers.com/product/details/";

    var combinedValue = staticText + selectedProductId;
    
    $('#Porductlinks').val(combinedValue);

        
        //  $('#Porductlinks').val(selectedOption);
         
         $('#searchable-dropdown').hide();
    });
});

    </script>
@endsection