@php $page = 'plans' @endphp
@extends('includes.layout')

@section('content')
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>Create Plan</h1>
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="{{ route('dashboard') }}"><i class="fa fa-dashboard"></i> Home</a>
                </li>
                <li class="breadcrumb-item active">Create Plan</li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content">

            <!-- Basic Forms -->
            <div class="box box-solid bg-dark">
                <div class="box-header with-border">
                    <h4 class="box-title">Create Plan</h4>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <div class="row">
                        <div class="col">
                            <form action="{{ route('store.plan') }}" method="POST"> @csrf
                                <div class="row">
                                    <div class="col-lg-4 col-12">
                                        <div class="form-group">
                                            <label for="plan_name">Plan Name <span class="text-danger">*</span></label>
                                            <div class="controls">
                                                <input type="text" name="plan_name" id="plan_name" class="form-control" required autofocus placeholder="Plan Name">
                                            </div>
                                            <div class="form-control-feedback"><small>This is the preffered plan name.</small></div>
                                            <x-input-error :messages="$errors->get('plan_name')" class="mt-2 text-danger" />
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-12">
                                        <div class="form-group">
                                            <label for="category">Plan Category <span class="text-danger">*</span></label>
                                            <div class="controls">
                                                <select name="category" id="category" class="form-control" required>
                                                    <option value="crypto">Crypto</option>
                                                </select>
                                            </div>
                                            <div class="form-control-feedback"><small>This is the preffered plan category.</small></div>
                                            <x-input-error :messages="$errors->get('category')" class="mt-2 text-danger" />
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-12">
                                        <div class="form-group">
                                            <label for="minimum_price">Minimum Price ($)<span class="text-danger">*</span></label>
                                            <div class="controls">
                                                <input type="number" name="minimum_price" id="minimum_price" class="form-control" required placeholder="Minimum Price">
                                            </div>
                                            <div class="form-control-feedback"><small>This is the minimum amount a user can pay to invest in this plan.</small></div>
                                            <x-input-error :messages="$errors->get('minimum_price')" class="mt-2 text-danger" />
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-12">
                                        <div class="form-group">
                                            <label for="maximum_price">Maximum Price ($)<span class="text-danger">*</span></label>
                                            <div class="controls">
                                                <input type="text" name="maximum_price" id="maximum_price" class="form-control" required placeholder="Maximum Price">
                                            </div>
                                            <div class="form-control-feedback"><small>This is the maximum amount a user can pay to invest in this plan</small></div>
                                            <x-input-error :messages="$errors->get('maximum_price')" class="mt-2 text-danger" />
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-12">
                                        <div class="form-group">
                                            <label for="payout_type">Payout Type<span class="text-danger">*</span></label>
                                            <div class="controls">
                                                <select name="payout_type" id="payout_type" class="form-control" required>
                                                    <option value="percentage">Percentage</option>
                                                </select>
                                            </div>
                                            <div class="form-control-feedback"><small>This specifies if the system should add profit in percentage(%).</small></div>
                                            <x-input-error :messages="$errors->get('payout_type')" class="mt-2 text-danger" />
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-12">
                                        <div class="form-group">
                                            <label for="payout_duration">Payout Duration <span class="text-danger">*</span></label>
                                            <div class="controls">
                                                <select name="payout_duration" id="payout_duration" class="form-control" required>
                                                    {{-- <option value="Every 30 Minutes">Every 30 Minutes</option> --}}
                                                    <option value="Hourly">Hourly</option>
                                                    <option checked value="Daily">Daily</option>
                                                    <option value="Weekly">Weekly</option>
                                                    <option value="Monthly">Monthly</option>
                                                </select>
                                            </div>
                                            <div class="form-control-feedback"><small>This specifies how often the system should add profit(ROI) to user account.</small></div>
                                            <x-input-error :messages="$errors->get('payout_duration')" class="mt-2 text-danger" />
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-12">
                                        <div class="form-group">
                                            <label for="percentage">Plan Percentage (%)<span class="text-danger">*</span></label>
                                            <div class="controls">
                                                <input type="text" name="percentage" id="percentage" class="form-control" required placeholder="Plan Percentage">
                                            </div>
                                            <div class="form-control-feedback"><small>This is the (ROI) percentage for this plan.</small></div>
                                            <x-input-error :messages="$errors->get('percentage')" class="mt-2 text-danger" />
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-12">
                                        <div class="form-group">
                                            <label for="duration">Plan Duration (Days) <span class="text-danger">*</span></label>
                                            <div class="controls">
                                                <input type="number" name="duration" id="duration" class="form-control" placeholder="Plan Duration" value="3" required>
                                            </div>
                                            <div class="form-control-feedback"><small>This specifies the duration of the plan in days.</small></div>
                                            <x-input-error :messages="$errors->get('duration')" class="mt-2 text-danger" />
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-12">
                                        <div class="form-group">
                                            <label for="bonus">Bonus ($)</label>
                                            <div class="controls">
                                                <input type="number" name="bonus" id="bonus" class="form-control" placeholder="Bonus">
                                            </div>
                                            <div class="form-control-feedback"><small>Optional Bonus if a user buys this plan.</small></div>
                                            <x-input-error :messages="$errors->get('bonus')" class="mt-2 text-danger" />
                                        </div>
                                    </div>
                                </div>
                                <div class="text-xs-right">
                                    <button type="submit" class="btn btn-info">Proceed To Create Plan</button>
                                </div>
                            </form>
                        </div>
                        <!-- /.col -->
                    </div>
                    <!-- /.row -->
                </div>
                <!-- /.box-body -->
            </div>
            <!-- /.box -->
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
@endsection