@extends('user_dashboard.layouts.app')
@section('content')
    @push('css')
        <style>
            .loader {
                position: absolute;
                z-index: 1;
                top: 40%;
                left: 46%;
                z-index: 9999;
                display: none;
            }

            .loader {
                background-color: #33333359;
                position: absolute;
                z-index: +100 !important;
                width: 100%;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
            }

            .loader img {
                width: 50px;
                top: 25%;
                transform: translateY(-50%);
                position: absolute;
                left: 48%;
            }

            .loader-hi8 {
                height: 1100px;
            }
        </style>
    @endpush
    <div class="loader loader-hi8" id="loading_div">
        <img src="{{ asset('loading.gif') }}" alt="" class="img-responsive">
    </div>
    <div class="rbt-dashboard-area mt--30 mb--50">
        <div class="container-fluid">
            <div class="row g-5">
                <div class="col-lg-3">
                    @include('user_dashboard.layouts.sidebar')
                </div>
                <div class="col-lg-9">
                    <div class="rbt-dashboard-content bg-color-white rbt-shadow-box mb--10">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="section-title">
                                    <h3 class="rbt-title-style-style">
                                        @isset($page_title)
                                            {{ $page_title }}
                                        @endisset
                                    </h3>
                                </div>
                            </div>
                        </div>
                        <form method="POST" id="bank_detail_form">
                            @csrf
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="type" class="form-label">Type <span class="text-danger">*</span></label>
                                    <div class="rbt-modern-select bg-transparent">
                                        <select id="type" name="type" class="selinp" style="height: 50%;" onchange="showDiv()" required>
                                            <option value="">Select type...</option>
                                            <option value="bank" @if(old('type',$bank_detail?->account_type) == 'bank') selected @endif>Bank</option>
                                            <option value="upi" @if(old('type',$bank_detail?->account_type) == 'upi') selected @endif>UPI</option>
                                        </select>
                                    </div>
                                    <span class="text-danger lbl_msg" id="error_type"></span>
                                </div>
                                <div class="col-md-6 mb-3 bank d-none">
                                    <label for="bank_name" class="form-label">Bank Name <span class="text-danger">*</span></label>
                                    <input type="text" id="bank_name" name="bank_name" value="{{old('bank_name',$bank_detail?->bank_name)}}" class="form-control inp" placeholder="Enter Bank Name...">
                                    <span class="text-danger lbl_msg" id="error_bank_name"></span>
                                </div>
                                <div class="col-md-6 mb-3 bank d-none">
                                    <label for="holder_name" class="form-label">Holder Name <span class="text-danger">*</span></label>
                                    <input type="text" id="holder_name" name="holder_name" value="{{old('holder_name',$bank_detail?->holder_name)}}" class="form-control inp" placeholder="Enter Holder Name...">
                                    <span class="text-danger lbl_msg" id="error_holder_name"></span>
                                </div>
                                <div class="col-md-6 mb-3 bank d-none">
                                    <label for="ifsc_code" class="form-label">IFSC Code <span class="text-danger">*</span></label>
                                    <input type="text" id="ifsc_code" name="ifsc_code" value="{{old('ifsc_code',$bank_detail?->ifsc_code)}}" class="form-control inp" placeholder="Enter IFSC Code...">
                                    <span class="text-danger lbl_msg" id="error_ifsc_code"></span>
                                </div>
                                <div class="col-md-6 mb-3 bank d-none">
                                    <label for="account_number" class="form-label">Account Number <span class="text-danger">*</span></label>
                                    <input type="text" id="account_number" name="account_number" value="{{old('account_number',$bank_detail?->account_number)}}" class="form-control inp" placeholder="Enter Account Number...">
                                    <span class="text-danger lbl_msg" id="error_account_number"></span>
                                </div>
                                <div class="col-md-6 mb-3 upi d-none">
                                    <label for="upi_id" class="form-label">UPI Id <span class="text-danger">*</span></label>
                                    <input type="text" id="upi_id" name="upi_id" value="{{old('upi_id',$bank_detail?->upi_id)}}" class="form-control inp" placeholder="Enter UPI Id...">
                                    <span class="text-danger lbl_msg" id="error_upi_id"></span>
                                </div>
                                <div class="col-md-6 mb-3 otp d-none">
                                    <label for="otp" class="form-label">OTP <span class="text-danger">*</span></label>
                                    <input type="text" id="otp" name="otp" class="form-control" placeholder="Enter OTP...">
                                    <span class="text-danger lbl_msg" id="error_otp"></span>
                                </div>
                            </div>
                            <div class="text-center">
                                <button id="send_otp" type="button" class="rbt-btn btn-sm btn-gradient radius-round  d-none" onclick="sendOtp()">Send OTP</button>
                                <button id="verify_otp" type="button" class="rbt-btn btn-sm btn-gradient radius-round  d-none" onclick="verifyOtp()">Verify OTP</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @push('js')

        <script>

            $(showDiv());
            function showDiv(){
                var type = $('#type').val();
                if(type === 'bank'){
                    $('.bank').removeClass('d-none');
                    $('#send_otp').removeClass('d-none');
                    $('#verify_otp').addClass('d-none');
                    $('.upi').addClass('d-none');
                    $('.otp').addClass('d-none');
                }else if(type === 'upi'){
                    $('.bank').addClass('d-none');
                    $('#send_otp').removeClass('d-none');
                    $('#verify_otp').addClass('d-none');
                    $('.upi').removeClass('d-none');
                    $('.otp').addClass('d-none');
                }else{
                    $('.bank').addClass('d-none');
                    $('#send_otp').addClass('d-none');
                    $('#verify_otp').addClass('d-none');
                    $('.upi').addClass('d-none');
                    $('.otp').addClass('d-none');
                }
            }

            function sendOtp(){
                $('#loading_div').show();
                $('.lbl_msg').text('');
                $.ajax({
                    type: 'POST',
                    url: "{{route('user.send.bank.otp')}}",
                    data: $('#bank_detail_form').serialize(),
                    success: function(data) {
                        $('.inp').attr('readonly',true);
                        $('.selinp').attr('disabled',true);
                        $('#send_otp').addClass('d-none');
                        $('#verify_otp').removeClass('d-none');
                        $('.otp').removeClass('d-none');
                        $('#loading_div').hide();
                    },
                    error: function(request, status, error) {
                        if (request.status === 422) {
                            var errors = request.responseJSON.errors;
                            $.each(errors, function(field, messages) {
                                $.each(messages, function(index, message) {
                                    $('#error_' + field).text(message);
                                });
                            });
                        } else {
                            alert('Somthing went wrong!');
                        }
                        $('#loading_div').hide();
                    }
                });
            }

            function verifyOtp(){
                $('#loading_div').show();
                $.ajax({
                    type: 'POST',
                    url: "{{route('user.verify.bank.otp')}}",
                    data: {
                        _token:"{{csrf_token()}}",
                        otp:$('#otp').val()
                    },
                    success: function(data) {
                        const Toast = Swal.mixin({
                            toast: true,
                            position: 'top-end',
                            showConfirmButton: false,
                            timer: 3000,
                            timerProgressBar: true,
                        });
                        Toast.fire({
                            icon: "success",
                            title: data.message,
                        });
                        location.reload();
                    },
                    error: function(request, status, error) {
                        if (request.status === 422) {
                            var errors = request.responseJSON.errors;
                            $.each(errors, function(field, messages) {
                                $.each(messages, function(index, message) {
                                    $('#error_' + field).text(message);
                                });
                            });
                        } else {
                            alert('Somthing went wrong!');
                        }
                        $('#loading_div').hide();
                    }
                });
            }

        </script>

    @endpush

@endsection