@extends('layouts.user.base')

@section('page-title')
    Plans
@endsection

@section('content')

<div class="modal fade" role="dialog" tabindex="-1" id="calculator">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header border-0">
                <h4 class="modal-title">Investment Calculator</h4><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="calculateplansform" class="w-60" x-data="init()">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group mb-3"><label class="form-label" for="plans">Plans</label><select id="plans" class="form-select" x-model="selectedPlan" @change="calc()">
                                <optgroup label="Investment Plans">
                                    <option value="0">- Select Plan -</option>
                                    <template x-for="p in plans" :key="p.id">
                                    <option :value="p.id" x-text="p.plan + ' ' + `(` + `$` + p.min + ` - ` + `$` + p.max + `)`"></option>
                                    </template>
                                </optgroup>
                            </select>
                                </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group mb-3"><label class="form-label" for="amount">Amount ($)</label><input id="amount" class="form-control" type="number" x-bind:min="min" x-bind:max="max" step="0.01" placeholder="Amount in USD" x-model="amount" x-bind:value="min" @input="calc2()" x-bind:disabled="selectedPlan == 0 || selectedPlan == ''"/><small class="form-text text-red" x-text="errorText"></small></div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group mb-3">
                                <div class="card card-bg border-0">
                                    <div class="card-body">
                                        <div class="table-responsive">
                                            <table class="table table-borderless">
                                                <thead>
                                                    <tr>
                                                        <th class="border-0">Duration</th>
                                                        <th class="border-0">Amount</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td class="border-0">Daily</td>
                                                        <td class="border-0"><span x-text="selectedPlan == 0 ? '0' : `${daily}`"></span></td>
                                                    </tr>
                                                    <tr>
                                                        <td class="border-0">Weekly</td>
                                                        <td class="border-0"><span x-text="weekly"></span></td>
                                                    </tr>
                                                    <tr>
                                                        <td class="border-0">Monthly</td>
                                                        <td class="border-0"><span x-text="monthly"></span></td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group mb-3" x-show="selectedPlan != 0 &amp;&amp; amount > 0"><button class="btn btn-primary" type="submit">Buy Plan</button></div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col mb-3 mb-xl-4 mb-lg-3 mb-md-3">
        <div class="row d-flex">
            <div class="col-md-12 mb-3 mb-xl-4 mb-lg-3 mb-md-3">
                <div class="mb-3"><a class="text-decoration-none alt-btn" href="{{ route('user_buy_plan') }}">Buy
                        Plan<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"
                            fill="currentColor" viewBox="0 0 16 16" class="bi bi-arrow-right ms-1">
                            <path fill-rule="evenodd"
                                d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z">
                            </path>
                        </svg></a><a class="text-decoration-none alt-btn-2 ms-2" href="#"
                        data-bs-target="#calculator" data-bs-toggle="modal">Calculator</a></div>
                <div class="card card-bg border-0">
                    <div class="card-body">
                        <div class="table-responsive text-nowrap mt-4">
                            <table
                                class="table table-borderless table-bordered display responsive table-spacing2"
                                id="table1" style="width: 100%;">
                                <thead class="table-header">
                                    <tr class="table-h">
                                        <th>Plan</th>
                                        <th>Amount</th>
                                        <th>Profits</th>
                                        <th>Start</th>
                                        <th>End</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr class="table-row click" data-href="index.html">
                                        <td><a href="view-transactions.html">Nano</a></td>
                                        <td>
                                            <p class="text-nowrap table-p">$2000</p>
                                        </td>
                                        <td>
                                            <p class="text-nowrap text-truncate text-green">$120</p>
                                        </td>
                                        <td>
                                            <p class="text-nowrap table-p">Nov 21, 2022 1:36PM</p>
                                        </td>
                                        <td>
                                            <p class="text-nowrap table-p">Nov 21, 2022 1:36PM</p>
                                        </td>
                                        <td><span class="active-badge">Active</span></td>
                                    </tr>
                                    <tr class="table-row click" data-href="index.html">
                                        <td><a href="view-transactions.html">Pension Plus</a></td>
                                        <td>
                                            <p class="text-nowrap table-p">$2000</p>
                                        </td>
                                        <td>
                                            <p class="text-nowrap text-truncate table-p">$0</p>
                                        </td>
                                        <td>
                                            <p class="text-nowrap table-p">Nov 21, 2022 1:36PM</p>
                                        </td>
                                        <td>
                                            <p class="text-nowrap table-p">Nov 21, 2022 1:36PM</p>
                                        </td>
                                        <td><span class="pending-badge">Pending</span></td>
                                    </tr>
                                    <tr class="table-row click" data-href="index.html">
                                        <td><a href="view-transactions.html">Pension Plus</a></td>
                                        <td>
                                            <p class="text-nowrap table-p">$2000</p>
                                        </td>
                                        <td>
                                            <p class="text-nowrap text-truncate table-p">$0</p>
                                        </td>
                                        <td>
                                            <p class="text-nowrap table-p">Nov 21, 2022 1:36PM</p>
                                        </td>
                                        <td>
                                            <p class="text-nowrap table-p">Nov 21, 2022 1:36PM</p>
                                        </td>
                                        <td><span class="cancelled-badge">Cancelled</span></td>
                                    </tr>
                                    <tr class="table-row click" data-href="index.html">
                                        <td><a href="view-transactions.html">Pension Plus</a></td>
                                        <td>
                                            <p class="text-nowrap table-p">$2000</p>
                                        </td>
                                        <td>
                                            <p class="text-nowrap text-truncate table-p">$0</p>
                                        </td>
                                        <td>
                                            <p class="text-nowrap table-p">Nov 21, 2022 1:36PM</p>
                                        </td>
                                        <td>
                                            <p class="text-nowrap table-p">Nov 21, 2022 1:36PM</p>
                                        </td>
                                        <td><span class="completed-badge">Completed</span></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection


@section('scripts')

<script>

    function init() {
        return {
            selectedType: '',
            show: false,
            selectedPlan: 0,
            amount: 0,
            daily: '',
            weekly: '',
            monthly: '',
            percentage: '',
            min: 0,
            max: 0,
            errorText: '',
            plans: [
                { id: 1, plan: "Nano", type: 'Regular', min: 100, max: 14999, percentage: 0.6, feature1: '0.85% Daily Profit', feature2: 'Daily Returns Guaranteed', feature3: '4 Months Investment Duration', feature4: '' },
                { id: 2, plan: "Micro", type: 'Regular', min: 15000, max: 49999, percentage: 0.9, feature1: 'Feature 1', feature2: 'Feature 2', feature3: 'Feature 3', feature4: 'Feature 4' },
                { id: 3, plan: "Macro", type: 'Compounding', min: 50000, max: 249000, percentage: 0.9, feature1: 'Feature 1', feature2: 'Feature 2', feature3: 'Feature 3', feature4: 'Feature 4' },
                { id: 4, plan: "Pension Plus", type: 'Pension', min: 3000, max: 500000, percentage: 0.9, feature1: '2.4% Daily Profit', feature2: '18 Months Investment Duration', feature3: '5% Capital Increase Every Month', feature4: '20% Capital Withdrawal Every 8 Months' }
            ], notifications: [
                { id: 1, subject: 'Account Opening', message: 'Hello, your account has been created.', image: 'http://127.0.0.1:8000/a.jpeg' },
                { id: 2, subject: 'Hi There', message: 'How are you doing today, we thought to check up on you.', image: 'http://127.0.0.1:8000/a.jpeg' }
            ],
            calc: function () {
                let result = this.plans.filter(plan => plan.id == this.selectedPlan)[0];
                this.min = result?.min;
                this.max = result?.max;
                this.percentage = result?.percentage;
                this.calc2()
            },
            calc2: function () {
                this.daily = (this.amount * this.percentage / 7).toFixed(2);
                this.weekly = (this.amount * this.percentage / 3).toFixed(2);
                this.monthly = (this.amount * this.percentage / 2).toFixed(2);
                this.errorText = this.amount > this.max ? 'Amount entered is greater than the maximum' : this.amount < this.min ? 'Amount entered is lower than the minimum' : '';
            },
            get filterType() {
                if (this.selectedType == "") {
                    return this.plans;
                }
                return this.plans.filter(
                    (p) => {
                        return p.type.toLowerCase().includes(this.selectedType.toLowerCase());
                    }
                );
            }
        };
    }
</script>

@endsection