@extends('layouts.main')
@section('title')
    Randomizer
@endsection

@section('breadcrumb')
    <li class="breadcrumb-item active">Randomizer</li>
@endsection

@section('css')
    <style>
        #range .noUi-handle {
            cursor: pointer;
        }

        #range .noUi-handle:active {
            cursor: grabbing;
        }

        #range .noUi-base,
        #range .noUi-connects {
            cursor: pointer;
        }
    </style>
@endsection

@section('content')
    <div class="row">
        <div class="col-xl-12">
            <div class="card custom-card">
                <div class="card-header justify-content-between">
                    <div class="card-title">
                        Randomizer
                    </div>
                </div>
                <form action="{{ route('admin.file.randomize') }}" method="POST" enctype="multipart/form-data"
                      id="data_form1"
                      data-redirection_url="{{ route('admin.file.randomize.view') }}"> @csrf @method('POST')
                    <div class="card-body">
                        <div class="row gy-4">
                            <div class="col-8">
                                <label for="range" class="form-label">Range
                                    <span id="rangeValue" class="fw-bold">0</span>
                                </label>

                                <div id="range"></div>
                                <input type="hidden" name="range" id="range_input">
                            </div>
                            <div class="col-4">
                                <label for="randomize_file_type">File Type</label>
                                <select class="form-control" id="randomize_file_type" name="randomize_file_type">
                                    @foreach($data['randomize_file_type']  as $key => $value)
                                        <option value="{{ $key }}">{{ $value }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer">
                        <button class="btn btn-primary pull-right mb-2" type="submit" id="submit_button1">Submit
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
        var range = document.getElementById('range');

        noUiSlider.create(range, {
            start: 0, step: 1, connect: [true, false], range: {
                min: 0, max: 30
            }
        });

        range.noUiSlider.on('update', function (value) {
            $('#rangeValue').text(Math.round(value));
            $('#range_input').val(Math.round(value));
        });

        $('#data_form1').submit(function (e) {
            e.preventDefault();
            const form = $(this);
            const url = form.attr('action');
            const redirection_url = form.data('redirection_url');
            const formData = new FormData(form[0]);

            $.ajax({
                url: url,
                method: form.attr('method'),
                data: formData,
                processData: false,
                contentType: false,
                beforeSend: function () {
                    $('.loader').removeClass('d-none');
                },
                success: function (response) {
                    Swal.fire({
                        title: "Success!",
                        text: response.message,
                        icon: "success",
                        confirmButtonText: "OK"
                    }).then(() => {
                        window.location.href = redirection_url;
                    });
                },
                error: function (xhr, status, error) {
                    const errorMessage = xhr.responseJSON?.message || "An error occurred.";
                    Swal.fire({
                        title: "Error!",
                        text: errorMessage,
                        icon: "error",
                        confirmButtonText: "OK"
                    });
                },
                complete: function () {
                    $('.loader').addClass('d-none');
                }
            });
        });
    </script>
@endsection