@extends('layouts.master')

@section('title')
LT-168 :: FIREBASE
@endsection

@section('content')

<div class="card">
  <div class="card-header border-0">
      <div class="row align-items-center">
          <div class="col">
              <h3 class="mb-0">ทดสอบเพิ่มสมาชิก</h3>
          </div>
      </div>
  </div>
  <div class="card-body">

    <div class="d-flex justify-content-center">
      <form id="addUser" class="form-inline" method="POST" action="">
          <div class="form-group mb-2">
              <label for="name" class="sr-only">ชื่อ</label>
              <input id="name" type="text" class="form-control" name="name" placeholder="ชื่อ" required autofocus />
          </div>
          <div class="form-group mx-sm-3 mb-2">
              <label for="email" class="sr-only">อีเมล</label>
              <input id="email" type="email" class="form-control" name="email" placeholder="อีเมล" required autofocus />
          </div>
          <button id="submitUser" type="button" class="btn btn-danger mb-2">บันทึก</button>
      </form>
    </div>

  </div>
</div>

<div class="card">
  <div class="card-header border-0">
      <div class="row align-items-center">
          <div class="col">
              <h3 class="mb-0">ตาราง</h3>
          </div>
      </div>
  </div>
  <div class="card-body table-responsive py-3">
    <table class="table table-sm table-hover">
      <thead>
        <tr>
          <th class="align-middle text-center font-weight-bold">ชื่อ</th>
          <th class="align-middle text-center font-weight-bold">อีเมล</th>
          <th class="align-middle text-center font-weight-bold">ดำเนินการ</th>
        </tr>
      </thead>
      <tbody id="tbody" class="table_first">
      </tbody>
    </table>
  </div>
</div>

<form action="" method="POST" class="users-update-record-model form-horizontal">
    <div id="update-modal" data-backdrop="static" data-keyboard="false" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="custom-width-modalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" style="width: 55%;">
            <div class="modal-content" style="overflow: hidden;">
                <div class="modal-header">
                    <h4 class="modal-title" id="custom-width-modalLabel">Update</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <div class="modal-body" id="updateBody"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-success updateUser">Update</button>
                </div>
            </div>
        </div>
    </div>
</form>

<form action="" method="POST" class="users-remove-record-model">
    <div id="remove-modal" data-backdrop="static" data-keyboard="false" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="custom-width-modalLabel" aria-hidden="true" style="display: none;">
        <div class="modal-dialog modal-dialog-centered" style="width: 55%;">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="custom-width-modalLabel">ลบรายการ</h4>
                    <button type="button" class="close remove-data-from-delete-form" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <div class="modal-body">
                    <p>ยืนยันการลบรายการ?</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default waves-effect remove-data-from-delete-form" data-dismiss="modal">ปิด</button>
                    <button type="button" class="btn btn-danger waves-effect waves-light deleteRecord">ยืนยันการลบ</button>
                </div>
            </div>
        </div>
    </div>
</form>
@endsection

@section('scripts')
<script src="https://www.gstatic.com/firebasejs/7.14.6/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.14.6/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.14.6/firebase-database.js"></script>

<script type="text/javascript">

  var config = {
      apiKey: "{{ config('services.firebase.api_key') }}",
      authDomain: "{{ config('services.firebase.auth_domain') }}",
      databaseURL: "{{ config('services.firebase.database_url') }}",
      projectId: "{{ config('services.firebase.project_id') }}",
      storageBucket: "{{ config('services.firebase.storage_bucket') }}",
      messagingSenderId: "{{ config('services.firebase.messaging_sender_id') }}",
      appId: "{{ config('services.firebase.app_id') }}",
      measurementId: "{{ config('services.firebase.measurement_id') }}",
  };

  firebase.initializeApp(config);
  firebase.analytics();
  var database = firebase.database();
  var lastIndex = 0;
  /**
  * Get Data
  */
  firebase
      .database()
      .ref("blog/")
      .on("value", function (snapshot) {
          var value = snapshot.val();
          var htmls = [];
          $.each(value, function (index, value) {
              if (value) {
                  htmls.push(
                      "<tr>\
  <td class='align-middle text-center font-weight-bold'>" +
                          value.name +
                          "</td>\
  <td class='align-middle text-center font-weight-bold'>" +
                          value.email +
                          '</td>\
  <td class="align-middle text-center font-weight-bold"><button data-toggle="modal" data-target="#update-modal" class="btn btn-info updateData" data-id="' +
                          index +
                          '">แก้ไข</button>\
  <button data-toggle="modal" data-target="#remove-modal" class="btn btn-danger removeData" data-id="' +
                          index +
                          '">ลบ</button></td>\
  </tr>'
                  );
              }
              lastIndex = index;
          });
          $("#tbody").html(htmls);
          $("#submitUser").removeClass("desabled");
      });
  // Add Data
  $("#submitUser").on("click", function () {
      var values = $("#addUser").serializeArray();
      var name = values[0].value;
      var email = values[1].value;
      var userID = parseInt(lastIndex) + 1;
      console.log(values);
      firebase
          .database()
          .ref("blog/" + userID)
          .set({
              name: name,
              email: email,
          });
      // Reassign lastID value
      lastIndex = userID;
      $("#addUser input").val("");
  });
  // Update Data
  var updateID = 0;
  $("body").on("click", ".updateData", function () {
      updateID = $(this).attr("data-id");
      firebase
          .database()
          .ref("Users/" + updateID)
          .on("value", function (snapshot) {
              var values = snapshot.val();
              var updateData =
                  '<div class="form-group">\
  <label for="first_name" class="col-md-12 col-form-label">Name</label>\
  <div class="col-md-12">\
  <input id="first_name" type="text" class="form-control" name="name" value="' +
                  values.name +
                  '" required autofocus>\
  </div>\
  </div>\
  <div class="form-group">\
  <label for="last_name" class="col-md-12 col-form-label">Email</label>\
  <div class="col-md-12">\
  <input id="last_name" type="text" class="form-control" name="email" value="' +
                  values.email +
                  '" required autofocus>\
  </div>\
  </div>';
              $("#updateBody").html(updateData);
          });
  });
  $(".updateUser").on("click", function () {
      var values = $(".users-update-record-model").serializeArray();
      var postData = {
          name: values[0].value,
          email: values[1].value,
      };
      var updates = {};
      updates["/blog/" + updateID] = postData;
      firebase.database().ref().update(updates);
      $("#update-modal").modal("hide");
  });

  /**
  * UPDATE DATA
  */
  var updateID = 0;
  $("body").on("click", ".updateData", function () {
      updateID = $(this).attr("data-id");
      firebase
          .database()
          .ref("blog/" + updateID)
          .on("value", function (snapshot) {
              var values = snapshot.val();
              var updateData =
                  '<div class="form-group">\
  <label for="first_name" class="col-md-12 col-form-label">ชื่อ</label>\
  <div class="col-md-12">\
  <input id="first_name" type="text" class="form-control" name="name" value="' +
                  values.name +
                  '" required autofocus>\
  </div>\
  </div>\
  <div class="form-group">\
  <label for="last_name" class="col-md-12 col-form-label">อีเมล</label>\
  <div class="col-md-12">\
  <input id="last_name" type="text" class="form-control" name="email" value="' +
                  values.email +
                  '" required autofocus>\
  </div>\
  </div>';
              $("#updateBody").html(updateData);
          });
  });
  $(".updateUser").on("click", function () {
      var values = $(".users-update-record-model").serializeArray();
      var postData = {
          name: values[0].value,
          email: values[1].value,
      };
      var updates = {};
      updates["/blog/" + updateID] = postData;
      firebase.database().ref().update(updates);
      $("#update-modal").modal("hide");
  });

  /**
  * Remove Data
  */
  $("body").on("click", ".removeData", function () {
      var id = $(this).attr("data-id");
      $("body")
          .find(".users-remove-record-model")
          .append('<input name="id" type="hidden" value="' + id + '">');
  });
  $(".deleteRecord").on("click", function () {
      var values = $(".users-remove-record-model").serializeArray();
      var id = values[0].value;
      firebase
          .database()
          .ref("blog/" + id)
          .remove();
      $("body").find(".users-remove-record-model").find("input").remove();
      $("#remove-modal").modal("hide");
  });
  $(".remove-data-from-delete-form").click(function () {
      $("body").find(".users-remove-record-model").find("input").remove();
  });

</script>

@endsection