@extends('layouts.admin.base')

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

@section('content')

<div class="modal fade" role="dialog" tabindex="-1" id="delete">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Confirm</h4><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Do you want to proceed?</p>
            </div>
            <div class="modal-footer"><button class="btn btn-light" type="button" data-bs-dismiss="modal">Close</button><a class="text-decoration-none alt-btn-3" href="#" data-bs-target="#calculator" data-bs-toggle="modal">Delete</a></div>
        </div>
    </div>
</div>
<div class="modal fade" role="dialog" tabindex="-1" id="create-plan">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header border-0">
                <h4 class="modal-title">Create Plan</h4><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="sendmessageform" method="POST" action="{{ route('admin_create_plan') }}">
                    {{ csrf_field() }}
                    <div class="row">
                        <div class="form-group mb-3">
                            <label class="form-label" for="category_id">Category</label>
                            <select class="form-control" name="category_id" type="text" id="category_id" x-model="category_id">
                                @foreach ($categories as $category)
                                    <option value="{{ $category->id }}">{{ $category->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group mb-3"><label class="form-label" for="planname">Plan Name</label><input name="name" class="form-control" type="text" id="planname" required="" autofocus="" x-model="plan.name"></div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group mb-3"><label class="form-label" for="minamount">Minimum Amount</label><input class="form-control" name="minimum_amount" type="number" id="minamount" step="0.01" required="" x-model="plan.min"></div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group mb-3"><label class="form-label" for="maxamount">Maximum Amount</label><input class="form-control" name="maximum_amount" type="number" id="maxamount" step="0.01" required="" x-model="plan.max"></div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group mb-3"><label class="form-label" for="planduration">Plan Duration (Days)</label><input class="form-control" name="duration" type="number" id="planduration" min="1" step="1" required="" x-model="plan.duration"></div>
                        </div>
                        <div class="col-md-12">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group mb-3"><label class="form-label" for="percentageprofit"><span style="color: rgb(33, 37, 41); background-color: rgb(255, 255, 255);">Minimum Profit(%)</span></label><input class="form-control" name="minimum_profit" type="number" id="percentageprofit" step="0.01" required=""></div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group mb-3"><label class="form-label" for="percentageprofit"><span style="color: rgb(33, 37, 41); background-color: rgb(255, 255, 255);">Maximum Profit(%)</span></label><input class="form-control" name="profit" type="number" id="percentageprofit" step="0.01" required="" x-model="plan.percentage"></div>
                                </div>
                            </div>
                            <div class="form-group mb-3">
                                <label class="form-label" for="percentageprofit"><span style="color: rgb(33, 37, 41); background-color: rgb(255, 255, 255);">Frequencies <button type="button" class="btn btn-sm btn-secondary" onclick="add_frequency('_frequency_box')"><i class="fa fa-plus"></i> Add Frequency</button></span></label>
                                <div class="_frequency_box row">

                                </div>
                            </div>
                            <hr>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group mb-3">
                                <input name="first_timer_only" value="{{ _TRUE }}" class="form-check-input box" type="checkbox" id="first_timer_only">
                                <label class="form-check-label" for="first_timer_only">First Timer Only Plan</label>    
                                &nbsp;&nbsp;
                                <input name="is_private" value="{{ _TRUE }}" class="form-check-input box" type="checkbox" id="is_private">
                                <label class="form-check-label" for="is_private">Private Plan</label>    
                                &nbsp;&nbsp;
                                <input name="is_company" value="{{ _TRUE }}" class="form-check-input box" type="checkbox" id="is_company">
                                <label class="form-check-label" for="is_company">Company Plan</label>    
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group mb-3"><label class="form-label" for="daily"><span style="color: rgb(33, 37, 41); background-color: rgb(255, 255, 255);">Payout Options</span></label></div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group mb-3">
                                @foreach ($payout_options as $option)
                                    <div class="form-check form-check-inline">
                                        <input name="payout_options[]" value="{{ $option->id }}" class="form-check-input box" type="checkbox" id="po_{{ $option->id }}">
                                        <label class="form-check-label" for="po_{{ $option->id }}">{{ $option->name }}</label>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group mb-3"><label class="form-label" for="level1"><span style="color: rgb(33, 37, 41); background-color: rgb(255, 255, 255);">Referral Levels</span></label> <button type="button" class="btn btn-sm btn-secondary" onclick="add_level()"><i class="fa fa-plus"></i> Add Level</button></div>
                        </div>
                        <div class="col-md-12">
                            <div class="row _referral_level">
                                {{-- <div class="form-check form-check-inline"><input class="form-check-input box" type="checkbox" id="level1" x-model="plan.level1"><label class="form-check-label" for="level1">Level 1</label></div>
                                <div class="form-check form-check-inline"><input class="form-check-input box" type="checkbox" id="level2" x-model="plan.level2"><label class="form-check-label" for="level2">Level 2</label></div>
                                <div class="form-check form-check-inline"><input class="form-check-input box" type="checkbox" id="level3" x-model="plan.level3"><label class="form-check-label" for="level3">Level 3</label></div> --}}
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group mb-3"><label class="form-label" for="level1"><span style="color: rgb(33, 37, 41); background-color: rgb(255, 255, 255);">Features</span></label></div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group mb-3">
                                @foreach ($features as $feature)
                                    <div class="form-check form-check-inline">
                                        <input name="features[]" value="{{ $feature->id }}" class="form-check-input box" type="checkbox" id="feature_{{ $feature->id }}">
                                        <label class="form-check-label" for="feature_{{ $feature->id }}">{{ $feature->name }}</label>
                                    </div>
                                @endforeach
                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="form-group mb-3">
                                <label class="form-label" for="plans_display">Display Features</label>
                                <textarea placeholder="Separate Features by Pipe(|)" class="form-control" name="plans_display" id="plans_display" rows="2"></textarea>
                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="form-group mb-3">
                                <label class="form-label" for="level1">Description</label>
                                <textarea id="summernote" class="form-control" name="description" id="" rows="5"></textarea>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group mb-3"><button class="btn btn-primary" type="submit" >Create</button></div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


<div class="row">
    <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="#" data-bs-target="#create-plan" data-bs-toggle="modal">Create 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 mt-n1">
                    <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></div>
        <div class="card card-bg border-0">
            <div class="card-body">
                <div class="table-responsive 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 Name/Category</th>
                                <th>Amount</th>
                                <th>Duration/Percentage</th>
                                <th>Payout Options</th>
                                <th>Referral Level</th>
                                <th>Feature List</th>
                                <th>Date</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($plans as $plan)
                                <tr class="table-row">
                                    <td>
                                        <p class="table-p">{{ $plan->name }}</p>
                                        <span class="{{ $plan->category->color }}">{{ $plan->category->name }}</span>
                                    </td>
                                    <td>
                                        <p class="table-p">{{ formatMoney($plan->minimum_amount) }} - {{ formatMoney($plan->maximum_amount) }}</p>
                                    </td>
                                    <td>
                                        <p class="table-p">{{ $plan->duration }} Days/<span class="text-green">{{ $plan->minimum_profit }} to <span class="text-green">{{ $plan->profit }}%</span></p>
                                        <a href="{{ route('admin_profit_calendar', $plan->id) }}" target="_blank"><i class="fa-solid fa-calendar-days"></i> Check Calendar <i class="fa-solid fa-arrow-right-long"></i></a>
                                    </td>
                                    <td>
                                        @foreach ($plan->payout_options as $option)
                                            <p class="table-p">{{ $option->name }}</p>
                                        @endforeach
                                    </td>
                                    <td>
                                        @foreach ($plan->referral_levels() as $referral_level)
                                            <p class="table-p">Level {{ $referral_level->level }} - {{ $referral_level->value }}%</p>
                                        @endforeach
                                    </td>
                                    <td>
                                        @foreach ($plan->features as $feature)
                                            <p class="table-p">{{ $feature->name }}</p>
                                        @endforeach
                                    </td>
                                    <td>
                                        <p class="table-p">{{ timeAgo($plan->created_at) }}</p>
                                    </td>
                                    <td><span class="{{ $plan->status_data()->color }}">{{ $plan->status_data()->message }}</span></td>
                                    <td>
                                        <div class="dropdown">
                                            <button class="btn text-end" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="outside" type="button">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-three-dots">
                                                    <path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"></path>
                                                </svg>
                                            </button>
                                            <div class="dropdown-menu">
                                                <a class="dropdown-item" href="{{ route('admin_edit_plan', $plan->id) }}">Edit</a>
                                                
                                                <form action="{{ route('admin_update_plan_status') }}" method="POST">
                                                    {{ csrf_field() }}
                                                    <input type="hidden" value="{{ $plan->id }}" name="plan_id">
                                                    <input type="hidden" name="status" value="{{ $plan->status == 0 ? PLAN_ACTIVATE : PLAN_DEACTIVATE }}">
                                                    <button class="dropdown-item" type="submit">@if($plan->status == 0) Activate @else Deactivate @endif</button>
                                                </form>
                                                
                                                <form action="{{ route('admin_update_plan_status') }}" method="POST">
                                                    {{ csrf_field() }}
                                                    <input type="hidden" value="{{ $plan->id }}" name="plan_id">
                                                    <input type="hidden" name="status" value="{{ PLAN_DELETE }}">
                                                    <button class="dropdown-item text-red" type="submit" data-bs-target="#delete" data-bs-toggle="modal">Delete</button>
                                                </form>
                                            </div>
                                        </div>
                                    </td>
                                </tr>

                                
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection


@section('scripts')

<script>
    var current_level = 1
    function add_level(el_string){
        if (el_string == undefined) {
            var h = '<div class="col-md-6 form-group mb-3"><label class="form-label" for="feature1">Level '+current_level+'</label><input name="referral_levels['+current_level+'][]" class="form-control"></div>';
            $('._referral_level').append(h);
            current_level += 1;
        } else {
            let level = prompt("Please enter level:", "2");
            if (!(level == null) && !(level == "")) {
                var h = '<div class="col-md-6 form-group mb-3"><label class="form-label" for="feature1">Level '+level+'</label><input name="referral_levels['+level+'][]" class="form-control"></div>';
                $('.'+el_string).append(h);
            }
        }
    }

    $(document).ready(function() {
        add_level();
        add_level();
        $('#summernote').summernote();
    })

    function add_frequency(el_string){
        let percent = prompt("How many percent:", "0.5");
        if (!(percent == null) && !(percent == "")) {
            var h = '<div class="col-md-6 form-group mb-3">';
            h += '<label class="form-label">'+percent+'% How many times</label>'
            h += '<input placeholder="How many days" name="frequencies['+percent+'][]" class="form-control">'
            h += '</div>'
            $('.'+el_string).append(h);
        }
        
    }

    function init() {
        return {
            plan: {
                name: '',
                min: null,
                max: null,
                duration: null,
                percentage: null,
                daily: false,
                weekly: false,
                monthly:false,
                feature1: '',
                feature2: '',
                feature3: '',
                feature4: '',
                level1: false,
                level2: false,
                level3: false,
            }
        }
    }
</script>

@endsection