@extends('admin.admin_master')
@section('content-header', 'Add Product')
@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') }}">Product</a></li>
                            <li class="breadcrumb-item active">Add New Product</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="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>
                                    <div class="col-lg-3">
                                        <div class="mb-3">
                                            <label for="defaultFormControlInput" class="form-label">Shrot Name English
                                                *</label>
                                            <input type="text" class="form-control" id="shrtcode_en" name="shrtcode_en"
                                                value="{!! old('shrtcode_en') !!}" aria-describedby="shrtcode_enhelp">

                                            @if ($errors->has('shrtcode_en'))
                                                <div id="shrtcode_enhelp" class="form-text text-danger">
                                                    {{ $errors->first('shrtcode_en') }}
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-9">
                                        <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>
                                    <div class="col-lg-3">
                                        <div class="mb-3">
                                            <label for="defaultFormControlInput" class="form-label">Shrot Name Nepali
                                                *</label>
                                            <input type="text" class="form-control" id="shrtcode_np" name="shrtcode_np"
                                                value="{!! old('shrtcode_np') !!}" aria-describedby="shrtcode_nphelp">

                                            @if ($errors->has('shrtcode_np'))
                                                <div id="shrtcode_nphelp" class="form-text text-danger">
                                                    {{ $errors->first('shrtcode_np') }}
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="mb-3">
                                            <label class="control-label" for="title">Short Tag</label>
                                            <textarea class="form-control" name="srtsmry_en">{!! old('srtsmry_en') !!}</textarea>
                                            @if ($errors->has('srtsmry_en'))
                                                <span class="help-block text-danger">
                                                    <strong>{{ $errors->first('srtsmry_en') }}</strong>
                                                </span>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="mb-3">
                                            <label class="control-label" for="title">Short Tag</label>
                                            <textarea class="form-control" name="srtsmry_np">{!! old('srtsmry_np') !!}</textarea>
                                            @if ($errors->has('srtsmry_np'))
                                                <span class="help-block text-danger">
                                                    <strong>{{ $errors->first('srtsmry_np') }}</strong>
                                                </span>
                                            @endif
                                        </div>
                                    </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 class="mb-3">
                                    <label class="control-label" for="benifits_en">Benifits English</label>
                                    <textarea class="form-control tinymce" name="benifits_en">{{ old('benifits_en') }}</textarea>
                                    @if ($errors->has('benifits_en'))
                                        <span class="help-block text-danger">
                                            <strong>{{ $errors->first('benifits_en') }}</strong>
                                        </span>
                                    @endif
                                </div>
                                <div class="mb-3">
                                    <label class="control-label" for="benifits_np">Benifits Nepali</label>
                                    <textarea class="form-control tinymce" name="benifits_np">{{ old('benifits_np') }}</textarea>
                                    @if ($errors->has('benifits_np'))
                                        <span class="help-block text-danger">
                                            <strong>{{ $errors->first('benifits_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 class="control-label">Video</label>

                                    <input id="product-media-file" class="form-control" type="text"
                                        value="{{ old('media') }}" name="media" readonly><br>
                                    <span class="input-group-btn">
                                        <a id="lfm-media" data-input="product-media-file" data-preview="holder"
                                            class="btn btn-info btn-sm fancy">
                                            <i class="fa fa-picture-o"></i> Insert Video
                                        </a>
                                        <a id="remove_image" class="btn btn-danger btn-sm fancy"
                                            onclick="removeImage(this)">
                                            <i class="fa fa-picture-o"></i> Remove Video Image
                                        </a>
                                    </span>
                                    @if ($errors->has('benifits_image'))
                                        <span class="help-block text-danger">
                                            <strong>{{ $errors->first('benifits_image') }}</strong>
                                        </span>
                                    @endif
                                </div>
                                <div class="mb-3">
                                    <label class="control-label">File</label>
                                    $FILEEXISTS$
                                    <input id="file-file" class="form-control" type="text"
                                        value="{{ old('file') }}" name="file" readonly><br>
                                    <span class="input-group-btn">
                                        <a id="lfm-file" data-input="file-file" data-preview="holder"
                                            class="btn btn-info btn-sm fancy">
                                            <i class="fa fa-picture-o"></i> Insert File
                                        </a>
                                        <a id="remove_file" class="btn btn-danger btn-sm fancy"
                                            onclick="removeFile(this)">
                                            <i class="fa fa-picture-o"></i> Remove File
                                        </a>
                                    </span>
                                    @if ($errors->has('file'))
                                        <span class="help-block text-danger">
                                            <strong>{{ $errors->first('file') }}</strong>
                                        </span>
                                    @endif
                                </div>
                                <div class="mb-3">
                                    <label class="control-label">Thumb Image</label>

                                    <input id="thumbnail-image" class="form-control" type="text"
                                        value="{{ old('image') }}" name="image" readonly><br>
                                    <span class="input-group-btn">
                                        <a data-type="image" id="lfm-image" data-input="thumbnail-image"
                                            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(this)">
                                            <i class="fa fa-picture-o"></i> Remove Image
                                        </a>
                                    </span>
                                    @if ($errors->has('image'))
                                        <span class="help-block text-danger">
                                            <strong>{{ $errors->first('image') }}</strong>
                                        </span>
                                    @endif
                                </div>
                                <div class="mb-3">
                                    <label class="control-label">Slider Image</label>

                                    <input id="slider-image" class="form-control" type="text"
                                        value="{{ old('sliderimage') }}" name="sliderimage" readonly><br>
                                    <span class="input-group-btn">
                                        <a data-type="image" id="lfm-image_two" data-input="slider-image"
                                            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(this)">
                                            <i class="fa fa-picture-o"></i> Remove Image
                                        </a>
                                    </span>
                                    @if ($errors->has('sliderimage'))
                                        <span class="help-block text-danger">
                                            <strong>{{ $errors->first('sliderimage') }}</strong>
                                        </span>
                                    @endif
                                </div>
                                <div class="mb-3"><label class="control-label">Details Image</label>

                                    <input id="product-media" class="form-control" type="text"
                                        value="{{ old('benifits_image') }}" name="benifits_image" readonly><br>
                                    <span class="input-group-btn">
                                        <a id="lfm-media" data-input="product-media" 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(this)">
                                            <i class="fa fa-picture-o"></i> Remove Benifits Image
                                        </a>
                                    </span>
                                    @if ($errors->has('benifits_image'))
                                        <span class="help-block text-danger">
                                            <strong>{{ $errors->first('benifits_image') }}</strong>
                                        </span>
                                    @endif
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox"  id="quotebutton"
                                        name="quotebutton" value="1" checked="">
                                    <label class="form-check-label" for="quotebutton">
                                        Enable Quote Button
                                    </label>
                                    @if ($errors->has('quotebutton'))
                                        <span class="help-block text-danger">
                                            <strong>{{ $errors->first('quotebutton') }}</strong>
                                        </span>
                                    @endif
                                </div>
                                <div class="mb-3 from-group">
    <label for="approval_date" class="form-label">Approval Date</label>
    <input type="text"
        name="approval_date"
        id="approval_date"
        class="form-control"
        autocomplete="off"
        value="{{ old('approval_date') ?? ($product->approval_date ?? '') }}">
        
    @if($errors->has('approval_date'))
        <span class="text-danger">{{ $errors->first('approval_date') }}</span>
    @endif
</div>

<div class="mb-3 from-group">
    <label for="revised_date" class="form-label">Revised Date</label>
    <input type="text"
        name="revised_date"
        id="revised_date"
        class="form-control"
        autocomplete="off"
        value="{{ old('revised_date') ?? ($product->revised_date ?? '') }}">
        
    @if($errors->has('revised_date'))
        <span class="text-danger">{{ $errors->first('revised_date') }}</span>
    @endif
</div>
                                <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->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">{!! PUBLISH !!}</option>
                                        <option value="0">{!! UNPUBLISH !!}</option>
                                    </select>
                                </div>
                            </div>







                            <div class="col-lg-3 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>
                        {{ csrf_field() }}
                    </form>
                </div>
            </div>
        </section>
    </div>
@endsection
@push('script')
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
   <script>
$(function () {

    let approvalDate = null;

    // ---------------------------
    // Approval Date Picker
    // ---------------------------
    $('#approval_date').daterangepicker({
        singleDatePicker: true,
        autoApply: true,
        showDropdowns: true,
        autoUpdateInput: false, // prevents auto-fill
        locale: {
            format: 'YYYY-MM-DD',
            cancelLabel: 'Clear'
        }
    });

    // Set existing value if present (edit mode)
    let approvalVal = $('#approval_date').val();
    if (approvalVal) {
        let picker = $('#approval_date').data('daterangepicker');
        picker.setStartDate(approvalVal);
        picker.setEndDate(approvalVal);
        approvalDate = picker.startDate;
    }

    $('#approval_date').on('apply.daterangepicker', function (ev, picker) {
        approvalDate = picker.startDate;
        $(this).val(picker.startDate.format('YYYY-MM-DD'));

        // enable revised date
        $('#revised_date').prop('disabled', false);

        // set min date for revised
        let revisedPicker = $('#revised_date').data('daterangepicker');
        revisedPicker.minDate = approvalDate;
    });

    $('#approval_date').on('cancel.daterangepicker', function () {
        $(this).val('');
        approvalDate = null;

        // reset revised
        $('#revised_date').val('').prop('disabled', true);
    });


    // ---------------------------
    // Revised Date Picker
    // ---------------------------
    $('#revised_date').daterangepicker({
        singleDatePicker: true,
        autoApply: true,
        showDropdowns: true,
        autoUpdateInput: false,
        locale: {
            format: 'YYYY-MM-DD',
            cancelLabel: 'Clear'
        }
    });

    // Disable initially if no approval date
    if (!$('#approval_date').val()) {
        $('#revised_date').prop('disabled', true);
    }

    // Set existing revised value
    let revisedVal = $('#revised_date').val();
    if (revisedVal) {
        let picker = $('#revised_date').data('daterangepicker');
        picker.setStartDate(revisedVal);
        picker.setEndDate(revisedVal);
    }

    $('#revised_date').on('apply.daterangepicker', function (ev, picker) {
        $(this).val(picker.startDate.format('YYYY-MM-DD'));
    });

    $('#revised_date').on('cancel.daterangepicker', function () {
        $(this).val('');
    });

});

      
    </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