@extends('admin.layouts.app')
@section('panel')
    <div class="row justify-content-center">
        <div class="col-lg-10">
            <div class="card bg-card-style">
                <div class="card-body">
                    <form action="{{ route('admin.plan.store', $plan?->id ?? 0) }}" method="POST">
                        @csrf
                        <div class="field-wrapper">
                            <div class="field-wrapper-label">
                                <p class="title">@lang('Icon')</p>
                                <p class="note">
                                    @lang('This indicate the plan icon')
                                </p>
                            </div>
                            <div class="field-wrapper-view from-group">
                                <div class="input-group">
                                    <input type="text" class="form-control iconPicker icon" autocomplete="off" name="icon" value="{{ $plan?->icon ?? '' }}" required>
                                    <span class="input-group-text  input-group-addon" data-icon="las la-home" role="iconpicker"></span>
                                </div>
                            </div>
                        </div>

                        <div class="field-wrapper">
                            <div class="field-wrapper-label">
                                <p class="title">@lang('Name')</p>
                                <p class="note">@lang('The name of the pricing plan (e.g., Basic, Pro, Premium).')</p>
                            </div>
                            <div class="field-wrapper-view">
                                <input class="form-control" type="text" name="name" value="{{ $plan?->name ?? '' }}" required>
                            </div>
                        </div>

                        <div class="field-wrapper">
                            <div class="field-wrapper-label">
                                <p class="title">@lang('Monthly Price')</p>
                                <p class="note">@lang('The subscription cost charged on a monthly basis.')</p>
                            </div>
                            <div class="field-wrapper-view">
                                <div class="input-group">
                                    <input class="form-control" type="number" step="any" name="monthly_price" value="{{ getAmount($plan?->monthly_price) ?? '' }}" required>
                                    <span class="input-group-text">{{ gs('cur_text') }}</span>
                                </div>
                            </div>
                        </div>

                        <div class="field-wrapper">
                            <div class="field-wrapper-label">
                                <p class="title">@lang('Yearly Price')</p>
                                <p class="note">@lang('The subscription cost charged annually (often discounted from monthly pricing).')</p>
                            </div>
                            <div class="field-wrapper-view">
                                <div class="input-group">
                                    <input class="form-control" type="number" step="any" name="yearly_price" value="{{ getAmount($plan?->yearly_price) ?? '' }}" required>
                                    <span class="input-group-text">{{ gs('cur_text') }}</span>
                                </div>
                            </div>
                        </div>

                        <div class="field-wrapper">
                            <div class="field-wrapper-label">
                                <p class="title">@lang('Monthly Credit')</p>
                                <p class="note">@lang('The number of monthly credits included in the plan for lead generation')</p>
                            </div>
                            <div class="field-wrapper-view">
                                <input class="form-control" type="number" name="monthly_credit" value="{{ $plan?->monthly_credit ?? '' }}" required>
                            </div>
                        </div>
                        <div class="field-wrapper">
                            <div class="field-wrapper-label">
                                <p class="title">@lang('Yearly Credit')</p>
                                <p class="note">@lang('The number of yearly credits included in the plan for lead generation.')</p>
                            </div>
                            <div class="field-wrapper-view">
                                <input class="form-control" type="number" name="yearly_credit" value="{{ $plan?->yearly_credit ?? '' }}" required>
                            </div>
                        </div>


                        <div class="field-wrapper">
                            <div class="field-wrapper-label">
                                <p class="title">@lang('Expired Days in Monthly')</p>
                                <p class="note">@lang('The number of days per month a user can download seo content generated data before it expires.')</p>
                            </div>
                            <div class="field-wrapper-view">
                                <input class="form-control" type="number" name="monthly_expired_days" value="{{ $plan?->monthly_expired_days ?? '' }}" required>
                                <small class="text--info"><i class="las la-info-circle"></i>@lang('-1 means never expires.')</small>
                            </div>
                        </div>

                        <div class="field-wrapper">
                            <div class="field-wrapper-label">
                                <p class="title">@lang('Expired Days in Yearly')</p>
                                <p class="note">@lang('The number of days per year a user can download seo content generated data before it expires.')</p>
                            </div>
                            <div class="field-wrapper-view">
                                <input class="form-control" type="number" name="yearly_expired_days" value="{{ $plan?->yearly_expired_days ?? '' }}" required>
                                <small class="text--info"><i class="las la-info-circle"></i>@lang('-1 means never expires.')</small>
                            </div>
                        </div>

                        <button class="btn btn--primary w-100 h-45" type="submit">@lang('Submit')</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection


@push('breadcrumb-plugins')
    <x-back route="{{ route('admin.plan.index') }}" />
@endpush

@push('style-lib')
    <link href="{{ asset('assets/admin/css/fontawesome-iconpicker.min.css') }}" rel="stylesheet">
@endpush

@push('script-lib')
    <script src="{{ asset('assets/admin/js/fontawesome-iconpicker.js') }}"></script>
@endpush

@push('script')
    <script>
        (function($) {
            "use strict";
            $('.iconPicker').iconpicker().on('iconpickerSelected', function(e) {
                $(this).closest('.form-group').find('.iconpicker-input').val(`<i class="${e.iconpickerValue}"></i>`);
            });
        })(jQuery)
    </script>
@endpush


@push('style')
    <style>
        .iconpicker .iconpicker-item {
            color: rgba(0, 0, 0, 0.8);
        }

        .card.bg-card-style .card-heading {
            padding: 12px 16px;
            background-color: rgb(0, 0, 0, 5%);
            border-radius: 8px;
            margin-bottom: 24px
        }

        .card.bg-card-style .card-body {}

        .field-wrapper {
            display: flex;
            align-items: center;
            gap: 16px 24px;
            flex-wrap: wrap;
        }

        .field-wrapper:not(:last-child) {
            margin-bottom: 24px;
        }

        .field-wrapper-label {
            width: 320px;
        }

        .field-wrapper-label .title {
            color: black;
            font-weight: 600;
        }

        .field-wrapper-label .note {
            font-size: 0.75rem;
        }

        .field-wrapper-view {
            flex: 1;
            max-width: 700px;
        }

        .field-wrapper .image-upload-wrapper {
            height: 150px;
            position: relative;
            width: 160px;
        }

        @media (max-width: 767px) {
            .field-wrapper {
                flex-direction: column;
                align-items: flex-start;
            }

            .field-wrapper-label {
                width: 100%;
            }
        }
    </style>
@endpush