@extends('layouts.app')

@section('title')
    {{ __('Thêm tài khoản') }}
@endsection

@section('add_account')
    active
@endsection

@section('section.header')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>{{ __('Thêm tài khoản') }}</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('app.supporter.createAccount') }}">Tài khoản</a></li>
                        <li class="breadcrumb-item active">{{ __('Thêm tài khoản') }}</li>
                    </ol>
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </section>
@endsection

@section('section.content')
    <section class="content">
        <div class="card">
            <div class="card-body">
                <form class="row" id="form-action">
                    @csrf
                    <div class="col-lg-8">
                        <div class="form-group">
                            <label for="payment-type">{{ __('Ngân hàng / Ví điện tử') }}</label>

                            <p>Vui lòng chọn Ngân hàng/Ví của bạn:</p>
                            <div class="payment-options">
                                @foreach (\App\Providers\PaymentServiceProvider::PAYMENTS_PROVIDER as $key => $item)
                                    @php
                                        $paymentInterface = payment($key);
                                    @endphp
                                    <div class="payment-option form-group">
                                        <input type="radio" id="{{ $key }}" name="PAYMENT_TYPE"
                                            value="{{ $key }}">
                                        <label for="{{ $key }}">
                                            <span>{{ $paymentInterface->getIcon() }}</span>
                                        </label>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                    <input type="hidden" id="action" name="action" value="CHECK_USER">
                    <input type="hidden" id="session" name="session" value="">
                    <div class="col-lg-4">
                        <div class="form-group">
                            <label for="control" id="lable-control">{{ __('username') }}/{{ __('phone_number') }}</label>
                            <input type="text" class="form-control" id="control" name="control"
                                placeholder="{{ __('enter_data') }}">
                        </div>
                        <div class="form-group text-center">
                            <button class="btn btn-primary" id="next-btn">{{ __('submit') }}</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </section>
@endsection

@section('scripts')
    <script src="{{ asset('plugins/toastr/toastr.min.js') }}"></script>
    <script>
        $('#next-btn').click(function(e) {
            e.preventDefault();
            var button = $(this);
            button.prop('disabled', true);
            $.ajax({
                type: "POST",
                url: "{{ route('app.supporter.addAccount') }}",
                data: $('#form-action').serialize(),
                dataType: "JSON",
                success: function(response) {
                    if (response.success) {
                        $('#action').val(response.data.action);
                        $('#session').val(response.data.username);
                        $('#control').val(null);
                        switch (response.data.action) {
                            case 'LOGIN_WITH_PASSWORD':
                                $('#lable-control').html('Nhập mật khẩu để tiếp tục');
                                $('#control').attr('type', 'password');
                                break;
                            case 'LOGIN_WITH_OTP':
                                $('#lable-control').html('Nhập mã OTP để đăng nhập');
                                $('#control').attr('type', 'text');
                                break;
                            default:
                                window.location.reload();
                                break;
                        }
                    } else {
                        toastr.error('Thất bại', response.message);
                    }
                    button.prop('disabled', false);
                },
                complete: () => {
                    button.prop('disabled', false);
                }
            });
        });
    </script>
@endsection

@section('styles')
    <link rel="stylesheet" href="{{ asset('plugins/toastr/toastr.min.css') }}">
    <style>
        .payment-options {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
        }


        .payment-option input[type="radio"] {
            display: none;
        }

        .payment-option label {
            display: block;
            width: 100px;
            height: 100px;
            background-color: #f0f0f0;
            text-align: center;
            line-height: 100px;
            cursor: pointer;
            position: relative;
            border-radius: 10%;
        }

        .payment-option input:checked+label {
            border: 2px solid #6e0202;
            background-color: #9adf72;
        }

        img {
            width: 60px !important;
            height: 60px !important;
            border-radius: 5px;
        }
    </style>
@endsection