@extends('layout.master')
@section('pageTitle')
  <title>Pawnshop Management System</title>
@endsection
@section('metaCSRF')
  <meta name="csrf-token" content="{{ csrf_token() }}">
@endsection
@section('contents')
    <style>
    label {
      font-size:0.9em !important;
    }

    .pac-container {
      z-index: 99 !important;
    }

    .ui-front {
      z-index: 9999 !important;
    }


    #customerProfile {
      z-index: 9999 !important;
    }

    #historyTransaction {
      z-index: 9999 !important;
    }

    #editItemListModal {
      z-index: 999999 !important;
    }

    #viewItemListArrayModal {
      z-index: 999999 !important;
    }

    .modal { overflow: auto !important; }

    .number-input {
      text-align: right;
      font-size: 0.9em;
      font-weight: 600;
      color: blue;
    }

    .number-input2 {
      text-align: right;
      font-size: 0.9em;
      color: blue;
      width: 100%;
    }

    .trans-input {
      border: 1px solid rgba(0,0,0,0.1);
    }

    .dataTables_filter {
      display: none;
    }
    .renew-inputs {
      border: none;
      background: transparent;
    }
    .span-history {
      font-size:1.1em;
      color: maroon;
      padding-left:10px;
    }
    .history-table td {
      width: 11%;
      padding: 5px;
      border:1px solid rgba(0,0,0,0.1);
    }
    .history-table th {
      width: 11%;
      padding: 5px;
      border:1px solid rgba(0,0,0,0.1);
    }
    .history-table {
      padding: 10px;
    }
    .history-table thead {
      width: 100%;
      border:2px solid rgba(0,0,0,0.1);
    }

    .history-table tr {
      border:1px solid rgba(0,0,0,0.1);
    }

    .transaction-view-class {
      font-size:0.9em;
    }
    .transaction-view-class input {
      padding-left:5px;
    }
    .transaction-view-class span {
      color: #0791db;
    }

    .transaction-post-details span {
      color: #0791db;
    }

    .renew-inputs-text {
      color: #000 !important;
      font-weight: 600;
      float:right;
      font-size:0.9em;
    }

    .selected-item-value {
      text-align: right;
      color: blue;
      max-width: 100px;
      font-weight: 600;
    }
  </style>
  <link rel="stylesheet" href="/css/autocomplete-jquery-ui.css">
  <link rel="stylesheet" href="/theme/plugins/datatables-bs4/css/dataTables.bootstrap4.css">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0 text-dark"><b>MC Report</b></h1>
          </div><!-- /.col -->
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="#">Home</a></li>
              <li class="breadcrumb-item active">Money Changer</li>
            </ol>
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->
    <!-- Main content -->
    <input type="hidden" id="trans-userbranch" value="{{$currrentuser['branch']}}" />
    <section class="content">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
            <div class="card card-primary card-outline card-tabs">
              <div class="card-header p-0 pt-1 border-bottom-0">
                <ul class="nav nav-tabs" id="custom-tabs-two-tab" role="tablist">
                  <li class="nav-item">
                    <a class="nav-link active" id="custom-tabs-two-search-tab" data-toggle="pill" href="#custom-tabs-two-search" role="tab" aria-controls="custom-tabs-two-search" aria-selected="false">Transaction Search</a>
                  </li>
                </ul>
              </div>
              <div class="card-body">
                <div class="tab-content" id="custom-tabs-two-tabContent">
                  <div class="tab-pane fade show active" id="custom-tabs-two-search" role="tabpanel" aria-labelledby="custom-tabs-two-search-tab">
                    <div style="padding:15px;">
                        <div class="row">
                          <div class="col-md-4">
                            <div class="form-group">
                              <label>Transaction Date From</label>
                              <div class="input-group">
                                <div class="input-group-prepend">
                                  <span class="input-group-text">
                                    <i class="far fa-calendar-alt"></i>
                                  </span>
                                </div>
                                <input type="text" class="form-control form-control-sm float-right trans-input" id="transdate-from" name="datefrom" value="{{date('Y-m-d')}}" placeholder="yyyy-mm-dd">
                              </div>
                            </div>
                          </div>
                          <div class="col-md-4">
                            <div class="form-group">
                              <label>Transaction Date To</label>
                              <div class="input-group">
                                <div class="input-group-prepend">
                                  <span class="input-group-text">
                                    <i class="far fa-calendar-alt"></i>
                                  </span>
                                </div>
                                <input type="text" class="form-control form-control-sm float-right trans-input" id="transdate-to" name="dateto" value="{{date('Y-m-d')}}" placeholder="yyyy-mm-dd">
                              </div>
                            </div>
                          </div>
                          <div class="col-md-4">
                            <div class="form-group">
                              <label>-</label><br>
                              <button id="trans-search-button-local" type="button" class="btn btn-info btn-sm"><i class="fas fa-search"></i> Search</button>
                            </div>
                          </div>
                        </div>
                      <hr>
                      <div class="row">
                        <div class="col-md-12">
                          <table id="transactiontable" class="table table-bordered table-hover" style="  font-size:0.9em !important;">
                            <thead style="width:100% !important;">
                              <tr>
                                <th>Date</th>
                                <th>Trans #</th>
                                <th>Serial #</th>
                                <th>Denomination</th>
                                <th>Quantity</th>
                                <th>Amount</th>
                                <th>FX Rate</th>
                                <th>Amount(PHP)</th>
                              </tr>
                            </thead>
                            <tbody style="background:#fff;">
                            </tbody>
                          </table>
                        </div>
                      </div>
                      <hr>

                    </div>
                  </div>
                </div>
              </div>
              <!-- /.card -->
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- /.content -->
  </div>
@endsection
@section('js')

  <!-- <script src="/theme/dist/js/demo.js"></script>
  <script src="/theme/plugins/datatables/jquery.dataTables.js"></script>
  <script src="/theme/plugins/datatables-bs4/js/dataTables.bootstrap4.js"></script>
  <script src="/theme/dist/js/pages/dashboard.js"></script>

  <script src="https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/1.6.5/js/buttons.flash.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
  <script src="https://cdn.datatables.net/buttons/1.6.5/js/buttons.html5.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/1.6.5/js/buttons.print.min.js"></script> -->

  <script src="/theme/plugins/moment/moment.min.js"></script>
  <script src="/theme/plugins/daterangepicker/daterangepicker.js"></script>
  <script src="/theme/plugins/datatables/jquery.dataTables.js"></script>
  <script src="/theme/plugins/datatables-bs4/js/dataTables.bootstrap4.js"></script>
  <script src="/theme/dist/js/pages/dashboard.js"></script>
  <script src="/theme/dist/js/demo.js"></script>
  <!-- bootstrap datepicker -->
  <!-- AdminLTE App -->
  <script src="https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/1.6.5/js/buttons.flash.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
  <script src="https://cdn.datatables.net/buttons/1.6.5/js/buttons.html5.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/1.6.5/js/buttons.print.min.js"></script>

  <script>
    var imageCapture;
    var newImageFile;
    var imagewidth = 640;
    var imageheight = 480;
    var ximagewidth = 640;
    var yimageheight = 480;
    function onGetUserMediaButtonClick() {
      navigator.mediaDevices.getUserMedia({video: true, audio: false})
      .then(mediaStream => {
        document.querySelector('video').srcObject = mediaStream;
        const track = mediaStream.getVideoTracks()[0];
        imageCapture = new ImageCapture(track);
      })
      .catch(error => ChromeSamples.log(error));
    }
    function onGrabFrameButtonClick(imgCaptureID) {
      imageCapture.grabFrame()
      .then(imageBitmap => {
        var selectorId = "grabFrameCanvasNew";
        if(imgCaptureID == "newcustimage") selectorId = "grabFrameCanvasNew";
        else if(imgCaptureID == "editcustimage") selectorId = "grabFrameCanvasUpdate";
        const canvas = document.querySelector('#'+selectorId);
        drawCanvas(canvas, imageBitmap);
        newImageFile = canvas.toDataURL('image/png', 1.0);
      })
      .catch(error => ChromeSamples.log(error));
    }
    function onTakePhotoButtonClick() {
      imageCapture.takePhoto()
      .then(blob => createImageBitmap(blob))
      .then(imageBitmap => {
        const canvas = document.querySelector('#takePhotoCanvas');
        console.log(imageBitmap);
        drawCanvas(canvas, imageBitmap);
      })
      .catch(error => ChromeSamples.log(error));
      player.srcObject.getVideoTracks().forEach(track => track.stop());
    }
    /* Utils */
    function drawCanvas(canvas, img) {
      canvas.width = getComputedStyle(canvas).width.split('px')[0];
      canvas.height = getComputedStyle(canvas).height.split('px')[0];
      let ratio  = Math.min(canvas.width / img.width, canvas.height / img.height);
      let x = (canvas.width - img.width * ratio) / 2;
      let y = (canvas.height - img.height * ratio) / 2;
      canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
      canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height,
          x, y, img.width * ratio, img.height * ratio);
      console.log("cwidth:"+canvas.width);
      console.log("cheight:"+canvas.height);
      console.log("iwidth:"+img.width);
      console.log("iheight:"+img.height);
      console.log("rwidth:"+(img.width));
      console.log("rheight:"+(img.height));
      console.log("ratio:"+ratio);
      console.log("x:"+x);
      console.log("y:"+y);
      imagewidth = img.width;
      imageheight = img.height;
    }
    function addCustomerImages(custcode,branchcode){
        var filedata = [];
        var tempdata = "";
        var dataFile = new FormData();
        for(num in newImageFile){
          tempdata = tempdata + newImageFile[num];
          if((num % 500) == 0){
            dataFile.append('file[]', tempdata);
            tempdata = "";
          }
        }
        dataFile.append('custcode', custcode);
        dataFile.append('branchcode', branchcode);
        $.ajax({
            url: '/add-customer-image',
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            type:'POST',
            method: 'POST',
            data: dataFile,
            processData: false,
            contentType: false,
            cache:false,
            enctype: 'multipart/form-data',
            error:function(err){
              console.error(err);
            },
            success:function(data){
                console.log(data);
                newImageFile = undefined;
                console.log("test");
                var selectorId = "grabFrameCanvasNew";
                const canvas = document.querySelector('#grabFrameCanvasUpdate');
                canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
            },
            complete:function(e){
                console.log(e);
                console.log("Request finished.");
            }
        });
      }
    $('#captureImage').on('click',function(event){
      event.preventDefault();
      //onTakePhotoButtonClick();
      onGrabFrameButtonClick();
    });
    $('#take-photo-btn').on('click',function(event){
      event.preventDefault();
      var imgCaptureID = $('#current-user-image-loc').val();
      onGrabFrameButtonClick(imgCaptureID);
    });
    $('.startCameraButton').on('click',function(event){
      event.preventDefault();
      var imgCaptureID = $(this).attr('id');
      $('#current-user-image-loc').val(imgCaptureID);
      onGetUserMediaButtonClick();
    });
  </script>
  <script>
    function isNumberKey(evt){
        var charCode = (evt.which) ? evt.which : evt.keyCode;
        if (charCode != 46 && charCode > 31
          && (charCode < 48 || charCode > 57))
           return false;

        return true;
     }
    $('#print-document-btn').on('click',function(){
      $.ajax({
          url: '/print-transactions-details',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: {code: $('#response-transactioncode').text()},
          success:function(e){
            if(e){
              console.log(e);
              let params = 'scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,width=700,height=500,left=-10,top=-10';
              window.open(e,"_blank",params);
              return false;
            }
          }
      });
    });
    $('#void-transaction-btn').on('click',function(){
      $.ajax({
          url: '/print-transactions-details',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: {code: $('#trans-transactioncode').val()},
          success:function(e){
            if(e){
              console.log(e);
              let params = 'scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,width=700,height=500,left=-10,top=-10';
              window.open(e,"_blank",params);
              return false;
            }
          }
      });
    });
    $(document).on('shown.bs.modal', '#computeTransactionRates', function () {
        $('#confirm-update-transaction-btn').prop('disabled',false);
    });
    $('#refresh-customer-btn').on('click',function(event){
      event.preventDefault();
      $('#refresh-customer-btn').text('Please wait...');
      $('#refresh-customer-btn').prop('disabled',true);
      $.ajax({
          url: '/refresh-customer',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: {branch: $('#trans-userbranch').val()},
          success:function(e){
            if(e){
              console.log(e);
              $('#refresh-customer-btn').text('Refresh Customer List');
              $('#refresh-customer-btn').prop('disabled',false);
              alert(e);
            }
          }
      });
    });
  </script>
  <script>
    $(function() {
      $("#transdate-from").datepicker({
        dateFormat: "yy-mm-dd",
        maxDate: new Date
      });
      $("#transdate-to").datepicker({
        dateFormat: "yy-mm-dd",
        maxDate: new Date
      });
    });
    var transDatatable = $('#transactiontable').DataTable({
      "scrollY":"auto",
      keys: true,
      draw: true,
      paging:   false,
      info:     false,
      dom: 'Bfrtip',
      buttons: [
          'copy', 'csv', 'excel', 'pdf', 'print'
      ],
      "autoWidth": false,
      "ordering": false,
      });
    $('#trans-search-button-local').on('click',function(event){
      event.preventDefault();
      console.log('local-search');
      searchMCTransaction();
    });
    function searchMCTransaction(){
      var requestparam = $('#trans-userbranch').val() + ":" + $('#transdate-from').val() + ":" + $('#transdate-to').val();
      $.ajax({
          url: '/settings-request',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: {request:'forex',type:'query',param: requestparam },
          success:function(e){
            if(e){
              //console.log(e);
              var transactionList = [];
              var amountsum = 0;
              var phpamountsum = 0;
              for(num in e){
                var trnsdate = e[num].transdate;
                if(e[num].transactionno == "") trnsdate = '<b>'+e[num].transdate+'</b>';
                var trnsnum = e[num].transactionno;
                if(e[num].transdate == "") trnsnum = '<i>'+e[num].transactionno+'</i>';
                if(e[num].amount != "") amountsum = parseFloat(amountsum) + parseFloat(e[num].amount);
                if(e[num].phpamount != "") phpamountsum = parseFloat(phpamountsum) + parseFloat(e[num].phpamount);
                if(num > 0){
                  var n = trnsdate.includes("<b>");
                  if(n == true){
                    amountsum = amountsum.toFixed(2);
                    phpamountsum = phpamountsum.toFixed(2);
                    transactionList.push([
                      "",
                      "<b>TOTAL</b>",
                      "",
                      "",
                      "",
                      "<b>"+numberWithCommas(amountsum)+"</b>",
                      "",
                      "<b>"+numberWithCommas(phpamountsum)+"</b>"
                    ]);
                    amountsum = 0;
                    phpamountsum = 0;
                  }
                }
                transactionList.push([
                  trnsdate,
                  trnsnum,
                  e[num].series,
                  e[num].denomination,
                  e[num].count,
                  e[num].famount,
                  e[num].adjustment,
                  e[num].fphpamount
                ]);
                if(num == (e.length - 1)){
                    amountsum = amountsum.toFixed(2);
                    phpamountsum = phpamountsum.toFixed(2);
                    transactionList.push([
                      "",
                      "<b>TOTAL</b>",
                      "",
                      "",
                      "",
                      "<b>"+numberWithCommas(amountsum)+"</b>",
                      "",
                      "<b>"+numberWithCommas(phpamountsum)+"</b>"
                    ]);
                    amountsum = 0;
                    phpamountsum = 0;
                }
              }
              transDatatable.destroy();
              $('#transactiontable').DataTable({
                "scrollY":"500px",
                keys: true,
                draw: true,
                paging:   false,
                info:     false,
                autoWidth: false,
                data: transactionList,
                order: [],
                dom: 'Bfrtip',
                buttons: [
                    'copy', 'csv', 'excel', 'pdf', 'print'
                ],
                columns: [
                  { title: "Date" },
                  { title: "Trans No." },
                  { title: "Serial #" },
                  { title: "Denomination" },
                  { title: "Quantity" },
                  { title: "Amount" },
                  { title: "FX Rate" },
                  { title: "Amount (PHP)" },
                ],
                columnDefs: [
                 {
                      orderable: false,
                      targets: [0,1,2,3,4,5,6,7],
                 },
                 {
                     render: function (data, type, full, meta) {
                         return "<div class='text-wrap width-200' style='float:right;padding-right:10px;'>" + data + "</div>";
                     },
                     targets: [5, 6, 7]
                 },
                 {
                     render: function (data, type, full, meta) {
                         return "<div class='text-wrap width-200' style='text-align:center;'>" + data + "</div>";
                     },
                     targets: [3, 4]
                 },
               ],
              }),
              transDatatable = $('#transactiontable').DataTable();
              transDatatable.draw();
            }

          }
      });
    }
    function numberWithCommas(x) {
      return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    }
  </script>
@endsection