@extends('layouts.dashboard')
@section('content')
    <div class="dashboard-ps pt-5">
        <div class="container-fluid">
            <div class="row no-gutters dashboard-content-wrap mx-2">
                <div class="col-12">
                    <div class="ps-show-maincontent d-flex flex-column">
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-12 col-md-7 col-lg-6">
                                    <div class="farmlist-content d-flex flex-column align-items-center">
                                        <div class="farmcard__wrap fc-new">
                                            <div class="farmcard__body">
                                                <div class="farmcard__body--image-wrap privspons">
                                                    <img src="{{asset('img/agro-estate.png')}}" alt="Custom photo for farm cycle" class="farmcard__body--image" style="width:100%;">
                                                </div>
                                                <div class="farmcard__body--text-wrap privspons">
                                                    <br>
                                                    <div class="container-fluid pt-4">
                                                        <div class="row mb-0">
                                                            <div class="col-8">
                                                                <div class="content lhs">
                                                                    <p class="farmcard__title mb-auto" style="text-transform: uppercase;">Agro Estate</p>
                                                                </div>
                                                            </div>
                                                            <div class="col-4">
                                                                <div class="content">
                                                                    <p class="farmcard__type ml-auto">Palm Tree</p>
                                                                    <p class="farmcard__date ml-auto"><br></p>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="row mb-3">
                                                            <div class="col-7">
                                                                <div class="content lhs">
                                                                    <p class="farmcard__duration">
                                                                        <span class="farmcard__duration--label" ><img class="clock-icon" src="{{asset('img/clock-icon.svg')}}" alt=""> Duration</span>
                                                                        <span class="farmcard__duration--length">5 years</span>
                                                                    </p>
                                                                </div>
                                                            </div>
                                                            <div class="col-5">
                                                                <div class="content">
                                                                    <p class="farmcard__location ml-auto">
                                                                        <span><img class="clock-icon" src="{{asset('img/gps-icon.svg')}}" alt=""></span>
                                                                        Oyo State
                                                                    </p>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-7">
                                                                <div class="content lhs">
                                                                    <p class="farmcard__price">
                                                                        <span class="farmcard__price--unit" ><img class="clock-icon" src="{{asset('img/tag-icon.png')}}" alt=""> Price per unit</span>
                                                                        <span class="farmcard__price--amt">NGN 100,000.00</span>
                                                                    </p>
                                                                </div>
                                                            </div>
                                                            <div class="col-5">
                                                                <div class="content">
                                                                    <p class="farmcard__returns ml-auto">
                                                                        <span><img class="clock-icon" src="{{asset('img/roi-icon.svg')}}" alt="">250% Returns</span>
                                                                    </p>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 col-md-5 col-lg-6">
                                    <div class="ps-content h-100 d-flex justify-content-center justify-content-md-start">
                                        <div class="ps-details mt-5 mt-md-0 p-4">
                                            <h2 class="mb-4">Cycle Information</h2>
                                            <p class="mb-3">Window Duration: <span>5 years</span></p>
                                            <p class="mb-3">Farmcycle Returns: <span>250%</span></p>

                                            <div class="ps-details-cta d-flex">
                                                <a href="#" data-toggle="modal" data-target="#sponsor-now" class="ps-sponsor-btn mt-4 d-inline-block mr-4">Sponsor Now</a>
                                                <a href="#" data-toggle="modal" data-target="#sponsor-via-vestbank" class="ps-sponsor-btn btn-vestbank mt-4 d-inline-block">Sponsor via Vestbank</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="vestbank-sponsor-modal-wrap priv-spons__vestbank-sponsor">
            <div class="modal fade" id="sponsor-via-vestbank" tabindex="-1" role="dialog" aria-labelledby="sponsor-via-vestbank" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered vestbank-sponsor-modal" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                        <h5 class="modal-title heading__secondary text-center" id="exampleModalLongTitle">Sponsor via Vestbank</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">X</span>
                        </button>
                        </div>
                        <div class="modal-body">
                            <form action="{{route('estatefunding.addFundsVestbank')}}" id="ps-sponsor-now" class="vestbank-sponsor__form" method="POST">
                                @csrf
                                <input type="hidden" name="type" value="vestbank">
                                <div class="form-group ">
                                    <label class="vestfunds-label ps-amount-label" for="ps__amount">
                                        Specify the number of units here
                                    </label>
                                    <input type="number" min="1" name="unit" id="ps-sponsor-now__amount" class="form-control specify-amount__input {{ $errors->has('unit') ? ' is-invalid' : '' }}" placeholder="Enter number of units (one unit costs NGN100,000)">
                                    @if ($errors->has('unit'))
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $errors->first('unit') }}</strong>
                                        </span>
                                    @endif
                                </div>

                                <input type="hidden" name="type" value="vestbank">

                                <div class="form-group mt-5">
                                    <button type="submit" class="vestfunds_btn btn">Sponsor Now</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="priv-spons__ps-sponsor-now">
            <div class="modal fade" id="sponsor-now" tabindex="-1" role="dialog" aria-labelledby="deposit-method-bankTitle" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered vestfunds-modal" role="document">
                    <div class="modal-content m-3 mx-md-5">
                        <div class="modal-header">
                            <h5 class="modal-title heading__secondary text-center" id="exampleModalLongTitle">SPONSOR NOW</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">X</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="deposit-method-bank__content">
                                <div class="container-fluid">
                                    <div class="row">
                                        <div class="col-12 col-md-8">
                                            <form action="{{route('estatefunding.add')}}" method="POST" class="ps-sponsor-now__form" id="vest-funds__form">
                                                @csrf
                                                <input type="hidden" name="type" value="bank">
                                                <div class="row">
                                                    <div class="col-12">
                                                        <p class="vestfunds-heading mb-5">Please fill the form below to continue</p>
                                                    </div>
                                                </div>

                                                <div class="row">
                                                    <div class="col-12 col-md-8 col-lg-6">
                                                        <div class="form-group mb-5">
                                                            <label class="vestfunds-label" id="ps-unit__label" for="unit" >Enter Units </label>
                                                            <input type="number" min="1" class="form-control deposit-method-bank__amount {{ $errors->has('unit') ? ' is-invalid' : '' }}" name="unit" id="ps-sponsor-now__unit" placeholder="Enter Number of Units">
                                                            @if ($errors->has('unit'))
                                                                <span class="invalid-feedback" role="alert">
                                                                    <strong>{{ $errors->first('unit') }}</strong>
                                                                </span>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="row mb-5">
                                                    <div class="col-12 col-md-8 col-lg-6">
                                                        <button type="submit" id="ps-sponsor-now__btn" class="vestfunds_btn btn mb-md-5">Sponsor Now</button>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>

                                        <div class="col-12 col-md-4 modal-bg">
                                            <div class="bank-transfer">
                                                <div class="content-wrap">
                                                    <h3>Bank transfer</h3>
                                                    <div class="vestfunds__account">
                                                        <p class="vestfunds__account--text"> Bank Name: Keystone Bank</p>
                                                        <p class="vestfunds__account--text"> Account Name: GLOBETROT FARMSPONSOR NIG LTD</p>
                                                        <p class="vestfunds__account--text"> Account Number: 1012091769</p>
                                                    </div>
                                                    <br><br>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @include('includes.javascript.ps-sponsor-now')
    </div>
@endsection