@extends('super-admin.layouts.main')
@section('content')
<main>



<script src="https://code.jquery.com/jquery-3.6.0.min.js"
    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    {{-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"> --}}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
   <!-- 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>

          <div id="optionsDiv">
              <div id="dynamicOptions">
                    <div class="row main">
                        <div class="col-12">
                              <label for="">Department Name</label>
                              <input type="text" class="form-control" name="department_name[]">
                        </div>
                    </div>
                 </div>

                <div class="col-6 mt-1">                
                  <button style="margin-left: -7px;" type="button" name="add" id="addCompanyName" class="btn btn-success">Add More</button>
                </div>
        </div>
          
               <button class="btn btn-info mt-4" type="submit">Submit</button>
            </form>
  

              </div>
            </div>
          </div>
        </div>
        <!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
    <!-- /.content -->
  </div>

  <script>

     

        $(document).ready(function () {

        
      var i = 0;
      $("#addCompanyName").click(function () {
          ++i;
          var newRowHtml = '<div class="row main"><div class="col-12">' +
              '<label for="">Department Name</label>' +
              '<input type="text" class="form-control" name="department_name[]">' +
              '<div class="col-1">' +
                '<button type="button" class="btn btn-danger removeMasterclassTopic tr-' + i + ' mt-2">Remove</button>' +
              '</div></div>';
             $("#dynamicOptions").append(newRowHtml);
              });
             });
             $(document).on('click', '.removeMasterclassTopic', function(){
                 $(this).parents('div.row.main').remove();
            });
    </script>
  <!-- /.content-wrapper -->
</main>
@endsection