@extends('layout.master')

@push('plugin-styles')
  <link href="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.css') }}" rel="stylesheet" />
  <link href="{{ asset('assets/plugins/@mdi/css/materialdesignicons.min.css') }}" rel="stylesheet" />
@endpush

@section('content')
  <nav class="page-breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="#">Master</a></li>
      <li class="breadcrumb-item active" aria-current="page">Sync Master Data</li>
    </ol>
  </nav>

  @if (!isWebMaster() && !env('APP_SETUP_DONE'))
    <div class="row">
      <div class="col-md-12 grid-margin stretch-card">
        <div class="card">
          <div class="card-body">
            <button class="btn btn-primary" onclick="syncSetup()">Sync Setup</button>
          </div>
        </div>
      </div>
    </div>
  @endif

  <div class="row">
    <div class="col-md-12 grid-margin stretch-card">
      <div class="card">
        <div class="card-header bg-white">
          <div class="row">
              <div class="col-12">
                <h6 class="card-title">Sync Master Data</h6>
              </div>
              <div class="col-12 @if (false) col-md-5 @else col-md-9 @endif">
                <div class="mb-2">
                  <select name="type_filter" id="type_filter" class="form-control select2Custom">
                    <option value="">Pilih Type</option>
                    @foreach (App\MasterDataSync::LIST_TYPE_SELECT as $key => $items)
                      <optgroup label="{{ $key }}">
                        @foreach ($items as $k => $item)
                          <option value="{{ $k }}">{{ $item }}</option>
                        @endforeach
                      </optgroup>
                    @endforeach
                  </select>
                </div>
              </div>
              @if (false)
                <div class="col-12 col-md-4">
                  <div class="mb-2">
                    <select name="sync_filter" id="sync_filter" class="form-control select2Custom">
                      <option value="">Semua</option>
                      <option value="1">Perlu Diupdate</option>
                    </select>
                  </div>
                </div>
              @endif
              <div class="col-12 col-md-3">
                <div class="row">
                  <div class="col-6 pe-1">
                    <button type="button" id="btnFilter" class="btn btn-primary btn-custom2 w-100">Filter</button>
                  </div>
                  <div class="col-6 ps-1">
                    <button type="button" class="btn btn-light btn-custom8 w-100" onclick="filterReset()">Reset</button>
                  </div>
                </div>
              </div>
          </div>
        </div>
        <div class="card-body">
          <div class="table-responsive">
            <table id="datatable-serverside" class="table table-sm" style="width: 100%;">
              <thead>
                <tr>
                  <th class="kolomNomor">No.</th>
                  <th>UUID</th>
                  <th>Tipe</th>
                  <th>Nama Entitas</th>
                  <th>Update At (Master)</th>
                  <th>Update At (Local)</th>
                  <th class="kolomAksi">Aksi</th>
                </tr>
              </thead>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection

@push('plugin-scripts')
  <script src="{{ asset('assets/plugins/datatables-net/jquery.dataTables.js') }}"></script>
  <script src="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.js') }}"></script>
@endpush

@push('custom-scripts')
  <script src="{{ asset('assets/js/data-table.js') }}"></script>
  <script src="{{ asset('assets/js/sweet-alert.js') }}"></script>

  <script>
    let url = "/api/master/data-sync?";

    let datatable = $('#datatable-serverside').DataTable({
      lengthMenu: lengthMenuDatatable(),
      processing: true,
      serverSide: true,
      order: [[0, 'desc']],
      ajax: {
        url: url,
        type: 'GET',
        error: function(xhr, status, error) {
          swal({
            title: "Error",
            text: "Tidak dapat terhubung dengan server Master Data",
            type: "error",
            confirmButtonText: "OK"
          });
        }
      },
      columns: [
        {data: 'DT_RowIndex', name: 'id', searchable: false},
        {
          data: 'uuid',
          name: 'uuid',
        },
        {data: 'tipe', name: 'tipe'},
        {
          data: 'nama_entitas',
          name: 'nama_entitas',
          searchable: false,
          orderable: false,
        },
        {
          data: 'updated_at',
          name: 'updated_at',
          searchable: false,
          render: function(data) {
            return moment(data).format('DD-MM-YYYY HH:mm:ss');
          }
        },
        {
          data: 'updated_at_local',
          name: 'updated_at_local',
          searchable: false,
          render: function(data) {
            return data ? moment(data).format('DD-MM-YYYY HH:mm:ss') : '-';
          },
          visible: !"{{ isWebMaster() }}"
        },
        {data: 'aksi', name: 'aksi', searchable: false, orderable: false, class: 'text-center'},
      ],
      fnRowCallback: function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
        if((aData.updated_at > aData.updated_at_local || !aData.updated_at_local) && !"{{ isWebMaster() }}"){
          $(nRow).addClass('table-warning');
        }
        if(aData.deleted_at){
          $(nRow).addClass('table-danger');
        }
      }
    });

    function pull(id, is_deleted = false){
      let text = '';
      if(!is_deleted){
        text = "Apakah anda ingin melakukan sinkronisasi untuk data ini?";
      }else{
        text = "Apakah anda ingin melakukan sinkronisasi untuk data ini? Data akan dihapus dari database lokal.";
      }
      swal({
          title: "Konfirmasi",
          text: text,
          type: "warning",
          showCancelButton: true,
          cancelButtonText: "Batal",
          confirmButtonText: "Lanjutkan"
      }).then(function(){
        sendJson('/sync/per-row/'+id, {_token:'{{ csrf_token() }}'}, function(data){
          swal({
            title: data.type == "success" ? "Sukses" : (data.type == "error" ? "Gagal" : "Info"),
            text: data.response,
            type: data.type,
            confirmButtonText: "OK"
          }).then(function(){
            if (data.type == "success") {
              datatable.ajax.reload();
            }
          })
        });
      }).catch(swal.noop);
    }

    function filterReset(){
      $('#type_filter').val('').trigger('change');
      datatable.ajax.url(url).load();
    }

    $('#btnFilter').on('click', function(){
      let type = $('#type_filter').val();
      let sync = $('#sync_filter').val();
      let url_filter = url + '&type_filter=' + type + '&sync_filter=' + sync;
      datatable.ajax.url(url_filter).load();
    });

    function syncSetup(){
      swal({
        title: "Konfirmasi",
        text: "Apakah anda ingin melakukan sinkronisasi setup ?",
        type: "warning",
        showCancelButton: true,
        cancelButtonText: "Batal",
        confirmButtonText: "Lanjutkan"
      }).then(function(){
        sendJson('/sync/setup', {_token:'{{ csrf_token() }}'}, function(data){
          swal({
            title: data.type == "success" ? "Sukses" : (data.type == "error" ? "Gagal" : "Info"),
            text: data.type == "success" ? "Sukses" : (data.type == "error" ? "Tidak dapat terhubung dengan server Master Data" : "Info"),
            type: data.type,
            confirmButtonText: "OK"
          }).then(function(){
            if (data.type == "success") {
              datatable.ajax.reload();
            }
          })
        });
      })
    }
  </script>
@endpush