@extends('admin.layouts.main')
@section('title',"Sửa mã giảm giá")

@section('css')
<link href="{{asset('lib/select2/css/select2.min.css')}}" rel="stylesheet" />
<style>
  .form-container {
    background: #f8f9fa;
    min-height: 100vh;
    padding: 20px 0;
  }

  .form-card {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
  }

  .form-card-header {
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    padding: 15px 20px;
    border-radius: 8px 8px 0 0;
  }

  .form-card-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #495057;
  }

  .form-card-body {
    padding: 20px;
  }

  .form-section {
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f1f3f4;
  }

  .form-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
  }

  .section-title {
    font-size: 14px;
    font-weight: 600;
    color: #343a40;
    margin-bottom: 15px;
  }

  .form-group {
    margin-bottom: 15px;
  }

  .form-label {
    font-size: 13px;
    font-weight: 500;
    color: #495057;
    margin-bottom: 5px;
    display: block;
  }

  .form-control {
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 13px;
    transition: border-color 0.15s ease-in-out;
  }

  .form-control:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
  }

  .form-radio-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .form-radio-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
  }

  .form-radio-item input[type="radio"] {
    margin-top: 2px;
  }

  .form-radio-item label {
    font-size: 13px;
    color: #495057;
    cursor: pointer;
    margin: 0;
  }

  .radio-option-content {
    margin-left: 20px;
    margin-top: 8px;
    display: none;
  }

  .radio-option-content.show {
    display: block;
  }

  .simple-tabs {
    border-bottom: 1px solid #e9ecef;
    margin-bottom: 20px;
  }

  .simple-tabs-nav {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .simple-tab-item {
    margin-right: 20px;
  }

  .simple-tab-link {
    display: block;
    padding: 10px 0;
    font-size: 13px;
    font-weight: 500;
    color: #6c757d;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    background: none;
    border: none;
  }

  .simple-tab-link.active {
    color: #495057;
    border-bottom-color: #007bff;
  }

  .simple-tab-content {
    display: none;
  }

  .simple-tab-content.active {
    display: block;
  }

  .btn-group {
    display: flex;
    gap: 10px;
    margin-top: 20px;
  }

  .btn {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 4px;
    border: 1px solid;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    text-align: center;
  }

  .btn-primary {
    background: #007bff;
    border-color: #007bff;
    color: white;
  }

  .btn-primary:hover {
    background: #0056b3;
    border-color: #0056b3;
  }

  .btn-secondary {
    background: #6c757d;
    border-color: #6c757d;
    color: white;
  }

  .btn-secondary:hover {
    background: #545b62;
    border-color: #545b62;
  }

  .btn-sm {
    padding: 4px 8px;
    font-size: 12px;
  }

  .alert {
    padding: 10px 15px;
    margin-bottom: 15px;
    border: 1px solid;
    border-radius: 4px;
    font-size: 13px;
  }

  .alert-success {
    background: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
  }

  .alert-warning {
    background: #fff3cd;
    border-color: #ffeaa7;
    color: #856404;
  }

  .alert-danger {
    background: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
  }

  .text-muted {
    color: #6c757d;
    font-size: 12px;
  }

  .select2-container {
    width: 100% !important;
  }

  .select2-container--default .select2-selection--single {
    height: 34px;
    border: 1px solid #ced4da;
    border-radius: 4px;
  }

  .select2-container--default .select2-selection--multiple {
    border: 1px solid #ced4da;
    border-radius: 4px;
    min-height: 34px;
  }

  .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #007bff !important;
    border: 1px solid #007bff !important;
    color: white !important;
    border-radius: 3px;
    font-size: 12px;
  }

  .invalid-feedback {
    display: block;
    color: #dc3545;
    font-size: 12px;
    margin-top: 5px;
  }

  .form-control.is-invalid {
    border-color: #dc3545;
  }
</style>
@endsection

@section('content')
<div class="content-wrapper">
  @include('admin.partials.content-header',['name'=>"Mã giảm giá","key"=>"Sửa mã giảm giá"])
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        @if ($errors->any())
        <div class="alert alert-danger">
          <ul style="margin: 0; padding-left: 20px;">
            @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
          </ul>
        </div>
        @endif

        @if (session('success'))
        <div class="alert alert-success">
          {{ session('success') }}
        </div>
        @endif

        @if(session("alert"))
        <div class="alert alert-success">
          {{session("alert")}}
        </div>
        @elseif(session('error'))
        <div class="alert alert-warning">
          {{session("error")}}
        </div>
        @endif

        <form action="{{route('admin.discount.update',['id'=>$data->id])}}" method="POST">
          @csrf
          <div class="row">
            <!-- Cột trái -->
            <div class="col-md-6">
              <div class="form-card">
                <div class="form-card-header">
                  <h3>Thông tin mã giảm giá</h3>
                </div>
                <div class="form-card-body">
                  <!-- Thông tin cơ bản -->
                  <div class="form-section">
                    <div class="form-group">
                      <label class="form-label">Mã giảm giá</label>
                      <input type="text" class="form-control" name="name" value="{{ old('name', $data->name) }}" placeholder="Nhập mã giảm giá">
                      @error('name')
                      <div class="invalid-feedback">{{ $message }}</div>
                      @enderror
                    </div>

                    <div class="form-group">
                      <label class="form-label">Loại giảm giá</label>
                      <div class="form-radio-group">
                        <div class="form-radio-item">
                          <input type="radio" name="type_discount" id="percent_discount" value="0"
                            {{ old('type_discount', $data->type_discount ?? 0) == 0 ? 'checked' : '' }}>
                          <label for="percent_discount">Giảm theo phần trăm (%)</label>
                        </div>
                        <div class="radio-option-content {{ old('type_discount', $data->type_discount ?? 0) == 0 ? 'show' : '' }}">
                          <input type="number" min="0" max="100" class="form-control @error('price_is_reduced') is-invalid @enderror"
                            name="price_is_reduced" value="{{ old('price_is_reduced', $data->price_is_reduced) }}" placeholder="Nhập % giảm giá (1-100)">
                          @error('price_is_reduced')
                          <div class="invalid-feedback">{{ $message }}</div>
                          @enderror
                          <input type="number" min="0" style="margin: top 5px;"  class="form-control @error('max_discount') is-invalid @enderror"
                            name="max_discount" value="{{ old('max_discount', $data->max_discount) }}" placeholder="Giá tiền max">
                          @error('max_discount')
                          <div class="invalid-feedback">{{ $message }}</div>
                          @enderror
                        </div>

                        <div class="form-radio-item">
                          <input type="radio" name="type_discount" id="fixed_discount" value="1"
                            {{ old('type_discount', $data->type_discount ?? 0) == 1 ? 'checked' : '' }}>
                          <label for="fixed_discount">Giảm số tiền cố định</label>
                        </div>
                        <div class="radio-option-content {{ old('type_discount', $data->type_discount ?? 0) == 1 ? 'show' : '' }}">
                          <input type="number" min="0" class="form-control @error('discount_value') is-invalid @enderror"
                            name="discount_value" value="{{ old('discount_value', $data->discount_value) }}" placeholder="Nhập số tiền giảm (VNĐ)">
                          @error('discount_value')
                          <div class="invalid-feedback">{{ $message }}</div>
                          @enderror
                        </div>
                      </div>
                    </div>
                  </div>

                  <!-- Giới hạn sử dụng -->
                  <div class="form-section">
                   <div class="section-title">Giới hạn sử dụng</div>

<div class="form-group">
  <div class="form-check mb-2">
    <input type="checkbox" class="form-check-input" id="enable_usage_limit" name="enable_usage_limit" value="1"
      {{ old('enable_usage_limit', $data->usage_limit !== null ? 1 : '') ? 'checked' : '' }}>
    <label class="form-check-label" for="enable_usage_limit">Giới hạn tổng số lần sử dụng</label>
  </div>
  <input type="number" min="0"
    class="form-control @error('usage_limit') is-invalid @enderror"
    name="usage_limit"
    id="usage_limit"
    value="{{ old('usage_limit', $data->usage_limit) }}"
    placeholder="Nhập số lần sử dụng tối đa"
    {{ old('enable_usage_limit', $data->usage_limit !== null ? 1 : '') ? '' : 'disabled' }}>
  @error('usage_limit')
  <div class="invalid-feedback">{{ $message }}</div>
  @enderror
</div>

<div class="form-group mt-3">
  <div class="form-check mb-2">
    <input type="checkbox" class="form-check-input" id="enable_usage_limit_user" name="enable_usage_limit_user" value="1"
      {{ old('enable_usage_limit_user', $data->usage_limit_user !== null ? 1 : '') ? 'checked' : '' }}>
    <label class="form-check-label" for="enable_usage_limit_user">Giới hạn số lần sử dụng cho mỗi khách hàng</label>
  </div>
  <input type="number" min="0"
    class="form-control @error('usage_limit_user') is-invalid @enderror"
    name="usage_limit_user"
    id="usage_limit_user"
    value="{{ old('usage_limit_user', $data->usage_limit_user) }}"
    placeholder="Nhập số lần sử dụng tối đa/khách hàng"
    {{ old('enable_usage_limit_user', $data->usage_limit_user !== null ? 1 : '') ? '' : 'disabled' }}>
  @error('usage_limit_user')
  <div class="invalid-feedback">{{ $message }}</div>
  @enderror
</div>


                    <div class="form-group">
                      <label class="form-label">Số lần đã sử dụng</label>
                      <input type="number" min="0" class="form-control @error('used') is-invalid @enderror"
                        name="used" value="{{ old('used', $data->used) }}" placeholder="Nhập số lần đã sử dụng">
                      @error('used')
                      <div class="invalid-feedback">{{ $message }}</div>
                      @enderror
                    </div>
                  </div>

                  <!-- Thời gian hiệu lực -->

                </div>
              </div>
            </div>

            <!-- Cột phải -->
            <div class="col-md-6">
              <div class="form-card">
                <div class="form-card-header">
                  <h3>Điều kiện và đối tượng áp dụng</h3>
                </div>
                <div class="form-card-body">
                  <!-- Tabs -->
                  <div class="simple-tabs">
                    <ul class="simple-tabs-nav">
                      <li class="simple-tab-item">
                        <button type="button" class="simple-tab-link active" data-tab="target">Đối tượng áp dụng</button>
                      </li>
                      <li class="simple-tab-item">
                        <button type="button" class="simple-tab-link " data-tab="conditions">Điều kiện áp dụng</button>
                      </li>

                    </ul>
                  </div>

                  <!-- Tab: Điều kiện áp dụng -->
                  <div class="simple-tab-content " id="conditions">
                    <div class="form-group">
                      <div class="form-radio-group">
                        <div class="form-radio-item">
                          <input type="radio" name="condition" id="no_condition" value="0"
                            {{ old('condition', $data->condition ?? 0) == 0 ? 'checked' : '' }}>
                          <label for="no_condition">Không yêu cầu điều kiện</label>
                        </div>
                        <div class="radio-option-content {{ old('condition', $data->condition ?? 0) == 0 ? 'show' : '' }}">
                          <div class="text-muted">Mã giảm giá có thể được sử dụng mà không cần điều kiện gì.</div>
                        </div>

                        <div class="form-radio-item">
                          <input type="radio" name="condition" id="min_price_condition" value="1"
                            {{ old('condition', $data->condition ?? 0) == 1 ? 'checked' : '' }}>
                          <label for="min_price_condition">Giá trị mua tối thiểu</label>
                        </div>
                        <div class="radio-option-content {{ old('condition', $data->condition ?? 0) == 1 ? 'show' : '' }}">
                          <input type="number" min="0" class="form-control @error('min_price') is-invalid @enderror"
                            name="min_price" value="{{ old('min_price', $data->min_price) }}" placeholder="Nhập giá trị tối thiểu (VNĐ)">
                          @error('min_price')
                          <div class="invalid-feedback">{{ $message }}</div>
                          @enderror
                        </div>

                        <div class="form-radio-item">
                          <input type="radio" name="condition" id="min_quantity_condition" value="2"
                            {{ old('condition', $data->condition ?? 0) == 2 ? 'checked' : '' }}>
                          <label for="min_quantity_condition">Số lượng mua tối thiểu</label>
                        </div>
                        <div class="radio-option-content {{ old('condition', $data->condition ?? 0) == 2 ? 'show' : '' }}">
                          <input type="number" min="0" class="form-control @error('min_number') is-invalid @enderror"
                            name="min_number" value="{{ old('min_number', $data->min_number) }}" placeholder="Nhập số lượng tối thiểu">
                          @error('min_number')
                          <div class="invalid-feedback">{{ $message }}</div>
                          @enderror
                        </div>
                      </div>
                    </div>
                  </div>

                  <!-- Tab: Đối tượng áp dụng -->
                  <div class="simple-tab-content active" id="target">
                    <div class="form-group">
                      <div class="form-radio-group">
                        <div class="form-radio-item">
                          <input type="radio" name="type" id="apply_user" value="0"
                            {{ old('type', $data->type ?? 0) == 0 ? 'checked' : '' }}>
                          <label for="apply_user">Áp dụng cho User cụ thể</label>
                        </div>
                        <div class="form-radio-item">
                          <input type="radio" name="type" id="apply_rank" value="1"
                            {{ old('type', $data->type ?? 0) == 1 ? 'checked' : '' }}>
                          <label for="apply_rank">Áp dụng cho Hạng thành viên</label>
                        </div>
                        <div class="form-radio-item">
                          <input type="radio" name="type" id="apply_category" value="2"
                            {{ old('type', $data->type ?? 0) == 2 ? 'checked' : '' }}>
                          <label for="apply_category">Áp dụng cho Nhóm danh mục</label>
                        </div>
                        <div class="form-radio-item">
                          <input type="radio" name="type" id="apply_product" value="3"
                            {{ old('type', $data->type ?? 0) == 3 ? 'checked' : '' }}>
                          <label for="apply_product">Áp dụng cho Sản phẩm cụ thể</label>
                        </div>
                        <div class="form-radio-item">
                          <input type="radio" name="type" id="apply_brand" value="4"
                            {{ old('type', $data->type ?? 0) == 4 ? 'checked' : '' }}>
                          <label for="apply_brand">Áp dụng cho Nhà cung cấp / Thương hiệu</label>
                        </div>
                      </div>
                      @error('type')
                      <div class="invalid-feedback">{{ $message }}</div>
                      @enderror
                    </div>

                    {{-- USER --}}
                    <div class="form-group apply-input apply-user row">
                      <label class="form-label col-12">Chọn User</label>
                      <button type="button" class="btn btn-secondary btn-sm col-4" id="select-all-users-edit">Chọn tất cả</button>
                      <select id="user-select-edit" class="form-control select2 col-8" multiple name="user_id[]">
                        @foreach($users as $item)
                        <option value="{{ $item->id }}"
                          {{ in_array($item->id, old('user_id', $data->users->pluck('id')->toArray() ?? [])) ? 'selected' : '' }}>
                          {{ $item->name }} ({{ $item->phone }})
                        </option>
                        @endforeach
                      </select>
                      @error('user_id')
                      <div class="invalid-feedback">{{ $message }}</div>
                      @enderror
                    </div>

                    {{-- RANK --}}
                    <div class="form-group apply-input apply-rank" style="display: none;">
                      <label class="form-label">Chọn hạng thành viên</label>
                      <select name="rank_id" class="form-control">
                        <option value="">-- Chọn hạng --</option>
                        @foreach($ranks as $item)
                        <option value="{{ $item->id }}" {{ old('rank_id', $data->rank_id) == $item->id ? 'selected' : '' }}>
                          {{ $item->name }}
                        </option>
                        @endforeach
                      </select>
                      @error('rank_id')
                      <div class="invalid-feedback">{{ $message }}</div>
                      @enderror
                    </div>

                    {{-- CATEGORY --}}
                    <div class="form-group apply-input apply-category" style="display: none;">
                      <label class="form-label">Chọn danh mục</label>
                      <select name="category_ids[]" class="form-control select2" multiple>
                        @foreach($categories as $item)
                        <option value="{{ $item->id }}"
                          {{ in_array($item->id, old('category_ids', $dataCategories->pluck('category_id')->toArray() ?? [])) ? 'selected' : '' }}>
                          {{ $item->name }}
                        </option>
                        @endforeach
                      </select>
                      @error('category_ids')
                      <div class="invalid-feedback">{{ $message }}</div>
                      @enderror
                    </div>

                    {{-- PRODUCT --}}
                    <div class="form-group apply-input apply-product" style="display: none;">
                      <label class="form-label">Chọn sản phẩm</label>
                      <select name="product_ids[]" class="form-control select2" multiple>
                        @foreach($products as $item)
                        <option value="{{ $item->id }}"
                          {{ in_array($item->id, old('product_ids', $dataProducts->pluck('product_id')->toArray() ?? [])) ? 'selected' : '' }}>
                          {{ $item->name }}
                        </option>
                        @endforeach
                      </select>
                      @error('product_ids')
                      <div class="invalid-feedback">{{ $message }}</div>
                      @enderror
                    </div>

                    {{-- BRAND / SUPPLIER --}}
                    <div class="form-group apply-input apply-brand" style="display: none;">
                      <label class="form-label">Chọn thương hiệu / nhà cung cấp</label>
                      <select name="supplier_ids[]" class="form-control select2" multiple>
                        
                        @foreach($suppliers as $item)
                        <option value="{{ $item->id }}"
                          {{ in_array($item->id, old('supplier_ids', $dataSuppliers->pluck('supplier_id')->toArray() ?? [])) ? 'selected' : '' }}>
                          {{ $item->name }}
                        </option>
                        @endforeach
                      </select>
                      @error('supplier_ids')
                      <div class="invalid-feedback">{{ $message }}</div>
                      @enderror
                    </div>
                  </div>

                  <div class="form-section">
                    <div class="section-title">Thời gian hiệu lực</div>

                    <div class="form-group">
                      <label class="form-label">Ngày bắt đầu</label>
                      <input type="datetime-local" class="form-control @error('start_date') is-invalid @enderror"
                        name="start_date" value="{{ old('start_date', $data->start_date ? $data->start_date->format('Y-m-d\TH:i') : '') }}">
                      @error('start_date')
                      <div class="invalid-feedback">{{ $message }}</div>
                      @enderror
                    </div>

                    <div class="form-group">
                      <label class="form-label">Ngày kết thúc</label>
                      <input type="datetime-local" class="form-control @error('end_date') is-invalid @enderror"
                        name="end_date" value="{{ old('end_date', $data->end_date ? $data->end_date->format('Y-m-d\TH:i') : '') }}">
                      @error('end_date')
                      <div class="invalid-feedback">{{ $message }}</div>
                      @enderror
                    </div>
                  </div>

                  <!-- Trạng thái -->
                  <div class="form-section">
                    <div class="form-group">
                      <label class="form-label">Trạng thái</label>
                      <div class="form-radio-group">
                        <div class="form-radio-item">
                          <input type="radio" name="status" id="active" value="1"
                            {{ old('status', $data->status ?? 1) == 1 ? 'checked' : '' }}>
                          <label for="active">Kích hoạt</label>
                        </div>
                        <div class="form-radio-item">
                          <input type="radio" name="status" id="inactive" value="0"
                            {{ old('status', $data->status ?? 1) == 0 ? 'checked' : '' }}>
                          <label for="inactive">Không kích hoạt</label>
                        </div>
                      </div>
                      @error('status')
                      <div class="invalid-feedback">{{ $message }}</div>
                      @enderror
                    </div>

                    <div class="btn-group">
                      <button type="reset" class="btn btn-secondary">Đặt lại</button>
                      <button type="submit" class="btn btn-primary">Cập nhật mã giảm giá</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
@endsection

@section('js')
<script src="{{ asset('lib/select2/js/select2.min.js') }}"></script>
<script>
  $(document).ready(function () {
  // ===== Tabs chuyển nội dung =====
  $('.simple-tab-link').on('click', function (e) {
    e.preventDefault();
    
    // Remove active class from all tabs and contents
    $('.simple-tab-link').removeClass('active');
    $('.simple-tab-content').removeClass('active');
    
    // Add active class to clicked tab
    $(this).addClass('active');
    
    // Show corresponding content
    const tabId = $(this).data('tab');
    $('#' + tabId).addClass('active');
  });

  // ===== Xử lý radio có nội dung mở rộng =====
  function initRadioToggle(groupName) {
    const radios = $('input[name="' + groupName + '"]');

    radios.on('change', function () {
      // Hide all related content first
      $('input[name="' + groupName + '"]').each(function () {
        $(this).closest('.form-radio-item').next('.radio-option-content').removeClass('show');
      });
      
      // Show content for selected radio
      $(this).closest('.form-radio-item').next('.radio-option-content').addClass('show');
    });

    // Trigger change for initially checked radio
    const checkedRadio = radios.filter(':checked');
    if (checkedRadio.length > 0) {
      checkedRadio.trigger('change');
    }
  }

  // Initialize radio toggles
  initRadioToggle('type_discount');
  initRadioToggle('condition');
  initRadioToggle('type_use');

  // ===== Hiển thị khối apply theo loại đối tượng =====
  function toggleApplyTarget() {
    const selectedValue = $('input[name="type"]:checked').val();
    
    // Hide all apply inputs first
    $('.apply-input').hide();
    
    // Show corresponding input based on selected value
    switch(selectedValue) {
      case '0':
        $('.apply-user').show();
        break;
      case '1':
        $('.apply-rank').show();
        break;
      case '2':
        $('.apply-category').show();
        break;
      case '3':
        $('.apply-product').show();
        break;
      case '4':
        $('.apply-brand').show();
        break;
    }
  }

  // Bind change event for type radio buttons
  $('input[name="type"]').on('change', function() {
    toggleApplyTarget();
  });
  
  // Initialize on page load
  toggleApplyTarget();

  // ===== Khởi tạo Select2 =====
  function initSelect2() {
    // Destroy existing Select2 instances first
    $('.select2').each(function() {
      if ($(this).hasClass('select2-hidden-accessible')) {
        $(this).select2('destroy');
      }
    });
    
    // Initialize Select2
    $('.select2').select2({
      placeholder: 'Chọn mục',
      allowClear: true,
      width: '100%',
      language: {
        noResults: function() {
          return "Không tìm thấy kết quả";
        },
        searching: function() {
          return "Đang tìm kiếm...";
        }
      }
    });
  }

  // Initialize Select2 after DOM is ready
  setTimeout(initSelect2, 100);

  // ===== Nút chọn tất cả user =====
  $('#select-all-users-edit').on('click', function (e) {
    e.preventDefault();
    const $select = $('#user-select-edit');
    
    if ($select.length > 0) {
      // Select all options
      $select.find('option').prop('selected', true);
      // Trigger change event to update Select2
      $select.trigger('change');
    }
  });

  // ===== Validation and form improvements =====
  
  // Prevent form submission if required fields are empty
  $('form').on('submit', function(e) {
    let hasError = false;
    
    // Check discount type
    const typeDiscount = $('input[name="type_discount"]:checked').val();
    if (typeDiscount === '0') {
      const priceReduced = $('input[name="price_is_reduced"]').val();
      if (!priceReduced || priceReduced <= 0 || priceReduced > 100) {
        hasError = true;
        $('input[name="price_is_reduced"]').addClass('is-invalid');
      }
    } else if (typeDiscount === '1') {
      const discountValue = $('input[name="discount_value"]').val();
      if (!discountValue || discountValue <= 0) {
        hasError = true;
        $('input[name="discount_value"]').addClass('is-invalid');
      }
    }
    
    // Check apply target
    const applyType = $('input[name="type"]:checked').val();
    if (applyType === '0') {
      const selectedUsers = $('#user-select-edit').val();
      if (!selectedUsers || selectedUsers.length === 0) {
        hasError = true;
        $('#user-select-edit').next('.select2-container').addClass('is-invalid');
      }
    }
    
    if (hasError) {
      e.preventDefault();
      alert('Vui lòng kiểm tra lại các trường bắt buộc!');
    }
  });

  // Remove error styling when user starts typing/selecting
  $('input, select').on('input change', function() {
    $(this).removeClass('is-invalid');
    $(this).next('.select2-container').removeClass('is-invalid');
  });

  // ===== Handle dynamic content loading =====
  
  // Reinitialize Select2 when content changes
  $(document).on('DOMNodeInserted', function(e) {
    if ($(e.target).hasClass('select2') || $(e.target).find('.select2').length > 0) {
      setTimeout(initSelect2, 50);
    }
  });

  // ===== Debounce function for performance =====
  function debounce(func, wait) {
    let timeout;
    return function executedFunction(...args) {
      const later = () => {
        clearTimeout(timeout);
        func(...args);
      };
      clearTimeout(timeout);
      timeout = setTimeout(later, wait);
    };
  }

  // Use debounced version for frequent events
  const debouncedToggleApplyTarget = debounce(toggleApplyTarget, 100);
  $('input[name="type"]').off('change').on('change', debouncedToggleApplyTarget);
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
  const enableUsageLimit = document.getElementById('enable_usage_limit');
  const usageLimitInput = document.getElementById('usage_limit');

  const enableUsageLimitUser = document.getElementById('enable_usage_limit_user');
  const usageLimitUserInput = document.getElementById('usage_limit_user');

  enableUsageLimit.addEventListener('change', function () {
    usageLimitInput.disabled = !this.checked;
  });

  enableUsageLimitUser.addEventListener('change', function () {
    usageLimitUserInput.disabled = !this.checked;
  });
});
</script>
@endsection