@extends('super-admin.layouts.main')
@section('content')
<main>
   <!-- Content Wrapper. Contains page content -->
   <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0">Add Industry Data</h1>
          </div><!-- /.col -->

        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
   <!-- Main content -->
   <div class="content">
      <div class="container-fluid">
        <div class="card">
          <div class="row">
            <div class="col-lg-12">
              <div class="card-body">
            <form action="{{ route('store.industry') }}"  method="POST" enctype="multipart/form-data" id="addIndustry">
             @if(Session::has('success'))
             <div class="alert alert-success">{{ Session::get('success') }}</div>
             @endif
             @csrf

        <div class="form-group">
               <label>Industry Name </label><span class="text-danger">*</span>
              <input type="text" name="industry_name" id="industry_name" class="form-control" value="{{old('industry_name')}}"/>
              <span class='text-danger' id="descriptionError"></span>
        </div>
        <label>Select Department</label><span class="text-danger">*</span>
                    <select name="select[]" id="select" multiple multiselect-search="true" >

                        @foreach($departments as $department)
                        <option value="{{ $department->id }}" {{in_array($department->id, old("select") ?: []) ? "selected": ""}}>{{$department->department_name}}</option>
                        @endforeach
                       </select><br>
                       <span id="selectError" class="text-danger">@error('select') {{ 'The Select Category field is required.' }}  @enderror</span><br>

               <button class="btn btn-info mt-4" type="submit">Submit</button>
            </form>


              </div>
            </div>
          </div>
        </div>
        <!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
    <!-- /.content -->
  </div>
</main>
@endsection

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Validate form on submit
        document.getElementById('addIndustry').addEventListener('submit', function(event) {
            // Check if at least one option is selected
            var selectedOptions = document.getElementById('select').selectedOptions;
            if (selectedOptions.length < 1) {
                // Prevent form submission
                event.preventDefault();
                // Show error message
                document.getElementById('selectError').innerText = 'Please select at least one department.';
            } else {
                // Clear any previous error messages
                document.getElementById('selectError').innerText = '';
            }
        });
    });
</script>