@extends('layout.admin.master')

@section('meta-title', 'LEREVE - Create Popup')
@section('body-class', 'menu-position-side menu-side-left full-screen with-content-panel')

@section('breadcrumbs')
  <li class="breadcrumb-item">
    <a href="{{route(session('role').'.weight.list')}}">Weight</a>
  </li>
  <li class="breadcrumb-item">
    <span>Create</span>
  </li>
@endsection

@push('asset-top')
    
@endpush

@section('content')
  <div class="element-wrapper">
    @if (session('success'))
    <div class="alert alert-success">{{ session('success') }}</div>
    @endif
    <h6 class="element-header">
      Weight 
    </h6>
    <div class="element-box">
      <form method="post" enctype="multipart/form-data" action="{{route(session('role').'.weight.store')}}">
        @csrf
        <h5 class="form-header">
          Create
        </h5>
        <div class="form-desc">
          <!-- Discharge best employed your phase each the of shine. Be met even reason consider logbook redesigns. Never a turned interfaces among asking -->
        </div>
        <div class="form-group">
          <label>Type</label>
          <select class="form-control" id="type">
            <option value="weight">Weight</option>
            <option value="size">Size</option>
          </select>
        </div>
        <div class="form-group">
          <label for="">Enter Weight <small>Without Space exp: 250gm </small></label>
          <input class="form-control" name="Weight" placeholder="Enter Weight, Without Space exp: 250gm" required="required" type="text">
          @error('Weight')
              <div class="help-block form-text with-errors form-control-feedback">{{ $message }}</div>
          @enderror
        </div>
        <div class="form-group" style="display: none;">
          <label for="">Enter Size</label>
          <input class="form-control" name="size" placeholder="Enter size" required="required" type="text">
          @error('size')
              <div class="help-block form-text with-errors form-control-feedback">{{ $message }}</div>
          @enderror
        </div>
       

        <!-- Media -->
        <button class="btn btn-primary" type="submit"> Submit</button>
        
      </form>
    </div>
  </div>
@endsection
@push('asset-bottom')
  <script>
    jQuery('body').on('change', '#type', function(){
      type = jQuery(this).val();
      if(type == 'size'){
        jQuery('input[name="size"]').closest('.form-group').show(500);
        jQuery('input[name="Weight"]').closest('.form-group').hide(500);
      } else {
        jQuery('input[name="size"]').closest('.form-group').hide(500);
        jQuery('input[name="Weight"]').closest('.form-group').show(500);
      }
    });
  </script>
@endpush