@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"/>
                                </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>

                        <hr/>
                        <div class="row">
                        <span class="text-center text-muted fw-bolder">
                                Options Of Group
                            </span>
                        </div>
                        <hr/>

                        <div class="row">


                                <div class="col-sm-6">
                                    <div class="row">

                                    <span  class="text-muted text-center">All Options</span>
                                    </div>
                                    <input type="search" placeholder="Search" class="form-control" id="filterInput">
                                <div class="table-responsive--sm table-responsive my-4"
                                     style="max-height: 600px ; overflow: scroll">
                                    <table class="table table--light style--two custom-data-table" id="myTable">
                                        <thead>
                                        <tr>
                                            <th>@lang('Option name')</th>

                                            <th>@lang('Items')</th>
                                            <th>@lang('Action')</th>
                                        </tr>
                                        </thead>
                                        <tbody id="allItems">
                                        @foreach($options as $option)
                                            <tr>
                                                <td>
                                                    {{$option->title}}
                                                </td>

                                                <td>
                                                    @foreach($option->item as $item)
                                                        {{$item->value}} <br/>
                                                    @endforeach
                                                </td>
                                                <td>
                                                    <div class="btn btn--info addOption " optionId="{{$option->id}}">Add</div>
                                                </td>
                                            </tr>

                                        @endforeach
                                        </tbody>
                                    </table><!-- table end -->
                                </div>
                                </div>
                                <div class="col-sm-6">

                                    <div class="row">
                                    <span class="text-muted  text-center">Group Options</span>
                                    </div>
                                    <input type="search" placeholder="Search" class="form-control" id="filterInput2">
                                    <div class="table-responsive--sm table-responsive"
                                         style="max-height: 600px ; overflow: scroll">
                                    <table class="table table--light style--two custom-data-table my-4" id="myTable2">
                                        <thead>
                                        <tr>
                                            <th>@lang('Option name')</th>
                                            <th>@lang('Type')</th>
                                            <th>@lang('Items')</th>
                                            <th>@lang('Action')</th>
                                        </tr>
                                        </thead>
                                        <tbody id="groupItem">

                                        </tbody>
                                    </table><!-- table end -->
                                </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.orders.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>
         $(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);
                 });
             });
        });

         $(document).on("click",".addOption",function (){
             $(this).text("Remove");
             $(this).addClass("removeOption");
             $(this).addClass("btn--danger");
             $(this).removeClass("btn--info");
             $(this).removeClass("addOption");
             let optionId=$(this).attr("optionId");
             let tr=$(this).closest("tr").html();
             let input='<input type="hidden"  name="item[]" value="'+optionId+'"/>';

              $('#groupItem').append("<tr>"+tr+input+"</tr>");
             $(this).closest("tr").remove();
         })
         $(document).on("click",".removeOption",function (){

             $(this).text("Add");
             $(this).removeClass("removeOption");
             $(this).removeClass("btn--danger");
             $(this).addClass("btn--info");
             $(this).addClass("addOption");
             $(this).closest("tr").find("input").remove();
             let tr=$(this).closest("tr").html();
             $('#allItems').append("<tr>"+tr+"</tr>");
             $(this).closest("tr").remove();
         })
    </script>
    <script>
        $('#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.seller-type-group.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.seller-type-group.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