@extends('admin.layouts.app')
@section('panel')
    <div class="row mb-none-30">
        <div class="col-lg-12 col-md-12 mb-30">
            <div class="card">
                <div class="card-body">
                    <form id="CreateManualOrder" method="POST" enctype="multipart/form-data">

                        @csrf
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="demo_link" class="font-weight-bold">@lang('Name')</label>
                                    <input type="text" name="name" class="form-control" value="{{old("name",$option->title)}}"/>
                                    <input type="hidden" name="id" value="{{$option->id}}"/>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="input_type" class="font-weight-bold">@lang('Type')</label>
                                    @php
                                        $inputType = strtolower(old('input_type', $option->input_type ?? ''));
                                        if ($inputType === 'chekbox') {
                                            $inputType = 'checkbox';
                                        }
                                    @endphp
                                    <select class="select2-basic" name="input_type" id="input_type" style="z-index: 0">
                                        <option value="radio" @selected($inputType === 'radio')>@lang('Radio')</option>
                                        <option value="checkbox" @selected($inputType === 'checkbox')>@lang('Checkbox')</option>
                                        <option value="select" @selected($inputType === 'select')>@lang('Select')</option>
                                        <option value="text" @selected($inputType === 'text')>@lang('Text')</option>
                                        <option value="number" @selected($inputType === 'number')>@lang('Number')</option>
                                        <option value="level" @selected($inputType === 'level')>@lang('Level/Range')</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-6 level-only" style="display:none;">
                                <div class="form-group">
                                    <label for="ui_mode" class="font-weight-bold">@lang('Level UI Mode')</label>
                                    <select class="select2-basic" name="ui_mode" id="ui_mode" style="z-index: 0">
                                        <option value="dropdown" @selected(old('ui_mode', $option->ui_mode) === 'dropdown')>@lang('Dropdown')</option>
                                        <option value="slider" @selected(old('ui_mode', $option->ui_mode) === 'slider')>@lang('Slider')</option>
                                        <option value="range" @selected(old('ui_mode', $option->ui_mode) === 'range')>@lang('Range')</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="status"
                                           class="font-weight-bold">@lang('Status')</label>
                                    <br/>

                                    <label class="switch">
                                        <input type="checkbox" class="toggle-switch"
                                               name="status"
                                               @checked(old('status', $option->status))
                                        >
                                        <span class="slider round"></span>
                                    </label>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="status"
                                           class="font-weight-bold">@lang('Show As Filter')</label>
                                    <br/>

                                    <label class="switch">
                                        <input type="checkbox" class="toggle-switch"
                                               name="show_as_filter"
                                               @checked(old('show_as_filter', $option->show_as_filter))
                                        >
                                        <span class="slider round"></span>
                                    </label>
                                </div>
                            </div>
                            <div class="col-lg-12 level-only" style="display:none;">
                                <div class="border rounded p-3">
                                    <div class="fw-bold mb-2">@lang('Level Config (Optional)')</div>
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <label for="config_min_label" class="font-weight-bold">@lang('Min Label')</label>
                                                <input type="text" id="config_min_label" class="form-control" />
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <label for="config_max_label" class="font-weight-bold">@lang('Max Label')</label>
                                                <input type="text" id="config_max_label" class="form-control" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <label for="config_step_label_format" class="font-weight-bold">@lang('Step Label Format')</label>
                                                <input type="text" id="config_step_label_format" class="form-control" placeholder="@lang('Example: Level {value}')" />
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <label class="font-weight-bold">@lang('Show Ticks')</label>
                                                <div>
                                                    <label class="switch">
                                                        <input type="checkbox" id="config_show_ticks">
                                                        <span class="slider round"></span>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <div class="form-group">
                                                <label for="config_level_values" class="font-weight-bold">@lang('Level Values')</label>
                                                <input type="text" id="config_level_values" class="form-control" placeholder="@lang('Example: Bronze, Silver, Gold')" />
                                                <small class="text-muted">@lang('Comma-separated values stored in config_json.level_values')</small>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group mb-0">
                                        <label for="config_json" class="font-weight-bold">@lang('Config JSON (advanced)')</label>
                                        <textarea name="config_json" id="config_json" class="form-control" rows="3">{{ old('config_json', $option->config_json) }}</textarea>
                                        <small class="text-muted">@lang('Builder fields update this JSON; edit to add extra keys if needed.')</small>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <hr/>
                        <div class="alert alert--info level-only" style="display:none;">
                            @lang('Level seller types use ranges; no items are required.')
                        </div>
                        <div id="sellerTypeItemsSection">
                            <div class="row">
                            <span class="text-center text-muted fw-bolder">
                                    Options Item
                                </span>
                            </div>

                            <div class="col-sm-12">

                                <div class="table-responsive--sm table-responsive my-4">
                                    <table class='table table--light style--two custom-data-table' id="myTable">
                                        <thead></thead>
                                        <tr>
                                            <td>value</td>
                                            <td>SVG Icon (drag & drop)</td>


                                            <td>Action</td>
                                        </tr>
                                        </tbody>
                                        <tbody id="FeatureBody">
                                        @php
                                            $i=0;
                                        @endphp
                                        @foreach($option->item as $item)
                                        <tr>
                                            <td>

                                                <input type='hidden' class='form-control'
                                                       name='item[{{$i}}][id]'
                                                       value="{{$item->id}}"/>
                                                <input type='text' class='form-control'
                                                       name='item[{{$i}}][value]'
                                                       value="{{$item->value}}"/>
                                            </td>
                                             <td>
                                                <div class="icon-upload-dropzone js-icon-dropzone">
                                                    <input type="file" accept=".svg,image/svg+xml" class="d-none js-icon-file"
                                                        id="item_{{$i}}_icon_file" name="item[{{$i}}][icon_file]">
                                                    <div class="icon-upload-label js-icon-upload-label">
                                                        {{ $item->icon ? 'Current: ' . $item->icon : 'Drop SVG here or click to upload' }}
                                                    </div>
                                                    <input type='text' class='form-control mt-2'
                                                           name='item[{{$i}}][componentName]'
                                                           value="{{$item->icon}}"
                                                           placeholder="Or paste icon path (optional)"/>
                                                </div>

            </td>

                                            <td>
                                                <div class='btn btn-danger  disabled' disabled="disabled">Remove</div>
                                            </td>
                                        </tr>
                                        @php
                                            $i++;
                                        @endphp
                                        @endforeach
                                        </tbody>

                                    </table>

                                </div>
                                <div class="row">
                                    <div class="btn btn--primary" id="AddFeature">Add Option Item</div>
                                </div>
                            </div>
                        </div>


                        <div class="row my-5">
                            <div class="col text-end">
                                <button type="submit" class="btn btn--primary btn-global">@lang('Update')</button>
                            </div>
                        </div>
                    </form>

                    <div id="loadingSpinnerWrapper">
                        <div id="loadingSpinner"></div>
                        <div id="spinnerPercentage">0%</div>
                    </div>

                </div>
            </div>
        </div>
    </div>
@endsection

@push('breadcrumb-plugins')
    <a href="{{route('admin.seller-type.index')}}" class="btn btn-sm btn--primary ">@lang('Back')</a>
@endpush

@push('style')
    <style>
        .select2-container{
            z-index: 0!important;
        }
        .ck.ck-editor__main > .ck-editor__editable {
            min-height: 131px;
        }

        #loadingSpinnerWrapper {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: none;
            justify-content: center;
            align-items: center;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 9999;
            width: 100%;
            height: 100vh;
        }


        #loadingSpinner {
            position: relative;
            width: 60px;
            height: 60px;
            border: 4px solid #f3f3f3;
            border-top: 4px solid #3498db;
            border-radius: 50%;
            animation: spin 2s linear infinite;
            z-index: 999999;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }


        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

        #spinnerPercentage {
            position: absolute;
            top: 52%;
            left: 51%;
            font-size: 14px;
            color: white;
        }

        .icon-upload-dropzone {
            border: 1px dashed #8a99b5;
            border-radius: 8px;
            padding: 10px;
            background: #f7f9fc;
            cursor: pointer;
            transition: border-color .15s ease, background-color .15s ease;
        }

        .icon-upload-dropzone.is-dragover {
            border-color: #5b6cfe;
            background: #eef1ff;
        }

        .icon-upload-label {
            font-size: 12px;
            color: #6c757d;
            margin-bottom: 6px;
            word-break: break-all;
        }
    </style>
@endpush



@push('script')
    <script>
        $(document).ready(function () {
            var input = $('#filterInput');
            var table = $('#myTable');

            input.on('keyup', function () {
                var filterValue = $(this).val().toLowerCase();
                table.find('tbody tr').filter(function () {
                    $(this).toggle($(this).text().toLowerCase().indexOf(filterValue) > -1);
                });
            });

            var input2 = $('#filterInput2');
            var table2 = $('#myTable2');

            input2.on('keyup', function () {
                var filterValue = $(this).val().toLowerCase();
                table2.find('tbody tr').filter(function () {
                    $(this).toggle($(this).text().toLowerCase().indexOf(filterValue) > -1);
                });
            });

            function updateInputTypeUI() {
                var inputType = $('#input_type').val();
                var showItems = ['radio', 'checkbox', 'select'].includes(inputType);
                if (inputType === 'level') {
                    $('.level-only').show();
                    $('#sellerTypeItemsSection').hide();
                } else {
                    $('.level-only').hide();
                    if (showItems) {
                        $('#sellerTypeItemsSection').show();
                    } else {
                        $('#sellerTypeItemsSection').hide();
                    }
                }
            }

            function parseConfigJson(raw) {
                if (!raw) {
                    return {};
                }
                try {
                    return JSON.parse(raw);
                } catch (e) {
                    return {};
                }
            }

            function syncFieldsFromConfig() {
                var config = parseConfigJson($('#config_json').val());
                $('#config_min_label').val(config.min_label || '');
                $('#config_max_label').val(config.max_label || '');
                $('#config_step_label_format').val(config.step_label_format || '');
                $('#config_show_ticks').prop('checked', !!config.show_ticks);
                var levelValues = Array.isArray(config.level_values) ? config.level_values : [];
                var normalized = levelValues.map(function(value) {
                    if (value === null || value === undefined) {
                        return '';
                    }
                    if (typeof value === 'object') {
                        return value.label || value.value || '';
                    }
                    return String(value);
                }).filter(Boolean);
                $('#config_level_values').val(normalized.join(', '));
            }

            function syncConfigJsonFromFields() {
                var config = parseConfigJson($('#config_json').val());
                var minLabel = ($('#config_min_label').val() || '').trim();
                var maxLabel = ($('#config_max_label').val() || '').trim();
                var stepFormat = ($('#config_step_label_format').val() || '').trim();
                var levelValuesRaw = ($('#config_level_values').val() || '').split(',');
                var levelValues = levelValuesRaw.map(function(value) {
                    return value.trim();
                }).filter(Boolean);

                if (minLabel) {
                    config.min_label = minLabel;
                } else {
                    delete config.min_label;
                }
                if (maxLabel) {
                    config.max_label = maxLabel;
                } else {
                    delete config.max_label;
                }
                if (stepFormat) {
                    config.step_label_format = stepFormat;
                } else {
                    delete config.step_label_format;
                }

                if ($('#config_show_ticks').is(':checked')) {
                    config.show_ticks = true;
                } else {
                    delete config.show_ticks;
                }

                if (levelValues.length) {
                    config.level_values = levelValues;
                } else {
                    delete config.level_values;
                }

                var keys = Object.keys(config);
                $('#config_json').val(keys.length ? JSON.stringify(config, null, 2) : '');
            }

            function bindIconDropzone($dropzone) {
                if (!$dropzone.length || $dropzone.data('bound')) {
                    return;
                }

                var $fileInput = $dropzone.find('.js-icon-file');
                var $label = $dropzone.find('.js-icon-upload-label');
                var defaultText = 'Drop SVG here or click to upload';
                $dropzone.data('bound', true);

                function setLabelFromFile(file) {
                    if (file && file.name) {
                        $label.text(file.name);
                    } else if (!$label.text().trim()) {
                        $label.text(defaultText);
                    }
                }

                function isSvgFile(file) {
                    if (!file) {
                        return false;
                    }
                    var name = (file.name || '').toLowerCase();
                    return file.type === 'image/svg+xml' || name.endsWith('.svg');
                }

                $dropzone.on('click', function(event) {
                    if ($(event.target).is('input[type="text"]')) {
                        return;
                    }
                    $fileInput.trigger('click');
                });

                $fileInput.on('change', function() {
                    var file = this.files && this.files[0];
                    if (file && !isSvgFile(file)) {
                        this.value = '';
                        Toast.fire({
                            icon: 'error',
                            title: 'Only SVG files are allowed'
                        });
                        return;
                    }
                    setLabelFromFile(file);
                });

                $dropzone.on('dragover', function(event) {
                    event.preventDefault();
                    event.stopPropagation();
                    $dropzone.addClass('is-dragover');
                });

                $dropzone.on('dragleave', function(event) {
                    event.preventDefault();
                    event.stopPropagation();
                    $dropzone.removeClass('is-dragover');
                });

                $dropzone.on('drop', function(event) {
                    event.preventDefault();
                    event.stopPropagation();
                    $dropzone.removeClass('is-dragover');

                    var originalEvent = event.originalEvent;
                    var files = originalEvent && originalEvent.dataTransfer ? originalEvent.dataTransfer.files : null;
                    if (!files || !files.length) {
                        return;
                    }

                    var file = files[0];
                    if (!isSvgFile(file)) {
                        Toast.fire({
                            icon: 'error',
                            title: 'Only SVG files are allowed'
                        });
                        return;
                    }

                    if (typeof DataTransfer !== 'undefined') {
                        var transfer = new DataTransfer();
                        transfer.items.add(file);
                        $fileInput[0].files = transfer.files;
                    }
                    $fileInput.trigger('change');
                });
            }

            updateInputTypeUI();
            syncFieldsFromConfig();
            $('#input_type').on('change', function () {
                updateInputTypeUI();
            });

            $('#config_min_label, #config_max_label, #config_step_label_format, #config_level_values').on('input', syncConfigJsonFromFields);
            $('#config_show_ticks').on('change', syncConfigJsonFromFields);
            $('#config_json').on('blur', syncFieldsFromConfig);
            $('.js-icon-dropzone').each(function() {
                bindIconDropzone($(this));
            });
        });
        let count= {{count($option->item)}};
        $(document).on("click", "#AddFeature", function () {
             let tr = `
        <tr>
            <td>
                <input type='text' class='form-control' name='item[${count}][value]' placeholder='Enter value' />
            </td>
            <td>
                 <div class="icon-upload-dropzone js-icon-dropzone">
                     <input type="file" accept=".svg,image/svg+xml" class="d-none js-icon-file" id="item_${count}_icon_file" name="item[${count}][icon_file]">
                     <div class="icon-upload-label js-icon-upload-label">Drop SVG here or click to upload</div>
                     <input type='text' class='form-control mt-2' name='item[${count}][componentName]' placeholder='Or paste icon path (optional)'/>
                 </div>
            </td>
            <td>
                <div class='btn btn-danger deleteFeature'>Remove</div>
            </td>
        </tr>
    `;
            $("#FeatureBody").append(tr);
            $("#FeatureBody tr:last .js-icon-dropzone").each(function() {
                var $dropzone = $(this);
                if ($dropzone.data('bound')) {
                    return;
                }
                var $fileInput = $dropzone.find('.js-icon-file');
                var $label = $dropzone.find('.js-icon-upload-label');
                var defaultText = 'Drop SVG here or click to upload';
                $dropzone.data('bound', true);

                function setLabelFromFile(file) {
                    if (file && file.name) {
                        $label.text(file.name);
                    } else {
                        $label.text(defaultText);
                    }
                }

                function isSvgFile(file) {
                    if (!file) {
                        return false;
                    }
                    var name = (file.name || '').toLowerCase();
                    return file.type === 'image/svg+xml' || name.endsWith('.svg');
                }

                $dropzone.on('click', function(event) {
                    if ($(event.target).is('input[type="text"]')) {
                        return;
                    }
                    $fileInput.trigger('click');
                });
                $fileInput.on('change', function() {
                    var file = this.files && this.files[0];
                    if (file && !isSvgFile(file)) {
                        this.value = '';
                        setLabelFromFile(null);
                        Toast.fire({
                            icon: 'error',
                            title: 'Only SVG files are allowed'
                        });
                        return;
                    }
                    setLabelFromFile(file);
                });
                $dropzone.on('dragover', function(event) {
                    event.preventDefault();
                    event.stopPropagation();
                    $dropzone.addClass('is-dragover');
                });
                $dropzone.on('dragleave', function(event) {
                    event.preventDefault();
                    event.stopPropagation();
                    $dropzone.removeClass('is-dragover');
                });
                $dropzone.on('drop', function(event) {
                    event.preventDefault();
                    event.stopPropagation();
                    $dropzone.removeClass('is-dragover');
                    var originalEvent = event.originalEvent;
                    var files = originalEvent && originalEvent.dataTransfer ? originalEvent.dataTransfer.files : null;
                    if (!files || !files.length) {
                        return;
                    }
                    var file = files[0];
                    if (!isSvgFile(file)) {
                        Toast.fire({
                            icon: 'error',
                            title: 'Only SVG files are allowed'
                        });
                        return;
                    }
                    if (typeof DataTransfer !== 'undefined') {
                        var transfer = new DataTransfer();
                        transfer.items.add(file);
                        $fileInput[0].files = transfer.files;
                    }
                    $fileInput.trigger('change');
                });
            });
            count++;
        })
        $(document).on("click", ".deleteFeature", function () {
            $(this).closest("tr").remove();
        })
    </script>
    <script>
        $('#CreateManualOrder').submit(function (e) {

            e.preventDefault();

            var formData = new FormData(this);
            var inputType = String($('#input_type').val() || '').toLowerCase();
            if (inputType !== 'level') {
                formData.set('ui_mode', '');
                formData.set('config_json', '');
            } else {
                var uiMode = String($('#ui_mode').val() || '').toLowerCase().trim();
                if (uiMode === 'drop_down' || uiMode === 'drop-down' || uiMode === 'select' || uiMode === 'list') {
                    uiMode = 'dropdown';
                } else if (uiMode === 'slide') {
                    uiMode = 'slider';
                } else if (uiMode === 'range_slider' || uiMode === 'range-slider' || uiMode === 'between') {
                    uiMode = 'range';
                }
                if (!['dropdown', 'slider', 'range'].includes(uiMode)) {
                    uiMode = 'dropdown';
                }
                formData.set('ui_mode', uiMode);
            }


            var loadingSpinnerWrapper = $('#loadingSpinnerWrapper');
            var loadingSpinner = $('#loadingSpinner');
            var spinnerPercentage = $('#spinnerPercentage');

            loadingSpinnerWrapper.fadeIn();
            loadingSpinner.css('opacity', '1');

            var xhr = new XMLHttpRequest();

            xhr.upload.addEventListener("progress", function (event) {
                if (event.lengthComputable) {
                    var progress = Math.round((event.loaded / event.total) * 100);
                    spinnerPercentage.text(progress + '%');
                }
            });

           xhr.open("POST", "{{ route('admin.seller-type.update', ['id' => $option->id]) }}");


            // Success
            xhr.onload = function () {
                if (xhr.status === 200) {
                    var response = JSON.parse(xhr.responseText);
                    if (response.hasOwnProperty('message')) {
                        Toast.fire({
                            icon: 'success',
                            title: response.message
                        });
                    }

                    loadingSpinnerWrapper.fadeOut();
                    window.location.href = '{{route("admin.seller-type.index")}}';

                } else if (xhr.status === 422) {

                    loadingSpinnerWrapper.fadeOut();
                    spinnerPercentage.text('0%').fadeOut();

                    var response = JSON.parse(xhr.responseText);
                    if (response.hasOwnProperty('errors')) {
                        var errors = response.errors;
                        var errorMessage = '';

                        Object.keys(errors).forEach(function (key) {
                            errorMessage = errors[key][0];
                        });

                        Toast.fire({
                            icon: 'error',
                            title: errorMessage
                        });
                    }
                } else {

                    if (xhr.status === 500) {
                        loadingSpinnerWrapper.fadeOut();
                        spinnerPercentage.text('0%').fadeOut();
                        errorMessage = 'Product could not be created. Please try again later.';

                        Toast.fire({
                            icon: 'error',
                            title: errorMessage
                        });
                    } else {
                        loadingSpinnerWrapper.fadeOut();
                        spinnerPercentage.text('0%').fadeOut();
                        var errorMessage = 'product could not be created. Please try again later.';
                        Toast.fire({
                            icon: 'error',
                            title: errorMessage
                        });
                    }
                }
            };

            // Error
            xhr.onerror = function () {

                loadingSpinnerWrapper.fadeOut();
                spinnerPercentage.text('0%').fadeOut();

                var errorMessage = 'An error occurred during the request. Please try again later.';
                Toast.fire({
                    icon: 'error',
                    title: errorMessage
                });
            };

            xhr.send(formData);
        });
    </script>
@endpush