@extends('admin.layouts.master')

@section('title', 'Create Plan')

@section('content')

<!-- Main Content -->
<div class="main-content">
  <section class="section">
    <div class="section-body">
      <div class="row">
        <div class="col-12">
          <div class="card">
            <div class="card-header">
              <h4>Create New Plan</h4>
              <div class="card-header-action">
                <a href="{{ route('admin.plans.index') }}" class="btn btn-secondary">
                  <i class="fas fa-arrow-left"></i> Back to List
                </a>
              </div>
            </div>
            <div class="card-body">
              <form action="{{ route('admin.plans.store') }}" method="POST">
                @csrf

                <div class="row">
                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="title">Title <span class="text-danger">*</span></label>
                      <input type="text"
                             id="title"
                             name="title"
                             class="form-control @error('title') is-invalid @enderror"
                             value="{{ old('title') }}" required>
                      @error('title')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="status">Status</label>
                      <select id="status" name="status" class="form-control @error('status') is-invalid @enderror">
                        <option value="1" {{ old('status', 1) == 1 ? 'selected' : '' }}>Active</option>
                        <option value="0" {{ old('status', 1) == 0 ? 'selected' : '' }}>Inactive</option>
                      </select>
                      @error('status')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                  </div>
                </div>

                <div class="form-group">
                  <label for="description">Description</label>
                  <textarea id="description" name="description" class="form-control @error('description') is-invalid @enderror" rows="3">{{ old('description') }}</textarea>
                  @error('description')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>

                <div class="row">
                  <div class="col-md-6">
                    <h6>Price</h6>
                    @php
                      $oldCycle = old('billing_cycle') ?? (old('price.monthly_price') !== null ? 'monthly' : (old('price.yearly_price') !== null ? 'yearly' : ''));
                      $oldPriceValue = old('price.monthly_price') ?? old('price.yearly_price');
                    @endphp
                    <div class="form-group">
                      <label for="billing_cycle">Billing Cycle</label>
                      <select id="billing_cycle" name="billing_cycle" class="form-control">
                        <option value="">Select billing cycle</option>
                        <option value="monthly" {{ $oldCycle === 'monthly' ? 'selected' : '' }}>Monthly</option>
                        <option value="yearly" {{ $oldCycle === 'yearly' ? 'selected' : '' }}>Yearly</option>
                      </select>
                    </div>
                    <div class="form-group" id="price_input_group" style="display: none;">
                      <label id="price_label" for="price_input">Price</label>
                      <input type="number" step="0.01" min="0" id="price_input" class="form-control @error('price.monthly_price') is-invalid @enderror @error('price.yearly_price') is-invalid @enderror" value="{{ $oldPriceValue }}" placeholder="e.g. 0.00">
                      @error('price.monthly_price')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                      @error('price.yearly_price')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                    </div>
                  </div>
                  <div class="col-md-6">
                    <h6>Condition JSON</h6>
                    <div class="form-group">
                      <label for="condition_type">Type</label>
                      <input type="text" id="condition_type" name="condition[type]" class="form-control" value="{{ old('condition.type') }}" placeholder="e.g. 2">
                    </div>
                    <div class="form-group">
                      <label for="no_of_website">No of Website</label>
                      <input type="text" id="no_of_website" name="condition[no_of_website]" class="form-control" value="{{ old('condition.no_of_website') }}" placeholder="e.g. 100">
                    </div>
                    <div class="form-group">
                      <label for="no_of_theme">No of Theme</label>
                      <input type="text" id="no_of_theme" name="condition[no_of_theme]" class="form-control" value="{{ old('condition.no_of_theme') }}" placeholder="e.g. 100">
                    </div>
                  </div>
                </div>

                <div class="form-group">
                  <button type="submit" class="btn btn-primary">
                    <i class="fas fa-save"></i> Create Plan
                  </button>
                  <a href="{{ route('admin.plans.index') }}" class="btn btn-secondary">
                    <i class="fas fa-times"></i> Cancel
                  </a>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
  var cycleSelect = document.getElementById('billing_cycle');
  var priceGroup = document.getElementById('price_input_group');
  var priceInput = document.getElementById('price_input');
  var priceLabel = document.getElementById('price_label');

  function updatePriceField() {
    var cycle = cycleSelect ? cycleSelect.value : '';
    if (!priceGroup || !priceInput || !priceLabel) return;
    if (cycle === 'monthly') {
      priceGroup.style.display = 'block';
      priceLabel.textContent = 'Monthly Price';
      priceInput.name = 'price[monthly_price]';
      priceInput.placeholder = 'e.g. 10.00';
    } else if (cycle === 'yearly') {
      priceGroup.style.display = 'block';
      priceLabel.textContent = 'Yearly Price';
      priceInput.name = 'price[yearly_price]';
      priceInput.placeholder = 'e.g. 100.00';
    } else {
      priceGroup.style.display = 'none';
      priceInput.name = '';
    }
  }

  if (cycleSelect) {
    cycleSelect.addEventListener('change', updatePriceField);
  }
  updatePriceField();
});
</script>

@endsection