@extends('admin.layouts.masterlayout')
@section('styles')

<link href="{{asset('new_theme/assets/plugins/datatable/css/dataTables.bootstrap5.min.css')}}" rel="stylesheet" />
@endsection
@section('content')
<div class="main-content">
<div class="main-content">
<div class="main-content">
    <div class="row page-titles mx-0" data-aos="fade-up">
        <div class="col-sm-6 p-md-0">
            <div class="welcome-text">
                <h4>All Module List</h4>
            </div>
        </div>
        <div class="col-sm-6 p-md-0 justify-content-sm-end mt-2 mt-sm-0 d-flex">
            <ol class="breadcrumb">
                <li class="breadcrumb-item active">
                  <a href="javascript:void(0)">Module</a></li>
            </ol>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <div class="card" data-aos="fade-up">
                <div class="card-header">
                  <a onclick="addModel()" class="btn btn-primary btn-sm"> Add New {{$modelName}}</a>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="dataList" class="table table-striped table-bordered"  style="width:100%">
                            <thead>
                                <tr>
                                <th>S No.</th>
                                <th>Name</th>
                                <th>Sub Menu</th>
                            </tr>
                            </thead>

                           
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Edit Model Modal -->
<div class="modal fade" id="editModelModal" tabindex="-1" aria-labelledby="editModelLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <form id="editModelForm" action="{{ route('Model.edit') }}" method="POST">
            @csrf
            <input type="hidden" name="type" value="1">
            <div class="modal-header">
              <h5 class="modal-title" id="editModelLabel">Edit Model</h5>
              <button type="button" class="btn btn-danger" aria-label="Close" onclick="closeEditModelModal()">
                <i class="fas fa-times"></i>
              </button>
            </div>

            <div class="modal-body">
              <input type="hidden" name="model_id" id="edit_model_id">
              <div class="mb-3">
                <label for="edit_model_name" class="form-label">Model Name</label>
                <input type="text" class="form-control" id="edit_model_name" name="model_name" required>
              </div>
            </div>

            <div class="modal-footer">
              <button type="submit" class="btn btn-primary">Save Changes</button>
              <button type="button" class="btn btn-secondary" onclick="closeEditModelModal()">Cancel</button>
            </div>
          </form>

      </div>
    </div>
</div>
<div class="modal fade" id="editModelSub" tabindex="-1" aria-labelledby="editModelLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <form id="editModelForm" action="{{ route('Model.edit') }}" method="POST">
          @csrf
          <input type="hidden" name="type" value="2">
          <input type="hidden" name="sub_model_id" id="edit_sub_model_id">

          <div class="modal-header">
            <h5 class="modal-title" id="editModelLabel">Edit Sub Model</h5>
            <button type="button" class="btn btn-danger" onclick="closeEditModelModal()">
              <i class="fas fa-times"></i>
            </button>
          </div>

          <div class="modal-body">
            <div class="mb-3">
              <label for="edit_model_ids" class="form-label">Select Model</label>
              <select class="form-control" name="model_id" id="edit_model_ids" required>
                <option value="">Select Model</option>
                @foreach ($data as $value)
                  <option value="{{ $value->id }}">{{ $value->model_name }}</option>
                @endforeach
              </select>
            </div>

            <div class="mb-3">
              <label for="edit_sub_model_name" class="form-label">Sub Model Name</label>
              <input type="text" class="form-control" id="edit_sub_model_name" name="sub_model_name" required>
            </div>
          </div>

          <div class="modal-footer">
            <button type="submit" class="btn btn-primary">Save Changes</button>
            <button type="button" class="btn btn-secondary" onclick="closeEditModelModal()">Cancel</button>
          </div>
        </form>
      </div>
    </div>
  </div>
  <!-- Add Sub Model Modal -->
    <div class="modal fade" id="addSubModelModal" tabindex="-1" aria-labelledby="addSubModelLabel" aria-hidden="true">
        <div class="modal-dialog">
        <div class="modal-content">
            <form id="addSubModelForm" action="{{ route('Model.add') }}" method="POST">
            @csrf
            <div class="modal-header">
                <h5 class="modal-title" id="addSubModelLabel">Add Sub Model</h5>
                <button type="button" class="btn btn-danger" onclick="closeEditModelModal()">
                    <i class="fas fa-times"></i>
                  </button>
            </div>
            <input type="hidden" name="type" value="2">
            <div class="modal-body">
                <div class="mb-3">
                <label for="model_id" class="form-label">Model Name</label>
                <select class="form-control" id="add_model_ids" name="model_id" required>
                    <option value="">Select Model</option>
                    @foreach ($data as $model)
                    <option value="{{ $model->id }}">{{ $model->model_name }}</option>
                    @endforeach
                </select>
                </div>

                <div class="mb-3">
                <label for="sub_model_name" class="form-label">Sub Model Name</label>
                <input type="text" class="form-control" id="sub_model_name" name="sub_model_name" placeholder="Enter Sub Model / Action Name" required>
                </div>
            </div>

            <div class="modal-footer">
                <button type="submit" class="btn btn-primary">Add Sub Model</button>
                <button type="button" class="btn btn-secondary"  onclick="closeEditModelModal()">Cancel</button>
            </div>
            </form>
        </div>
        </div>
  </div>
  <div class="modal fade" id="addModel" tabindex="-1" aria-labelledby="addModelLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <form id="addModelForm" action="{{ route('Model.add') }}" method="POST">
          @csrf
          <div class="modal-header">
            <h5 class="modal-title" id="addModelLabel">Add Model</h5>
            <button type="button" class="btn btn-danger" onclick="closeEditModelModal()">
                <i class="fas fa-times"></i>
              </button>
          </div>

          <input type="hidden" name="type" value="1"> {{-- 1 = Add Model --}}

          <div class="modal-body">
            <div class="mb-3">
              <label for="model_name" class="form-label">Model Name</label>
              <input type="text" class="form-control" id="model_name" name="model_name" placeholder="Enter Model Name" required>
            </div>
          </div>

          <div class="modal-footer">
            <button type="submit" class="btn btn-primary">Add Model</button>
            <button type="button" class="btn btn-secondary"  onclick="closeEditModelModal()">Cancel</button>
          </div>
        </form>
      </div>
    </div>
  </div>

@endsection
@section('scripts')
<script src="{{asset('new_theme/assets/plugins/datatable/js/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('new_theme/assets/plugins/datatable/js/dataTables.bootstrap5.min.js')}}"></script>


<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="{{asset('new_theme/assets/plugins/select2/js/select2-custom.js')}}"></script>
<script>
    $(document).ready(function(){
      $('[data-toggle="tooltip"]').tooltip();
    });
  </script>

<!---Show Ajax---------->
<script type="text/javascript">
function addModel(model_id) {
    // alert('working');

    $('#addModel').modal('show');
}
function addSubModel(model_id) {
    // alert('working');
    $('#add_model_ids').val(model_id);
    $('#addSubModelModal').modal('show');
}

function editSubMenu(id,model_id, name) {
    // alert('working');
    $('#edit_sub_model_id').val(id);
    $('#edit_model_ids').val(model_id);
    $('#edit_sub_model_name').val(name);
    $('#editModelSub').modal('show');
}
function openEditModelModal(id, name) {
    $('#edit_model_id').val(id);
    $('#edit_model_name').val(name);
    $('#editModelModal').modal('show');
}
function closeEditModelModal() {

    $('#addSubModelModal').modal('hide');
    $('#addModel').modal('hide');
    $('#editModelModal').modal('hide');
    $('#editModelSub').modal('hide');
}
$(document).ready(function() {
    $('#dataList').DataTable({
        "processing": true,
        "serverSide": true,
        "ajax":{
          url:"{{route('Model.view')}}",
          type: "POST",
          data : {"_token": "{{ csrf_token() }}"}
        },
        "columns": [
            {data: 'DT_RowIndex', name: 'DT_RowIndex'},
            {data: 'model_name_with_action', name: 'model_name_with_action'},
            {data: 'subMenu', name: 'subMenu'},
        ]
    });
});

</script>

@endsection