@extends('layouts.landing')

@section('title', 'Investments')

@section('content')
    <style>
        .custom-nav-tabs .custom-nav-link.active {
            color: #fff !important;
            background-color: #5151ff !important;
            border-radius: 8px;
            padding: 0.6rem 1rem;
        }

        .custom-nav-tabs .custom-nav-link {
            background: none;
            border: 1px solid #F6F6F6 !important;
            padding: 0.6rem 1rem;
            border-radius: 8px;
        }

        .no-margin {
            margin: 0 !important;
        }

        .carousel-cell {
            width: 70%;
            left: 0px;
            margin-right: 1rem;
        }

        .custom-cell {
            width: 100% !important;
            left: 7rem !important;
        }

        /* .flickity-viewport {
                                                                                                                                                                                            height: 400px !important;
                                                                                                                                                                                        } */
        .flickity-slider {
            margin-left: -5rem;
        }

        .flickity-page-dots {
            display: none;
        }
    </style>
    @include('elements.create-investment')
    @include('elements.buy-investment')
    @include('modals.deleteInvestment')
    @include('modals.editInvestment')
    <div class="row mobile-mt-8">
        @if (Session::has('inv_udpated'))
            <div class="alert alert-success alert-dismissible mt-2"
                style="width: 60%; margin-inline: auto; background-color: rgb(184, 248, 184)" role="alert">
                <button type="button" class="close" data-dismiss="alert">
                    <i class="fa fa-times"></i>
                </button>
                <strong>Success ! {{ session('inv_udpated') }}</strong>
            </div>
        @endif

        <div class="col-12">
            <div class="card w-100 border-0 p-0 bg-white shadow-xss rounded-xxl">
                <div class="card-body p-4">
                    <div class="row">
                        <div class="col">
                            <h4 class="fw-700">Hi, {{ Auth::user()->first_name }}</h5>
                        </div>
                        @if (Auth::user()->isSuperAdmin() || Auth::user()->isTenant() || Auth::user()->isAdmin())
                            <div class="col-auto">
                                <span class="custom-btn cursor-pointer rounded-2 create-investment text-white">
                                    <i class="fe fe-plus"></i> Create Investment
                                </span>
                            </div>
                        @endif
                    </div>

                    <div class="row my-4">
                        <div class="col-12 col-lg-7 col-xl-7">
                            <div class="hide-mobile">
                                <div class="carousel" data-flickity='{ "autoPlay": false }'>
                                    <div class="carousel-cell">
                                        <div class="custom-card investmentCard br-12 border-0 mb-3">
                                            <div class="row align-items-center gx-0">
                                                <div class="col">
                                                    <h5 class="text-white mb-4">
                                                        Fixed Income
                                                    </h5>
                                                    <span class="h4 fw-700 text-white mb-0">
                                                        ₦{{ number_format($fixed_investment_balance, 2) }}
                                                    </span>
                                                </div>
                                                <div class="col-auto">
                                                    <h6 class="text-white">Assets</h6>
                                                    <span class="h4 mb-0 text-white">
                                                        {{ number_format($fixed_asset_count) }}
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="carousel-cell">
                                        <a href="/investments/details/{{ Auth::user()->id }}">
                                            <div class="custom-card investmentCard br-12 border-0 mb-3">
                                                <div class="row align-items-center gx-0">
                                                    <div class="col">
                                                        <h5 class="text-white mb-4">
                                                            Dividend Shares
                                                        </h5>
                                                        <span class="h4 fw-700 text-white mb-0">
                                                            ₦{{ number_format($dividend_investment_balance, 2) }}
                                                        </span>
                                                    </div>
                                                    <div class="col-auto">
                                                        <h6 class="text-white">Shares</h6>
                                                        <span class="h4 mb-0 text-white">
                                                            {{ number_format($dividend_asset_count) }}
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="show-mobile">
                                <div class="swiper mySwiper">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide">
                                            <div class="custom-card investmentCard br-12 border-0 mb-3">
                                                <div class="row align-items-center gx-0">
                                                    <div class="col">
                                                        <h5 class="text-white mb-4">
                                                            Fixed Income
                                                        </h5>
                                                        <span class="h4 fw-700 text-white mb-0">
                                                            ₦{{ number_format($fixed_investment_balance, 2) }}
                                                        </span>
                                                    </div>
                                                    <div class="col-auto">
                                                        <h6 class="text-white">Assets</h6>
                                                        <span class="h4 mb-0 text-white">
                                                            {{ number_format($fixed_asset_count) }}
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="custom-card investmentCard br-12 border-0 mb-3">
                                                <div class="row align-items-center gx-0">
                                                    <div class="col">
                                                        <h5 class="text-white mb-4">
                                                            Dividend Shares
                                                        </h5>
                                                        <span class="h4 fw-700 text-white mb-0">
                                                            ₦{{ number_format($dividend_investment_balance, 2) }}
                                                        </span>
                                                    </div>
                                                    <div class="col-auto">
                                                        <h6 class="text-white">Assets</h6>
                                                        <span class="h4 mb-0 text-white">
                                                            {{ number_format($dividend_asset_count) }}
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="border br-12 p-4 mb-4">
                                <h5>All Investments</h5>
                                <div class="row mt-4">
                                    <div class="col-12">
                                        <form action="{{ url('/elearning') }}" method="GET"
                                            class="float-left form-bg header-search w-100" role="search">
                                            <div class="form-group mb-0 icon-input br-50">
                                                <i class="feather-search course-icon font-lg text-grey-500"></i>
                                                <input type="text" name="search" id="navbar-search"
                                                    placeholder="Search for investments" value="{{ @$course_search }}"
                                                    class="custom-border br-50 custom-global-search w-100 border-0 pt-2 pb-2 ps-5 pe-3 fw-500 w350"
                                                    style="background: #f0f2fd;">
                                            </div>
                                        </form>
                                    </div>
                                    <div class="col-12">
                                        <div class="mt-4">
                                            <ul class="nav d-flex nav-tabs custom-nav-tabs border-0 text-center mx-auto nav-overflow header-tabs"
                                                id="myTab" role="tablist" style="overflow-x: auto;">
                                                @forelse ($categories as $category)
                                                    <li class="nav-item no-margin">
                                                        <a class="nav-link custom-nav-link {{ $category->id == $first_category->id ? 'active' : '' }}"
                                                            id="{{ Str::words($category->name, 1, '') }}-tab"
                                                            data-toggle="tab"
                                                            href="#{{ Str::words($category->name, 1, '') }}" role="tab"
                                                            aria-controls="{{ Str::words($category->name, 1, '') }}"
                                                            aria-selected="{{ $category->id == $first_category->id ? 'true' : 'false' }}">
                                                            {{ $category->name }}
                                                        </a>
                                                    </li>
                                                @empty
                                                @endforelse
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-content negative-margin-top-50" id="wizardSteps">
                                    @forelse ($categories as $category)
                                        <div class="tab-pane {{ $category->id == $first_category->id ? 'fade show active' : '' }}"
                                            id="{{ Str::words($category->name, 1, '') }}" role="tabpanel"
                                            aria-labelledby="{{ Str::words($category->name, 1, '') }}-tab">
                                            @php
                                                $current_investments = App\Models\Investment::where('category_id', $category->id)->get();
                                            @endphp
                                            @if (count($current_investments) > 0)
                                                <div
                                                    style="display: flex; flex-direction: row; justify-content:space-between; align-items:center">
                                                    <div class="row">
                                                        <div class="col">
                                                            <ul class="nav nav-tabs nav-overflow header-tabs"
                                                                id="myTab" role="tablist">
                                                                <li class="nav-item">
                                                                    <a class="nav-link active" id="open-tab"
                                                                        data-toggle="tab" href="#open" role="tab"
                                                                        aria-controls="open" aria-selected="true">
                                                                        Open Investment
                                                                    </a>
                                                                </li>
                                                                <li class="nav-item">
                                                                    <a class="nav-link" id="closed-tab" data-toggle="tab"
                                                                        href="#closed" role="tab"
                                                                        aria-controls="closed" aria-selected="false">
                                                                        Closed Investment
                                                                    </a>
                                                                </li>
                                                            </ul>

                                                        </div>

                                                    </div>
                                                    <button class="invest"
                                                        style="width: 100px; height: 40px; border-radius: 16px; padding: 6px; background: #5151ff; color: #ffffff">Invest
                                                    </button>
                                                </div>
                                                <div class="row">
                                                    <div class="tab-content" id="wizardSteps">
                                                        <div class="tab-pane fade show active" id="open"
                                                            role="tabpanel" aria-labelledby="open-tab">
                                                            @forelse ($opened_investments as $investment)
                                                                {{-- @dd($investment->business_plan); --}}

                                                                <div
                                                                    class="row {{ $investment->id == $first_opened_investment->id ? 'mt-4' : 'border-top-xs' }}  py-4">
                                                                    <div class="col">
                                                                        <div class="d-flex align-items-center"
                                                                            style="justify-content: space-between">
                                                                            <a href="{{ $investment->business_plan }}"
                                                                                target="_blank">
                                                                                <div style="padding: 10px">
                                                                                    <img style="width: 200px;"
                                                                                        src="{{ $investment->asset_image }}"
                                                                                        class="mr-3  rounded-2"
                                                                                        alt="">
                                                                                </div>
                                                                            </a>
                                                                            <span>
                                                                                @php
                                                                                    $close = \Carbon\Carbon::parse($investment->created_at)->toFormattedDateString();
                                                                                    $date = strtotime($close);
                                                                                    $validity_date = $investment->validity;
                                                                                    $get_closing_date = strtotime('+' . $investment->closing_date . ' ' . $validity_date, $date);
                                                                                    $closing_date = date('M d, Y', $get_closing_date);
                                                                                    
                                                                                    $closing_date = \Carbon\Carbon::parse($closing_date)->diffForHumans();
                                                                                @endphp
                                                                                <h6>{{ $investment->asset_name }}</h6>
                                                                                {{-- <h6>{{ $investment->asset_name }} - Closes
                                                                                    {{ $closing_date }}</h6>
                                                                                    <small class="text-muted"><span
                                                                                            class="text-color">{{ $investment->roi }}%</span>
                                                                                        @if ($investment->type == 'fixed')
                                                                                            return
                                                                                            {{ \Carbon\Carbon::parse($investment->return_date)->diffForHumans() }}
                                                                                        @else
                                                                                            Shares
                                                                                        @endif
                                                                                    </small> --}}
                                                                                <div class="d-flex mt-2">
                                                                                    @php
                                                                                        $per = $investment->type == 'fixed' ? 'Slots' : 'Share';
                                                                                    @endphp
                                                                                    <span class="mr-4">


                                                                                        @php
                                                                                            $unit_bought = App\Models\BoughtInvestment::where('investment_id', $investment->id)->sum('user_id');
                                                                                        @endphp
                                                                                        <h6 class="fw-700">
                                                                                            {{ number_format($investment->slot) }}
                                                                                        </h6>
                                                                                        {{-- <h6 class="fw-700">
                                                                                        {{ number_format($investment->slot - $unit_bought ?? 0) }}
                                                                                    </h6> --}}
                                                                                        <small class="text-dark">Total
                                                                                            {{ $per . 's' }}</small>



                                                                                    </span>
                                                                                    <span class="ml-4">
                                                                                        <h6 class="fw-700">
                                                                                            ₦{{ number_format($investment->amount_per_slot, 2) }}
                                                                                        </h6>

                                                                                        <small class="text-dark">Per
                                                                                            {{ $per }}</small>
                                                                                    </span>
                                                                                </div>
                                                                            </span>
                                                                            @if (Auth::user()->isTenant())
                                                                                <div>
                                                                                    <a
                                                                                        onclick="deleteInvestment({{ $investment }})">
                                                                                        <i style="color: rgb(253, 128, 128); cursor: pointer;"
                                                                                            class="feather-trash course-icon font-sm"></i></a>


                                                                                    <a
                                                                                        onclick="editInvestment({{ $investment }})">
                                                                                        <i style="cursor: pointer"
                                                                                            class="feather-edit course-icon font-sm text-grey-500"></i></a>
                                                                                </div>
                                                                            @endif
                                                                        </div>
                                                                    </div>

                                                                    {{-- <div class="col-auto">
                                                                        <div class="mb-3 text-center">
                                                                            @php
                                                                                $bought = App\Models\BoughtInvestment::where('investment_id', $investment->id)
                                                                                    ->where('user_id', Auth::user()->id)
                                                                                    ->first();
                                                                            @endphp
                                                                            @if (!$bought)
                                                                                <span
                                                                                    class="alert alert-success cursor-pointer br-50 px-4 pt-2 invest"
                                                                                    id="{{ $investment->id }}">
                                                                                    Open</span>
                                                                            @else
                                                                                <span
                                                                                    class="alert alert-secondary br-50 px-4">
                                                                                    Bought</span>
                                                                            @endif
                                                                        </div>
                                                                    </div> --}}
                                                                </div>

                                                            @empty
                                                                <div class="text-center">
                                                                    <img src="{{ asset('assets/images/invest.png') }}"
                                                                        class="mt-6" alt="">
                                                                    <h5 class="pt-6 fw-500 text-color">No Investments Yet!
                                                                    </h5>
                                                                    <span class="pt-4 text-gray-500">All Investments will
                                                                        appear here</span>
                                                                </div>
                                                            @endforelse
                                                        </div>
                                                        <div class="tab-pane fade" id="closed" role="tabpanel"
                                                            aria-labelledby="closed-tab">
                                                            @forelse ($closed_investments as $investment)
                                                                <div
                                                                    class="row {{ $investment->id == $first_closed_investment->id ? 'mt-4' : 'border-top-xs' }}  py-4">
                                                                    <div class="col">
                                                                        <div class="d-flex align-items-center">
                                                                            <img src="{{ $investment->asset_image }}"
                                                                                class="mr-3 h100 rounded-2"
                                                                                alt="">
                                                                            <span>

                                                                                <h6>{{ $investment->asset_name }}</h6>
                                                                                <small class="text-muted"><span
                                                                                        class="text-color">{{ $investment->roi }}%</span>
                                                                                    @if ($investment->type == 'fixed')
                                                                                        return
                                                                                        {{ \Carbon\Carbon::parse($investment->return_date)->diffForHumans() }}
                                                                                    @else
                                                                                        Shares
                                                                                    @endif
                                                                                </small>
                                                                                <div class="d-flex mt-2">
                                                                                    <span class="mr-4">
                                                                                        <h6 class="fw-700">
                                                                                            ₦{{ number_format($investment->amount_per_slot, 2) }}
                                                                                        </h6>
                                                                                        <small class="text-dark">Per
                                                                                            Slot</small>
                                                                                    </span>
                                                                                    <span>
                                                                                        @php
                                                                                            $unit_bought = App\Models\BoughtInvestment::where('investment_id', $investment->id)->sum('slot_bought');
                                                                                        @endphp
                                                                                        <h6 class="fw-700">
                                                                                            {{ number_format($investment->slot - $unit_bought ?? 0) }}
                                                                                        </h6>
                                                                                        <small
                                                                                            class="text-dark">Slots</small>
                                                                                    </span>
                                                                                </div>
                                                                            </span>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-auto">
                                                                        <div class="mb-3 text-center">
                                                                            <span
                                                                                class="alert alert-secondary br-50 px-4 pt-2">
                                                                                Closed</span>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            @empty
                                                                <div class="text-center">
                                                                    <img src="{{ asset('assets/images/invest.png') }}"
                                                                        class="mt-6" alt="">
                                                                    <h5 class="pt-6 fw-500 text-color">No Investments Yet!
                                                                    </h5>
                                                                    <span class="pt-4 text-gray-500">All Investments will
                                                                        appear here</span>
                                                                </div>
                                                            @endforelse
                                                        </div>
                                                    </div>
                                                </div>
                                            @else
                                                <div class="text-center">
                                                    <img src="{{ asset('assets/images/invest.png') }}" class="mt-6"
                                                        alt="">
                                                    <h5 class="pt-6 fw-500 text-color">No Investments Yet!</h5>
                                                    <span class="pt-4 text-gray-500">All Investments will appear
                                                        here</span>
                                                </div>
                                            @endif
                                        </div>
                                    @empty
                                        <div class="text-center">
                                            <img src="{{ asset('assets/images/invest.png') }}" class="mt-6"
                                                alt="">
                                            <h5 class="pt-6 fw-500 text-color">No Investments Yet!</h5>
                                            <span class="pt-4 text-gray-500">All Investments will appear here</span>
                                        </div>
                                    @endforelse
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-lg-5 col-xl-5">
                            <div class="border br-12 p-4 mb-4">
                                <h5>Investment & Returns</h5>
                                <div class="row border-top-xs py-4 mt-4">
                                    <div class="col">
                                        <div class="d-flex align-items-center">
                                            <img src="{{ asset('assets/images/roi.png') }}"
                                                class="mr-3 cursor-pointer start-saving">
                                            <h6 class="cursor-pointer start-saving">Get huge returns when you invest</h6>
                                        </div>
                                    </div>
                                    <div class="col-auto">
                                        <a class="text-color cursor-pointer start-saving font-xl"><i
                                                class="mdi mdi-chevron-right"></i> </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @include('elements.investment-category')
    <div class="fh5co-loader" id="reloader" style="display: none">
        <div class="loader"></div>
    </div>
    <script src="https://momentjs.com/downloads/moment.min.js"></script>
    <script src="https://js.paystack.co/v1/inline.js"></script>
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    <script>
        var swiper = new Swiper(".mySwiper", {
            effect: "cards",
            grabCursor: true,
        });
    </script>
    <script>
        let naira = Intl.NumberFormat("en-NG", {
            style: "currency",
            currency: "NGN",
        });

        document.getElementById("bal").innerHTML = naira.format(10000)
        document.getElementById("amount-bought").value = 10000


        $('.create-investment').click(function(e) {

            $('.invest-navigation').show();
            $('.invest-navigation').toggleClass('nav-active');
        });

        $('.close-invest').click(function(e) {
            $('.invest-navigation').toggleClass('nav-active');
            $('.invest-navigation').hide();
        });

        $('.close-buy').click(function(e) {
            $('.buy-navigation').toggleClass('nav-active');
            $('.buy-navigation').hide();
        });

        $(document).on("click", ".invest", function() {
            // alert("hello")
            // var investmentId = this.id;
            $('.buy-navigation').show();
            $('.buy-navigation').toggleClass('nav-active');

            $(function() {
                $('[data-decrease]').click(decrease);
                $('[data-increase]').click(increase);
            });


            var amount = 10000 //per share is 10000 fixed price
            var walletBlance = $('#wallet-balance').val()

            function decrease() {

                var value = $(this).parent().find('[data-value]').val();
                if (value > 1) {
                    value--;
                    $(this).parent().find('[data-value]').val(value);
                }
                result = value * 10000
                profit = result;
                $('#amount-bought').val(result)
                $('#bal').html(naira.format(result))

                if (result <= walletBlance) {
                    document.getElementById("volBalance").style.color = 'green'
                    document.getElementById("low-balance-warning").style.display = 'none'
                    document.getElementById("bookInvestBtn").removeAttribute('disabled')
                }
            }

            function increase() {
                var value = $(this).parent().find('[data-value]').val();
                if (value < 10000) {
                    value++;
                    $(this).parent().find('[data-value]').val(value);
                }
                result = value * 10000;
                profit = result;
                $('#amount-bought').val(result)
                $('#bal').html(naira.format(result))

                if (result > walletBlance) {
                    document.getElementById("volBalance").style.color = 'red'
                    document.getElementById("low-balance-warning").style.display = 'block'
                    document.getElementById("bookInvestBtn").setAttribute('disabled', true)
                }
            }

        });

        document.getElementById("amountOfSlot").addEventListener("keyup", (e) => {
            let value = e.target.value
            var walletBlance = $('#wallet-balance').val()
            if (value > 0) {
                document.getElementById("amount-bought").value = value * 10000
                document.getElementById("amountBoughtError").innerText = ""

                $('#bal').html(naira.format(value * 10000))

                if ((value * 10000) > walletBlance) {
                    document.getElementById("volBalance").style.color = 'red'
                    document.getElementById("low-balance-warning").style.display = 'block'
                    document.getElementById("bookInvestBtn").setAttribute('disabled', true)
                } else {
                    document.getElementById("volBalance").style.color = 'green'
                    document.getElementById("low-balance-warning").style.display = 'none'
                    document.getElementById("bookInvestBtn").removeAttribute('disabled')
                }
            }

        })

        document.getElementById("amountOfSlot").addEventListener("change", (e) => {
            let value = e.target.value
            var walletBlance = $('#wallet-balance').val()
            if (value > 0) {
                document.getElementById("amount-bought").value = value * 10000
                document.getElementById("amountBoughtError").innerText = ""

                $('#bal').html(naira.format(value * 10000))

                if ((value * 10000) > walletBlance) {
                    document.getElementById("volBalance").style.color = 'red'
                    document.getElementById("low-balance-warning").style.display = 'block'
                    document.getElementById("bookInvestBtn").setAttribute('disabled', true)
                } else {
                    document.getElementById("volBalance").style.color = 'green'
                    document.getElementById("low-balance-warning").style.display = 'none'
                    document.getElementById("bookInvestBtn").removeAttribute('disabled')
                }
            }

        })


        //   $(document).on("click", ".invest", function(e) {
        //       var investmentId = this.id;
        //       $('.buy-navigation').show();
        //       $('.buy-navigation').toggleClass('nav-active');

        //       $.ajax({
        //           type: 'GET',
        //           url: "/investments/fetch-investment/" + investmentId,
        //           success: function(response) {
        //               console.log(response);
        //               var assetName = response.investment.asset_name;
        //               var assetImage = response.investment.asset_image;

        //               if (response.investment.validity == "day") {
        //                   var closing_date = moment(response.investment.created_at).add(response
        //                       .investment.closing_date, 'days').fromNow()
        //               }

        //               if (response.investment.validity == "month") {
        //                   var closing_date = moment(response.investment.created_at).add(response
        //                       .investment.closing_date, 'months').fromNow()
        //               }

        //               if (response.investment.validity == "year") {
        //                   var closing_date = moment(response.investment.created_at).add(response
        //                       .investment.closing_date, 'years').fromNow()
        //               }

        //               let naira = Intl.NumberFormat("en-NG", {
        //                   style: "currency",
        //                   currency: "NGN",
        //               });

        //               var assetAmount = naira.format(response.investment.amount_per_slot);
        //               var businessPlan = response.investment.business_plan;

        //               var slot = response.investment.slot;

        //               var sumFund = response.investment.amount_per_slot * slot;
        //               var totalFund = naira.format(sumFund);

        //               var fundRaised = naira.format(response.fund_raised);

        //               var investorCount = response.investors_count;

        //               var slotLeft = response.slots_left;

        //               var amount = $('#amount-bought').val(response.investment.amount_per_slot)

        //               $('#time-left').html(closing_date);
        //               $('#investment-id').val(investmentId);
        //               $('#investment-name').html(assetName);
        //               $('#invest-name').html(assetName);
        //               $('#invest-amount').html(assetAmount);
        //               $('#investment-image').attr("src", assetImage);
        //               $('#business-plan').attr("href", businessPlan);
        //               $('#total-slot').html(slotLeft);

        //               $('#total-fund').html(totalFund);
        //               $('#fund-raised').html(fundRaised);
        //               $('#slot-number').html(investorCount);

        //               $('#bal').html(assetAmount);

        //               $('#amountOfSlot').attr("max", slotLeft);

        //               $(function() {
        //                   $('[data-decrease]').click(decrease);
        //                   $('[data-increase]').click(increase);
        //               });

        //               function decrease() {
        //                   var value = $(this).parent().find('[data-value]').val();
        //                   if (value > 1) {
        //                       value--;
        //                       $(this).parent().find('[data-value]').val(value);
        //                   }
        //                   result = value * response.investment.amount_per_slot;
        //                   profit = result;
        //                   $('#amount-bought').val(result)
        //                   $('#bal').html(naira.format(result))
        //               }

        //               function increase() {
        //                   var value = $(this).parent().find('[data-value]').val();
        //                   if (value < slotLeft) {
        //                       value++;
        //                       $(this).parent().find('[data-value]').val(value);
        //                   }
        //                   result = value * response.investment.amount_per_slot;
        //                   profit = result;
        //                   $('#amount-bought').val(result)
        //                   $('#bal').html(naira.format(result))
        //               }

        //           },
        //           error: function(error) {
        //               //console.log(error);
        //           }
        //       });

        //       $('#investment-name').html();

        //   });

        var accountType = "";

        //   $(document).on("change", "#account_type", function(e) {
        //       accountType = this.value;
        //   });

        $('#bookInvestBtn').click(function(e) {
            e.preventDefault();

            $('#bookInvestBtn').attr('disabled', true);

            var amountOfSlot = $('#amountOfSlot').val();
            if (!amountOfSlot.length) {
                document.getElementById("amountBoughtError").innerText = "field cannot be empty"
                toastr.error("Number of shares cannot be empty", "", defaultSetting)
                $('#bookInvestBtn').removeClass('button--loading');
                    $('#bookInvestBtn').attr('disabled', false);
                return
            }
            var amount = $('#amount-bought').val();
            var investmentId = $('#investment-id').val();

            getAccountType = document.getElementById("account_type_select").value
            var getAccountType = accountType;
            // var investmentType = $('#investment-type').val();

            $.ajax({
                type: 'POST',
                url: "/investments/buy-investment",
                data: {
                    "_token": "{{ csrf_token() }}",
                    amount: amount,
                    slot_bought: amountOfSlot,
                    investment_id: investmentId,
                    account_type: 'voluntary',
                    investment_type: 'dividend'
                    // investment_type: investmentType
                },

                success: function(response) {

                    toastr.success("You have bought this investment", "", defaultSetting)

                    window.location.href = "{{ route('investment.index') }}";

                },
                error: function(error) {
                    console.log(error)
                    toastr.error(error.responseJSON.message, "", defaultSetting)
                    $('#bookInvestBtn').removeClass('button--loading');
                    $('#bookInvestBtn').attr('disabled', false);
                }
            });
        });
    </script>

    <script>
        function deleteInvestment(investmentToDelete) {
            document.getElementById("investment_name_del").innerText = ` ${investmentToDelete.asset_name} `
            document.getElementById("investment_id").value = investmentToDelete.id
            document.getElementById("investment_pdf").value = investmentToDelete.business_plan
            document.getElementById("deleteInvestmentBtn").click()
            // console.log("to delete...", investmentToDelete.business_plan)
        }



        $('#submit_del_investment').click(function(e) {
            e.preventDefault();

            $('#submit_del_investment').attr('disabled', true);

            var investment_id = $('#investment_id').val();
            var user_id = $('#inv_del_user_id').val();
            var investment_pdf = $('#investment_pdf').val();

            $.ajax({
                type: 'POST',
                url: "/investments/delete-investment",
                data: {
                    "_token": "{{ csrf_token() }}",
                    investment_id: investment_id,
                    user_id: user_id,
                    // investment_pdf: investment_pdf,
                },

                success: function(response) {
                    console.log("Response...", response)
                    toastr.success("You have deleted this investment", "", defaultSetting)

                    window.location.reload()

                },
                error: function(error) {
                    console.log(error)
                    toastr.error("Unable to delete this investment", "", defaultSetting)
                    $('#bookInvestBtn').removeClass('button--loading');
                    $('#bookInvestBtn').attr('disabled', false);
                }
            });
        });


        function editInvestment(investmentToEdit) {

            document.getElementById("investment_name_edit").innerText = ` ${investmentToEdit.asset_name} `
            document.getElementById("investment_id_edit").value = investmentToEdit.id
            document.getElementById("amount_per_slot_edit").value = investmentToEdit.amount_per_slot
            document.getElementById("slot_edit").value = investmentToEdit.slot
            document.getElementById("asset_name_edit").value = investmentToEdit.asset_name
            document.getElementById("category_id_edit").value = investmentToEdit.category_id
            document.getElementById("editInvestmentnBtn").click()
            // console.log("to delete...", investmentToEdit.business_plan)
        }


        // $('#submit_edit_investment').click(function(e) {
        //     e.preventDefault();
        //     $('#submit_edit_investment').attr('disabled', true);
        //     var investment_id = $('#investment_id_edit').val();
        //     var user_id = $('#inv_edit_user_id').val();
        //     var asset_name = $('#asset_name_edit').val();
        //     var asset_image = $('#image-input2').val();
        //     var business_plan = $('#pdf_input').val();
        //     var amount_per_slot = $('#amount_per_slot_edit').val();
        //     var slot = $('#slot_edit').val();
        //     var category_id = $('#category_id_edit').val();

        //     $.ajax({
        //         type: 'POST',
        //         url: "/investments/edit-investment",
        //         data: {
        //             "_token": "{{ csrf_token() }}",
        //             investment_id: investment_id,
        //             user_id: user_id,
        //             asset_name: asset_name,
        //             asset_image: asset_image,
        //             business_plan: business_plan,
        //             amount_per_slot: amount_per_slot,
        //             slot: slot,
        //             category_id: category_id,
        //         },

        //         success: function(response) {
        //             console.log("Response...", response)
        //             toastr.success("You have Edited this investment", "", defaultSetting)

        //             window.location.reload()

        //         },
        //         error: function(error) {
        //             console.log(error)
        //             toastr.error("Unable to edit this investment", "", defaultSetting)
        //             $('#submit_edit_investment').removeClass('button--loading');
        //             $('#submit_edit_investment').attr('disabled', false);
        //         }
        //     });
        // });
    </script>
@endsection