@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="#!">Finance</a></li>
      <li class="breadcrumb-item active" aria-current="page">Biaya</li>
    </ol>
  </nav>

  <div class="row">
    <div class="col-md-12 grid-margin stretch-card">
      <div class="card">
        <div class="card-body">
          <h6 class="card-title">Data Biaya</h6>
          <div class="table-responsive">
            <table id="datatable-serverside" class="table" style="width: 100%">
              <thead>
                <tr>
                  <th class="kolomNomor">No.</th>
                  <th>Referensi</th>
                  {{-- <th>TIpe</th> --}}
                  <th>Vendor</th>
                  <th>Tanggal</th>
                  {{-- <th class="text-end">Biaya Kirim</th>
                  <th class="text-end">Potongan</th> --}}
                  <th class="text-end">Total</th>
                  <th>Status</th>
                  <th>Detail</th>
                  <th>File Upload</th>
                  <th>Bayar</th>
                  <th class="kolomAksi">Aksi</th>
                </tr>
              </thead>
            </table>
          </div>
        </div>
        <div class="card-footer text-end">
          @can('biaya.create')
            <a class="btn btn-info btn-custom1" href="{{ route('finance.biaya.create') }}">Tambah Data</a>
          @endcan
        </div>
      </div>
    </div>
  </div>

  {{-- modal --}}
  <div id="modalKelolaBerkas" class="modal fade bd-example-modal-xl" data-bs-backdrop="static">
    <div class="modal-dialog modal-xl">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title h4">Data File Upload</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-12 pb-4">
              <table class="table" id="tableKelolaBerkas">
                <thead>
                  <tr>
                    <th>Nama File</th>
                    <th>Aksi</th>
                  </tr>
                </thead>
                <tbody>
                  <tr id="rowKosongKelolaBerkas">
                    <td colspan="2" class="text-center">Belum Terdapat Data</td>
                  </tr>
                </tbody>
              </table>
            </div>
            @canany(['biaya.create', 'biaya.edit'])
              <div class="col-12">
                <label>Upload File</label>
                <input type="file" id="file" class="form-control mt-2">
                <button type="button" id="btnKelolaBerkas" class="btn btn-success btn-custom1 btn-sm mt-2" style="width: 100% !important;">Upload File</button>
              </div>
            @endcanany
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="modalLihatDetail" class="modal fade bd-example-modal-xl">
    <div class="modal-dialog modal-xl">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title h4">Data Detail Biaya</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
        </div>
        <div class="modal-body">

        </div>
      </div>
    </div>
  </div>

  <div id="page-bayar">

  </div>

  <div class="modal fade" id="JurnalModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title h4">Laporan Jurnal</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
            </div>
            <div class="modal-body"></div>
        </div>
    </div>
  </div>
  {{-- end modal --}}
@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>
    var biayaId = "{{ $biayaId }}";

    if(parseInt(biayaId) > 0){
      bayar(biayaId);
    }

    let datatable = $('#datatable-serverside').DataTable({
      lengthMenu: lengthMenuDatatable(),
      processing: true,
      serverSide: true,
      ajax: "{{ route('finance.biaya.index') }}",
      columns: [
        {data: 'DT_RowIndex', name: 'id'},
        {data: 'referensi', name: 'referensi'},
        // {data: 'tipe', name: 'tipe'},
        {data: 'vendor.nama', name: 'vendor.nama'},
        {data: 'tanggal', name: 'tanggal'},
        // {data: 'biaya_kirim', name: 'biaya_kirim', class: 'text-end'},
        // {data: 'potongan', name: 'potongan', class: 'text-end'},
        {data: 'total', name: 'total', class: 'text-end'},
        {data: 'status', name: 'status'},
        {data: 'detail', name: 'detail', searchable: false, orderable: false},
        {data: 'file_upload', name: 'file_upload', searchable: false, orderable: false, class: 'text-center'},
        {data: 'bayar', name: 'bayar', searchable: false, orderable: false, class: 'text-center'},
        {data: 'aksi', name: 'aksi', searchable: false, orderable: false},
      ],
      order: [[0, 'desc']],
    });

    function hapus(id){
      swal({
        title: "Konfirmasi",
        text: "Apakah anda ingin menghapus data ?",
        type: "warning",
        showCancelButton: true,
        cancelButtonText: "Batal",
        confirmButtonText: "Lanjutkan"
      }).then(function(){
        let url = "{{ route('finance.biaya.destroy', ':id') }}";
        url = url.replace(':id', id);
        sendJson(url, {_token: "{{ csrf_token() }}"}, rSends);
      })
    }

    function rSends(data) {
      let titles = data.type == "success" ? "Sukses" : (data.type == "error" ? "Gagal" : "Info");
      swal({
        title: titles,
        text: data.response,
        type: data.type,
        confirmButtonText: "OK"
      }).then(function() {
        if (data.type == "success") {
          datatable.ajax.reload();
        }
      })
    }

    function kelolaBerkas(id){
      IDs = id;
      let url = "{{ route('finance.biaya.read-file', ':id') }}";
      url = url.replace(':id', id);

      sendJson(url, {_token: "{{ csrf_token() }}",}, rKelolaBerkas);
    }

    function rKelolaBerkas(data){
      jmlBerkasAll = data.length;
      if(data.length > 0){
        $('#rowKosongKelolaBerkas').hide();
      }

      $.each(data, function(i, v) {
        var url = "{{ asset('uploads/bayar-invoice/') }}" + '/' + v.nama_file;
        var link = '<a href="' + url + '" target="_blank">' + v.nama_file + '</a>';

        var row = '<tr class="trFile trFile'+v.id+'"><td>' + link + '</td><td><button type="button" title="Hapus File" onclick="hapusFile(\''+v.id+'\')" class="btn btn-danger btn-custom5 btn-sm"><span class="mdi mdi-delete"></span></button></td></tr>';

        $('#tableKelolaBerkas tbody').append(row);
      });

      swal.close();
      $('#modalKelolaBerkas').modal('show');
    }

    $('#btnKelolaBerkas').on('click', function(e){
      if($('#file').val() != null && $('#file').val() != ''){
        var data = new FormData();
        data.append('_token', "{{ csrf_token() }}");
        var file = $('#file')[0].files;
        data.append('file', file[0]);

        let url = "{{ route('finance.biaya.upload-file', ':id') }}";
        url = url.replace(':id', IDs);

        uploads(url, data, rSendsUpload);

      }else{
        swal('Perhatian', 'Pastikan Sudah Memilih File yang Akan Diupload', 'warning');
      }
    });

    function rSendsUpload(data) {
      var titles = data.type == "success" ? "Sukses" : (data.type == "error" ? "Gagal" : "Info");
      swal({
        title: titles,
        text: data.response,
        type: data.type,
        confirmButtonText: "OK"
      }).then(function() {
          if (data.type == "success") {
            $('#file').val('');
            jmlBerkasAll = parseInt(jmlBerkasAll)+1;
            if(jmlBerkasAll > 0){
              $('#rowKosongKelolaBerkas').hide();
            }

            var url = "{{ asset('uploads/bayar-invoice/') }}" + '/' + data.nama_file;
            $('#tableKelolaBerkas tbody').append(
              '<tr class="trFile trFile'+data.id+'">'+
                '<td><a href="'+url+'" target="_blank">'+data.nama_file+'</a></td>'+
                '<td><button type="button" title="Hapus File" onclick="hapusFile(\''+data.id+'\')" class="btn btn-danger btn-custom5 btn-sm"><span class="mdi mdi-delete"></span></button></td>'+
              '</tr>'
            );
          }
      })
    }

    $('#modalKelolaBerkas').on('hidden.bs.modal', function(e){
      $('#rowKosongKelolaBerkas').show();
      $('.trFile').remove();
      $('#file').val('');
      IDs = null;
      jmlBerkasAll = 0;
    });

    var IDs2 = null;
    function hapusFile(id){
      IDs2 = id;

      let url = "{{ route('finance.biaya.remove-file', ':id') }}";
      url = url.replace(':id', id);

      sendJson(url, {_token: "{{ csrf_token() }}"}, rHapusFile);
    }

    function rHapusFile(data){
      var titles = data.type == "success" ? "Sukses" : (data.type == "error" ? "Gagal" : "Info");
      swal({
        title: titles,
        text: data.response,
        type: data.type,
        confirmButtonText: "OK"
      }).then(function() {
        if (data.type == "success") {
          $('.trFile'+IDs2).remove();
          jmlBerkasAll = parseInt(jmlBerkasAll)-1;
          if(jmlBerkasAll <= 0){
            $('#rowKosongKelolaBerkas').show();
          }
          IDs2 = null;
        }
      });
    }

    function lihatDetail(id)
    {
      let url = "{{ route('finance.biaya.detail', ':id') }}";
      url = url.replace(':id', id);
      sends(url, {_token: "{{ csrf_token() }}"}, rDetail);
    }

    function rDetail(view)
    {
      swal.close();
      $('#modalLihatDetail').modal('show');
      $('#modalLihatDetail .modal-body').html(view);
    }

    function bayar(id)
    {
      let url = "{{ route('finance.bayar-biaya.index', ':id') }}";
      url = url.replace(':id', id);
      $.ajax({
        url: url,
        type: "GET",
        cache: false,
        beforeSend: beforeAjax(),
        success: rBayar,
        error: errorSend
      })
    }

    function rBayar(view)
    {
      swal.close();
      $('#page-bayar').html(view);
      $('#modalBayar').modal('show');
      $('.select2bayarModal').select2({
        dropdownParent: $('#bayar.modal'),
        width: '100%'
      });
    }

    function selectNomorRekening(e){
      let id = $(e).val();
      let rekening = $(e).find(':selected').data('rekening');
      let info_rekening_perusahaan = $(e).find(':selected').data('info_rekening_perusahaan');
      if(rekening == 1){
        $('#nomor_rekening').val(info_rekening_perusahaan);
        $('#input_rekening').show();
      }else{
        $('#nomor_rekening').val('');
        $('#nomor_rekening').removeClass('required');
        $('#input_rekening').hide();
      }
    }

    const submitBayar = () => {
      event.preventDefault();
      if(cekForm('form-bayar') == true){
        let form = $('#form-bayar');
        let data = {
          _token: "{{ csrf_token() }}",
          biaya_id: form.find('input[name=biaya_id]').val(),
          tanggal: form.find('input[name=tanggal]').val(),
          metode_pembayaran: form.find('select[name=metode_pembayaran]').val(),
          // nomor_rekening: form.find('select[name=nomor_rekening]').val(),
          keterangan: form.find('textarea[name=keterangan]').val(),
          jumlah_bayar: form.find('input[name=jumlah_bayar]').val().replace(/\./g, '').replace(/\,/g, '.'),
          nomor_transaksi_bank: form.find('input[name=nomor_transaksi_bank]').val(),
        }

        let url = "{{ route('finance.bayar-biaya.store', ':id') }}";
        url = url.replace(':id', data.biaya_id);
        sendJson(url, data, rSendsBayar);
      }
    }

    function rSendsBayar(data){
      var titles = data.type == "success" ? "Sukses" : (data.type == "error" ? "Gagal" : "Info");
      swal({
        title: titles,
        text: data.response,
        type: data.type,
        confirmButtonText: "OK"
      }).then(function() {
        if (data.type == "success") {
          $('#bayar').modal('hide');
          bayar(data.data.biaya_id);
          datatable.ajax.reload();
        }
      })
    }

    function descBayar(e){
      let jumlah_bayar = $(e).val().replace(/\./g, '').replace(/\,/g, '.');
      let kurang_bayar = parseFloat($(e).data('kurang'));
      let kurang = kurang_bayar - jumlah_bayar;
      if(kurang >= 0){
        $('#desc-bayar').addClass('text-danger');
        $('#desc-bayar').html('Kurang Rp. ' + formatNumber(kurang));
      }else{
        $('#desc-bayar').removeClass('text-danger');
        $('#desc-bayar').html('Kembalian Rp. ' + formatNumber(kurang));
      }
    }

    function lihatJurnal(id) {
      $('#JurnalModal').modal('show');
      let modal = $('#JurnalModal');
      modal.find('.modal-body').html('<div class="text-center"><div class="spinner-border" role="status"><span class="visually-hidden">Loading...</span></div></div>');

      $.ajax({
        method: "GET",
        url: "{{ url('jurnal/biaya') }}",
        data: {
          biaya_id: id,
        },
        success: function(result) {
          if(result.type == 'error'){
            modal.find('.modal-body').html(result.response);
          }else{
            modal.find('.modal-body').html(result)
          }
        },
        error: function(xhr, status, error) {
          console.log(xhr);
          modal.find('.modal-body').html(xhr.responseText);
        }
      })
    }
  </script>
@endpush