@extends('layouts.app')

@section('content')
    <section class="mainBanner">
        <img src="{{asset('assets/images/banElm.png')}}" class="img-fluid banElm" alt="">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <div class="banCont">
                        <h5>Local Time: 14:30</h5>
                        <h5>Last  Visit: 03/28/2022 at 02:14 EST</h5>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class=" tRight">
                        <h5>Updated every several minutes</h5>
                    </div>
                </div>
            </div>
            <div class="row bWhite align-items-center">
                <div class="col-md-3 text-center">
                    <div class="mbCont">
                        <figure>
                            <img src="{{asset('assets/images/jhnImg.png')}}" class="img-fluid" alt="">
                        </figure>
                        <h3>{{auth()->user()->first_name}} {{auth()->user()->last_name}}</h3>
                        <p>Investor</p>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="mbCont">
                        <div class="bal">
                            <h2>Balances</h2>
                            <h4>$ <span id="walletBal">{{auth()->user()->wallet_balance}}</span></h4>
                        </div>
                        <div class="amm">
                            <p>Customer id: {{auth()->user()->id}}</p>
                        </div>
                        <div>
                        </div>
                        <ul>
                            <li>
                                <a href="javascript:void(0)" data-toggle="modal" data-target="#add-balance-modal">Add
                                    Balance</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="mbCont">
                        <div class="bal">
                            <h2>Profit</h2>
                            <h4>$ <span id="userProfit">{{auth()->user()->profit}}</span></h4>
                        </div>
                        <div class="amm">
                            <p></p>
                        </div>
                        <ul>
                            <li>
                                <a href="javascript:;">withdraw</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="mbCont">
                        <h2>Transaction</h2>
                        <ul class="trans">
                            <li>
                                <a href="javascript:;">Latest</a>
                            </li>
                            <li>
                                <a href="javascript:;">Upcoming</a>
                            </li>
                            <li>
                                <a href="javascript:;">View all</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="row mt-5">
                <div class="col-md-12">
                    <div class="banForm">
                        <form class="form" action="{{route('business-directory-list')}}" method="POST">
                            @csrf
                            <div class="row m-0">
                                <div class="col-md-5 pl-0">
                                    <div class="input-group mb-3">
                                        <select class="form-control" id="exampleInputPassword1" name="category">
                                            <option value="">Select Category</option>
                                            <option value="restaurant">Restaurant</option>
                                            <option value="accommodation">Accommodation</option>
                                        </select>
                                        <div class="input-group-append">
                                            <span class="input-group-text" id="basic-addon2"><i
                                                    class="fal fa-search"></i></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-5">
                                    <div class="input-group mb-3">
                                        <input type="text" class="form-control" placeholder="Enter Address"
                                               aria-describedby="basic-addon2" name="address">
                                        <div class="input-group-append">
                                            <span class="input-group-text" id="basic-addon2"><i
                                                    class="fal fa-map-marker-alt"></i></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <button type="submit" class="btn">Search</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="banTabs">
                        <ul class="nav nav-tabs" id="myTab" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" id="personal-tab" data-toggle="tab" href="#personal"
                                   role="tab" aria-controls="personal" aria-selected="true">Personal</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="global-tab" data-toggle="tab" href="#global" role="tab"
                                   aria-controls="global" aria-selected="false">Global</a>
                            </li>
                        </ul>
                        <div class="tab-content" id="myTabContent">
                            <div class="tab-pane fade show active" id="personal" role="tabpanel"
                                 aria-labelledby="personal-tab">
                                <div class="row">
                                    <div class="col-md-5">
                                        <div class="transaction">
                                            <div class="trans-1">
                                                <div class="cardM">
                                                    <img src="{{asset('assets/images/money.png')}}" class="img-fluid"
                                                         alt="">
                                                    <h3>Transaction</h3>
                                                </div>
                                                <img src="{{asset('assets/images/cardMch.png')}}"
                                                     class="img-fluid cardMch" alt="">
                                            </div>
                                            <div class="transForm">
                                                <p>*** Insufficient Funds in Debit Account ***</p>
                                                <div class="input-group mb-3">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text" id="basic-addon1">Total</span>
                                                    </div>
                                                    <input type="text" class="form-control" placeholder="00.00"
                                                           aria-label="Username" aria-describedby="basic-addon1">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-7">
                                        <div class="transaction">
                                            <div class="trans-1">
                                                <div class="cardM">
                                                    <img src="{{asset('assets/images/bank.png')}}" class="img-fluid"
                                                         alt="">
                                                    <h3>Banking</h3>
                                                </div>
                                            </div>
                                            <div class="transForm bnForm">
                                                <p>Make a Deposit</p>

                                                <form>
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <div class="input-group mb-3">
                                                                <div class="input-group-prepend">
                                                                    <span class="input-group-text"
                                                                          id="basic-addon1">Deposit Funds</span>
                                                                </div>
                                                                <input type="text" class="form-control"
                                                                       placeholder="00.00" aria-label="Username"
                                                                       aria-describedby="basic-addon1">
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="input-group mb-3">
                                                                <div class="input-group-prepend">
                                                                    <span class="input-group-text"
                                                                          id="basic-addon1">Debit</span>
                                                                </div>
                                                                <input type="text" class="form-control"
                                                                       placeholder="00.00" aria-label="Username"
                                                                       aria-describedby="basic-addon1">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <div class="input-group mb-3">
                                                                <div class="input-group-prepend">
                                                                    <span class="input-group-text"
                                                                          id="basic-addon1">Amount to<br>Transfer</span>
                                                                </div>
                                                                <input type="text" class="form-control"
                                                                       placeholder="00.00" aria-label="Username"
                                                                       aria-describedby="basic-addon1">
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="input-group mb-3">
                                                                <div class="input-group-prepend">
                                                                    <span class="input-group-text"
                                                                          id="basic-addon1">Savings</span>
                                                                </div>
                                                                <input type="text" class="form-control"
                                                                       placeholder="00.00" aria-label="Username"
                                                                       aria-describedby="basic-addon1">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </form>

                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <div class="tab-pane fade" id="global" role="tabpanel" aria-labelledby="global-tab">
                                <div class="row">
                                    <div class="col-md-5">
                                        <div class="transaction">
                                            <div class="trans-1">
                                                <div class="cardM">
                                                    <img src="{{asset('assets/images/money.png')}}" class="img-fluid"
                                                         alt="">
                                                    <h3>Transaction</h3>
                                                </div>
                                                <img src="{{asset('assets/images/cardMch.png')}}"
                                                     class="img-fluid cardMch" alt="">
                                            </div>
                                            <div class="transForm">
                                                <p>*** Insufficient Funds in Debit Account ***</p>
                                                <div class="input-group mb-3">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text" id="basic-addon1">Total</span>
                                                    </div>
                                                    <input type="text" class="form-control" placeholder="00.00"
                                                           aria-label="Username" aria-describedby="basic-addon1">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-7">
                                        <div class="transaction">
                                            <div class="trans-1">
                                                <div class="cardM">
                                                    <img src="{{asset('assets/images/bank.png')}}" class="img-fluid"
                                                         alt="">
                                                    <h3>Banking</h3>
                                                </div>
                                            </div>
                                            <div class="transForm bnForm">
                                                <p>Make a Deposit</p>

                                                <form>
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <div class="input-group mb-3">
                                                                <div class="input-group-prepend">
                                                                    <span class="input-group-text"
                                                                          id="basic-addon1">Deposit Funds</span>
                                                                </div>
                                                                <input type="text" class="form-control"
                                                                       placeholder="00.00" aria-label="Username"
                                                                       aria-describedby="basic-addon1">
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="input-group mb-3">
                                                                <div class="input-group-prepend">
                                                                    <span class="input-group-text"
                                                                          id="basic-addon1">Debit</span>
                                                                </div>
                                                                <input type="text" class="form-control"
                                                                       placeholder="00.00" aria-label="Username"
                                                                       aria-describedby="basic-addon1">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <div class="input-group mb-3">
                                                                <div class="input-group-prepend">
                                                                    <span class="input-group-text"
                                                                          id="basic-addon1">Amount to<br>Transfer</span>
                                                                </div>
                                                                <input type="text" class="form-control"
                                                                       placeholder="00.00" aria-label="Username"
                                                                       aria-describedby="basic-addon1">
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="input-group mb-3">
                                                                <div class="input-group-prepend">
                                                                    <span class="input-group-text"
                                                                          id="basic-addon1">Savings</span>
                                                                </div>
                                                                <input type="text" class="form-control"
                                                                       placeholder="00.00" aria-label="Username"
                                                                       aria-describedby="basic-addon1">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </form>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="bnTbl">
                        <table>
                            <tr>
                                <th>Name</th>
                                <th>Debit Account</th>
                                <th>Savings Account</th>
                                <th>Network Earnings</th>
                                <th>Standard Earnings</th>
                                <th>Notes</th>
                            </tr>
                            <tr>
                                <td>Petey S.</td>
                                <td>0.00</td>
                                <td>0.00</td>
                                <td>0.00</td>
                                <td>0.00</td>
                                <td>T1: PTS , T2: PTSt</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="imgSec">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <img src="{{asset('assets/images/pShop.png')}}" class="img-fluid" alt="">
                </div>
            </div>
        </div>
    </section>
    <section class="memSec">
        <img src="{{asset('assets/images/memBg.png')}}" class="img-fluid memBg" alt="">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h2 class="headMem">Members</h2>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <div class="banCont">
                        <h5>Select a Member</h5>
                    </div>
                </div>
                <div class="col-md-4 offset-md-4">
                    <div class="tRight">
                        <h5>Community Size: {{$users->count()}} Users</h5>
                    </div>
                </div>
            </div>
            <div class="row">
                @forelse($users as $user)
                    <div class="col-md-4">
                        <div class="memCrad">
                            <div class="memImg text-center">
                                <img src="{{asset("assets/images/mem-1.png")}}" class="img-fluid" alt="">
                            </div>
                            <h4>{{$user->first_name}} {{$user->last_name}}</h4>
                            <h5>ID: {{$user->id}}</h5>
                        </div>
                    </div>
                @empty
                    <div class="col-md-12">
                        <h2 class="headMem">No members found!</h2>
                    </div>
                @endforelse
            </div>
            <!--            <div class="row">
                            <div class="col-md-12">
                                <div class="mnBtn">
                                    <a href="javascript:;" class="themeBtn">
                                        <span>View all Members</span>
                                    </a>
                                </div>

                            </div>
                        </div>-->
        </div>
        <img src="{{asset('assets/images/memElm.png')}}" class="img-fluid memElm" alt="">
    </section>
    <section class="bDirectories">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h2 class="headMem">Business Directories</h2>
                </div>
            </div>


                <div class="row">
                    @forelse($companies as $company)

                        <div class="col-md-4">
                            <form method="post" action="{{route('order')}}" >
                                @csrf
                            <div class="bdCrad">
                                @if ($company->attachment)
                                    <img
                                        src="{{asset('uploads')}}/{{$company->attachment->content}}" class="img-fluid"
                                        alt="{{$company->name}}" style="width: 300px; height: 300px">
                                @endif
                                <h3>{{$company->name}}</h3>
                                <p>{{$company->address}}</p>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <input type="hidden" name="company_id" value="{{$company->id}}"/>
                                    <input type="hidden" name="service_id"   value=""  id="service_id"/>
                                    <select name="price" id="select_Service" required>
                                        <option  value="" disabled selected>select service </option>
                                        @foreach($company->services as $service)
                                            <option  data-id="{{$service->id}}" id="service" value="{{$service->pivot->price}}">{{$service->service_name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-6 sib">
                                    <h4 id="price"></h4>
                                </div>
                            </div>
                            <div><input type="submit" class="btn btn-primary mt-2" value="Place order"/></div>
                            </form>
                        </div>


                    @empty
                        <div class="col-md-4">
                            <div class="bdCrad">
                                <p>No companies found!</p>
                            </div>
                        </div>

                    @endforelse

                    <div class="col-md-12">
                        <div class="mnBtn">
                            <a href="{{route('business-directory-list')}}" class="themeBtn">
                                <span>View all Directories</span>
                            </a>
                        </div>
                    </div>
                </div>

        </div>
    </section>
    <section class="repSec">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-3">
                    <img src="{{asset('assets/images/repLogo.png')}}" class="img-fluid" alt="">
                </div>
                <div class="col-md-4">
                    <h3 class="repHead">Wouldn’t it be nice if your
                        receipts looked like this?</h3>
                </div>
                <div class="col-md-2">
                    <img src="{{asset('assets/images/repMch.png')}}" class="img-fluid" alt="">
                </div>
            </div>
        </div>
    </section>
    <section class="psSec">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-9">
                    <div class="psCont">
                        <p>The world’s best money back pre-paid debit card program is here at last!</p>
                    </div>
                </div>
                <div class="col-md-2">
                    <img src="{{asset('assets/images/psImg.png')}}" class="img-fluid" alt="">
                </div>
            </div>
        </div>
    </section>

    <div class="modal fade" id="add-balance-modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Add Balance</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="card-body">
                                <div class="form-group">
                                    <label for="exampleInputEmail1">Amount</label>
                                    <input type="number" class="form-control walletAmount"
                                           id="exampleInputEmail1"
                                           placeholder="Enter amount" name="amount">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary updateWallet">Save changes</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
@endsection

@push('custom-scripts')
    <script>
        $(document).ready(function () {


            // $(document).on()
            // $('#select_Service').change(function(){
            //     $('.price').html($('#select_Service').val());
            // });
            $(document).on('change', '#select_Service', function(e){
                e.preventDefault();
                $(this).parent().siblings('.sib').children().html($(this).val())
                value= $(this).children("option:selected").data('id');


                $(this).siblings('#service_id').val(value);

                // $('#price').html($(this).val());
                //Decrement field counter
            });

            $('.updateWallet').click(function () {
                var walletAmount = $('.walletAmount').val();
                var url = "{{route('update-user-wallet')}}";


                $.ajax({
                    url: url,
                    type: "POST",
                    dataType: 'JSON',
                    data: {
                        wallet_amount: walletAmount
                    },
                    success: function (output) {
                        $('#walletBal').text(output.result.wallet_balance)
                        toastr.success(output.message)
                        $('.walletAmount').val('')
                    },
                    error: function (error) {
                        if (error.status === 422) {
                            toastr.error(error.response.data.errors.wallet_amount[0])
                        } else {
                            toastr.error('Something went wrong. Please try again!')
                        }
                    }
                });
            })
        });
    </script>
@endpush