@extends('layouts.app')
@section('content')
<section class="content-header">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-12">
        <h1 class="float-left">CCTV</h1>
      </div>
    </div>
  </div>
</section>

<section class="content" id="mainCctv">

  <!-- Modal -->
  <div class="modal fade" id="tampilModal" tabindex="-1" role="dialog" aria-labelledby="modelTitleId"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="modal-title-id"></h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="form-group col-6">
              <label for="">Nama Pengawas</label>
              <input type="text" class="form-control" readonly value="{{auth()->user()->name}}">
            </div>
            <div class="form-group col-6">
              <label for="">Tanggal</label>
              <input type="text" class="form-control" id="idTanggal" readonly value="">
            </div>
            <div class="form-groud col-12">
              <label for="">Kondisi</label>
              <textarea class="form-control mb-3" name="keterangan" id="idKeterangan" rows="5"></textarea>
            </div>
            <div class="form-group col-12">
              <label>Upload Foto</label>
              <div class="custom-file">
                <input type="file" class="custom-file-input" id="uploadFileId" name="uploadFile">
                <label class="custom-file-label" for="customFile">Choose file</label>
              </div>
            </div>
          </div>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary" data-dismiss="modal" id="simpanMonitoring">Save</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Default box -->
  <div class="card">
    <div class="card-body">
      <div class="mb-0">
        <label for="">Pilih Lokasi CCTV</label>
        <select class="form-control" name="" id="pilihcctv">
          @foreach ($satker as $sk)
          <option value="{{$sk->id}}" data-id="{{$sk->id}}" data-nama="{{$sk->nama}}"
            data-cctv_1_nama="{{$sk->cctv_1_nama}}" data-cctv_1_link="{{$sk->cctv_1_link}}"
            data-cctv_2_nama="{{$sk->cctv_2_nama}}" data-cctv_2_link="{{$sk->cctv_2_link}}">{{$sk->nama}}</option>
          @endforeach
        </select>
      </div>
    </div>
    <!-- /.card-body -->
    <div class="card-body pt-0" id="theid">
      <div class="row">
        <div class="col-12">
          <h4 class="text-center mb-3 font-weight-bold">{{$satker->first()->nama}}</h4>
        </div>
        <div class="col-6">
          <div class="card" id="card-1">
            <div class="card-header">
              <h4 class="mb-0">{{$satker->first()->cctv_1_nama}}</h4>
            </div>
            <div class="card-body p-2">
              <iframe data-html2canvas-ignore="true" src="{{$satker->first()->cctv_1_link}}" width="100%" height="370"
                frameborder="0" allowfullscreen="allowfullscreen" allow="autoplay; encrypted-media"></iframe>
              <button class="btn btn-primary btn-block mt-2 tombol1" type="button" data-toggle="modal"
                data-target="#tampilModal">Ambil</button>
            </div>
          </div>
        </div>
        <div class="col-6">
          <div class="card">
            <div class="card-header">
              <h4 class="mb-0">{{$satker->first()->cctv_2_nama}}</h4>
            </div>
            <div class="card-body p-2">
              <iframe src="{{$satker->first()->cctv_2_link}}" width="100%" height="370" frameborder="0"
                allowfullscreen="allowfullscreen" allow="autoplay; encrypted-media"></iframe>
              <button class="btn btn-primary btn-block mt-2 tombol2" type="button" data-toggle="modal"
                data-target="#tampilModal">Ambil</button>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
  <!-- /.card -->

  <div class="card">
    <div class="card-header">
      <h3 class="card-title">
        Kondisi
      </h3>
    </div>
    <div class="card-body">
      <div class="table-responsive">
        <table class="table table-bordered" id="tableManajemenPeradilanTindakLanjut">
          <thead>
            <tr>
              <th style="min-width:150px;">Tanggal</th>
              <th style="min-width:200px;">Pengawas</th>
              <th style="min-width:250px;">Satker</th>
              <th style="min-width:150px;">CCTV</th>
              <th style="min-width:300px;">Kondisi</th>
              <th style="min-width:200px;">Foto</th>
            </tr>
          </thead>
          <tbody id="tableKondisi">
          </tbody>
        </table>
      </div>
    </div>
  </div>
</section>

@endsection

@section('js')

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"
  integrity="sha512-tVYBzEItJit9HXaWTPo8vveXlkK62LbA+wez9IgzjTmFNLMBO1BEYladBw2wnM3YURZSMUyhayPCoLtjGh84NQ=="
  crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>
  var data_cctv_terpilih_id="";
  var data_cctv_terpilih_nama="";
  var data_cctv_terpilih_satker="";

  var data_id="{{$satker->first()->id}}";
  var data_nama="{{$satker->first()->nama}}";
  var data_cctv_1_nama="{{$satker->first()->cctv_1_nama}}";
  var data_cctv_1_link="{{$satker->first()->cctv_1_link}}";
  var data_cctv_2_nama="{{$satker->first()->cctv_2_nama}}";
  var data_cctv_2_link="{{$satker->first()->cctv_2_link}}";

  var loadiv = `<div class="overlay loadiv">
    <div class="spinner-border text-primary" role="status">
      <span class="sr-only">Loading...</span>
      </div>
      </div>`;

    function screenshot_card_1(canvas) {/*html2canvas-0.5.0 work with Promise.js*/
        document.body.appendChild(canvas);
    }

    function remove_selected(id_input){
      var fileInput = document.getElementById(id_input)
      fileInput.value = ''
      fileInput.dispatchEvent(new Event('change'));
    }

    $(document).ready(function() {
        bsCustomFileInput.init();

        
        

        $('#tampilModal').on('show.bs.modal', function(e){
          let tanggal_now = new Date();
          tanggal_now_moments = moment(tanggal_now).format('DD/MM/YYYY HH:mm:ss');
          $('#idTanggal').val(tanggal_now_moments);
          $('#idKeterangan').val('');
          remove_selected('uploadFileId');
        });

        $(document).on('click','.tombol1', function(e) {
          data_cctv_terpilih_id = 1;
          data_cctv_terpilih_nama = data_cctv_1_nama;
          data_cctv_terpilih_satker = data_id;
          $('#modal-title-id').text(data_nama+' :: '+data_cctv_1_nama);
        });

        $(document).on('click','.tombol2', function(e) {
          data_cctv_terpilih_id = 2;
          data_cctv_terpilih_nama = data_cctv_2_nama;
          data_cctv_terpilih_satker = data_id;
          $('#modal-title-id').text(data_nama+' :: '+data_cctv_2_nama);
        });

        $(document).on('click','.tombol3', function(e) {
          data_cctv_terpilih_id = 3;
          data_cctv_terpilih_nama = data_cctv_3_nama;
          data_cctv_terpilih_satker = data_id;
          $('#modal-title-id').text(data_nama+' :: '+data_cctv_3_nama);
        });

        $(document).on('click','.tombol4', function(e) {
          data_cctv_terpilih_id = 4;
          data_cctv_terpilih_nama = data_cctv_4_nama;
          data_cctv_terpilih_satker = data_id;
          $('#modal-title-id').text(data_nama+' :: '+data_cctv_4_nama);
        });

        $(document).on('click','#simpanMonitoring', function(e) {

          if ($('#idKeterangan').val() == '') {
            console.log('keterangan');
            
          }

          if ($('#uploadFileId').get(0).files.length == 0) {
            console.log('files');
            
          }

          let formData = new FormData();
      
          formData.append('_token', "{{ csrf_token() }}");
          formData.append('cctv_id', data_cctv_terpilih_id);
          formData.append('cctv_nama', data_cctv_terpilih_nama);
          formData.append('satker_id', data_cctv_terpilih_satker);
          formData.append('tanggal', $('#idTanggal').val());
          formData.append('kondisi', $('#idKeterangan').val());
          formData.append('upload_foto', $('#uploadFileId')[0].files[0]);

          $.ajax({
              type: "POST",
              method: 'POST',
              data : formData,
              url: "{{url('surat-tugas-api/cctv-kondisi')}}",
              processData: false,
              contentType: false,
              beforeSend: function() {
                $('#mainCctv').append(loadiv);
              },
              success: function(data) {
                $('#tableKondisi').append(
                `
                <tr>
                  <td>`+data.tanggal+`</td>
                  <td>`+data.pengawas+`</td>
                  <td>`+data.satker+`</td>
                  <td>`+data.cctv_nama+`</td>
                  <td>`+data.kondisi+`</td>
                  <td><img class="img-fluid" src="`+data.link_foto+`" alt="Photo"></td>
                </tr>
                `
            );
              },
              complete: function() {
                  $('.loadiv').remove();
              }
          });


        });


        $('#screenshot_card_1').click(function () {
            html2canvas(document.body, {
                allowTaint: true,
                logging: true,
                taintTest: false,
                onrendered: screenshot_card_1 /*0.4.1*/
            }).then(screenshot_card_1);/*0.5.0-rc*/
        });

        $('#pilihcctv').select2();

        $('#pilihcctv').on('select2:select', function (e) {

            var data = e.params.data;
            let that = $(this);
            that = that.select2().find(":selected");
            
            data_id=that.data('id');
            data_nama=that.data('nama'); 
            data_cctv_1_nama=that.data('cctv_1_nama');
            data_cctv_1_link=that.data('cctv_1_link');
            data_cctv_2_nama=that.data('cctv_2_nama');
            data_cctv_2_link=that.data('cctv_2_link');

            $('#theid').html(
                `
                <div class="row">
                  <div class="col-12">
                    <h4 class="text-center mb-3 font-weight-bold">`+that.data('nama')+`</h4>
                  </div>
                  <div class="col-6">
                    <div class="card">
                      <div class="card-header">
                        <h4 class="mb-0">`+that.data('cctv_1_nama')+`</h4>
                      </div>
                      <div class="card-body p-2">
                        <iframe src="`+that.data('cctv_1_link')+`" width="100%" height="370" frameborder="0" allowfullscreen="allowfullscreen" allow="autoplay; encrypted-media"></iframe>
                        <button class="btn btn-primary btn-block mt-2 tombol1" type="button" data-toggle="modal"
                data-target="#tampilModal">Ambil</button>
                      </div>
                    </div>
                  </div>
                  <div class="col-6">
                    <div class="card">
                      <div class="card-header">
                        <h4 class="mb-0">`+that.data('cctv_2_nama')+`</h4>
                      </div>
                      <div class="card-body p-2">
                        <iframe src="`+that.data('cctv_2_link')+`" width="100%" height="370" frameborder="0" allowfullscreen="allowfullscreen" allow="autoplay; encrypted-media"></iframe>
                        <button class="btn btn-primary btn-block mt-2 tombol2" type="button" data-toggle="modal"
                data-target="#tampilModal">Ambil</button>
                      </div>
                    </div>
                  </div>
              </div>
                `
            );

            //mainCctvconsole.log(data);

        });
    });
</script>
@endsection