@extends('admin.layouts.layout')

@section('content')
  <!-- Page Header -->
  <div class="page-header">
    <div class="row">
      <div class="col-sm-12">
        <h3 class="page-title">Modules</h3>
        <ul class="breadcrumb">
          <li class="breadcrumb-item"><a href="{{route('dashboard')}}">Dashboard</a></li>
          <li class="breadcrumb-item"><a href="{{route('modules-list')}}">Modules</a></li>
          <li class="breadcrumb-item active">Add Module</li>
        </ul>
      </div>
    </div>
  </div>
  <!-- /Page Header -->

  <div class="row">
    <div class="col-md-12">
      <div class="card">
        <div class="card-body">

          @if (count($errors) > 0)
            <div class="alert alert-danger">
              @foreach ($errors->all() as $e)
                <p>{{ $e }}</p>
              @endforeach
            </div>
          @endif

          <h4 class="card-title">Module Information</h4> <hr>
          <form  action="{{route('add-module-process')}}" method="post" enctype="multipart/form-data">
            @csrf
            <div class="row">
            <div class="col-md-3">
                <div class="form-group">
                  <label>Module Name</label>
                  <input name="module_name" id="module_name" type="text" class="form-control">
                </div>
              </div>

              <div class="col-md-3">
                <div class="form-group">
                  <label>Module Parent</label>
                  <select name="module_parent" id="module_parent" class="form-control">
                    <option value="">Please Select</option>
                    @foreach($modules as $module_row)
                      <option value="{{$module_row->id}}">{{$module_row->label}}</option>
                    @endforeach
                  </select>
                </div>
              </div>              
            </div>

            <div class="row">
              <div class="col-md-6 col-xs-12">
                  <ul class="nav nav-tabs" id="myTab" role="tablist">
                    <li class="nav-item" role="presentation">
                      <button class="nav-link active" id="fields-tab" data-bs-toggle="tab" data-bs-target="#fields" type="button" role="tab" aria-controls="journals" aria-selected="true">Add Fields</button>
                    </li>
                  </ul>
                  <div class="tab-content" id="myTabContent">
                    <div class="tab-pane fade show active" id="fields" role="tabpanel" aria-labelledby="fields-tab">
                      <div class="">
                        <table class="table table-bordered" id="fields_table_inline">
                          <thead>
                            <tr>
                              <th>Label</th>
                              <th>Field Type</th>
                              <!-- <th style="width:180px;">Default</th> -->
                              <th style="width:80px;">Priority</th>
                              <th style="width:50px;"></th>
                            </tr>
                          </thead>
                          <tbody>
                          </tbody>
                        </table>
                        <br> <a href="#" id="add_column_item_line" class="btn btn-primary btn-sm">Add Field</a>
                      </div>
                    </div>
                  </div> 
              </div>
            </div>

            <div class="mt-4">
              <button type="submit" class="btn btn-primary">Add Module </button>
            </div>
          </form>

          <table style="display:none">
            <tr class="clone_row_provider">
              <td><input type="text" name="field_label[]" class="form-control" /></td>
              <td>
                <select name="field_type[]" class="form-control">
                  <option value="text">Text</option>
                  <option value="textarea">Textarea</option>
                  <option value="html">HTML</option>
                  <option value="date">Date</option>
                  <option value="image">Image</option>
                </select>
              </td>
              <!-- <td><input type="text" name="field_default[]" class="form-control" /></td> -->
              <td>
                <input type="text" name="field_priority[]" class="form-control" />
                <input type="hidden" name="mfid[]" value="0" />
              </td>
              <td><a href="#" class="btn btn-xs btn-danger delete_column_line"><i class="far fa-trash-alt mr-1"></i></a></td>
            </tr>            
          </table> 

        </div>
      </div>
    </div>
  </div>
@endsection