@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="name" class="font-weight-bold">@lang('Name')</label>
                                    <input type="text" name="name" class="form-control" />
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="type_id" class="font-weight-bold">@lang('Type')</label>
                                    <select class="select2-basic" name="type_id" id="type_id" style="z-index: 0">
                                        @foreach ($optionTypes as $type)
                                            <option value="{{ $type->id }}" data-type="{{ $type->title }}">
                                                {{ $type->title }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="input_type" class="font-weight-bold">@lang('Input Type')</label>
                                    <select class="select2-basic" name="input_type" id="input_type" style="z-index: 0">
                                        <option value="standard">@lang('Standard')</option>
                                        <option value="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">@lang('Dropdown')</option>
                                        <option value="slider">@lang('Slider')</option>
                                        <option value="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">
                                        <span class="slider round"></span>
                                    </label>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="show_as_filter" class="font-weight-bold">@lang('Show As Filter')</label>
                                    <br />
                                    <label class="switch">
                                        <input type="checkbox" class="toggle-switch" name="show_as_filter">
                                        <span class="slider round"></span>
                                    </label>
                                </div>
                            </div>
                            <div class="col-lg-12 level-only" style="display:none;">
                                <div class="form-group">
                                    <label for="config_json" class="font-weight-bold">@lang('Level Config (JSON)')</label>
                                    <textarea name="config_json" id="config_json" class="form-control" rows="3"></textarea>
                                </div>
                            </div>
                        </div>
                        <hr />
                        <div id="optionItemsSection">
                            <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>
                                        <tr>
                                            <th>Value</th>
                                            <th>Action</th>
                                        </tr>
                                        </thead>
                                        <tbody id="FeatureBody">
                                        <tr>
                                            <td>
                                                <input type='text' class='form-control' name='item[0][value]' value="" />
                                            </td>
                                            <td>
                                                <div class='btn btn-danger deleteFeature'>Remove</div>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="row" id="addFeatureRow">
                                    <div class="btn btn--primary" id="AddFeature">Add Option Item</div>
                                </div>
                            </div>
                        </div>
                        <div id="levelValuesSection" style="display:none;">
                            <div class="row">
                                <span class="text-center text-muted fw-bolder">
                                    Level Values
                                </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="levelTable">
                                        <thead>
                                        <tr>
                                            <th>Label</th>
                                            <th>Numeric Value</th>
                                            <th>Action</th>
                                        </tr>
                                        </thead>
                                        <tbody id="LevelValuesBody">
                                        <tr>
                                            <td>
                                                <input type='text' class='form-control' name='level_values[0][label]' value="" />
                                            </td>
                                            <td>
                                                <input type='text' class='form-control' name='level_values[0][numeric_value]' value="" />
                                            </td>
                                            <td>
                                                <div class='btn btn-danger deleteLevelValue'>Remove</div>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="row" id="addLevelRow">
                                    <div class="btn btn--primary" id="AddLevelValue">Add Level Value</div>
                                </div>
                            </div>
                        </div>
                        <div class="row my-5">
                            <div class="col text-end">
                                <button type="submit" class="btn btn--primary btn-global">@lang('create')</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.option.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;
        }
    </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 updateOptionItemsForType() {
                var selectedType = $('#type_id').find('option:selected').data('type').toLowerCase();
                var featureBody = $('#FeatureBody');
                var addFeatureRow = $('#addFeatureRow');

                if (selectedType === 'switch') {
                    featureBody.empty();
                    featureBody.append(`
                        <tr>
                            <td>
                                <input type='text' class='form-control' name='item[0][value]' value='0' readonly />
                            </td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>
                                <input type='text' class='form-control' name='item[1][value]' value='1' readonly />
                            </td>
                            <td></td>
                        </tr>
                    `);
                    addFeatureRow.hide();
                } else {
                    featureBody.empty();
                    featureBody.append(`
                        <tr>
                            <td>
                                <input type='text' class='form-control' name='item[0][value]' value='' />
                            </td>
                            <td>
                                <div class='btn btn-danger deleteFeature'>Remove</div>
                            </td>
                        </tr>
                    `);
                    addFeatureRow.show();
                }
            }

            function updateInputTypeUI() {
                var inputType = $('#input_type').val();
                if (inputType === 'level') {
                    $('#optionItemsSection').hide();
                    $('#levelValuesSection').show();
                    $('.level-only').show();
                } else {
                    $('#optionItemsSection').show();
                    $('#levelValuesSection').hide();
                    $('.level-only').hide();
                    updateOptionItemsForType();
                }
            }

            updateInputTypeUI();

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

            $('#type_id').on('change', function() {
                if ($('#input_type').val() !== 'level') {
                    updateOptionItemsForType();
                }
            });

            let count = 1;
            $(document).on("click", "#AddFeature", function() {
                let tr = `<tr>
                    <td>
                        <input type='text' class='form-control' name='item[${count}][value]' />
                    </td>
                    <td>
                        <div class='btn btn-danger deleteFeature'>Remove</div>
                    </td>
                </tr>`;
                $("#FeatureBody").append(tr);
                count++;
            });

            $(document).on("click", ".deleteFeature", function() {
                $(this).closest("tr").remove();
            });

            let levelCount = 1;
            $(document).on("click", "#AddLevelValue", function() {
                let tr = `<tr>
                    <td>
                        <input type='text' class='form-control' name='level_values[${levelCount}][label]' />
                    </td>
                    <td>
                        <input type='text' class='form-control' name='level_values[${levelCount}][numeric_value]' />
                    </td>
                    <td>
                        <div class='btn btn-danger deleteLevelValue'>Remove</div>
                    </td>
                </tr>`;
                $("#LevelValuesBody").append(tr);
                levelCount++;
            });

            $(document).on("click", ".deleteLevelValue", function() {
                $(this).closest("tr").remove();
            });
        });

        $('#CreateManualOrder').submit(function(e) {
            e.preventDefault();
            var formData = new FormData(this);
            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.option.store') }}");

            // 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.option.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 {
                    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