@extends("layouts.admin.app")
@section("page-title")
{{__("create-user-points")}}
@endSection
@section("page-nav-title")
<div class="app-title">
    <div>
        <h1><i class="fa fa-dashboard"></i>{{__("users-points")}}</h1>
        <p>{{__("all-users-points")}}</p>
    </div>

    <ul class="app-breadcrumb breadcrumb">
        <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
        <li class="breadcrumb-item"><a href="#">{{__("Dashboard")}}</a></li>
        <li class="breadcrumb-item"><a href="{{route("admin.points.index")}}">{{__("users-points")}}</a></li>
        <li class="breadcrumb-item"><a href="#">{{__("Create")}}</a></li>
    </ul>
</div>
@endsection

@section("css-links")
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;600;700;800;900&display=swap"
    rel="stylesheet">
@if(\Illuminate\Support\Facades\App::getLocale() == "en")
<style>
.input-hidden {
    position: absolute;
    left: -9999px;
}
</style>
@else
<style>
.input-hidden {
    position: absolute;
    right: -9999px;
}
</style>
@endif
<style>
input[type=radio]:checked+label {
    border: 1px solid #fff;
    background: #2196F3;
    color: #fff;
}

input[type=radio]+label {
    border: 1px solid #2196F3;
    width: 150px;
    height: 150px;
    transition: 500ms all;
    border-radius: 12px;
    font-weight: bold;
    text-align: center;
    padding: 14% 15px;
    font-size: 1rem;
    font-family: 'Cairo', sans-serif;
}
</style>
@endsection

@section("content")

<div class="row">
    <div class="col-lg-10 m-auto">
        <div class="buttons-group">
            <a href="{{route("admin.points.index")}}" class="btn btn-secondary"><i
                    class="fa fa-chevron-circle-left"></i>{{__("Back")}} </a>
        </div>
        <div class="tile">
            <h3 class="tile-title">{{__("users-points")}}</h3>
            <div class="tile-body">
                <form method="post" action="{{route("admin.points.store")}}" enctype="multipart/form-data">
                    @csrf
                    <div class="row">

                        <div class="col-lg-6 showUser">
                            <div class="form-group">
                                <label for="exampleSelect1">{{__("Users")}}</label>
                                <select class="form-control change-user userData UsersTypesSelect" id="users"
                                    name="user">
                                    <option></option>
                                    @foreach ($users as $user)
                                    <option value="{{$user->id}}" @if(old('user')==$user->id) selected
                                        @endif>{{$user->first_name." ".$user->last_name}}</option>
                                    @endforeach
                                </select>
                            </div>
                            @error("user")
                            <div class="input-error">{{$message}}</div>
                            @enderror
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label class="control-label">{{__("user-points")}} </label>
                                <input class="form-control" type="number" name="user_points" id="user_points"
                                    placeholder="{{__("points value")}}" value="{{old('user_points')}}" readonly>
                            </div>
                            @error("user_points")
                            <div class="input-error">{{$message}}</div>
                            @enderror
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label class="control-label">{{__("Enter the Amount")}} </label>
                                <input class="form-control" type="number" name="amount" placeholder="Enter the Amount"
                                    value="{{old('amount')}}">
                            </div>
                            @error("amount")
                            <div class="input-error">{{$message}}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="tile-footer">
                        <button type="submit" class="btn btn-primary">
                            <i class="fa fa-fw fa-lg fa-check-circle"></i> {{__("Create")}}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection

@section("scripts")


<script type="text/javascript">
$(document).ready(function() {
    $(".change-user").on('change', function() {
        var user_id = $(this).val();
        if (user_id) {
            $.ajax({
                url: "{{ route('ajax.points.GetUser') }}",
                type: "GET",
                data: {
                    "user_id": user_id
                },
                success: function(response) {
                    $('#user_points').val(response.data);
                },
            });
        }
    });
});

</script>
<script type="text/javascript" src="{{asset("assets/js/plugins/select2.min.js")}}"></script>
<script type="text/javascript">
$(".UsersTypesSelect").select2({
        placeholder: "{{__('select-user')}}",
        width: "100%",
    });
</script>
@endsection