@extends('layouts.app')
@section('content')
    <!-- Main row -->
    <div class="row">

       <div class="col-12">
           <div class="card card-success">
               <div class="card-header">
                   <h3 class="card-title text-center">How to Send Payment To Our Account?</h3>
               </div>
               <!-- /.card-header -->
               <div class="card-body">
                   <div class="callout callout-info">
                       <h5><b>Step 1:</b></h5>
                       <p>Copy Reference No. <span class="text-danger"><b>{{$deposit->code}}</b> </span>Then Send <span class="text-danger"><b>$ {{$deposit->amount}}</b></span> to our following <span class="text-danger"><b>{{$gateway->name}}</b></span> account.</p>
                   </div>
                   <br>
                   <div class="callout callout-info">
                       <h5><b> Our {{$gateway->name}} Account</b></h5>
                       <p class="text-success"><b>{{$gateway->account}}</b></p>
                   </div>
                   <br>
                   <div class="callout callout-info">
                       <h5><b>Step 2:</b></h5>
                       <p>Copy TrX ID & Paste that into the form below. We can verify your payment faster if you wrote payment account info also. </p>
                   </div>
               </div>
               <!-- /.card-body -->
           </div>
       </div>
        <!-- Left col -->
        <section class="col-lg-7">
            <!-- Map card -->
            <div class="card card-primary">
                <div class="card-header">
                    <h3 class="card-title text-center">Add Funds to Your Account</h3>
                </div>
                <!-- /.card-header -->
                <div class="card-body">

                    @if (session()->has('message'))
                        <div class="alert alert-{{ session()->get('type')}} alert-dismissible">
                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                            <h5><i class="icon fa fa-check"></i> {{ session()->get('title')}}..!</h5>
                            {{ session()->get('message')}}
                        </div>
                    @endif
                <div class="row">
                    <section class="col-md-5">
                        <div class="card card-primary card-outline">
                            <div class="card-body box-profile">
                                <h3 class="card-title text-center">Your Selected Gateway</h3>
                                <br>
                                <div class="text-center">
                                    <img class="profile-user-img img-fluid img-circle"
                                         src="{{$gateway->image}}"
                                         alt="User profile picture">
                                </div>

                                <h3 class="profile-username text-center">{{$gateway->name}}</h3>

                                <p class="text-muted text-center">Deposit Summary</p>

                                <ul class="list-group list-group-unbordered mb-3">
                                    <li class="list-group-item">
                                        <b>Your Amount</b> <a class="float-right">${{$deposit->amount}}</a>
                                    </li>
                                    <li class="list-group-item">
                                        <b>Gateway Charge</b> <a class="float-right">${{$deposit->charge}}</a>
                                    </li>
                                    <li class="list-group-item">
                                        <b>Total Amount</b> <a class="float-right">${{$deposit->net_amount}}</a>
                                    </li>
                                    <li class="list-group-item">
                                        <b>Reference No.</b> <a class="float-right text-danger">{{$deposit->code}}</a>
                                    </li>
                                </ul>

                                <a href="{{route('depositCreate')}}" class="btn btn-primary btn-block"><b>Cancel Deposit</b></a>
                            </div>
                            <!-- /.card-body -->
                        </div>
                    </section>
                        <section class="col-md-7">
                            <div class="card card-success card-outline">
                                <div class="card-body box-profile">
                                    <h3 class="card-title text-center"><b>Payment Send? Fill Info Here</b></h3>
                                    <br>
                                    <form role="form" method="post" action="{{route('depositStore')}}">
                                        @csrf
                                        <div class="card-body">
                                            @if ($errors->any())
                                                <div class="alert alert-danger">
                                                    <ul>
                                                        @foreach ($errors->all() as $error)
                                                            <li><i class="icon fa fa-check"></i> <strong>{{ $error }}</strong></li>
                                                        @endforeach
                                                    </ul>
                                                </div>
                                            @endif

                                            <div class="form-group">
                                                <label for="proof">Proof of Payment</label>
                                                <textarea class="form-control" name="proof" id="proof" rows="10" required placeholder="Write your Transactions ID & account Number. So, you can verify your payment."></textarea>
                                            </div>
                                        </div>
                                        <!-- /.card-body -->
                                        <button type="submit" class="btn btn-success btn-block">Submit Payment Info</button>

                                    </form>
                                </div>
                                <!-- /.card-body -->
                            </div>
                        </section>
                </div>
                </div>
                <!-- /.card-body -->
            </div>
            <!-- /.card -->
        </section>

        <!-- /.Left col -->
        <!-- right col (We are only adding the ID to make the widgets sortable)-->
        <section class="col-lg-5">
            <!-- Calendar -->
            <div class="card card-warning">
                <div class="card-header">
                    <h3 class="card-title text-center">Important Information</h3>
                </div>
                <!-- /.card-header -->
                <div class="card-body">
                    <div class="alert alert-info">
                        <h5><i class="icon fa fa-info"></i> Keep In Mind! Gateway Fees</h5>

                        @if($gateways)
                            <ul>
                            @foreach($gateways as $gateway)
                               <li> <strong>{{$gateway->name}}</strong> Fees: <strong>$ {{$gateway->fixed}} (Fixed) + {{$gateway->percent}}%</strong></li>
                            @endforeach
                            </ul>
                        @endif


                    </div>
                    <div class="small-box bg-success">
                        <div class="inner">
                            <h3>$ {{Auth::user()->balance}}</h3>
                            <p>Current Balance</p>
                        </div>
                        <div class="icon">
                            <i class="ion ion-cash"></i>
                        </div>
                        <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
                    </div>
                </div>
                <!-- /.card-body -->
            </div>
            <!-- /.card -->
        </section>
        <!-- right col -->
    </div>
    <!-- /.row (main row) -->

@endsection