@extends('layouts.master')
@section('content')
  <div class="card" style="max-height: 89vh;overflow: auto;">
    <div class="card-body">
        <div class="sticky">
      <div class="row">
        <div class="col-6">
          <h5 style="font-weight: bold;">กลุ่มวัสดุ</h5>
        </div>
        <div class="col-6 text-right">
           <a data-toggle="modal" href="#modal-form-material-group" class="btn btn-success"><i class="fas fa-plus-square"></i> เพิ่มข้อมูล</a>
        </div>
      </div>
      <hr>
    </div>
      <div class="row mt-5">
        <div class="col-12 pl-5 pr-5">
          <table id="tb_mat_group" class="table table-striped">
            <thead style="font-weight: bold;">
              <tr>
                <td style="width:30%;">รหัส</td>
                <td >กลุ่มวัสดุ</td>
                <td style="text-align: center; width:5%;">แก้ไข</td>
                <td style="text-align: center;width:5%;">ลบ</td>
              </tr>
            </thead>
            <tbody style="font-size: 14px;">
              @foreach ($groups as $group)
                <tr>
                  <td>{{$group->xvmgpcode}}</td>
                  <td>{{$group->xvmgpname}}</td>
                  <td style="text-align: center;">
                    <a data-toggle="modal" href="#modal-form-material-edit-group" class="btn-sm btn-info pl-2 pr-2 pb-2 pt-2" onclick="open_modal('{{$group->xvmgpcode}}','{{$group->xvmgpname}}')"><i class="fas fa-edit fa-1x"></i></a>
                  </td>
                  <td style="text-align: center;color:white;"><a class="btn-sm btn-danger pl-2 pr-2 pb-2 pt-2" onclick="del('{{$group->xvmgpcode}}')"><i class="fas fa-trash fa-1x"></i></a></td>
                </tr>
              @endforeach
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  {{-- modal add--}}
  <div class="modal" id="modal-form-material-group" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">ฟอร์มเพิ่มข้อมูลกลุ่มวัสดุ</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form action="{{route('add_material_group')}}" method="POST">
            @csrf
            <div class="form-row">
              <div class="col-12">
                <label for="">ชื่อกลุ่มวัสดุ</label>
                <input type="text" class="form-control" name="XVMgpName">
              </div>
            </div>
            <div class="form-row mt-5">
              <div class="col-6 text-center">
                <button type="button" class="btn btn-danger" data-dismiss="modal">ยกเลิก</button>
              </div>
              <div class="col-6 text-center">
                <button type="submit" class="btn btn-primary">บันทึกข้อมูล</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  {{-- modal edit --}}
  <div class="modal" id="modal-form-material-edit-group" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">ฟอร์มเพิ่มข้อมูลกลุ่มวัสดุ</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form action="{{route('edit_material_group')}}" method="POST" onsubmit="event.preventDefault();return SwalAskFormEdit(this)">
            @csrf
            <div class="form-row">
              <div class="col-12">
                <label for="">ชื่อกลุ่มวัสดุ</label>
                <input type="text" class="form-control" name="XVMgpName">
              </div>
            </div>
            <div class="form-row mt-5">
              <div class="col-6 text-center">
                <button type="button" class="btn btn-danger" data-dismiss="modal">ยกเลิก</button>
              </div>
              <div class="col-6 text-center">
                <button type="submit" class="btn btn-primary">บันทึกข้อมูล</button>
              </div>
            </div>
             <input type="hidden" name="XVMgpCode">
          </form>
        </div>
      </div>
    </div>
  </div>
 <input type="hidden" name="msg" value="{{session()->get('msg')}}">
@endsection
<style>
  input{
     background-color: rgb(247, 247, 247) !important;
  }
  div.sticky {
        position: sticky;
        top: 0;
        background-color: #ffffff;
        padding-top: 8px;
        z-index: 100;
    }
  #tb_mat_group tbody tr{
    cursor: pointer;
  }
  #tb_mat_group tbody tr:hover{
     background-color:azure;
  }
  #tb_mat_group tbody td{
    font-size: 14px;
    height: 35px;
    vertical-align: middle;
  }
  #tb_mat_group_filter{
    margin-bottom: 1cm;
  }
  .modal_title{
    font-weight: bold;
  }
</style>
<script src="{{asset('js/jquery-3.5.1.min.js')}}"></script>
<script src="{{asset('js/sweetalert.min.js')}}"></script>
<script src="{{asset('js/helper.js')}}"></script>
<script>
  $(document).ready(function(){
     if($('input[name="msg"]').val() == 'success'){
       swal("บันทึกข้อมูลเรียบร้อย", "คลิก ตกลง", "success");
     }
      if($('input[name="msg"]').val() == 'Duplicate'){
          swal("ชื่อกลุ่มวัสดุซ้ำ", "ชื่อกลุ่มวัสดุซ้ำ ไม่สามารถบันทึกได้", "warning");
      }
      if($('input[name="msg"]').val() == 'busy'){
          swal("ไม่สามารถลบได้", "ข้อมูลที่เลือกถูกใช้ในข้อมูลอื่น", "warning");
      }
      if($('input[name="msg"]').val() == 'busyEdit'){
          swal("ไม่สามารถแก้ไขได้", "ข้อมูลที่เลือกถูกใช้ในข้อมูลอื่น", "warning");
      }
     $('#tb_mat_group').DataTable({
         "order": [],
         "language": {
             "search": "ค้นหา"
         }
     });
  })
  function open_modal(code,name){

    $('#modal-form-material-edit-group input[name="XVMgpCode"]').val(code);
    $('#modal-form-material-edit-group input[name="XVMgpName"]').val(name);
  }
  function del(id){
    swal({
      title: "คุณต้องลบข้อมูลหรือไม่",
      // text: "Once deleted, you will not be able to recover this imaginary file!",
      icon: "warning",
      buttons: true,
      dangerMode: true,
    })
    .then((willDelete)=>{
      if(willDelete == true){
        location.href = 'del_material_group/'+id+'';
      }else{
        console.log('no')
      }
    })
  }
</script>