@extends("layouts.admin.app")
@section("page-title")
    {{__("Create wallet")}}
@endSection
@section("page-nav-title")
    <div class="app-title">
        <div>
            <h1> {{__("wallets")}}</h1>
            <p>{{__("Transaction Wallets")}}</p>
        </div>
        <ul class="app-breadcrumb breadcrumb">
            <li class="breadcrumb-item"><a href="{{route("admin.dashboard.index")}}"><i class="fa fa-home fa-lg"></i></a></li>
            <li class="breadcrumb-item"><a href="{{route("admin.wallets.index")}}">{{__("Wallets")}}</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: #D32C3B;
            color: #fff;
        }
        input[type=radio] + label {
            border: 1px solid #D32C3B;
            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">
            @if(isPermissionsAllowed("create-wallet"))
                <div class="buttons-group">
                    <a href="{{route("admin.wallets.index")}}" class="btn btn-secondary"><i class="fa fa-chevron-circle-left"></i>{{__("Back")}} </a>
                </div>
            @endif
            <div class="tile">
                <h3 class="tile-title">{{__("Transaction Wallets")}}</h3>
                <div class="tile-body">
                    <form method="post" action="{{route("admin.wallets.store")}}" enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            <div class="col-lg-6 " >
                                <div class="form-group">
                                    <label for="exampleSelect1" >{{__("users")}}</label>
                                    <select class="form-control change-user"  id="users" name="user" >
                                        <option value="" disabled selected>{{__('Select User')}}</option>
                                        @foreach ($users as $user)
                                            <option value="{{$user->id}}" @if(old('user')==$user->id) selected @endif>{{$user->full_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">{{__("Wallet User")}} </label>
                                    <input class="form-control" type="number" name="wallet_Uesr" id="wallet_Uesr" placeholder="wallet value" value="{{old('wallet_Uesr')}}" readonly>
                                </div>
                                @error("wallet_Uesr")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>
                                <div class="col-lg-6 " >
                                    <div class="form-group">
                                        <label for="exampleSelect1" >{{__("Select movement type")}}</label>
                                    </div>
                                    <div class="row">
                                        <div class="col-6">
                                            <div class="form-group" >
                                                <input type="radio" name="in_out" value="-1" id="sad" class="input-hidden form-control" />
                                                <label for="sad" style="width: 80%;text-align: center">السائق قبض من التطبيق <br> (السائق قبض - التطبيق دفع)</label>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="form-group">
                                                <input type="radio" name="in_out" value="1" id="happy" class="input-hidden form-control" />
                                                <label for="happy" style="width: 80%;text-align: center">السائق دفع للتطبيق<br> (السائق دفع - التطبيق قبض)</label>
                                            </div>
                                        </div>
                                    </div>


                                    @error("in_out")
                                    <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.wallets.GetUser') }}",
                        type: "GET",
                        data: {"user_id": user_id},
                        success: function(response) {
                            $('#wallet_Uesr').val(response.data);
                            // var d = (wallet_value).empty();
                            // console.log(response.data);
                },
                });
            }
        });
        });
    </script>
@endsection