@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="productCreateForm" method="post" enctype="multipart/form-data">
                    @csrf

                    <div class="row">
                        <h5 class="bg--primary rounded p-2 mb-2">@lang('Basic Information')</h5>

                        <div class="col-lg-3">
                            <div class="form-group">
                                <label for="title" class="form-label">@lang('Title')</label>
                                <input type="text" name="title" id="title" value="{{ old('title') }}"
                                    class="form-control" placeholder="@lang('Product Title')" required>
                            </div>
                        </div>

                        <div class="col-lg-3">
                            <div class="form-group">
                                <label for="category" class="form-label">@lang('Category')</label>
                                <select class="form-control" name="category" required>
                                    <option selected disabled>@lang('Select Category')</option>
                                    @foreach ($categories as $category)
                                        <option value="{{ $category->id }}" {{ old('category') == $category->id ? 'selected' : '' }}>
                                            {{ __($category->name) }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="col-lg-3">
                            <div class="form-group file_iclude">
                                <label>@lang('Tags')</label>
                                <select name="tags[]" class="form-control select1-auto-tokenize" multiple="multiple">
                                    @if(old('tags'))
                                        @foreach(old('tags') as $tag)
                                            <option value="{{ $tag }}" selected>{{ $tag }}</option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                        </div>

                        <div class="col-lg-3">
                            <div class="form-group">
                                <label for="demo_link" class="form-label">@lang('Demo Link')</label>
                                <input type="text" name="demo_link" id="demo_link" value="{{ old('demo_link') }}"
                                    class="form-control " placeholder="@lang('Demo Link')" required>
                            </div>
                        </div>

                        <div class="col-lg-3">
                            <div class="form-group">
                                <label for="external_link" class="form-label">@lang('External Link')</label>
                                <input type="text" name="external_link" id="external_link"
                                    value="{{ old('external_link') }}" class="form-control "
                                    placeholder="@lang('External Link')">
                            </div>
                        </div>

                        <div class="col-lg-3">
                            <label for="discount" class="form-label">@lang('Discount')</label>
                            <div class="input-group">
                                <input type="text" name="discount" id="discount" value="{{ old('discount') }}"
                                    class="form-control" placeholder="@lang('Product Discount')">
                                <span class="input-group-text">%</span>
                            </div>
                        </div>

                        <div class="col-lg-3">
                            <div class="form-group">
                                <label for="image" class="form-label">@lang('Image') ({{ getFileSize('product') }}px)</label>
                                <div class="file-upload-wrapper" data-text="Select your image!">
                                    <input type="file" name="image" id="image" class="file-upload-field" required>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-3">
                            <div class="form-group">
                                <label for="file" class="form-label">@lang('File-Compressed')</label>
                                <div class="file-upload-wrapper" data-text="Select your file!">
                                    <input type="file" name="file" id="file" class="file-upload-field">
                                </div>
                            </div>
                        </div>

                        <h5 class="bg--primary rounded p-2 my-2">@lang('Pricing')</h5>

                        <div class="col-lg-12">
                            <div class="row">
                                {{-- Regular License --}}
                                <div class="col-lg-6">
                                    <div class="mb-4 p-4 rounded border">
                                        <label class="form--label">@lang('Regular License')</label>
                                        <input type="hidden" name="licenses[0][license_type]" value="regular">

                                        <div class="input-group mb-3">
                                            <input type="number" name="licenses[0][price]" class="form-control"
                                                placeholder="@lang('Regular Price')" step="0.01"
                                                value="{{ old('licenses.0.price') }}" required>
                                            <span class="input-group-text">{{ $general->cur_text }}</span>
                                        </div>

                                        <label class="form--label fw-semibold d-block mb-1">@lang('Features')</label>
                                        <div id="regular-features">
                                            @if(old('licenses.0.features'))
                                                @foreach(old('licenses.0.features') as $feature)
                                                    <div class="feature-item d-flex align-items-center gap-2 mb-2">
                                                        <input type="text" name="licenses[0][features][]" value="{{ $feature }}" class="form-control" placeholder="@lang('Feature')">
                                                        <button type="button" class="btn btn-danger btn-sm remove-feature">x</button>
                                                    </div>
                                                @endforeach
                                            @else
                                                <div class="feature-item d-flex align-items-center gap-2 mb-2">
                                                    <input type="text" name="licenses[0][features][]" class="form-control" placeholder="@lang('Feature')">
                                                    <button type="button" class="btn btn-danger btn-sm remove-feature">x</button>
                                                </div>
                                            @endif
                                        </div>

                                        <button type="button" class="btn btn--primary btn-sm add-feature mt-2"
                                            data-target="#regular-features" data-index="0">@lang('Add Feature')</button>
                                    </div>
                                </div>

                                {{-- Extended License --}}
                                <div class="col-lg-6">
                                    <div class="mb-4 p-4 rounded border">
                                        <label class="form--label">@lang('Extended License')</label>
                                        <input type="hidden" name="licenses[1][license_type]" value="extended">

                                        <div class="input-group mb-3">
                                            <input type="number" name="licenses[1][price]" class="form-control"
                                                placeholder="@lang('Extended Price')" step="0.01"
                                                value="{{ old('licenses.1.price') }}" required>
                                            <span class="input-group-text">{{ $general->cur_text }}</span>
                                        </div>

                                        <label class="form--label fw-semibold d-block mb-1">@lang('Features')</label>
                                        <div id="extended-features">
                                            @if(old('licenses.1.features'))
                                                @foreach(old('licenses.1.features') as $feature)
                                                    <div class="feature-item d-flex align-items-center gap-2 mb-2">
                                                        <input type="text" name="licenses[1][features][]" value="{{ $feature }}" class="form-control" placeholder="@lang('Feature')">
                                                        <button type="button" class="btn btn-danger btn-sm remove-feature">x</button>
                                                    </div>
                                                @endforeach
                                            @else
                                                <div class="feature-item d-flex align-items-center gap-2 mb-2">
                                                    <input type="text" name="licenses[1][features][]" class="form-control" placeholder="@lang('Feature')">
                                                    <button type="button" class="btn btn-danger btn-sm remove-feature">x</button>
                                                </div>
                                            @endif
                                        </div>

                                        <button type="button" class="btn btn--primary btn-sm add-feature mt-2"
                                            data-target="#extended-features" data-index="1">@lang('Add Feature')</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <h5 class="bg--primary rounded p-2 mb-2">@lang('External Information')</h5>

                        <div class="col-lg-3">
                            <div class="form-group browser">
                                <label>@lang('Compatible Browsers')</label>
                                <select name="compatible_browsers[]" class="form-control select2-auto-tokenize" multiple="multiple">
                                    @if(old('compatible_browsers'))
                                        @foreach(old('compatible_browsers') as $browser)
                                            <option value="{{ $browser }}" selected>{{ $browser }}</option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                        </div>

                        <div class="col-lg-3">
                            <div class="form-group file_iclude">
                                <label>@lang('Files Included')</label>
                                <select name="files_included[]" class="form-control select3-auto-tokenize" multiple="multiple">
                                    @if(old('files_included'))
                                        @foreach(old('files_included') as $file)
                                            <option value="{{ $file }}" selected>{{ $file }}</option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                        </div>

                        <div class="col-lg-3">
                            <div class="form-group file_iclude">
                                <label>@lang('Software Framework')</label>
                                <select name="software_framework[]" class="form-control select4-auto-tokenize" multiple="multiple">
                                    @if(old('software_framework'))
                                        @foreach(old('software_framework') as $framework)
                                            <option value="{{ $framework }}" selected>{{ $framework }}</option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                        </div>

                        <div class="col-lg-3">
                            <div class="form-group file_iclude">
                                <label>@lang('Software Version')</label>
                                 <input type="text" name="software_version" value="{{old('software_version')}}" class="form-control" placeholder="@lang('Software Version')">
                            </div>
                        </div>

                        <div class="col-lg-12">
                            <div class="form-group">
                                <label for="description" class="form-label">@lang('Description')</label>
                                <textarea class="form-control trumEdit" name="description" id="description" rows="3">{{ old('description') }}</textarea>
                            </div>
                        </div>

                        <div class="col-lg-2">
                            <div class="form-group">
                                <label class="form-label">@lang('Is High Resolution')?</label>
                                <label class="switch m-0">
                                    <input type="checkbox" class="toggle-switch" name="is_high_rsolution" {{ old('is_high_rsolution') ? 'checked' : '' }}>
                                    <span class="slider round"></span>
                                </label>
                            </div>
                        </div>

                        <div class="col-lg-2">
                            <div class="form-group">
                                <label class="form-label">@lang('Is Free')?</label>
                                <label class="switch m-0">
                                    <input type="checkbox" class="toggle-switch" name="is_free" {{ old('is_free') ? 'checked' : '' }}>
                                    <span class="slider round"></span>
                                </label>
                            </div>
                        </div>

                        <div class="col-12 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.product.index') }}" class="btn btn-sm btn--primary ">@lang('Back')</a>
@endpush

@push('style')
    <style>
        .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>
        (function ($) {
            "use strict";
            
            $('#productCreateForm').on('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.product.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
                            });
                        }
                        $('#productCreateForm')[0].reset();
                        $(".file-upload-field").val('').parent(".file-upload-wrapper").attr("data-text",
                            "Select your file!");
                        // Reset CKEditor field
                        if (window.editor) {
                            window.editor.setData('');
                        }

                        loadingSpinnerWrapper.fadeOut();

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

        })(jQuery);


        document.addEventListener('DOMContentLoaded', function () {
            // Handle Add Feature
            document.querySelectorAll('.add-feature').forEach(function (btn) {
                btn.addEventListener('click', function () {
                    const target = document.querySelector(this.dataset.target);
                    const index = this.dataset.index;

                    const div = document.createElement('div');
                    div.className = 'feature-item d-flex align-items-center gap-2 mb-2';
                    div.innerHTML = `
                                    <input type="text" name="licenses[${index}][features][]" class="form-control" placeholder="@lang('Feature')">
                                    <button type="button" class="btn btn-danger btn-sm remove-feature">x</button>
                                `;

                    target.appendChild(div);
                });
            });

            // Handle Remove Feature
            document.addEventListener('click', function (e) {
                if (e.target.classList.contains('remove-feature')) {
                    e.preventDefault();
                    e.target.closest('.feature-item').remove();
                }
            });
        });


        (function ($) {
            "use strict";

            const selectClasses = [
                '.select1-auto-tokenize',
                '.select2-auto-tokenize',
                '.select3-auto-tokenize',
                '.select4-auto-tokenize',
                '.select5-auto-tokenize',
            ];

            selectClasses.forEach(function (cls) {
                $(cls).each(function () {
                    $(this).select2({
                        dropdownParent: $('.card-body'),
                        tags: true,
                        tokenSeparators: [','],
                        placeholder: $(this).attr('placeholder') || 'Select options'
                    });
                });
            });

        })(jQuery);

    </script>
@endpush