@extends('user.layouts.master')
@section('css')
    <style>
        .gallery-img {
            display: flex;
            align-items: center;
            justify-content: center;
            height: calc(100% - 64px);
            padding: 15px;
            padding-top: 0;
        }
        .gallery-img img {
            width: auto;
            height: auto;
            max-height: 380px;
        }
    </style>
@endsection
@section('user-content')
    <div class="container-fluid mt-2">
        <div class="row justify-content-center">
            <div class="col-lg-8 col-md-8 col-12">
                <div class="alert alert-success bg-warning text-white border-0">
                    <marquee scrollamount="6">
                        
                           
                        @foreach ($headlines as $key=>$headline)
                            <a href="{{ $headline->link }}" class="text-black" style="font-size:20px;"><i class="fe fe-link me-2 white-text" aria-hidden="true"></i>{{ $headline->title }}</a>
                        @endforeach
                    
                    </marquee>
                </div>
            </div>
        </div>
    </div>
    <div class="row justify-content-center">
        <div class="col-md-6 col-lg-6 col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Select Account For Balance Deposit</h4>
                </div>
                <div class="card-body">
                    <!--<div class="mb-2">-->
                    <!--    @if(Auth::user()->earning_balance < 1)-->
                    <!--        <button type="button" class="btn btn-sm btn-info mb-2" onclick="earningToDepositAlert()">Earning To Deposit</button>-->
                    <!--        <p class="text-danger" id="earning_to_deposit_error" style="display: none;">Eraning amount should be minimum 1$</p>-->
                    <!--    @else-->
                    <!--        <a href="{{route('user.earning-to-deposit')}}" class="btn btn-sm btn-info mb-2">Earning To Deposit</a>-->
                    <!--    @endif-->
                    <!--</div>-->
                    <form action="{{ route('user.deposit-store') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="">
                            <div class="form-group d-flex">
                                @foreach ($pay_accounts as $account)
                                    <div class="wallet-1 m-1" onclick="setAccount({{ $account->id }})">
                                        <img src="{{ URL::to($account->image) }}" class="mr-2" width="70" height="70" alt="{{ $account->name }}">
                                    </div>
                                @endforeach
                            </div>

                            <input type="hidden" name="deposit_account" id="deposit_account" value="">
                            <div id="deposit_area" style="display: none;">
                               @if(Auth::user()->status == 1) <div class="form-group">
                                    <h4 id="deposit_account_text"></h4>
                                    <p id="deposit_account_guideline"></p>
                                </div> @endif
                                 @if(Auth::user()->status == 0)
                                <div class="form-group">
                                    <h4 id="01737232187"></h4>
                                    <p id="deposit_account_guideline"></p>
                                </div> @endif
                                <hr>
                                <div class="form-group">
                                    <label for="link" class="form-label">Amount ($)<span class="text-red">*</span></label>
                                    <input class="form-control" type="number" name="amount" value="100" min="0" step="0.0001" placeholder="Deposit Amount">
                                </div>

                                <div class="form-group">
                                    <label for="phone" class="form-label">Phone <span class="text-red">*</span></label>
                                    <input class="form-control" type="text" name="phone" placeholder="Phone Number">
                                </div>

                                <div class="form-group">
                                    <label for="transaction_id" class="form-label">Transaction ID <span class="text-red">*</span></label>
                                    <input class="form-control" type="text" name="transaction_id" placeholder="Transaction ID">
                                </div>

                                <div class="form-group">
                                    <label for="receipt" class="form-label">Receipt <span class="text-red">*</span></label>
                                    <input class="form-control" type="file" name="receipt" required id="screen_shot_select_image" accept="image/*" onchange="readURL();">
                                    <div class="gallery-img">
                                        <img class="mt-2" id="screen_shot_show_image" id="photo" src="#" style="display:none;" />
                                    </div>
                                </div>

                                <div class="form-group">
                                    <button type="submit" class="btn btn-primary mt-4 mb-0">Submit</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('js')
    <script>
        function setAccount(account_id){
            $('#deposit_account').val(account_id);

            $.ajax({
                url: "{{ route('user.deposit-account-info') }}",
                type:"POST",
                data:{
                    _token: '{{csrf_token()}}',
                    account_id: account_id,
                },
                success:function(data) {
                    $('#deposit_area').show();
                    $('#deposit_account_text').html('Account No: '+data['account_no']);
                    $('#deposit_account_guideline').html(data['guideline']);
                },
            });
        }
        
        function readURL(){
            var file = $('#screen_shot_select_image').get(0).files[0];
            console.log(file);
            if(file){
                $('#screen_shot_show_image').show();
                var reader = new FileReader();
     
                reader.onload = function(){
                    $('#screen_shot_show_image').attr("src", reader.result);
                }
     
                reader.readAsDataURL(file);
            }
        }
        
        function earningToDepositAlert(){
            $('#earning_to_deposit_error').show();
        }
    </script>
@endsection