@extends('admin.layouts.app')
@section('panel')
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <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="CreateType" method="POST" enctype="multipart/form-data">

                        @csrf
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="title" class="font-weight-bold">@lang('Select Title')</label>
                                    <input type="text" value="{{ old('title', $type->title) }}" name="title"
                                        id="title" placeholder="Enter Title" class="form-control">
                                    <input type="hidden" name="id" value="{{ $type->id }}" />

                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="status" class="font-weight-bold">@lang('Select Status') </label>
                                    <select name="status" id="status" class="form-control"
                                        value="{{ old('title', $type->status) }}">
                                        <option value="1" {{ old('title', $type->title) == 1 ? 'selected' : '' }}>Active
                                        </option>
                                        <option value="0" {{ old('title', $type->title) == 0 ? 'selected' : '' }}>Inactive
                                        </option>
                                    </select>

                                </div>
                            </div>
                        </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>Key</td>
                                        <td>Status</td>
                                        <td>Type</td>
                                        <td>Required</td>
                                        <td>Filter</td>
                                        <td>Action</td>
                                    </tr>
                                    </tbody>
                                    <tbody id="FeatureBody">
                                        @php
                                            $i = 0;

                                        @endphp

                                        @foreach ($items 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 }}][key]' value="{{ $item->title }}"
                                                        @if ($item->title == 'Price' || $item->title == 'Count' || $item->title == 'special')
                                                        readonly
                                                        @endif
                                                        required />
                                                </td>
                                                <td>
                                                    <label class="switch">
                                                        <input value="1" type="checkbox" class="toggle-switch"
                                                            name="item[{{ $i }}][status]"
                                                            @if ($item->status) checked @endif>
                                                        <span class="slider round"></span>
                                                    </label>
                                                </td>
                                                @if ($item->title == 'Price' || $item->title == 'Count' || $item->title == 'special')
                                                    <td>
                                                        <input type='text' class='form-control' name='item[0][type]'
                                                            value="text" readonly />
                                                    </td>
                                                @else
                                                    <td>
                                                        <select class="" name="item[{{ $i }}][type]"
                                                            style="z-index: 0 ; width: 100%;" required>
                                                            @foreach ($optionTypes as $type)
                                                                <option value="{{ $type->title }}"
                                                                    @if ($item->type == $type->title) selected @endif>
                                                                    {{ $type->title }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </td>
                                                @endif
                                                <td>
                                                    <label class="switch">
                                                        <input value="1" type="checkbox" class="toggle-switch"
                                                            name="item[{{ $i }}][required]"
                                                            @if ($item->required) checked @endif>
                                                        <span class="slider round"></span>
                                                    </label>


                                                </td>
                                                <td>
                                                    <label class="switch">
                                                        <input value="1" type="checkbox" class="toggle-switch"
                                                            name="item[{{ $i }}][filter]"
                                                            @if ($item->filter) checked @endif> >
                                                        <span class="slider round"></span>
                                                    </label>


                                                </td>
                                                <td>
                                                    <div class='btn btn-danger deleteFeature'
                                                        data-id="{{ $item->id }}">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 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.type.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>
        var t = false;
        document.addEventListener('DOMContentLoaded', () => {
            const csrfTokenMeta = document.querySelector('meta[name="csrf-token"]');
            const csrfToken = csrfTokenMeta ? csrfTokenMeta.getAttribute('content') : null;

            if (!csrfToken) {
                console.error('CSRF token not found in meta tag.');
                return; // Exit if CSRF token is missing
            }

            document.querySelectorAll('.deleteFeature').forEach(button => {
                button.addEventListener('click', function() {
                    const itemId = this.getAttribute('data-id');
                    if (confirm('Are you sure you want to remove this item?')) {
                        remove(itemId, csrfToken);
                        t = true;
                    }
                });
            });
        });

        function remove(id, csrfToken) {
            fetch('{{ route('admin.type.remove') }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': csrfToken // Laravel CSRF token
                    },
                    body: JSON.stringify({
                        id: id
                    }) // Send the ID in the request body
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        alert('Item removed successfully.');
                        // Optionally, remove the item from the DOM
                        document.querySelector(`[data-id="${id}"]`).closest('div').remove();
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('An error occurred while removing the item.');
                });


        }
        $(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);
                });
            });
        });
        let count = {{ $i }};
        $(document).on("click", "#AddFeature", function() {
            let tr = " <tr><td>  <input type='text' class='form-control' name='item[" + count +
                "][key]' required /> </td> <td><label class='switch'> <input type='checkbox' value='1' class='toggle-switch' name='item[" +
                count +
                "][status]' >  <span class='slider round'></span> </label> </td>  <td> <select class='select2-basic' name='item[" +
                count +
                "][type]' style='z-index: 0 ; width: 100%;' required> @foreach ($optionTypes as $type)  <option value='{{ $type->title }}'> {{ $type->title }}  </option>  @endforeach </select> <td> <label class='switch'> <input value='1' type='checkbox' class='toggle-switch'  name='item[" +
                count +
                "][required]' >  <span class='slider round'></span>    </label>   </td> <td> <label class='switch'> <input value='1' type='checkbox' class='toggle-switch'  name='item[" +
                count +
                "][filter]' >  <span class='slider round'></span>    </label>   </td>  <td>  <div class='btn btn-danger deleteFeature'>Remove</div> </td></tr>"
            $("#FeatureBody").append(tr);
            count++;
        })
        $(document).on("click", ".deleteFeature", function() {
            if (t) {
                $(this).closest("tr").remove();
            }
        })
    </script>
    <script>
        $('#CreateType').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.type.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();
                    window.location.href = '{{ route('admin.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