@extends('layouts.mainframe')

@section('page-styles')
  <link rel="stylesheet" type="text/css" href="https://unpkg.com/notie/dist/notie.min.css">
  <style>
    .notie-container {
      font-size: 1.1rem;
    }
  </style>
@endsection

@section('content')
  <div class="content">
    <div id="app" class="container-xl">
      <div class="page-header">
        <div class="row align-items-center">
          <div class="col-auto">
            <h2 class="font-bold text-xl tracking-wide">
              RUJUKAN AM
            </h2>
          </div>
        </div>
      </div>
      <div class="row justify-content-center">
        <div class="col-md-12">
          <div class="card">
            <div class="card-header">Reference Table</div>
            <div class="card-body">
              <div class="row">
                <div class="col-lg-12 pb-5">
                  <div class="flex flex-col md:flex-row">
                    <select id="mastercode" class="form-control custom-select">
                      <option value="" selected="selected"></option>
                      @foreach($refs as $ref)
                        <option
                          value="{{ $ref['referencecode'] }}" {{ isset($mastercode_selected) && $mastercode_selected == $ref['referencecode'] ? 'selected' : '' }}>{{ $ref['description1'] }}</option>
                        @php $update_mastercode = (isset($mastercode_selected) && $mastercode_selected == $ref['referencecode'] ? $ref['description1'] : ''); @endphp
                      @endforeach
                    </select>
                    <div class="flex flex-row">
                      <button class="btn btn-primary" type="button" data-toggle="modal" data-target="#modal_refgeneral_new">Baru</button>
                      <button class="btn btn-primary" type="button"
                              {{ !isset($mastercode_selected) ? 'disabled' : '' }} data-toggle="modal"
                              data-target="#modal_refgeneral_update">Kemaskini</button>
                      <form
                        action="{{ isset($mastercode_selected) ? route('refgeneral.destroy', $mastercode_selected) : '#' }}"
                        method="POST">
                        @csrf
                        @method('DELETE')
                        <button class="btn btn-danger" name="submit_delete_mastercode" type="submit"
                                {{ !isset($mastercode_selected) ? 'disabled' : '' }} onclick="if(!window.confirm('Anda pasti untuk menghapus rekod ini?')) return false;">Hapus</button>
                      </form>
                    </div>
                  </div>
                </div>
                <div class="col-lg-12">
                  <div class="table-responsive">
                    <table v-if="refdata.length" id="tbl_refgeneral" class="table">
                      <tr>
                        <th class="text-center" style="width: 10%;">RANKING</th>
                        <th>REFERENCECODE</th>
                        <th>DESCRIPTION1</th>
                        <th>GROUPCODE</th>
                        <th style="width: 25%;">ACTION(S)</th>
                      </tr>
                      <tr v-for="data in refdata">
                        <td contenteditable class="ranking text-center">@{{ data.ranking }}</td>
                        <td contenteditable class="reference_code">@{{ data.referencecode }}</td>
                        <td contenteditable class="description1">@{{ data.description1 }}</td>
                        <td contenteditable class="groupcode">@{{ data.groupcode }}</td>
                        <td>
                          <button type="button" @click="updateRefData($event)"
                                  class="update_list_refgeneral btn btn-sm btn-shadow btn-primary" :value="data.id">
                            <i class="fa fa-pencil"></i>Update
                          </button>
                          <button type="button" @click="deleteRefData($event)"
                                  class="delete_list_refgeneral btn btn-sm btn-shadow btn-danger" :value="data.id">
                            <i class="fa fa-times"></i>Delete
                          </button>
                        </td>
                      </tr>
                      <tr class="bg-light">
                        <td contenteditable id="new_ranking" class="text-center">@{{ refdata.length+1 }}</td>
                        <td contenteditable id="new_reference_code"></td>
                        <td contenteditable id="new_description1"></td>
                        <td contenteditable id="new_groupcode"></td>
                        <td style="width: 15%;">
                          <button @click="insertRefData($event)" type="button"
                                  class="btn btn-sm btn-shadow btn-success">Save
                          </button>
                        </td>
                      </tr>
                    </table>
                    <table v-else-if="currentMastercode !== ''" class="table">
                      <tr>
                        <th class="text-center" style="width: 10%;">RANKING</th>
                        <th>REFERENCECODE</th>
                        <th>DESCRIPTION1</th>
                        <th>GROUPCODE</th>
                        <th style="width: 20%;">ACTION(S)</th>
                      </tr>
                      <tr class="bg-light">
                        <td contenteditable id="new_ranking" class="text-center">1</td>
                        <td contenteditable id="new_reference_code"></td>
                        <td contenteditable id="new_description1"></td>
                        <td contenteditable id="new_groupcode"></td>
                        <td style="width: 15%;">
                          <button @click="insertRefData($event)" type="button"
                                  class="btn btn-sm btn-shadow btn-success">Save
                          </button>
                        </td>
                      </tr>
                    </table>
                    <table v-else-if="currentMastercode === ''" class="table">
                      <tr>
                        <td colspan="5" class="text-center">NO ROW SELECTED</td>
                      </tr>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Modal : New Mastercode -->
  <div class="modal fade" id="modal_refgeneral_new" role="dialog">
    <div class="modal-dialog">
      <form method="POST" action="{{ route('refgeneral.store') }}">
        @csrf
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title">Sila masukkan kod rujukan am baru</h4>
            <button type="button" class="close" data-dismiss="modal"></button>
          </div>
          <div class="modal-body">
            <input type="text" class="form-control" name="new_mastercode" oninput="this.value = this.value.toUpperCase()">
          </div>
          <div class="modal-footer justify-content-center">
            <button name="submit_new_mastercode" type="submit" class="btn btn-primary">Simpan</button>
          </div>
        </div>
      </form>
    </div>
  </div>
  <!-- Modal : New Mastercode -->

  <!-- Modal : Update Mastercode -->
  <div class="modal fade" id="modal_refgeneral_update" role="dialog">
    <div class="modal-dialog">
      <form method="POST" action="{{ isset($mastercode_selected) ? route('refgeneral.update', $mastercode_selected) : '#' }}">
        @csrf
        @method('PUT')
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title">Kemaskini kod rujukan am</h4>
            <button type="button" class="close" data-dismiss="modal"></button>
          </div>
          <div class="modal-body">
            <input type="text" class="form-control" name="update_mastercode" value="{{ $update_mastercode ?? '' }}" oninput="this.value = this.value.toUpperCase()">
            <input type="hidden" id="current_mastercode" name="mastercode" value="{{ $mastercode_selected ?? '' }}">
          </div>
          <div class="modal-footer justify-content-center">
            <button name="submit_update_mastercode" type="submit" class="btn btn-primary">Kemaskini</button>
          </div>
        </div>
      </form>
    </div>
  </div>
  <!-- Modal : Update Mastercode -->
@endsection

@section('page-scripts')
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script src="https://unpkg.com/notie"></script>

  <script>
    let registerTutor = new Vue({
      el: '#app',
      data: {
        currentMastercode : document.getElementById("current_mastercode").value,
        refdata : [],
      },
      mounted() {
        //other script
        document.getElementById("mastercode").addEventListener('change', function (){
          window.location = "{{ route('refgeneral.index') }}/" + this.value;
        });

        this.getRefData();
      },
      methods : {
        getRefData() {
          axios.get("{{ route('refdata.index') }}" + '/' + document.getElementById("current_mastercode").value)
            .then((response) => {
              this.refdata = response.data.data;
            })
            .catch(err => console.log(err) );
        },
        insertRefData(event) {
          let mastercode = this.currentMastercode;
          let ranking = event.target.parentElement.parentElement.childNodes[0].textContent;
          let referencecode = event.target.parentElement.parentElement.childNodes[2].textContent;
          let description1 = event.target.parentElement.parentElement.childNodes[4].textContent;
          let groupcode = event.target.parentElement.parentElement.childNodes[6].textContent;
          // console.log(ranking, referencecode, description1);
          axios({
            method: 'post',
            url: "{{ route('refdata.index') }}",
            data: {
              mastercode, ranking, referencecode, description1, groupcode
            }
          }).then((response) => {
            notie.alert({ type: response.data.status, text: response.data.statusMessage, time: 1.5 })

            //reset text
            event.target.parentElement.parentElement.childNodes[2].textContent = "";
            event.target.parentElement.parentElement.childNodes[4].textContent = "";

            this.getRefData();
          }).catch(err => {
            if (err.response) {
              console.log("There's an error");
            }
          });
        },
        updateRefData(event) {
          let id = event.target.value;
          let ranking = event.target.parentElement.parentElement.childNodes[0].textContent;
          let referencecode = event.target.parentElement.parentElement.childNodes[2].textContent;
          let description1 = event.target.parentElement.parentElement.childNodes[4].textContent;
          let groupcode = event.target.parentElement.parentElement.childNodes[6].textContent;

          axios({
            method: 'put',
            url: "{{ route('refdata.index') }}" + '/' + id,
            data: {
              ranking, referencecode, description1, groupcode
            }
          }).then((response) => {
            notie.alert({ type: response.data.status, text: response.data.statusMessage, time: 1.5 })
            this.getRefData();
          }).catch(err => {
            if (err.response) {
              console.log("There's an error");
            }
          });
        },
        deleteRefData(event) {
          let id = event.target.value;

          axios({
            method: 'delete',
            url: "{{ route('refdata.index') }}" + '/' + id,
          }).then((response) => {
            notie.alert({ type: response.data.status, text: response.data.statusMessage, time: 1.5 })
            this.getRefData();
          }).catch(err => {
            if (err.response) {
              console.log("There's an error");
            }
          });
        }
      },
    });
  </script>
@endsection