@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