@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="CreateType"  action="{{ route('admin.homepage.types.store') }}" 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" name="title" id="title" placeholder="Enter Title" class="form-control" required>
                                </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" >
                                        <option value="1">Active</option>
                                        <option value="0">Inactive</option>
                                    </select>

                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="layout_row" class="font-weight-bold">@lang('Layout Row')</label>
                                    <input type="number" min="1" max="100" name="layout_row" id="layout_row" value="1" class="form-control" required>
                                    <small class="text-muted">Types in same row share the 100% desktop width.</small>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="priority" class="font-weight-bold">@lang('Sort Priority')</label>
                                    <input type="number" min="0" max="100000" name="priority" id="priority" value="0" class="form-control" required>
                                    <small class="text-muted">Higher priority appears first in the row.</small>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label for="width_percent" class="font-weight-bold">@lang('Desktop Width (%)')</label>
                                    <input type="number" min="1" max="100" name="width_percent" id="width_percent" value="100" class="form-control" required>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label for="mobile_width_percent" class="font-weight-bold">@lang('Mobile Width (%)')</label>
                                    <input type="number" min="1" max="100" name="mobile_width_percent" id="mobile_width_percent" value="100" class="form-control" required>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label for="columns_count" class="font-weight-bold">@lang('Item Columns')</label>
                                    <input type="number" min="1" max="4" name="columns_count" id="columns_count" value="1" class="form-control" required>
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label for="layout_preset" class="font-weight-bold">@lang('Quick Preset')</label>
                                    <select id="layout_preset" class="form-control">
                                        <option value="">Manual</option>
                                        <option value="featured">Featured (70% desktop / 100% mobile / 3 columns)</option>
                                        <option value="side">Side (30% desktop / 100% mobile / 1 column)</option>
                                        <option value="balanced">Balanced (50% desktop / 100% mobile / 2 columns)</option>
                                        <option value="tile">Tile (25% desktop / 50% mobile / 1 column)</option>
                                    </select>
                                </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.homepage.types.index')}}" class="btn btn-sm btn--primary ">@lang('Back')</a>
@endpush

@push('script')
    <script>
        (function () {
            const preset = document.getElementById('layout_preset');
            if (!preset) return;

            const desktop = document.getElementById('width_percent');
            const mobile = document.getElementById('mobile_width_percent');
            const columns = document.getElementById('columns_count');

            const map = {
                featured: { desktop: 70, mobile: 100, columns: 3 },
                side: { desktop: 30, mobile: 100, columns: 1 },
                balanced: { desktop: 50, mobile: 100, columns: 2 },
                tile: { desktop: 25, mobile: 50, columns: 1 }
            };

            preset.addEventListener('change', function (event) {
                const value = event.target.value;
                const selected = map[value];
                if (!selected) return;
                desktop.value = selected.desktop;
                mobile.value = selected.mobile;
                columns.value = selected.columns;
            });
        })();
    </script>
@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);
            });
        });
    });
    let count=3;
    $(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 () {
        $(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.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.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> --}}
    {{-- <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.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.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