djid_siput/resources/views/pembuatan-program/add.blade.php

<?php $getStatus = \App\Model\Privillage\Role::where('id',Auth::user()->role_id)->value('akses'); ?>
@extends('dev.core.using')
@section('content')
<style>
  .prev-holder, .className-wrap, .description-wrap, .tooltip-element, .copy-button {
   display:none !important;
 }
 .form-field{
    flex:0 0 50%;
    position:relative;
    width:50%;
    outline: 1px solid #a9a9a9;
 }

 .frmb {
    display:flex !important;
    flex-wrap:wrap !important;
    min-height:40px !important;
 }

 input, select {
     border: 0 !important;
     background: transparent !important;
     border-bottom: 1px solid #cdcdcd !important;
 }
 .tb-container{
   background: #fff;
   margin-top: 1em;
 }
 tbody > tr {
    line-height: 45px !important;
    min-height: 45px !important;
    height: 45px !important;
 }
</style>
<br/>
<br/>
<form action="{{route('pembuatan-program.create')}}" method="POST" enctype="multipart/form-data" id="form-create">
@csrf
<input type="hidden" name="total_label" id="total_label">
<input type="hidden" name="total_tipe_kolom" id="total_tipe_kolom">
<input type="hidden" name="total_master_option" id="total_master_option">
<input type="hidden" name="total_required" id="total_required">
<input type="hidden" name="total_description" id="total_description">

  <div class="col">
      <div class="form-group">
          <label for="">Nama Program *</label>
          <input type="text" class="form-control" id="namaProgram" name="nama" placeholder="No Data Available" required style="text-transform:uppercase" >
          <!-- <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> -->
      </div>
      <div class="form-group">
          <label for="">Kategori *</label>
          <select class="form-control" id="tipe" name="tipe" required>
              <option value="0">Program Perjanjian Kinerja</option>
              <option value="1">Program Perjanjian Non Kinerja</option>
          </select>
          <!-- <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> -->
      </div>
      <div class="form-group">
          <label for="">Icon Program</label>
          <input name="logo" class="form-control" type="file" id="file_input" multiple />
          <!-- <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> -->
      </div>
      <div class="col-md-4" style="display:none" id="card_file_preview">
          <div class="card">
            
              <div class="card-body pt-2" style="max-height:185px">
              Preview:<br>
                  <center>
                      <img src="" id="file_preview" style="width:130px">
                  </center>
              </div>
          </div>
      </div><br>
      <div class="form-group">
          <div class="custom-control custom-checkbox mb-3">
              <input class="custom-control-input" id="customCheck1" type="checkbox" name="is_required" value="1">
              <label class="custom-control-label" for="customCheck1">Pilih jika sub program wajib diisi</label>
          </div>
      </div>
</form>

<div class="tb-container">
  <div class="row" style="padding:20px">
    <div class="col-md-8"></div>
    <div class="col-md-4">
      <button type="button" class="btn btn-primary confirmation" id="btn-submit" data-target="form-create" style="background: #193865"><i class="fa fa-save"></i> Simpan Perubahan</button>
      <a href="{{route('pembuatan-program')}}" class="btn btn-primary" id="btn-back" style="background: #fff;color: #193865">Batal</a>
    </div>
  </div>
</div>
  


<script>
    $('#file_input').on('change',function(){
      var file = $(this).get(0).files[0];
      if(file){
          var reader = new FileReader();

          reader.onload = function(){
              $('#file_preview').attr('src',reader.result);
              $('#card_file_preview').show();
          }

          reader.readAsDataURL(file);
      }else{
        $('#card_file_preview').hide();
      }
      
    });

    
</script>

@endsection