@extends('layout.main')
@section('container')



<!-- Page Content-->
<div class="page-content">
    <div class="container-fluid">
        <!-- Page-Title -->
        <div class="col-sm-12">
            <div class="page-title-box">
                <div class="row">
                    <div class="col">
                        <h4 class="page-title">Parts Data</h4>
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="javascript:void(0);">Master</a></li>
                            <li class="breadcrumb-item"><a href="javascript:void(0);">Inventory</a></li>
                            <li class="breadcrumb-item"><a href="/inv/part">parts</a></li>
                            <li class="breadcrumb-item active">Add</li>
                        </ol>
                    </div><!--end col-->
                    <div class="col-auto align-self-center">
                        <a href="#" class="btn btn-sm btn-outline-primary" id="Dash_Date">
                            <span class="day-name" id="Day_Name">Today:</span>&nbsp;
                            <span class="" id="Select_date">Jan 11</span>
                            <i data-feather="calendar" class="align-self-center icon-xs ms-1"></i>
                        </a>
                        <a href="#" class="btn btn-sm btn-outline-primary">
                            <i data-feather="download" class="align-self-center icon-xs"></i>
                        </a>
                    </div><!--end col-->  
                </div><!--end row-->                                                              
            </div><!--end page-title-box-->
        </div><!--end col-->
    </div><!--end row-->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Parts input</h4>

                            </div><!--end card-header-->
                            <div class="card-body">  
                                <form action="/inv/part" method="POST">
                                    @csrf
                                    <div class="row">
                                        <div class="col-lg-5">
                                            <div class="mb-2 row">
                                                <label for="example-password-input" class="col-sm-3 form-label align-self-center mb-lg-0 text-end">Main Group</label>
                                                <div class="col-sm-8">
                                                    <select name="maingroup" class="form-select form-select-sm" id="maingroup" aria-label="Default select example">
                                                       
                                                        <option selected>Select Main Group</option>
                                                        @foreach($hslMG as $mg) 
                                                       
                                                        <option value="{{ $mg->id }}">{{ $mg->id }} - {{ $mg->name }} </option>
                                                        @endforeach 
                                                      </select>
                                                </div>
                                                <!--<button type="button" class="btn btn-secondary btn-icon-square-sm" role="button" data-bs-toggle="modal" data-bs-target="#InputDataMainGroup ><i class="fas fa-plus-circle"></i></button>-->
                                                <a class="btn btn-secondary btn-icon-square-sm"  href="" role="button" data-bs-toggle="modal" data-bs-target="#InputDataMainGroup"><i class="fas fa-plus-circle"></i></a>
                                                <!--<button class="btn btn-sm btn-secondary col-sm-1" type="button" id="button-addon2"><i class="fas fa-plus-circle"></i></button>-->
                                            </div>
    
                                            <div class="mb-2 row">
                                                <label for="example-password-input" class="col-sm-3 form-label align-self-center mb-lg-0 text-end">Group</label>
                                                <div class="col-sm-8">
                                                    <select name="group" class="form-select form-select-sm" aria-label="Default select example">
                                                       
                                                    </select>
                                                </div>
                                                <a class="btn btn-secondary btn-icon-square-sm"  href="" role="button" data-bs-toggle="modal" data-bs-target="#InputDataGroup"><i class="fas fa-plus-circle"></i></a>
                                            </div>
    
                                            <div class="mb-2 row">
                                                <label for="example-password-input" class="col-sm-3 form-label align-self-center mb-lg-0 text-end">Sub Group</label>
                                                <div class="col-sm-8">
                                                    <select name="subgroup" class="form-select form-select-sm" aria-label="Default select example">
                                                        
                                                    </select>
                                                </div>
                                                <a class="btn btn-secondary btn-icon-square-sm"  href="" role="button" data-bs-toggle="modal" data-bs-target="#InputDataSubGroup"><i class="fas fa-plus-circle"></i></a>
                                            </div>
    
                                            <div class="mb-2 row">
                                                <label for="example-password-input" class="col-sm-3 form-label align-self-center mb-lg-0 text-end">Unit</label>
                                                <div class="col-sm-8">
                                                    <select name="unit" class="form-select form-select-sm" aria-label="Default select example">
                                                       
                                                    </select>
                                                </div>
                                                <a class="btn btn-secondary btn-icon-square-sm"  href="" role="button" data-bs-toggle="modal" data-bs-target="#InputDataUnit"><i class="fas fa-plus-circle"></i></a>
                                            </div>
                                            
                                            <div class="mb-2 row">
                                                <label for="example-password-input" class="col-sm-3 form-label align-self-center mb-lg-0 text-end">Component</label>
                                                <div class="col-sm-8">
                                                    <select name="component"  class="form-select form-select-sm"  aria-label="Default select example">
    
                                                    </select>
                                                </div>
                                                <a class="btn btn-secondary btn-icon-square-sm"  href="" role="button" data-bs-toggle="modal" data-bs-target="#InputDataComponent"><i class="fas fa-plus-circle"></i></a>
                                            </div>
    
                                            <div class="mb-2 row">
                                                <label for="example-text-input-sm" class="col-sm-3 form-label align-self-center mb-lg-0 text-end">Code Part</label>
                                                <div class="col-sm-6">
                                                    <input class="form-control form-control-sm" name="id_part" type="text" placeholder="" id="maxpartno">
                                                </div>
                                            </div>   
                                            <div class="mb-2 row">
                                                <label for="example-text-input-sm" class="col-sm-3 form-label align-self-center mb-lg-0 text-end">Name</label>
                                                <div class="col-sm-8">
                                                    <input class="form-control form-control-sm" name="name" type="text" placeholder="" id="maxpartno">
                                                </div>
                                            </div>
                                            <div class="mb-2 row">
                                                <label for="example-text-input-sm" class="col-sm-3 form-label align-self-center mb-lg-0 text-end">Description</label>
                                                <div class="col-sm-8">
                                                    <textarea class="form-control form-control-sm" name="desc" rows="3" type="text" placeholder="" id="example-text-input-sm"></textarea>
                                                </div>
                                            </div>      
                                            <div class="mb-2 row">
                                                <label for="example-text-input-sm" class="col-sm-3 form-label align-self-center mb-lg-0 text-end">Spec.</label>
                                                <div class="col-sm-8">
                                                    <input class="form-control form-control-sm" name="specification" type="text" placeholder="" id="example-text-input-sm">
                                                </div>
                                            </div>      
                                            <div class="mb-2 row">
                                                <label for="example-text-input-sm" class="col-sm-3 form-label align-self-center mb-lg-0 text-end">Maintenance</label>
                                                <div class="col-sm-8">
                                                    <textarea class="form-control form-control-sm" name="maintenance" rows="3" type="text" placeholder="" id="example-text-input-sm"></textarea>
                                                </div>
                                            </div>
                                            <div class="mb-2 row">
                                                <label for="example-url-input" class="col-sm-3 form-label align-self-center mb-lg-0 text-end">List No</label>
                                                <div class="col-sm-8">
                                                    <input class="form-control form-control-sm" name="list_no" type="text"  id="example-url-input">
                                                </div>
                                            </div> 
                                            
                                        </div>
                                        <div class="col-lg-4">                                        
                                            <div class="mb-2 row">
                                                <label for="example-date-input" class="col-sm-3 form-label align-self-center mb-lg-0 text-end">Drawing No.</label>
                                                <div class="col-sm-8">
                                                    <input class="form-control form-control-sm" name="drawing_no" type="text"  id="example-date-input">
                                                </div>
                                            </div>
                                            <div class="mb-2 row">
                                                <label for="example-month-input" class="col-sm-3 form-label align-self-center mb-lg-0 text-end">Maker</label>
                                                <div class="col-sm-8">
                                                    <input class="form-control form-control-sm" name="maker" type="text" id="example-month-input">
                                                </div>
                                            </div>             
                                            <div class="mb-2 row">
                                                <label for="example-month-input" class="col-sm-3 form-label align-self-center mb-lg-0 text-end">Part No.</label>
                                                <div class="col-sm-9">
                                                    <input class="form-control form-control-sm" name="part_no" type="text" id="example-month-input">
                                                </div>
                                            </div>
    
                                            <div class="mb-2 row">
                                                <label for="example-month-input" class="col-sm-3 form-label align-self-center mb-lg-0 text-end">Serial No.</label>
                                                <div class="col-sm-9">
                                                    <input class="form-control form-control-sm" name="serial_no" type="text" id="example-month-input">
                                                </div>
                                            </div>
    
                                            <div class="mb-2 row">
                                                <label for="example-month-input" class="col-sm-3 form-label align-self-center mb-lg-0 text-end">Volume</label>
                                                <div class="col-sm-9">
                                                    <input class="form-control form-control-sm" name="volume" type="text" id="example-month-input">
                                                </div>
                                            </div>
    
                                            <div class="mb-2 row">
                                                <label for="example-month-input" class="col-sm-3 form-label align-self-center mb-lg-0 text-end">Quantity</label>
                                                <div class="col-sm-9">
                                                    <input class="form-control form-control-sm" name="qty" type="text" id="example-month-input">
                                                </div>
                                            </div>
    
                                           
                                                <div class="card">
                                                    <div class="card-header bg-primary">
                                                        <h4 class="card-title text-white">Certificate</h4>
                                                    </div><!--end card-header-->
                                                    <div class="card-body">
                                                        <div class="mb-2 row">
                                                            <label for="example-month-input" class="col-sm-3 form-label align-self-center mb-lg-0 text-end">Issue By</label>
                                                            <div class="col-sm-8">
                                                                <input class="form-control form-control-sm" name="issue_by" type="text" id="example-month-input">
                                                            </div>
                                                        </div>
                                                        <div class="mb-2 row">
                                                            <label for="example-month-input" class="col-sm-3 form-label align-self-center mb-lg-0 text-end">Sertificate No.</label>
                                                            <div class="col-sm-8">
                                                                <input class="form-control form-control-sm" name="cert_no" type="text" id="example-month-input">
                                                            </div>
                                                        </div>
                                                        <div class="mb-2 row">
                                                            <label for="example-month-input" class="col-sm-3 form-label align-self-center mb-lg-0 text-end">Issue Date</label>
                                                            <div class="col-sm-8">
                                                                <input class="form-control form-control-sm" name="issue_date" type="date" id="example-month-input">
                                                            </div>
                                                        </div>
                                                        <div class="mb-2 row">
                                                            <label for="example-month-input" class="col-sm-3 form-label align-self-center mb-lg-0 text-end">Next Inpection</label>
                                                            <div class="col-sm-8">
                                                                <input class="form-control form-control-sm" name="next_inspect" type="date" id="example-month-input">
                                                            </div>
                                                        </div>
                                                        
                                                    </div><!--end card-body-->
                                                    <p class="card-footer bg-light-alt m-0"></p>
                                                </div><!--end card--> 
                                               
                                        </div>
                                        <div class="col-lg-3">
                                            <div class="card">
                                                <div class="card-header">
                                                    <h4 class="card-title">Image</h4>
                                                    <p class="text-muted mb-0">You can add a part image</p>
                                                </div><!--end card-header-->
                                                <div class="card-body">
                                                    <input type="file" id="input-file-now-custom-1" name="image" class="dropify" data-default-file="../plugins/dropify/images/1.jpg" />
                                                </div><!--end card-body-->
                                            </div><!--end card-->
                                            <div class="button-items"> 
                                                <button type="submit" id="save" class="btn btn-primary"><i class="mdi mdi-check-all me-2"></i>Save</button>
                                                <button type="button" class="btn btn-secondary"><i class="mdi mdi-alert-outline me-2"></i>Edit</button>
                                        
                                            </div>
                                        </div>
                                    </div>       
                                </form>                                                               
                            </div><!--end card-body-->
                        </div><!--end card-->
                    </div>
                </div>
            </div> <!-- end col -->
        </div> <!-- end row -->

        <!-- Modal Input Data -->

        <!-- Main Group Modal --> 
        <div class="modal fade" id="InputDataMainGroup" tabindex="-1" aria-labelledby="exampleModalFullscreenLgLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
              <div class="modal-content">
                <div class="modal-header">
                  <h6 class="modal-title" id="exampleModalFullscreenLgLabel">Main Group</h6>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-12">
                            <form method="POST" action="/inv/ship">
                                @csrf
                                <div class="mb-2 row">
                                    <label for="example-text-input-sm" class="col-sm-3 form-label align-self-center mb-lg-0 text-end">ID</label>
                                    <div class="col-sm-3">
                                        <input class="form-control form-control-sm" type="text" name="id" placeholder="" id="example-text-input-sm">
                                    </div>
                                </div>   
                                <div class="mb-2 row">
                                    <label for="example-text-input-sm" class="col-sm-3 form-label align-self-center mb-lg-0 text-end">Name</label>
                                    <div class="col-sm-8">
                                        <input class="form-control form-control-sm" type="text" name="name" placeholder="" id="example-text-input-sm">
                                    </div>
                                </div>       
                                <div class="mb-2 row">
                                    <label for="example-text-input-sm" class="col-sm-3 form-label align-self-center mb-lg-0 text-end">Description</label>
                                    <div class="col-sm-8">
                                        <textarea class="form-control form-control-sm" rows="3" name="description" type="text" placeholder="" id="example-text-input-sm"></textarea>
                                    </div>
                                </div>
                                <div class="mb-2 row">
                                    <div class="button-items"> 
                                        <button type="submit" id="mg_save" class="btn btn-primary"><i class="mdi mdi-check-all me-2"></i>Save</button>
                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"><i class="mdi mdi-alert-outline me-2"></i>Close</button> 
                                    </div>
                                </div>   
                            </form>
                                    
                        </div>
                    </div>   
                </div>
              </div>
            </div>
          </div>

          <!-- Group Modal --> 

        <div class="modal fade" id="InputDataGroup" tabindex="-1" aria-labelledby="exampleModalFullscreenLgLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
              <div class="modal-content">
                <div class="modal-header">
                  <h6 class="modal-title" id="exampleModalFullscreenLgLabel">Group</h6>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-12">
                            <form action="/inv/group" method="post">
                                @csrf
                                <div class="mb-2 row">
                                    <label for="example-password-input" class="col-sm-3 form-label align-self-center mb-lg-0 text-end">Main Group</label>
                                    <div class="col-sm-8">
                                        <select name="id" class="form-select form-select-sm" id="maingroup" aria-label="Default select example">
                                            <option selected>Select Main Group</option>
                                            @foreach($hslMG as $mg) 
                                            <option value="{{ $mg->id }}">{{ $mg->id }} - {{ $mg->name }} </option>
                                            @endforeach 
                                          </select>
                                    </div>
                                </div>
                                <div class="mb-2 row">
                                    <label for="example-text-input-sm" class="col-sm-3 form-label align-self-center mb-lg-0 text-end">ID Group</label>
                                    <div class="col-sm-3">
                                        <input class="form-control form-control-sm" type="text" name="id_group" placeholder="" id="example-text-input-sm">
                                    </div>
                                </div>   
                                <div class="mb-2 row">
                                    <label for="example-text-input-sm" class="col-sm-3 form-label align-self-center mb-lg-0 text-end">Name</label>
                                    <div class="col-sm-8">
                                        <input class="form-control form-control-sm" type="text" name="name" placeholder="" id="example-text-input-sm">
                                    </div>
                                </div>       
                                <div class="mb-2 row">
                                    <label for="example-text-input-sm" class="col-sm-3 form-label align-self-center mb-lg-0 text-end">Description</label>
                                    <div class="col-sm-8">
                                        <textarea class="form-control form-control-sm" rows="3" name="description" type="text" placeholder="" id="example-text-input-sm"></textarea>
                                    </div>
                                </div>
                                <div class="button-items"> 
                                    <button type="submit" class="btn btn-primary"><i class="mdi mdi-check-all me-2"></i>Save</button>
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"><i class="mdi mdi-alert-outline me-2"></i>Close</button> 
                                    
                                </div>   
                            </form>
                                    
                        </div>
                    </div>   
                </div>
              </div>
            </div>
        </div>

          <!-- Main Group Modal --> 

        <div class="modal fade" id="InputDataSubGroup" tabindex="-1" aria-labelledby="exampleModalFullscreenLgLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
              <div class="modal-content">
                <div class="modal-header">
                  <h6 class="modal-title" id="exampleModalFullscreenLgLabel">Sub Group</h6>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-12">
                            <form action="/inv/subgroup" method="post">
                                @csrf
                                <div class="mb-2 row">
                                    <label for="example-password-input" class="col-sm-3 form-label align-self-center mb-lg-0 text-end">Main Group</label>
                                    <div class="col-sm-8">
                                        <select name="id" class="form-select form-select-sm" id="maingroup" aria-label="Default select example">
                                            <option selected>Select Main Group</option>
                                            @foreach($hslMG as $mg) 
                                            <option value="{{ $mg->id }}">{{ $mg->id }} - {{ $mg->name }} </option>
                                            @endforeach 
                                          </select>
                                    </div>
                                </div>
                                <div class="mb-2 row">
                                    <label for="example-password-input" class="col-sm-3 form-label align-self-center mb-lg-0 text-end">Group</label>
                                    <div class="col-sm-8">
                                        <select name="group" class="form-select form-select-sm" id="maingroup" aria-label="Default select example">
                                            <option selected>Select Group</option>
                                           
                                          </select>
                                    </div>
                                </div>
                                <div class="mb-2 row">
                                    <label for="example-text-input-sm" class="col-sm-3 form-label align-self-center mb-lg-0 text-end">ID</label>
                                    <div class="col-sm-3">
                                        <input class="form-control form-control-sm" type="text" name="id_subgroup" placeholder="" id="example-text-input-sm">
                                    </div>
                                </div>   
                                <div class="mb-2 row">
                                    <label for="example-text-input-sm" class="col-sm-3 form-label align-self-center mb-lg-0 text-end">Name</label>
                                    <div class="col-sm-8">
                                        <input class="form-control form-control-sm" type="text" name="name" placeholder="" id="example-text-input-sm">
                                    </div>
                                </div>       
                                <div class="mb-2 row">
                                    <label for="example-text-input-sm" class="col-sm-3 form-label align-self-center mb-lg-0 text-end">Description</label>
                                    <div class="col-sm-8">
                                        <textarea class="form-control form-control-sm" rows="3" name="description" type="text" placeholder="" id="example-text-input-sm"></textarea>
                                    </div>
                                </div>
                                <div class="button-items"> 
                                    <button type="submit" class="btn btn-primary"><i class="mdi mdi-check-all me-2"></i>Save</button>
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"><i class="mdi mdi-alert-outline me-2"></i>Close</button> 
                                    
                                </div>   
                            </form>
                                    
                        </div>
                    </div>   
                </div>
              </div>
            </div>
          </div>

          <!-- Sub Group Modal --> 

        <div class="modal fade" id="InputDataUnit" tabindex="-1" aria-labelledby="exampleModalFullscreenLgLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
              <div class="modal-content">
                <div class="modal-header">
                  <h6 class="modal-title" id="exampleModalFullscreenLgLabel">Unit</h6>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-12">
                            <form action="/inv/unit" method="post">
                                @csrf
                                <div class="mb-2 row">
                                    <label for="example-password-input" class="col-sm-3 form-label align-self-center mb-lg-0 text-end">Main Group</label>
                                    <div class="col-sm-8">
                                        <select name="id" class="form-select form-select-sm" id="maingroup" aria-label="Default select example">
                                            <option selected>Select Main Group</option>
                                            @foreach($hslMG as $mg) 
                                            <option value="{{ $mg->id }}">{{ $mg->id }} - {{ $mg->name }} </option>
                                            @endforeach 
                                          </select>
                                    </div>
                                </div>
                                <div class="mb-2 row">
                                    <label for="example-password-input" class="col-sm-3 form-label align-self-center mb-lg-0 text-end">Group</label>
                                    <div class="col-sm-8">
                                        <select name="group" class="form-select form-select-sm" id="maingroup" aria-label="Default select example">
                                            <option selected>Select Group</option>
                                           
                                          </select>
                                    </div>
                                </div>
                                <div class="mb-2 row">
                                    <label for="example-password-input" class="col-sm-3 form-label align-self-center mb-lg-0 text-end">Sub Group</label>
                                    <div class="col-sm-8">
                                        <select name="subgroup" class="form-select form-select-sm" id="maingroup" aria-label="Default select example">
                                            <option selected>Select Sub Group</option>
                                           
                                          </select>
                                    </div>
                                </div>
                                <div class="mb-2 row">
                                    <label for="example-text-input-sm" class="col-sm-3 form-label align-self-center mb-lg-0 text-end">ID Unit</label>
                                    <div class="col-sm-3">
                                        <input class="form-control form-control-sm" type="text" name="id_unit" placeholder="" id="example-text-input-sm">
                                    </div>
                                </div>   
                                <div class="mb-2 row">
                                    <label for="example-text-input-sm" class="col-sm-3 form-label align-self-center mb-lg-0 text-end">Name</label>
                                    <div class="col-sm-8">
                                        <input class="form-control form-control-sm" type="text" name="name" placeholder="" id="example-text-input-sm">
                                    </div>
                                </div>       
                                <div class="mb-2 row">
                                    <label for="example-text-input-sm" class="col-sm-3 form-label align-self-center mb-lg-0 text-end">Description</label>
                                    <div class="col-sm-8">
                                        <textarea class="form-control form-control-sm" rows="3" name="description" value="0" type="text" placeholder="" id="example-text-input-sm"></textarea>
                                    </div>
                                </div>
                                <div class="mb-2 row">
                                    <label for="example-text-input-sm" class="col-sm-3 form-label align-self-center mb-lg-0 text-end">Interval</label>
                                    <div class="col-sm-8">
                                        <input class="form-control form-control-sm" type="text" name="interval" value="0" placeholder="" id="example-text-input-sm">
                                    </div>
                                </div>
                                <div class="mb-2 row">
                                    <label for="example-text-input-sm" class="col-sm-3 form-label align-self-center mb-lg-0 text-end">In Use</label>
                                    <div class="col-sm-8">
                                        <input class="form-control form-control-sm" type="text" name="in_use" value="0" placeholder="" id="example-text-input-sm">
                                    </div>
                                </div>
                                <div class="button-items"> 
                                    <button type="submit" class="btn btn-primary"><i class="mdi mdi-check-all me-2"></i>Save</button>
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"><i class="mdi mdi-alert-outline me-2"></i>Close</button> 
                                    
                                </div>   
                            </form>
                                    
                        </div>
                    </div>   
                </div>
              </div>
            </div>
          </div>

            <!-- Unit Modal --> 

        <div class="modal fade" id="InputDataComponent" tabindex="-1" aria-labelledby="exampleModalFullscreenLgLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
              <div class="modal-content">
                <div class="modal-header">
                  <h6 class="modal-title" id="exampleModalFullscreenLgLabel">Component</h6>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-12">
                            <form action="/inv/component" method="post">
                                @csrf
                                <div class="mb-2 row">
                                    <label for="example-password-input" class="col-sm-3 form-label align-self-center mb-lg-0 text-end">Main Group</label>
                                    <div class="col-sm-8">
                                        <select name="id" class="form-select form-select-sm" id="maingroup" aria-label="Default select example">
                                            <option selected>Select Main Group</option>
                                            @foreach($hslMG as $mg) 
                                            <option value="{{ $mg->id }}">{{ $mg->id }} - {{ $mg->name }} </option>
                                            @endforeach 
                                          </select>
                                    </div>
                                </div>
                                <div class="mb-2 row">
                                    <label for="example-password-input" class="col-sm-3 form-label align-self-center mb-lg-0 text-end">Group</label>
                                    <div class="col-sm-8">
                                        <select name="group" class="form-select form-select-sm" id="maingroup" aria-label="Default select example">
                                            <option selected>Select Group</option>
                                           
                                          </select>
                                    </div>
                                </div>
                                <div class="mb-2 row">
                                    <label for="example-password-input" class="col-sm-3 form-label align-self-center mb-lg-0 text-end">Sub Group</label>
                                    <div class="col-sm-8">
                                        <select name="subgroup" class="form-select form-select-sm" id="maingroup" aria-label="Default select example">
                                            <option selected>Select Sub Group</option>
                                           
                                          </select>
                                    </div>
                                </div>
                                <div class="mb-2 row">
                                    <label for="example-password-input" class="col-sm-3 form-label align-self-center mb-lg-0 text-end">Unit</label>
                                    <div class="col-sm-8">
                                        <select name="unit" class="form-select form-select-sm" id="maingroup" aria-label="Default select example">
                                            <option selected>Select Unit</option>
                                           
                                          </select>
                                    </div>
                                </div>
                                <div class="mb-2 row">
                                    <label for="example-text-input-sm" class="col-sm-3 form-label align-self-center mb-lg-0 text-end">ID Component</label>
                                    <div class="col-sm-3">
                                        <input class="form-control form-control-sm" type="text" name="id_component" placeholder="" id="example-text-input-sm">
                                    </div>
                                </div>   
                                <div class="mb-2 row">
                                    <label for="example-text-input-sm" class="col-sm-3 form-label align-self-center mb-lg-0 text-end">Name</label>
                                    <div class="col-sm-8">
                                        <input class="form-control form-control-sm" type="text" name="name" placeholder="" id="example-text-input-sm">
                                    </div>
                                </div>       
                                <div class="mb-2 row">
                                    <label for="example-text-input-sm" class="col-sm-3 form-label align-self-center mb-lg-0 text-end">Description</label>
                                    <div class="col-sm-8">
                                        <textarea class="form-control form-control-sm" rows="3" name="description" type="text" placeholder="" id="example-text-input-sm"></textarea>
                                    </div>
                                </div>
                                <div class="mb-2 row">
                                    <label for="example-text-input-sm" class="col-sm-3 form-label align-self-center mb-lg-0 text-end">Interval</label>
                                    <div class="col-sm-8">
                                        <input class="form-control form-control-sm" type="text" name="interval" value="0" placeholder="" id="example-text-input-sm">
                                    </div>
                                </div>
                                <div class="mb-2 row">
                                    <label for="example-text-input-sm" class="col-sm-3 form-label align-self-center mb-lg-0 text-end">In Use</label>
                                    <div class="col-sm-8">
                                        <input class="form-control form-control-sm" type="text" name="in_use" value="0" placeholder="" id="example-text-input-sm">
                                    </div>
                                </div>
                                <div class="button-items"> 
                                    <button type="submit" class="btn btn-primary"><i class="mdi mdi-check-all me-2"></i>Save</button>
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"><i class="mdi mdi-alert-outline me-2"></i>Close</button> 
                                </div>   
                            </form>
                                    
                        </div>
                    </div>   
                </div>
              </div>
            </div>
          </div>

           <!-- Component Modal --> 

        
          
    </div><!-- container -->

    <footer class="footer text-center text-sm-start">
        &copy; <script>
            document.write(new Date().getFullYear())
        </script> Dastone <span class="text-muted d-none d-sm-inline-block float-end">Crafted with <i
                class="mdi mdi-heart text-danger"></i> by Mannatthemes</span>
    </footer><!--end footer-->
</div>
<!-- end page content -->

<script type="text/javascript">

    $(this.document).ready(function() {
    
    //Tampilkan Group
    
    $('select[name="maingroup"]').on('change', function() {
        var mg_id = $(this).val();
        console.log(mg_id);
        if(mg_id) {
            $.ajax({
                url: 'http://127.0.0.1:8000/api/inv/showgroup/'+ mg_id,
                type: "GET",
                dataType: "json",
                headers: { 
                    Authorization: "Bearer 4|1v4uWFN9jaU9z6nAnULCTsu3Ch7ltvh4G2GBfJnF" 
                },
                success:function(data) {
                    //token = data.response.properties.session_token;
                    //dd(data);
                    $('select[name="group"]').empty();
                    $('select[name="group"]').append('<option value="">Select Group</option>');
                    $.each(data, function(key, value) {
                        console.log(data);
                        $('select[name="group"]').append('<option value="'+ value.id_group +'">'+ value.id_group + ' - ' + value.name +'</option>');
                    });
                }
    
            });
    
        }else{
    
            $('select[name="group"]').empty();
    
        }
    
    });
    

    $('select[name="group"]').on('change', function() {
        var g_id = $(this).val();
        console.log(g_id);
        if(g_id) {
            $.ajax({
                url: 'http://127.0.0.1:8000/api/inv/showsubgroup/'+ g_id,
                type: "GET",
                dataType: "json",
                headers: { 
                    Authorization: "Bearer 4|1v4uWFN9jaU9z6nAnULCTsu3Ch7ltvh4G2GBfJnF" 
                },
                success:function(data) {
                    //token = data.response.properties.session_token;
                    //dd(data);
                    $('select[name="subgroup"]').empty();
                    $('select[name="subgroup"]').append('<option value="">Select Sub Group</option>');
                    $.each(data, function(key, value) {
                        console.log(data);
                        $('select[name="subgroup"]').append('<option value="'+ value.id_subgroup +'">'+ value.id_subgroup + ' - ' + value.name +'</option>');
                    });
                }
    
            });
    
        }else{
    
            $('select[name="subgroup"]').empty();
    
        }
    
    });

    $('select[name="subgroup"]').on('change', function() {
        var sg_id = $(this).val();
        console.log(sg_id);
        if(sg_id) {
            $.ajax({
                url: 'http://127.0.0.1:8000/api/inv/showunit/'+ sg_id,
                type: "GET",
                dataType: "json",
                headers: { 
                    Authorization: "Bearer 4|1v4uWFN9jaU9z6nAnULCTsu3Ch7ltvh4G2GBfJnF" 
                },
                success:function(data) {
                    //token = data.response.properties.session_token;
                    //dd(data);
                    $('select[name="unit"]').empty();
                    $('select[name="unit"]').append('<option value="">Select Unit</option>');
                    $.each(data, function(key, value) {
                        console.log(data);
                        $('select[name="unit"]').append('<option value="'+ value.id_unit +'">'+ value.id_unit + ' - ' + value.name +'</option>');
                    });
                }
    
            });
    
        }else{
    
            $('select[name="unit"]').empty();
    
        }
    
    });

    $('select[name="unit"]').on('change', function() {
        var u_id = $(this).val();
        console.log(u_id);
        if(u_id) {
            $.ajax({
                url: 'http://127.0.0.1:8000/api/inv/showcomponent/'+ u_id,
                type: "GET",
                dataType: "json",
                headers: { 
                    Authorization: "Bearer 4|1v4uWFN9jaU9z6nAnULCTsu3Ch7ltvh4G2GBfJnF" 
                },
                success:function(data) {
                    //token = data.response.properties.session_token;
                    console.log(data);
                    $('select[name="component"]').empty();
                    $('select[name="component"]').append('<option value="">Select Component</option>');
                    $.each(data, function(key, value) {
                        console.log(data);
                        $('select[name="component"]').append('<option value="'+ value.id_component +'">'+ value.id_component + ' - ' + value.name +'</option>');
                    });
                }
    
            });
    
        }else{
    
            $('select[name="component"]').empty();
    
        }
    
    });

   
    });
    
    </script>

<script>
    //Custom Position
    $('#save').click(function () {
        const Toast = Swal.mixin({
        toast: true,
        position: 'top-end',
        showConfirmButton: false,
        timer: 3000
        });

        Toast.fire({
        type: 'success',
        title: 'Data is saved!'
        })
        });
</script>
@endsection