@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 . '.update', $record->id) }} ">
                        <div class="row">
                            {{ csrf_field() }}
                            {{ method_field('PATCH') }}
                            <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="{{ $record->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="{{ $record->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-editors" class="form-control my-editor" name="caption_en" placeholder="Place some text here">{{ $record->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">{{ $record->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="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="{{ $record->icons }}">
                                    @if ($errors->has('icons'))
                                        <span class="help-block text-danger">
                                            <strong>{{ $errors->first('icons') }}</strong>
                                        </span>
                                    @endif
                                </div>
                                <div class="mb-3">
                                <select class="form-control" id="productlink" name="productlink">
                                    <option value="">Select Product</option>
                                    @foreach($products as $product)
                                    <option value="{{$product->id}}" @if ($product->id == $record->productlink) {{ 'selected' }} @endif>{{$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 *</label>
                                    @if ($record->image)
                                        <img src="{{ asset($record->image) }}" alt="..."
                                            style="height: 108px; width:231px" id="hide_image">
                                    @endif
                                    <input id="thumbnail" class="form-control" type="text" name="image"
                                        value="{{ $record->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">
                                            <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="{{ $record->sequence }}">
                                    </select>
                                    @if ($errors->any())
                                        <div>
                                            <span class="text-danger">{{ $errors->first() }}.*</span>
                                        </div>
                                    @endif
                                </div>

                                <div class="form-group">
                                    <label for="status">Status</label>
                                    <select name="status" id="statusid" class="form-control">
                                        <option value="1"
                                            @if ($record->status == '1') {{ 'selected' }} @endif>
                                            {!! PUBLISH !!}</option>
                                        <option value="0"
                                            @if ($record->status == '0') {{ 'selected' }} @endif>
                                            {!! UNPUBLISH !!}</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <button type="submit" class="btn btn-sm btn-fill btn-success">Update</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </section>
    </div>
@endsection
@push('script')
    <script>
        const baseurl = "{{ env('APP_URL') }}";
        fetch(baseurl + '/site/font/icons/selection.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');

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

                // Function to create dropdown items with icons
                function createDropdownItem(icon) {
                    const iconName = `ggicons-${icon.properties.name}`; // Prepend 'ggicons-' to the icon name
                    const formattedIconName = formatIconName(icon.properties.name); // Format the icon name for display
                    const dropdownItem = document.createElement('a');
                    dropdownItem.className = 'dropdown-item text-capitalize';
                    dropdownItem.href = '#';
                    dropdownItem.innerHTML = `<i class="${iconName}"></i> ${formattedIconName}`;
                    dropdownItem.dataset.icon = iconName; // Store the icon name with the prefix 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="${iconName}"></i> ${formattedIconName}`;
                        selectedIconInput.value = iconName; // Set the value of the hidden input

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

                    return dropdownItem;
                }

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

                // 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';
                    });
                });

                // Optional: Set the default selection if any
                const currentSelection = selectedIconInput.value; // Assume this value might be pre-set
                if (currentSelection) {
                    const selectedIcon = document.querySelector(`.dropdown-item[data-icon="${currentSelection}"]`);
                    if (selectedIcon) {
                        const formattedName = formatIconName(currentSelection.replace('ggicons-', ''));
                        iconDropdownButton.innerHTML = `<i class="${currentSelection}"></i> ${formattedName}`;
                        selectedIcon.classList.add('active'); // Highlight the selected item
                    }
                }
            })
            .catch(error => console.error('Error fetching icons:', error));
    </script>
@endpush