@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
        @method('PUT')
        <input type="hidden" name="group" value="{{ $group }}">
        <div class="card card-primary card-outline shadow">
          <div class="card-header">
            <h3 class="card-title">Edit Group: {{ $group }}</h3>
          </div>

          <div class="card-body">
            <div class="alert alert-info">
              Saving applies these settings to all <strong>{{ $promo_codes->count() }}</strong> promo code(s) in this
              group. The codes themselves and their usage counts are not changed.
            </div>

            <!-- Group Name -->
            <div class="form-group row {{ $errors->has('group_name') ? 'has-error' : '' }}">
              <label class="col-sm-2 control-label">Group Name <span class="required">*</span></label>
              <div class="col-sm-10">
                <input type="text" class="form-control" placeholder="Raya 2026" name="group_name"
                  value="{{ old('group_name', $group) }}" required>
                @if ($errors->has('group_name'))
                <span class="help-block text-danger">{{ $errors->first('group_name') }}</span>
                @endif
                <small class="form-text text-muted">Renaming moves every code in this group to the new name</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', $promo_code->max_use) }}" 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 each 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', $promo_code->max_use_per_user) }}" 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 each 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">
                @php $reward_type = old('reward_type', $promo_code->reward_type); @endphp
                <select class="form-control" name="reward_type" required>
                  <option value="POINTS" {{ $reward_type=='POINTS' ? 'selected' : '' }}>Points</option>
                  <option value="VOUCHER" {{ $reward_type=='VOUCHER' ? 'selected' : '' }}>Voucher</option>
                  <option value="CHANCE" {{ $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 a 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">
                @php $reward_value = old('reward_value', $promo_code->reward_value); @endphp

                <!-- Number input for POINTS and CHANCE -->
                <input type="number" class="form-control" placeholder="1" name="reward_value" id="reward_value_number"
                  value="{{ $reward_type == 'VOUCHER' ? 1 : $reward_value }}" min="1" required
                  style="display: {{ $reward_type == 'VOUCHER' ? 'none' : 'block' }};">

                <!-- Dropdown for VOUCHER -->
                <select class="form-control" name="reward_value_voucher" id="reward_value_voucher"
                  style="display: {{ $reward_type == 'VOUCHER' ? 'block' : 'none' }};">
                  <option value="">Select a voucher</option>
                  @foreach($vouchers as $voucher)
                  <option value="{{ $voucher->series_id }}" {{ $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: {{ $reward_type == '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: {{ $reward_type == 'VOUCHER' ? 'block' : 'none' }};">
                  Select the voucher to be awarded when a 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', $promo_code->status)==$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 group">{{ old('description', $promo_code->description) }}</textarea>
                @if ($errors->has('description'))
                <span class="help-block text-danger">{{ $errors->first('description') }}</span>
                @endif
              </div>
            </div>

            <!-- Codes in this group -->
            <div class="form-group row">
              <label class="col-sm-2 control-label">Codes</label>
              <div class="col-sm-10">
                <table class="table table-sm table-bordered">
                  <thead>
                    <tr>
                      <th>Code</th>
                      <th>Used</th>
                      <th>Created</th>
                    </tr>
                  </thead>
                  <tbody>
                    @foreach($promo_codes as $code_row)
                    <tr>
                      <td><strong>{{ $code_row->code }}</strong></td>
                      <td>{{ $code_row->used_count }}</td>
                      <td>{{ $code_row->created_at->format('d/m/Y H:i') }}</td>
                    </tr>
                    @endforeach
                  </tbody>
                </table>
              </div>
            </div>
          </div>

          <div class="card-footer">
            <button type="submit" class="btn btn-primary">
              <i class="fas fa-save"></i> Save Group
            </button>
            <a href="{{ route('admin.promo_codes.groups') }}" 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