@extends('crm.master')

@section('title', 'Add Discount')

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">

  <!-- Page Header -->
  <div class="row mb-4">
    <div class="col-12">
      <div class="d-flex align-items-center justify-content-between">
        <div>
          <h4 class="mb-1">Add Discount</h4>
          <p class="text-muted mb-0">Create a new discount or promotion</p>
        </div>
        <a href="{{ route('crm.discounts.index') }}" class="btn btn-label-secondary">
          <i class="icon-base ti tabler-arrow-left me-2 icon-14px"></i>
          Back
        </a>
      </div>
    </div>
  </div>

  <!-- Alerts -->
  @include('crm.components.alerts')

  <form method="POST" action="{{ route('crm.discounts.store') }}">
    @csrf

    <div class="row g-4">

      <!-- Left Column -->
      <div class="col-lg-8">

        <!-- Basic Info -->
        <div class="card mb-4">
          <div class="card-header"><h6 class="mb-0">Discount Details</h6></div>
          <div class="card-body">

            <div class="mb-3">
              <label class="form-label">Discount Name <span class="text-danger">*</span></label>
              <input type="text" name="name" class="form-control @error('name') is-invalid @enderror"
                     value="{{ old('name') }}" placeholder="e.g. Summer Sale 20%" required>
              @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>

            <div class="row g-3">
              <div class="col-md-4">
                <label class="form-label">Amount <span class="text-danger">*</span></label>
                <input type="number" name="amount" step="0.01" min="0"
                       class="form-control @error('amount') is-invalid @enderror"
                       value="{{ old('amount', 0) }}" required>
                @error('amount')<div class="invalid-feedback">{{ $message }}</div>@enderror
              </div>
              <div class="col-md-4">
                <label class="form-label">Discount Type <span class="text-danger">*</span></label>
                <select name="adjustment_type" class="form-select @error('adjustment_type') is-invalid @enderror" required>
                  <option value="percent" {{ old('adjustment_type') === 'percent' ? 'selected' : '' }}>Percent (%)</option>
                  <option value="fixed"   {{ old('adjustment_type') === 'fixed'   ? 'selected' : '' }}>Fixed ($)</option>
                </select>
                @error('adjustment_type')<div class="invalid-feedback">{{ $message }}</div>@enderror
              </div>
            </div>

          </div>
        </div>

        <!-- Voucher / Code -->
        <div class="card mb-4">
          <div class="card-header"><h6 class="mb-0">Voucher / Code</h6></div>
          <div class="card-body">

            <div class="mb-3">
              <label class="form-label">Discount Code</label>
              <div class="form-text mb-2">Discount code required to enable this price.</div>
              <input type="text" name="code" class="form-control @error('code') is-invalid @enderror"
                     value="{{ old('code') }}" placeholder="e.g. SUMMER20" maxlength="50">
              @error('code')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>

            <div class="form-check form-switch">
              <input class="form-check-input" type="checkbox" name="using_vouchers" id="usingVouchers" value="1"
                     {{ old('using_vouchers') ? 'checked' : '' }}>
              <label class="form-check-label" for="usingVouchers">Enable Single-Use Vouchers</label>
              <div class="form-text">Use single-use voucher codes instead of a multi-use discount code.</div>
            </div>

          </div>
        </div>

        <!-- Validity -->
        <div class="card mb-4">
          <div class="card-header"><h6 class="mb-0">Validity</h6></div>
          <div class="card-body">

            <div class="mb-3">
              <div class="form-check form-switch">
                <input type="hidden" name="always_valid" value="0">
                <input class="form-check-input" type="checkbox" name="always_valid" id="alwaysValid" value="1"
                       {{ old('always_valid', '1') == '1' ? 'checked' : '' }} onchange="toggleDateRange()">
                <label class="form-check-label" for="alwaysValid">Always Valid (no expiry)</label>
              </div>
            </div>

            <div id="dateRangeWrap" style="{{ old('always_valid', '1') == '1' ? 'display:none' : '' }}">
              <div class="row g-3 mb-4">
                <div class="col-md-6">
                  <label class="form-label">Start Date</label>
                  <input type="date" name="start_date" class="form-control @error('start_date') is-invalid @enderror"
                         value="{{ old('start_date') }}">
                  @error('start_date')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-md-6">
                  <label class="form-label">End Date</label>
                  <input type="date" name="end_date" class="form-control @error('end_date') is-invalid @enderror"
                         value="{{ old('end_date') }}">
                  @error('end_date')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
              </div>

              <label class="form-label">Applicable Days</label>
              @php $oldDays = old('applicable_days', ['Mon','Tue','Wed','Thu','Fri','Sat','Sun']); @endphp
              <div class="d-flex flex-wrap gap-2">
                @foreach(['Mon','Tue','Wed','Thu','Fri','Sat','Sun'] as $day)
                  <div class="form-check form-check-inline">
                    <input class="form-check-input" type="checkbox" name="applicable_days[]"
                           id="day_{{ $day }}" value="{{ $day }}"
                           {{ in_array($day, $oldDays) ? 'checked' : '' }}>
                    <label class="form-check-label" for="day_{{ $day }}">{{ $day }}</label>
                  </div>
                @endforeach
              </div>
            </div>

          </div>
        </div>

        <!-- Product Scope -->
        <div class="card mb-4">
          <div class="card-header"><h6 class="mb-0">Product Scope</h6></div>
          <div class="card-body">

            <div class="mb-3">
              <div class="form-check form-switch">
                <input class="form-check-input" type="checkbox" name="apply_to_all_products" id="applyAll" value="1"
                       {{ old('apply_to_all_products') ? 'checked' : '' }} onchange="toggleProductList()">
                <label class="form-check-label" for="applyAll">Apply to All Products</label>
              </div>
            </div>

            <div id="productListWrap" style="{{ old('apply_to_all_products') ? 'display:none' : '' }}">
              @php $selectedIds = old('product_ids', []); @endphp
              <div class="border rounded p-3" style="max-height: 320px; overflow-y: auto;">
                @include('crm.components.product-selector')
              </div>
            </div>

          </div>
        </div>

      </div>

      <!-- Right Column -->
      <div class="col-lg-4">

        <div class="card mb-4">
          <div class="card-header"><h6 class="mb-0">Settings</h6></div>
          <div class="card-body">
            <div class="form-check form-switch">
              <input class="form-check-input" type="checkbox" name="enabled" id="enabled" value="1"
                     {{ old('enabled', '1') ? 'checked' : '' }}>
              <label class="form-check-label" for="enabled">Enabled</label>
            </div>
          </div>
        </div>

        <div class="d-grid gap-2">
          <button type="submit" class="btn btn-primary">
            <i class="ti tabler-device-floppy me-2"></i> Save Discount
          </button>
          <a href="{{ route('crm.discounts.index') }}" class="btn btn-label-secondary">Cancel</a>
        </div>

      </div>
    </div>

  </form>

</div>

<script>
function toggleDateRange() {
    var checked = document.getElementById('alwaysValid').checked;
    document.getElementById('dateRangeWrap').style.display = checked ? 'none' : '';
}
function toggleProductList() {
    var checked = document.getElementById('applyAll').checked;
    document.getElementById('productListWrap').style.display = checked ? 'none' : '';
}
</script>
@endsection