@extends('admin.admin_master')
@section('content-header', $page_header)
@section('content')

    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-left">
                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                            <li class="breadcrumb-item active">Slider</li>
                        </ol>
                    </div>
                    <div class="col-sm-6">
                        <span class="float-right"><a href="{{ route($link . '.index') }}"
                                class="btn btn-sm btn-fill btn-warning">{!! VIEWLIST_ICON !!}</a></span>
                    </div>
                </div>
            </div>
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="card card-primary">
                <div class="card-body">
                    <form method="POST" action="{{ route($link . '.store') }}">
                        <div class="row">
                            {{ csrf_field() }}
                            <div class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
                                <div class="form-group">
                                    <label class="control-label" for="title_en">Title English *</label>
                                    <input type="text" class="form-control" id="title_en" name="title_en"
                                        value="{{ old('title_en') }}">
                                    @if ($errors->has('title_en'))
                                        <span class="help-block text-danger">
                                            <strong>{{ $errors->first('title_en') }}</strong>
                                        </span>
                                    @endif
                                </div>
                                <div class="form-group">
                                    <label class="control-label" for="title_np">Title Nepali *</label>
                                    <input type="text" class="form-control" id="title_np" name="title_np"
                                        value="{{ old('title_np') }}">
                                    @if ($errors->has('title_np'))
                                        <span class="help-block text-danger">
                                            <strong>{{ $errors->first('title_np') }}</strong>
                                        </span>
                                    @endif
                                </div>
                                <div class="form-group">
                                    <label class="control-label" for="caption_en">Caption English</label>
                                    <br>
                                    <textarea id="my-editor" class="form-control my-editor" name="caption_en" placeholder="Place some text here">{{ old('caption_en') }}</textarea>
                                    @if ($errors->has('caption_en'))
                                        <span class="help-block text-danger">
                                            <strong>{{ $errors->first('caption_en') }}</strong>
                                        </span>
                                    @endif
                                </div>
                                <div class="form-group">
                                    <label class="control-label" for="caption_np">Caption Nepali</label>
                                    <br>
                                    <textarea id="my-editor" class="form-control my-editor" name="caption_np" placeholder="Place some text here">{{ old('caption_np') }}</textarea>
                                    @if ($errors->has('caption_np'))
                                        <span class="help-block text-danger">
                                            <strong>{{ $errors->first('caption_np') }}</strong>
                                        </span>
                                    @endif
                                </div>
                            </div>
                            <div class="col-md-3">

                                {{-- <div class="form-group">
                            <label>Image - Recommended Size (1920*470)</label>
                            <img src="{{ asset('admin/images/no-image.png', $secure = null) }}" alt="" title="" class="fancybox" id="prev_img" />
                            @if ($errors->has('image'))
                            <span class="help-block text-danger">
                                <strong>{{ $errors->first('image') }}</strong>
                            </span>
                            @endif
                            <a href="" data-fancybox-type="iframe" class="btn btn-sm btn-info fancy">Insert</a>
                            <button class="btn btn-sm btn-danger remove_box_image" type="button">Remove</button>
                            <button class="btn btn-sm btn-warning prev_box_image" type="button" style="display: none;">Previous Image</button>
                            <input type="hidden" value="{{ isset($record->image)?$record->image:'' }}"  name="image" class="form-control" id="image">
                        </div> --}}

                                <div class="mb-3">
                                    <label for="icons" class="d-block">Icons *</label>
                                    <div class="dropdown">
                                        <button class="btn btn-primary dropdown-toggle btn-block text-capitalize text-start"
                                            type="button" id="iconDropdownButton" data-toggle="dropdown"
                                            aria-expanded="false">
                                            Select an icon...
                                        </button>
                                        <div class="dropdown-menu p-2" id="iconDropdown">
                                            <input type="text" class="form-control mb-2" id="iconSearch"
                                                placeholder="Search for an icon...">
                                            <div id="iconList" class="dropdown-item-container"
                                                style="max-height: 400px; overflow-y:auto; ">
                                                <!-- Icons will be dynamically inserted here -->
                                            </div>
                                        </div>
                                    </div>
                                    <input type="hidden" name="icons" id="selectedIcon" value="">
                                    @if ($errors->has('icons'))
                                        <span class="help-block text-danger">
                                            <strong>{{ $errors->first('icons') }}</strong>
                                        </span>
                                    @endif
                                </div>
                                <div class="mb-3">
                                    <label for="productlink">Show detail Page of</label>
                                    <select class="form-control" id="productlink" name="productlink">
                                        <option value="">Select Product</option>
                                        @foreach($products as $product)
                                        <option value="{{$product->id}}">{{$product->title_en}}</option>
                                        @endforeach
                                        </select>
                                        @if ($errors->has('productlink'))
                                        <span class="help-block text-danger">
                                            <strong>{{ $errors->first('productlink') }}</strong>
                                            </span>
                                            @endif

                                </div>

                                <div class="form-group">
                                    <label class="control-label">Image-Recommended Size (1930*695) *</label>
                                    <div id="holder" style="margin-top:15px;max-height:100px;"></div>
                                    <input id="thumbnail" class="form-control" type="text" name="image" readonly><br>
                                    <span class="input-group-btn">
                                        <a data-type="image" id="lfm-image" data-input="thumbnail" data-preview="holder"
                                            class="btn btn-info btn-sm fancy" data-fancybox-type="iframe">
                                            <i class="fa fa-picture-o"></i> insert image
                                        </a>
                                        <a id="remove_image" class="btn btn-danger btn-sm fancy" onclick="removeImage()">
                                            <i class="fa fa-picture-o"></i> remove image
                                        </a>
                                    </span>
                                </div>
                                {{-- <img id="holder" style="margin-top:15px;max-height:100px;"> --}}
                                <div class="form-group">
                                    <label for="sequence">Sequence No.</label>
                                    <input type="text" class="form-control" id="sequence" name="sequence"
                                        value="{{ old('sequence') }}">
                                    </select>
                                    @if ($errors->has('sequence'))
                                        <span class="help-block text-danger">
                                            <strong>{{ $errors->first('sequence') }}</strong>
                                            </span>
                                            @endif
                                </div>

                                <div class="form-group">
                                    <label for="status">Status</label>
                                    <select name="status" id="statusid" class="form-control">
                                        <option value="1">{!! PUBLISH !!}</option>
                                        <option value="0">{!! UNPUBLISH !!}</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <button type="submit" class="btn btn-success btn-fill btn-sm ">Submit</button>
                                    <button type="reset" class="btn btn-danger btn-fill btn-sm  resetbtn">Clear</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </section>
    </div>
@endsection
@push('script')
<script>
    const baseurl = "{{ env('APP_URL') }}";
    fetch(baseurl + '/icons.json')
        .then(response => response.json())
        .then(data => {
            const iconList = document.getElementById('iconList');
            const iconDropdownButton = document.getElementById('iconDropdownButton');
            const selectedIconInput = document.getElementById('selectedIcon');
            const iconSearch = document.getElementById('iconSearch');
            const currentSelection = selectedIconInput.value.replace('bi-', ''); // Extract icon name without 'bi-'

            // Function to format the icon name (remove hyphens)
            function formatIconName(icon) {
                return icon.replace(/-/g, ' '); // Replace hyphens with spaces for display
            }

            // Function to create dropdown items with icons
            function createDropdownItem(icon) {
                const formattedIconName = formatIconName(icon);
                const dropdownItem = document.createElement('a');
                dropdownItem.className = 'dropdown-item text-capitalize';
                dropdownItem.href = '#';
                dropdownItem.innerHTML = `<i class="bi-${icon}"></i> ${formattedIconName}`;
                dropdownItem.dataset.icon = icon; // Store the original icon name with hyphens in a data attribute

                // Add click event to update the button text and hidden input
                dropdownItem.addEventListener('click', function(event) {
                    event.preventDefault(); // Prevent the default link behavior

                    // Remove highlight from previously selected item
                    const previousSelection = iconList.querySelector('.dropdown-item.active');
                    if (previousSelection) {
                        previousSelection.classList.remove('active');
                    }

                    // Update the button text and hidden input
                    iconDropdownButton.innerHTML = `<i class="bi-${icon}"></i> ${formattedIconName}`;
                    selectedIconInput.value = `bi-${icon}`; // Set the value of the hidden input

                    // Highlight the newly selected item
                    dropdownItem.classList.add('active');
                });

                // Highlight the selected item if it matches the current value
                if (icon === currentSelection) {
                    dropdownItem.classList.add('active');
                }

                return dropdownItem;
            }

            // Populate the dropdown with icons
            Object.keys(data).forEach(icon => {
                iconList.appendChild(createDropdownItem(icon));
            });

            // Set the button text and highlight the selected item if applicable
            if (currentSelection) {
                const selectedIcon = document.querySelector(`.dropdown-item[data-icon="${currentSelection}"]`);
                if (selectedIcon) {
                    const formattedName = formatIconName(currentSelection);
                    iconDropdownButton.innerHTML = `<i class="bi-${currentSelection}"></i> ${formattedName}`;
                    selectedIcon.classList.add('active'); // Highlight the selected item
                }
            }

            // Add search functionality
            iconSearch.addEventListener('input', function() {
                const searchTerm = this.value.toLowerCase();
                const items = iconList.getElementsByTagName('a');
                Array.from(items).forEach(function(item) {
                    const iconName = formatIconName(item.dataset.icon).toLowerCase();
                    item.style.display = iconName.includes(searchTerm) ? '' : 'none';
                });
            });
        })
        .catch(error => console.error('Error fetching icons:', error));
</script>
@endpush