@extends('layouts.app')

@section("title", "Digital Pickup")

@section('content')

<div class="row justify-content-center">
    <div class="col-md-12" style="padding-top: 60px;">
        <div class="page page-md comman-page-height-main py-20">
            <div class="steps">
                <a class="step-item current" href="javascript:void(0)">
                    <span class="step-number">1</span>
                    <span class="hidden-xs">{{ __('message_lang.LBL_SELECT_BENEFICIARY') }}</span>
                </a>
                <a class="step-item" href="javascript:void(0)">
                    <span class="step-number">2</span>
                    <span class="hidden-xs">{{ __('message_lang.RECEIVER_INFORMATION') }}</span>
                </a>
                <a class="step-item" href="javascript:void(0)">
                    <span class="step-number">3</span>
                    <span class="hidden-xs">{{ __('message_lang.DEPOSIT_ACCOUNT_DETAILS') }}</span>
                </a>
                <a class="step-item" href="javascript:void(0)">
                    <span class="step-number">4</span>
                    <span class="hidden-xs">{{ __('message_lang.CONFIRMATION') }}</span>
                </a>
            </div>
            <div class="content-box bg-white">
                <h3 class="section-title">{{ __('message_lang.LBL_SELECT_BENEFICIARY') }}</h3>
                <form method="post" id="digital_pickup_form" name="digital_pickup_form" action="{{ route('agent-digital-pickup-post') }}">
                    @csrf
                    <div class="form-group row">
                        <label for="">{{ __('message_lang.LBL_SELECT_BNF') }}</label>
                        <select name="selectuser" class="form-control selectpicker" id="select-user" data-live-search="true">
                            <option value="">{{ __('message_lang.LBL_SEARCH_BNF') }}</option>
                            @foreach($users as $user)
                                <option data-tokens="{{ $user->first_name }}{{ $user->last_name }}{{ $user->phone_number }}{{ $user->email }}" value="{{ $user->id }}">{{ $user->first_name }} {{ $user->last_name }} ({{ $user->phone_number }})</option>
                            @endforeach
                        </select>

                        <div id="errorTxt" style="color: red;">
                        </div>

                    </div>
                    <div class="mt-4">
                        <div class="row">
                            <div class="col-md-4">
                                <button type="submit" class="btn btn-primary btn-lg btn-block">{{ __('message_lang.BUTTON_NEXT') }}</button>
                            </div>
                            <div class="col-md-4">
                                <a href="{{ route('agent-add-user') }}" type="button" class="btn btn-primary btn-lg btn-block">{{ __('message_lang.LBL_ADD_NEW_BNF') }}</a>
                            </div>
                            <div class="col-md-4">
                                <a href="{{ route('agent-users') }}" type="button" class="btn btn-secondary btn-lg btn-block">{{ __('message_lang.BUTTON_CANCEL') }}</a>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function() {
        $('#select-user').selectpicker();
    });

    $("#digital_pickup_form").validate({
        rules: {
            selectuser: {
                required: true,
            },
        },
        messages: {
            selectuser: {
                required: "{{ __('message_lang.PLEASE_SELECT_BENEFICIARY_USER') }}",
            },
        },
        errorElement : 'div',
        errorLabelContainer: '#errorTxt'
    });
</script>
@endsection