@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
                    <input type="hidden" name="id" value="{{ $product->id }}">

                    <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="{{ $product->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 }}" {{ $product->category_id == $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($product->tags)
                                        @foreach($product->tags as $tag)
                                            <option value="{{ $tag->name }}" selected>{{ $tag->name }}</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="{{ $product->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="{{ $product->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="{{ $product->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">
                                </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="{{$product->licenses[0]->license_type}}">

                                        <div class="input-group mb-3">
                                            <input type="number" name="licenses[0][price]" class="form-control"
                                                placeholder="@lang('Regular Price')" step="0.01"
                                                value="{{$product->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($product->licenses[0]->features)
                                                @foreach(json_decode($product->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="{{$product->licenses[1]->license_type}}">

                                        <div class="input-group mb-3">
                                            <input type="number" name="licenses[1][price]" class="form-control"
                                                placeholder="@lang('Extended Price')" step="0.01"
                                                value="{{$product->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($product->licenses[1]->features)
                                                @foreach(json_decode($product->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($product->compatible_browsers)
                                        @foreach(json_decode($product->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($product->files_included)
                                        @foreach(json_decode($product->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($product->software_framework)
                                        @foreach(json_decode($product->software_framework) as $frame)
                                            <option value="{{ $frame }}" selected>{{ $frame }}</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="{{$product->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">@php echo $product->description @endphp</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" {{ $product->is_high_rsolution == 1 ? '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" {{ $product->is_free == 1 ? '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('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.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";
            
            // prodduct update
            $('#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.update') }}");

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

                        // redirect checkout page
                        window.location.href = '{{ route('admin.product.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 update. Please try again later.';

                            Toast.fire({
                                icon: 'error',
                                title: errorMessage
                            });
                        } else {
                            loadingSpinnerWrapper.fadeOut();
                            spinnerPercentage.text('0%').fadeOut();
                            var errorMessage = 'product could not be update. 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