@extends('admin.admin_master')
@section('content-header', 'Edit 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">Edit 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 . '.update', $product->id) }}" 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') ?: $product->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') ?: $product->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') ?: $product->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') ?: $product->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') ?: $product->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') ?: $product->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') ?: $product->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') ?: $product->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="title">Benifits English</label>
                                    <textarea class="form-control tinymce" name="benifits_en">{!! old('benifits_en') ?: $product->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="title">Benifits Nepali</label>
                                    <textarea class="form-control tinymce" name="benifits_np">{!! old('benifits_np') ?: $product->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="{{ $product->icons }}">
                                    @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 d-block">Video</label>
                                    @if ($product->media)
                                        <video width="320" height="240" muted autoplay controls>
                                            <source src="{{ asset($product->media) }}" type="video/mp4">

                                            Your browser does not support the video tag
                                        </video>
                                    @endif

                                    <input id="product-media-file" class="form-control" type="text"
                                        value="{!! old('media') ?: $product->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>
                                    @if (!empty($product->file))
                                        <a class="btn btn-info btn-sm fancy" href="{!! $product->file !!}"
                                            role="button" download>Download</a>
                                    @endif
                                    <input id="file-file" class="form-control" type="text"
                                        value="{!! old('file') ?: $product->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 d-block">Thumb Image</label>
                                    @if (!empty($product->image))
                                        <img src="{!! asset("$product->image ") !!}" alt=""
                                            style="height: 108px; width:231px" id="hide_image" />
                                    @endif
                                    <input id="thumbnail-image" class="form-control" type="text"
                                        value="{!! old('image') ?: $product->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 d-block">Slider Image (16:9 Ratio Image)</label>
                                    @if (!empty($product->sliderimage))
                                        <img src="{!! asset("$product->sliderimage ") !!}" alt=""
                                            style="height: 108px; width:231px" id="hide_image" />
                                    @endif
                                    <input id="slider-image" class="form-control" type="text"
                                        value="{!! old('sliderimage') ?: $product->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('slider'))
                                        <span class="help-block text-danger">
                                            <strong>{{ $errors->first('slider') }}</strong>
                                        </span>
                                    @endif
                                </div>



                                <div class="mb-3"><label class="control-label d-block">Details Image</label>
                                    @if (!empty($product->benifits_image))
                                        <img src="{!! asset("$product->benifits_image ") !!}" alt=""
                                            style="height: 108px; width:231px" id="hide_benifits_image" />
                                    @endif
                                    <input id="thumbnail-benifits_image" class="form-control" type="text"
                                        value="{!! old('benifits_image') ?: $product->benifits_image !!}" name="benifits_image" readonly><br>
                                    <span class="input-group-btn">
                                        <a data-type="image" id="lfm-image2" data-input="thumbnail-benifits_image"
                                            data-preview="holder" class="btn btn-info btn-sm fancy">
                                            <i class="fa fa-picture-o"></i> Insert benifits 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="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="form-group">
    <label for="approval_date">Approved Date</label>
    <input class="form-control" 
           type="text" 
           id="approval_date"
           name="approval_date"
           autocomplete="off"
           value="{{ old('approval_date') ?? $product->approval_date ?? '' }}">
</div>

<div class="form-group">
    <label for="revised_date">Revised Date</label>
    <input class="form-control" 
           type="text" 
           id="revised_date"
           name="revised_date"
           autocomplete="off"
           value="{{ old('revised_date') ?? $product->revised_date ?? '' }}">
</div>
                                <div class="form-group">
                                    <label for="sequence">Sequence No.</label>
                                    <input type="text" class="form-control" id="sequence" name="sequence"
                                        value="{{ $product->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 ($product->status == '1') {{ 'selected' }} @endif>
                                            {!! PUBLISH !!}</option>
                                        <option value="0" @if ($product->status == '0') {{ 'selected' }} @endif>
                                            {!! UNPUBLISH !!}</option>
                                    </select>
                                </div>

                                    <div class="mb-3 ">
                                        <button type="submit" class="btn btn-success btn-fill btn-sm ">Submit</button>

                                </div>
                            </div>
                        </div>





                        {!! csrf_field() !!}
                        {!! method_field('PATCH') !!}
                    </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;

    // ---------------------------
    // INIT APPROVAL DATE
    // ---------------------------
    $('#approval_date').daterangepicker({
        singleDatePicker: true,
        autoApply: true,
        showDropdowns: true,
        autoUpdateInput: false, // ✅ CRITICAL
        locale: {
            format: 'YYYY-MM-DD',
            cancelLabel: 'Clear'
        }
    });

    // ---------------------------
    // INIT REVISED DATE
    // ---------------------------
    $('#revised_date').daterangepicker({
        singleDatePicker: true,
        autoApply: true,
        showDropdowns: true,
        autoUpdateInput: false, // ✅ CRITICAL
        locale: {
            format: 'YYYY-MM-DD',
            cancelLabel: 'Clear'
        }
    });

    let approvalPicker = $('#approval_date').data('daterangepicker');
    let revisedPicker  = $('#revised_date').data('daterangepicker');

    // ---------------------------
    // LOAD EXISTING VALUES (EDIT MODE)
    // ---------------------------
    let approvalVal = $('#approval_date').val();
    let revisedVal  = $('#revised_date').val();

    if (approvalVal) {
        approvalPicker.setStartDate(approvalVal);
        approvalPicker.setEndDate(approvalVal);
        approvalDate = approvalPicker.startDate;

        // set minDate for revised
        revisedPicker.minDate = approvalDate;

        // enable revised
        $('#revised_date').prop('disabled', false);
    } else {
        $('#revised_date').prop('disabled', true);
    }

    if (revisedVal) {
        revisedPicker.setStartDate(revisedVal);
        revisedPicker.setEndDate(revisedVal);
    }

    // ---------------------------
    // APPROVAL DATE CHANGE
    // ---------------------------
    $('#approval_date').on('apply.daterangepicker', function (ev, picker) {

        approvalDate = picker.startDate;
        $(this).val(approvalDate.format('YYYY-MM-DD'));

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

        // set min date
        revisedPicker.minDate = approvalDate;

        // clear invalid revised
        let revisedVal = $('#revised_date').val();
        if (revisedVal) {
            let revisedMoment = moment(revisedVal, 'YYYY-MM-DD');
            if (revisedMoment.isBefore(approvalDate)) {
                $('#revised_date').val('');
            }
        }
    });

    // ---------------------------
    // CLEAR APPROVAL
    // ---------------------------
    $('#approval_date').on('cancel.daterangepicker', function () {

        $(this).val('');
        approvalDate = null;

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

    // ---------------------------
    // REVISED DATE CHANGE
    // ---------------------------
    $('#revised_date').on('apply.daterangepicker', function (ev, picker) {

        let selected = picker.startDate;

        if (approvalDate && selected.isBefore(approvalDate)) {
            alert('Revised date cannot be before approval date');
            $(this).val('');
            return;
        }

        $(this).val(selected.format('YYYY-MM-DD'));
    });

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

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