@extends('layouts.admin')

@section('style')
<style>
  .required {
    color: #dd4b39;
  }
</style>
@endSection

@section('content')

<!-- Main content -->
<section class="content">
  <div class="row">
    <div class="col-md-12">
      <form class="form-horizontal" action="{{ $post_url }}" method="POST">
        @csrf
        <div class="card card-primary card-outline shadow">
          <div class="card-header">
            <h3 class="card-title">Create New Promo Code</h3>
          </div>

          <div class="card-body">
            <!-- Code -->
            <div class="form-group row {{ $errors->has('code') ? 'has-error' : '' }}">
              <label class="col-sm-2 control-label">Code / Prefix <span class="required">*</span></label>
              <div class="col-sm-10">
                <input type="text" class="form-control" placeholder="PROMO2024" name="code" value="{{ old('code') }}"
                  required>
                @if ($errors->has('code'))
                <span class="help-block text-danger">{{ $errors->first('code') }}</span>
                @endif
                <small class="form-text text-muted">Enter a unique promo code (e.g., SAVE20, WELCOME2024). With a
                  quantity above 1 this becomes a prefix and each code gets a random suffix.</small>
              </div>
            </div>

            <!-- Group -->
            <div class="form-group row {{ $errors->has('group_name') ? 'has-error' : '' }}">
              <label class="col-sm-2 control-label">Group</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" placeholder="Raya 2026" name="group_name"
                  value="{{ old('group_name') }}">
                @if ($errors->has('group_name'))
                <span class="help-block text-danger">{{ $errors->first('group_name') }}</span>
                @endif
                <small class="form-text text-muted">Settings are edited per group, not per code. Leave blank to name the
                  group after the code/prefix above. Group names must be unique.</small>
              </div>
            </div>

            <!-- Quantity -->
            <div class="form-group row {{ $errors->has('quantity') ? 'has-error' : '' }}">
              <label class="col-sm-2 control-label">Quantity <span class="required">*</span></label>
              <div class="col-sm-10">
                <input type="number" class="form-control" placeholder="1" name="quantity"
                  value="{{ old('quantity', 1) }}" min="1" max="500" required>
                @if ($errors->has('quantity'))
                <span class="help-block text-danger">{{ $errors->first('quantity') }}</span>
                @endif
                <small class="form-text text-muted">How many codes to create (max 500). All of them share the settings
                  below.</small>
              </div>
            </div>

            <!-- Max Use -->
            <div class="form-group row {{ $errors->has('max_use') ? 'has-error' : '' }}">
              <label class="col-sm-2 control-label">Max Use <span class="required">*</span></label>
              <div class="col-sm-10">
                <input type="number" class="form-control" placeholder="0" name="max_use" value="{{ old('max_use', 0) }}"
                  min="0" required>
                @if ($errors->has('max_use'))
                <span class="help-block text-danger">{{ $errors->first('max_use') }}</span>
                @endif
                <small class="form-text text-muted">Maximum number of times this code can be used (0 =
                  unlimited)</small>
              </div>
            </div>

            <!-- Max Use Per User -->
            <div class="form-group row {{ $errors->has('max_use_per_user') ? 'has-error' : '' }}">
              <label class="col-sm-2 control-label">Max Use Per User <span class="required">*</span></label>
              <div class="col-sm-10">
                <input type="number" class="form-control" placeholder="1" name="max_use_per_user"
                  value="{{ old('max_use_per_user', 1) }}" min="1" required>
                @if ($errors->has('max_use_per_user'))
                <span class="help-block text-danger">{{ $errors->first('max_use_per_user') }}</span>
                @endif
                <small class="form-text text-muted">Maximum number of times a single user can use this code</small>
              </div>
            </div>

            <!-- Reward Type -->
            <div class="form-group row {{ $errors->has('reward_type') ? 'has-error' : '' }}">
              <label class="col-sm-2 control-label">Reward Type <span class="required">*</span></label>
              <div class="col-sm-10">
                <select class="form-control" name="reward_type" required>
                  <option value="POINTS" {{ old('reward_type', 'POINTS' )=='POINTS' ? 'selected' : '' }}>Points</option>
                  <option value="VOUCHER" {{ old('reward_type')=='VOUCHER' ? 'selected' : '' }}>Voucher</option>
                  <option value="CHANCE" {{ old('reward_type')=='CHANCE' ? 'selected' : '' }}>Chance</option>
                </select>
                @if ($errors->has('reward_type'))
                <span class="help-block text-danger">{{ $errors->first('reward_type') }}</span>
                @endif
                <small class="form-text text-muted">Type of reward to give when code is used</small>
              </div>
            </div>

            <!-- Reward Value -->
            <div class="form-group row {{ $errors->has('reward_value') ? 'has-error' : '' }}">
              <label class="col-sm-2 control-label">Reward Value <span class="required">*</span></label>
              <div class="col-sm-10">
                <!-- Number input for POINTS and CHANCE -->
                <input type="number" class="form-control" placeholder="1" name="reward_value" id="reward_value_number"
                  value="{{ old('reward_value', 1) }}" min="1" required
                  style="display: {{ old('reward_type', 'POINTS') == 'VOUCHER' ? 'none' : 'block' }};">

                <!-- Dropdown for VOUCHER -->
                <select class="form-control" name="reward_value_voucher" id="reward_value_voucher"
                  style="display: {{ old('reward_type', 'POINTS') == 'VOUCHER' ? 'block' : 'none' }};">
                  <option value="">Select a voucher</option>
                  @foreach($vouchers as $voucher)
                  <option value="{{ $voucher->series_id }}" {{ old('reward_value')==$voucher->series_id ? 'selected' :
                    '' }}>
                    {{ $voucher->title }} (ID: {{ $voucher->series_id }})
                  </option>
                  @endforeach
                </select>

                @if ($errors->has('reward_value'))
                <span class="help-block text-danger">{{ $errors->first('reward_value') }}</span>
                @endif
                <small class="form-text text-muted" id="reward_value_help_points"
                  style="display: {{ old('reward_type', 'POINTS') == 'VOUCHER' ? 'none' : 'block' }};">
                  Amount/quantity of reward (number of points or chance amount)
                </small>
                <small class="form-text text-muted" id="reward_value_help_voucher"
                  style="display: {{ old('reward_type', 'POINTS') == 'VOUCHER' ? 'block' : 'none' }};">
                  Select the voucher to be awarded when this code is used
                </small>
              </div>
            </div>

            <!-- Status -->
            <div class="form-group row {{ $errors->has('status') ? 'has-error' : '' }}">
              <label class="col-sm-2 control-label">Status <span class="required">*</span></label>
              <div class="col-sm-10">
                <select class="form-control" name="status" required>
                  @foreach($statuses as $key => $label)
                  <option value="{{ $key }}" {{ old('status', 'active' )==$key ? 'selected' : '' }}>
                    {{ $label }}
                  </option>
                  @endforeach
                </select>
                @if ($errors->has('status'))
                <span class="help-block text-danger">{{ $errors->first('status') }}</span>
                @endif
              </div>
            </div>

            <!-- Description -->
            <div class="form-group row {{ $errors->has('description') ? 'has-error' : '' }}">
              <label class="col-sm-2 control-label">Description</label>
              <div class="col-sm-10">
                <textarea class="form-control" name="description" rows="3"
                  placeholder="Optional description for this promo code">{{ old('description') }}</textarea>
                @if ($errors->has('description'))
                <span class="help-block text-danger">{{ $errors->first('description') }}</span>
                @endif
              </div>
            </div>
          </div>

          <div class="card-footer">
            <button type="submit" class="btn btn-primary">
              <i class="fas fa-save"></i> Create Promo Code
            </button>
            <a href="{{ route('admin.promo_codes.index') }}" class="btn btn-default">
              <i class="fas fa-times"></i> Cancel
            </a>
          </div>
        </div>
      </form>
    </div>
  </div>
</section>

@endsection

@section('script')
<script>
  $(document).ready(function() {
  // Function to toggle reward value field based on reward type
  function toggleRewardValueField() {
    var rewardType = $('select[name="reward_type"]').val();
    var numberInput = $('#reward_value_number');
    var voucherDropdown = $('#reward_value_voucher');
    var helpPoints = $('#reward_value_help_points');
    var helpVoucher = $('#reward_value_help_voucher');
    
    if (rewardType === 'VOUCHER') {
      // Show voucher dropdown, hide number input
      numberInput.hide().prop('disabled', true).removeAttr('name');
      voucherDropdown.show().prop('disabled', false).attr('name', 'reward_value');
      helpPoints.hide();
      helpVoucher.show();
    } else {
      // Show number input, hide voucher dropdown
      numberInput.show().prop('disabled', false).attr('name', 'reward_value');
      voucherDropdown.hide().prop('disabled', true).removeAttr('name');
      helpPoints.show();
      helpVoucher.hide();
    }
  }
  
  // Initialize on page load
  toggleRewardValueField();
  
  // Handle reward type change
  $('select[name="reward_type"]').on('change', function() {
    toggleRewardValueField();
  });
});
</script>
@endsection