@extends('admin.admin_master')
@section('content-header', 'Add CompanyStat')
@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="{!! route('dashboard') !!}">Home</a></li>
                            <li class="breadcrumb-item"><a href="{{ route($link . '.index') }}">CompanyStat</a></li>
                            <li class="breadcrumb-item active">Add New CompanyStat</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') }}" autocomplete="off"
                        enctype="multipart/form-data">
                        <div class="row">

                            <div class="col-lg-9">
                                <div class="mb-3">
                                    <label for="defaultFormControlInput" class="form-label">Title English *</label>
                                    <input type="text" class="form-control" id="title_en" name="title_en"
                                        value="{{ old('title_en') }}" aria-describedby="title_enhelp">

                                    @if ($errors->has('title_en'))
                                        <div id="title_enhelp" class="form-text text-danger">
                                            {{ $errors->first('title_en') }}
                                        </div>
                                    @endif
                                </div>

                                <div class="mb-3">
                                    <label for="defaultFormControlInput" class="form-label">Title Nepali *</label>
                                    <input type="text" class="form-control" id="title_np" name="title_np"
                                        value="{{ old('title_np') }}" aria-describedby="title_nphelp">

                                    @if ($errors->has('title_np'))
                                        <div id="title_nphelp" class="form-text text-danger">
                                            {{ $errors->first('title_np') }}
                                        </div>
                                    @endif
                                </div>
                                <div class="row">
                                    <div class="col-lg-6 mb-3">
                                        <label for="defaultFormControlInput" class="form-label">Count *</label>
                                        <input type="text" class="form-control" id="count" name="count"
                                            value="{{ old('count') }}" aria-describedby="counthelp">

                                        @if ($errors->has('count'))
                                            <div id="counthelp" class="form-text text-danger">{{ $errors->first('count') }}
                                            </div>
                                        @endif
                                    </div>

                                    <div class="col-lg-6 mb-3">
                                        <label for="defaultFormControlInput" class="form-label">Unit</label>
                                        <input type="text" class="form-control" id="unit" name="unit"
                                            value="{{ old('unit') }}" aria-describedby="unithelp">

                                        @if ($errors->has('unit'))
                                            <div id="unithelp" class="form-text text-danger">{{ $errors->first('unit') }}
                                            </div>
                                        @endif
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label class="control-label" for="title">Description English</label>
                                    <textarea class="form-control tinymce" name="description_en">{{ old('description_en') }}</textarea>
                                    @if ($errors->has('description_en'))
                                        <span class="help-block text-danger">
                                            <strong>{{ $errors->first('description_en') }}</strong>
                                        </span>
                                    @endif
                                </div>
                                <div class="mb-3">
                                    <label class="control-label" for="title">Description Nepali</label>
                                    <textarea class="form-control tinymce" name="description_np">{{ old('description_np') }}</textarea>
                                    @if ($errors->has('description_np'))
                                        <span class="help-block text-danger">
                                            <strong>{{ $errors->first('description_np') }}</strong>
                                        </span>
                                    @endif
                                </div>
                            </div>

                            <div class="col-lg-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="">
                                    @if ($errors->has('icons'))
                                        <span class="help-block text-danger">
                                            <strong>{{ $errors->first('icons') }}</strong>
                                        </span>
                                    @endif
                                </div>






                                <div class="mb-3">
                                    <label for="status">Status *</label>
                                    <select name="status" id="status" class="form-control">
                                        <option value="">Please Select</option>@php $selected = old("status") @endphp
                                        <option value="1">Publish</option>
                                        <option value="0">UnPublish</option>
                                    </select>
                                    @if ($errors->has('status'))
                                        <span class="help-block text-danger">
                                            <strong>{{ $errors->first('status') }}</strong>
                                        </span>
                                    @endif
                                </div>


                                <div class="mb-3">
                                    <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>
                        {{ csrf_field() }}
                    </form>
                </div>
            </div>
        </section>
    </div>
@endsection
@push('script')
    <script>
        fetch('https://raw.githubusercontent.com/twbs/icons/main/font/bootstrap-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