@extends('layouts.main')

@section('title', 'Управление баллами')

@section('content')
    <div class="container mt-3 ms-2">
        <div class="row">
            <div class="col-md-6">
                <form action="{{ route('loyalty.scores.verificationUser') }}" method="post" enctype="multipart/form-data">
                    @csrf
                    <div class="mb-3">
                        <input id="phoneOrCard" type="text" class="form-control @error('phoneOrCard') is-invalid @enderror" name="phoneOrCard" value="{{ old('phoneOrCard') }}" placeholder="+79999999999 или 999999">

                        @error('phoneOrCard')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="mb-3">
                        <select class="form-select @error('actions') is-invalid @enderror" name="actions" id="actions">
                            @foreach($scopesActions as $value => $label)
                                <option value="{{ $value }}" {{ old('actions') == $value ? 'selected' : '' }}>
                                    {{ $label }}
                                </option>
                            @endforeach
                        </select>
                        @error('actions')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="mb-3">
                        <input
                            type="text"
                            class="form-control @error('scopes') is-invalid @enderror"
                            name="scopes" value="{{ old('scopes') }}"
                            placeholder="Кол-во баллов"
                        >

                        @error('scopes')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <button type="submit" class="btn btn-danger w-100">Совершить операцию</button>
                </form>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
    <script>
        const maskOptions = {
            mask: [{ mask: "000000" }, "+{7}0000000000"],
        }
        function maskCard(elements) {
            elements.forEach((element) => {
                if (element instanceof HTMLElement) {
                    IMask(element, maskOptions);
                }
            });
        }

        const card = document.querySelectorAll("#phoneOrCard");
        maskCard(card);
    </script>
@endsection