@extends('admin.layouts.main')
@section('title',"thêm 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"=>"Thêm mã giảm giá"])
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        @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.store') }}" 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') }}" 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" checked>
                          <label for="percent_discount">Giảm theo phần trăm (%)</label>
                        </div>
                        <div class="radio-option-content 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') }}" placeholder="Nhập % giảm giá (1-100)">
                          <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') }}" placeholder="Giá tiền max">
                          @error('price_is_reduced')
                          <div class="invalid-feedback">{{ $message }}</div>
                          @enderror
                        </div>

                        <div class="form-radio-item">
                          <input type="radio" name="type_discount" id="fixed_discount" value="1">
                          <label for="fixed_discount">Giảm số tiền cố định</label>
                        </div>
                        <div class="radio-option-content">
                          <input type="number" min="0" class="form-control @error('discount_value') is-invalid @enderror"
                            name="discount_value" value="{{ old('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>

  {{-- Tổng số lượt sử dụng --}}
  <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') ? 'checked' : '' }} >
      <label class="form-check-label" for="enable_usage_limit">Giới hạn tổng số lượt 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') }}"
      placeholder="Nhập số lượng mã phát hành"
      {{ old('enable_usage_limit') ? '' : 'disabled' }}>
    @error('usage_limit')
    <div class="invalid-feedback">{{ $message }}</div>
    @enderror
  </div>

  {{-- Giới hạn mỗi khách hàng --}}
  <div class="form-group">
    <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') ? 'checked' : '' }}>
      <label class="form-check-label" for="enable_usage_limit_user">Giới hạn số lượt / 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') }}"
      placeholder="Nhập số lượt dùng tối đa / khách hàng"
      {{ old('enable_usage_limit_user') ? '' : 'disabled' }}>
    @error('usage_limit_user')
    <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" checked>
                          <label for="no_condition">Không yêu cầu điều kiện</label>
                        </div>
                        <div class="radio-option-content 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">
                          <label for="min_price_condition">Giá trị mua tối thiểu</label>
                        </div>
                        <div class="radio-option-content">
                          <input type="number" min="0" class="form-control @error('min_price') is-invalid @enderror"
                            name="min_price" value="{{ old('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">
                          <label for="min_quantity_condition">Số lượng mua tối thiểu</label>
                        </div>
                        <div class="radio-option-content">
                          <input type="number" min="0" class="form-control @error('min_number') is-invalid @enderror"
                            name="min_number" value="{{ old('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>

                  <div class="simple-tab-content active" id="target">
                    {{-- Chọn loại áp dụng --}}
                    <div class="form-group">
                      <label class="form-label">Áp dụng cho đối tượng:</label>
                      <div class="form-radio-group">
                        <div class="form-radio-item">
                          <input type="radio" name="type" id="apply_user" value="0" checked>
                          <label for="apply_user">User cụ thể</label>
                        </div>
                        <div class="form-radio-item">
                          <input type="radio" name="type" id="apply_rank" value="1">
                          <label for="apply_rank">Hạng thành viên</label>
                        </div>
                        <div class="form-radio-item">
                          <input type="radio" name="type" id="apply_category" value="2">
                          <label for="apply_category">Danh mục sản phẩm</label>
                        </div>
                        <div class="form-radio-item">
                          <input type="radio" name="type" id="apply_product" value="3">
                          <label for="apply_product">Sản phẩm cụ thể</label>
                        </div>
                        <div class="form-radio-item">
                          <input type="radio" name="type" id="apply_brand" value="4">
                          <label for="apply_brand">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">
                      <label class="form-label">Chọn User</label>
                      <button type="button" class="btn btn-secondary btn-sm" id="select-all-users-add">Chọn tất cả</button>
                      <select id="user-select-add" class="form-control select2" multiple name="user_id[]">
                        @foreach($users as $item)
                        <option value="{{ $item->id }}">{{ $item->name }} ({{ $item->phone }})</option>
                        @endforeach
                      </select>
                      @error('user_id')
                      <div class="invalid-feedback">{{ $message }}</div>
                      @enderror
                    </div>

                    <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 }}">{{ $item->name }}</option>
                        @endforeach
                      </select>
                      @error('rank_id')
                      <div class="invalid-feedback">{{ $message }}</div>
                      @enderror
                    </div>

                    <div class="form-group apply-input apply-category" style="display: none;">
                      <label class="form-label">Chọn danh mục sản phẩm</label>
                      <select name="category_ids[]" class="form-control select2" multiple>
                        @foreach($categories as $category)
                        <option value="{{ $category->id }}">{{ $category->name }}</option>
                        @endforeach
                      </select>

                      @error('category_ids')
                      <div class="invalid-feedback">{{ $message }}</div>
                      @enderror
                    </div>

                    <div class="form-group apply-input apply-product" style="display: none;">
                      <label class="form-label">Chọn sản phẩm cụ thể</label>
                      <select name="product_ids[]" class="form-control select2" multiple>
                        @foreach($products as $product)
                        <option value="{{ $product->id }}">{{ $product->name }}</option>
                        @endforeach
                      </select>
                      @error('product_ids')
                      <div class="invalid-feedback">{{ $message }}</div>
                      @enderror
                    </div>

                    {{-- Thương hiệu --}}
                    <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 $supplier)
                        <option value="{{ $supplier->id }}">{{ $supplier->name }}</option>
                        @endforeach
                      </select>
                      @error('supplier_ids[]')
                      <div class="invalid-feedback">{{ $message }}</div>
                      @enderror
                    </div>
                  </div>

                </div>

                <div class="form-card-body">
                  <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') }}">
                    @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') }}">
                    @error('end_date')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                  </div>
                </div>

                <!-- Trạng thái -->
                <div class="form-card-body">
                  <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', '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') == '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="submit" class="btn btn-primary">Lưu 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');
  });
    // Tab functionality
    $(document).ready(function() {
      $('input[name="type"]').on('change', function() {
        let type = $(this).val();

        $('.apply-input').hide(); // Ẩn tất cả

        switch (type) {
          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;
        }
      });

      // Gọi lại khi load để set mặc định
      $('input[name="type"]:checked').trigger('change');
    });


    // Handle discount type radio buttons
    $('input[name="type_discount"]').on('change', function() {
      $('input[name="type_discount"]').each(function() {
        $(this).closest('.form-radio-item').next('.radio-option-content').removeClass('show');
      });
      $(this).closest('.form-radio-item').next('.radio-option-content').addClass('show');
    });

    // Handle condition radio buttons
    $('input[name="condition"]').on('change', function() {
      $('input[name="condition"]').each(function() {
        $(this).closest('.form-radio-item').next('.radio-option-content').removeClass('show');
      });
      $(this).closest('.form-radio-item').next('.radio-option-content').addClass('show');
    });

    // Handle usage type radio buttons
    $('input[name="type_use"]').on('change', function() {
      $('input[name="type_use"]').each(function() {
        $(this).closest('.form-radio-item').next('.radio-option-content').removeClass('show');
      });
      $(this).closest('.form-radio-item').next('.radio-option-content').addClass('show');
    });

    // Handle target type (user/rank) radio buttons
    function toggleApplyInput() {
      let selected = $('input[name="type"]:checked').val();
      $('.apply-input').hide();
      if (selected === '0') {
        $('.apply-user').show();
      } else if (selected === '1') {
        $('.apply-rank').show();
      }
    }

    $('input[name="type"]').on('change', toggleApplyInput);
    toggleApplyInput();

    // Select all users functionality
    $('#select-all-users-add').on('click', function() {
      const userSelect = $('#user-select-add');
      userSelect.find('option').prop('selected', true);

      if (userSelect.hasClass('select2-hidden-accessible')) {
        userSelect.trigger('change');
      }
    });

    // Initialize Select2
    $('#user-select-add').select2({
      placeholder: "Chọn user",
      allowClear: true
    });
  });
  $(document).ready(function() {
    $('.select2').select2({
      placeholder: "Chọn mục",
      allowClear: true,
      width: '100%'
    });

    // Ẩn/hiện phần tử theo radio "type"
    $('input[name="type"]').on('change', function() {
      let type = $(this).val();
      $('.apply-input').hide();
      switch (type) {
        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;
      }
    });

    $('input[name="type"]:checked').trigger('change');
  });
</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