@extends('layouts.user_type.auth')
@section('content')
<div class="row justify-content-center">
    <div class=" col-12">
        <div class="card shadow-lg border-0">
            <div class="card-header bg-gradient-dark text-white py-4 d-flex justify-content-between align-items-center">
                <h3 class="mb-0 text-white">Create Plan</h3>
                <a href="{{ route('plan.plan-list') }}" class="btn btn-white btn-sm mb-0">Plan List</a>
            </div>
            <div class="card-body">
                <form action="{{ route('plan.plan-store') }}" method="POST">
                    @csrf
                    <div class="row">
                        <!-- Name -->
                        <div class="col-md-6 col-12 mb-3">
                            <label for="name" class="form-label">Plan Name</label>
                            <input
                                type="text"
                                id="name"
                                name="name"
                                class="form-control @error('name') is-invalid @enderror"
                                placeholder="Pro"
                                value="{{ old('name') }}"
                                required>
                            @error('name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Description -->
                        <div class="col-md-6 col-12 mb-3">
                            <label for="description" class="form-label">Description</label>
                            <input
                                type="text"
                                id="description"
                                name="description"
                                class="form-control @error('description') is-invalid @enderror"
                                placeholder="Pro plan"
                                value="{{ old('description') }}"
                                required>
                            @error('description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="row">
                        <!-- Price -->
                        <div class="col-md-6 col-12 mb-3">
                            <label for="price" class="form-label">Price ($)</label>
                            <input
                                type="number"
                                step="0.01"
                                id="price"
                                name="price"
                                class="form-control @error('price') is-invalid @enderror"
                                placeholder="9.99"
                                value="{{ old('price') }}"
                                required>
                            @error('price')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Signup Fee -->
                        <div class="col-md-6 col-12 mb-3">
                            <label for="signup_fee" class="form-label">Signup Fee ($)</label>
                            <input
                                type="number"
                                step="0.01"
                                id="signup_fee"
                                name="signup_fee"
                                class="form-control @error('signup_fee') is-invalid @enderror"
                                placeholder="1.99"
                                value="{{ old('signup_fee') }}"
                                required>
                            @error('signup_fee')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="row">
                        <!-- Invoice Period -->
                        <div class="col-md-6 col-12 mb-3">
                            <label for="invoice_period" class="form-label">Invoice Period</label>
                            <input
                            min="0"
                                type="number"
                                id="invoice_period"
                                name="invoice_period"
                                class="form-control @error('invoice_period') is-invalid @enderror"
                                placeholder="1"
                                value="{{ old('invoice_period') }}"
                                required>
                            @error('invoice_period')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Invoice Interval -->
                        
                        <div class="col-md-6 col-12 mb-3">
                            <label for="invoice_interval" class="form-label">Invoice Interval</label>
                            <select
                                id="invoice_interval"
                                name="invoice_interval"
                                class="form-select @error('invoice_interval') is-invalid @enderror"
                                required>
                                <option value="MONTH" {{ old('invoice_interval') == 'MONTH' ? 'selected' : '' }}>Month</option>
                                <option value="YEAR" {{ old('invoice_interval') == 'YEAR' ? 'selected' : '' }}>Year</option>
                            </select>
                            @error('invoice_interval')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="row">
                        <!-- Trial Period -->
                        <div class="col-md-6 col-12 mb-3">
                            <label for="trial_period" class="form-label">Trial Period</label>
                            <input
                            min="0"
                                type="number"
                                id="trial_period"
                                name="trial_period"
                                class="form-control @error('trial_period') is-invalid @enderror"
                                placeholder="15"
                                value="{{ old('trial_period') }}"
                                required>
                            @error('trial_period')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Trial Interval -->
                        <div class="col-md-6 col-12 mb-3">
                            <label for="trial_interval" class="form-label">Trial Interval</label>
                            <select
                                id="trial_interval"
                                name="trial_interval"
                                class="form-select @error('trial_interval') is-invalid @enderror"
                                required>
                                <option value="DAY" {{ old('trial_interval') == 'DAY' ? 'selected' : '' }}>Day</option>
                                <option value="WEEK" {{ old('trial_interval') == 'WEEK' ? 'selected' : '' }}>Week</option>
                            </select>
                            @error('trial_interval')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="row">
                        <!-- Sort Order -->
                        <div class="col-md-6 col-12 mb-3">
                            <label for="sort_order" class="form-label">Sort Order</label>
                            <input
                            min="0"
                                type="number"
                                id="sort_order"
                                name="sort_order"
                                class="form-control @error('sort_order') is-invalid @enderror"
                                placeholder="1"
                                value="{{ old('sort_order') }}"
                                required>
                            @error('sort_order')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Currency -->
                        <div class="col-md-6 col-12 mb-3">
                            <label for="currency" class="form-label">Currency</label>
                            <select
                                id="currency"
                                name="currency"
                                class="form-select @error('currency') is-invalid @enderror"
                                required>
                                <option value="USD" {{ old('currency') == 'USD' ? 'selected' : '' }}>USD</option>
                                <option value="EUR" {{ old('currency') == 'EUR' ? 'selected' : '' }}>EUR</option>
                                <option value="GBP" {{ old('currency') == 'GBP' ? 'selected' : '' }}>GBP</option>
                            </select>
                            @error('currency')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- Submit Button -->
                    <div class="col-12 text-end">
                        <button  type="reset" class="btn bg-gradient-info my-4">Reset</button>
                        <button  onclick="this.form.submit(); this.disabled=true; this.innerHTML='<span class=\'spinner-border  spinner-border-sm\' role=\'status\' aria-hidden=\'true\'></span > Please wait...';" type="submit" class="btn bg-gradient-dark my-4">Save</button>

                    </div>
                </form>

            </div>
        </div>
    </div>
</div>
@endsection