<!doctype html>
<html lang="en">
<head>
    <meta data-n-head="ssr" charset="utf-8">
    <meta data-n-head="ssr" name="viewport" content="width=device-width, initial-scale=1">
    <meta data-n-head="ssr" data-hid="description" name="description" content="{{env('APP_NAME')}} APP">
    <title>{{env('APP_NAME')}}</title>
    <link rel="stylesheet" href="{{asset('public/addBank.css')}}">
    <style>
        select {
            width: 100%;
            border: none;
            font-size: 16px;
            color: #00000047;
        }
        select:focus-visible{
            border: none;
            outline: none;
        }
    </style>
    <style>
        .methodSelector {
            width: 100%;
            height: 100%;
            background: #0000004a;
            position: fixed;
            z-index: -1;
            opacity: 0;
            top: 0;
            left: 0;
            transition: 0.5s;
        }
        .methodSelectorContainer {
            width: 100%;
            height: 200px;
            background: #fff;
            position: absolute;
            bottom: 0;
            border-top-left-radius: 19px;
            border-top-right-radius: 19px;
            padding: 14px;
            transition: 0.5s;
        }
        .close {
            width: 17px;
            position: absolute;
            right: 14px;
        }
        .methodSelectorContainer ul {
            padding: 0;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 10px;
            width: 100%;
            height: 100%;
        }
        .methodSelectorContainer ul li {
            background: #efe9e9;
            padding: 10px 94px;
            border-radius: 7px;
        }
        .van-cell .van-field__body {
	background: #F7F7F7;
	border-radius: 6px;
	height: 45px;
	padding: 0 24px;
	border: 1px solid #e1e1e1;
}
.addBank-page {
	background: #fff;
 
}
.header.dark[data-v-3d11c917] {
	background: #fff;
 
}
.van-cell::after {
	border-bottom: 1px solid transparent;
	bottom: 0;
	box-sizing: border-box;
	content: " ";
	left: 16px;
	pointer-events: none;
	position: absolute;
	right: 16px;
	-webkit-transform: scaleY(.5);
	transform: scaleY(.5);
}
    </style>
</head>
<body>
<div id="__nuxt">
    <div id="__layout">
        <div>
            <section class="addBank-page flex flex-col">
                <div data-v-3d11c917="" class="header-wrapper fixed w-full addBank-page-header">
                    <header data-v-3d11c917="" class="header w-full relative flex items-center dark" onclick="window.location.href='{{route('user.card')}}'">
                        <div data-v-3d11c917="" class="left absolute">
                            <svg data-v-3d11c917="" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                 viewBox="0 0 24 24" fill="none">
                                <path data-v-3d11c917=""
                                      d="M12.4888 15.9872C12.4888 15.9865 12.4903 15.9858 12.4903 15.9851C12.4846 15.9851 12.4839 15.9858 12.4888 15.9872ZM0.941297 13.007L8.30281 20.3685C8.93608 21.0018 9.96354 21.0018 10.5961 20.3685C11.2294 19.7367 11.2294 18.7092 10.5961 18.076L6.00247 13.4816H21.588C22.4836 13.4816 23.2092 12.7553 23.2092 11.8604C23.2092 10.9641 22.4828 10.2384 21.588 10.2384H6.00318L10.5968 5.64481C11.2301 5.01225 11.2301 3.98408 10.5968 3.35152C10.2802 3.03489 9.86482 2.87622 9.44946 2.87622C9.03481 2.87622 8.61945 3.03489 8.30352 3.35152L0.941297 10.7137C0.307328 11.347 0.307328 12.3731 0.941297 13.007Z"
                                      fill="currentColor"></path>
                            </svg>
                        </div>
                        <div data-v-3d11c917="" class="title bold flex-1">ব্যাঙ্ক কার্ড যোগ করুন</div>
                    </header>
                </div>
                <div class="addBank-page-content  flex-1">
                    <form class="van-form" action="{{route('setup.gateway.submit')}}" method="post" style="height:250px">
                        @csrf
                        <div role="button" tabindex="0"
                             class="flex flex-col field-item van-cell van-cell--clickable van-field">
                            <!--<div class="van-cell__title van-field__label"><span>Bank holder name</span></div>-->
                            <div class="van-cell__value van-field__value">
                                <div class="van-field__body">
                                    <input type="text" name="holdername"
                                        value="{{auth()->user()->holder_name}}"
                                        placeholder="ব্যবহারকারীর নাম লিখুন"
                                        class="van-field__control"></div>
                            </div>
                        </div>

                        <div class="flex flex-col field-item van-cell van-field">
                            <!--<div class="van-cell__title van-field__label"><span>Bank account type</span></div>-->
                            <div class="van-cell__value van-field__value" style="position:relative;">
                                <div class="van-field__body">
                                    <?php
                                        $myPaymentMethod = \App\Models\PaymentMethod::where('id', auth()->user()->gateway_method)->first();
                                    ?>
                                    <input type="text"
                                           readonly
                                           value="{{$myPaymentMethod ? $myPaymentMethod->name : ''}}"
                                           id="ppMethod"
                                           placeholder="ব্যাংক  কার্ড লিখন"
                                           class="van-field__control">
                                        <img onclick="opendCCmethod()" class="ccdown" src="{{asset('public/icons8-down-button-30.png')}}" alt="">
                                        <input type="hidden" name="gateway_method">
                                </div>

                            </div>
                        </div>

                        <div class="flex flex-col field-item van-cell van-field">
                            <!--<div class="van-cell__title van-field__label"><span>Bank Account Address</span></div>-->
                            <div class="van-cell__value van-field__value">
                                <div class="van-field__body">
                                    <input type="text" name="gateway_number"
                                        value="{{auth()->user()->gateway_number}}"
                                        placeholder="ব্যাংক একাউন্ট লিখুন"
                                        class="van-field__control"></div>
                            </div>
                        </div>
                        <button data-v-3d9a385b="" type="submit" class="w-full submit button flex items-center justify-center relative button-primary small">
                            জমা দিন
                        </button>
                    </form>
                </div>
            </section>
        </div>
    </div>
</div>

<div class="methodSelector">
    <div class="methodSelectorContainer">
        <img src="{{asset('public/close.png')}}" class="close" onclick="closeMethodModal(event)" alt="">
        <ul>
            @foreach(\App\Models\PaymentMethod::where('status', 'active')->get() as $element)
                <li onclick="selectMethod(this ,'{{$element->id}}')">{{$element->name}}</li>
            @endforeach
        </ul>
    </div>
</div>

<script>
    function closeMethodModal(event){
        event.stopPropagation();

        let methodSelector = document.querySelector('.methodSelector');
        let methodSelectorContainer = document.querySelector('.methodSelectorContainer');

        methodSelector.style.opacity = '0';
        methodSelector.style.zIndex = '-1';

        methodSelectorContainer.style.bottom = '-100%';
    }

    function opendCCmethod(){
        let methodSelector = document.querySelector('.methodSelector');
        let methodSelectorContainer = document.querySelector('.methodSelectorContainer');

        methodSelector.style.opacity = '1';
        methodSelector.style.zIndex = '99';

        methodSelectorContainer.style.bottom = '0';
    }

    function selectMethod(_this, id){
        document.getElementById('ppMethod').value = _this.innerHTML;
        document.querySelector('input[name="gateway_method"]').value = id;
        closeMethodModal(event)
    }
</script>
</body>
</html>
