report_laporan_stok2.blade.php

@extends('templates/main')
@section('css')
<link rel="stylesheet" href="{{ asset('css/report/report_transaction/style.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/css/datedropper.css') }}">

<style>
    * {
        font-weight: bold
    }

    /* HTML Table Freeze Column and Row by igniel.com */
    .table-responsive {
      height: 80vh;
      /*margin: 2rem 0;*/
      overflow: auto;
      scroll-snap-type: both mandatory;
      white-space: nowrap;
    }
    .table-responsive .table {
      margin: 0;
      overflow: unset;
    }
    table {
      border-collapse: collapse;
      border-spacing: 0;
      width: 100%;
    }
    th, td {
      padding: 1rem 2.5rem;
      text-align: left;
    }
    thead th {
      border-bottom: 1px solid #ccc;
      font-weight: 600;
      top: 0;
      z-index: 1;
    }
    th.tp {
      background-color: #fff;
      z-index: 2;
    }
    tbody th {
      left: 0;
      text-align: left;
    }
    tbody th, th.tp {
      border-right: 1px solid #ccc;
    }
    tr {
      padding: 0;
    }
    td {
      color: #000000;
      vertical-align: top;
    }
    tbody tr:nth-child(odd) th {
      background-color: #fff;
    }
    thead th, tbody tr:nth-child(even) th, tr:nth-child(even) td {
      background-color: #f4f4f4; /* striped background color */
    }

    thead th, tbody th {
      position: sticky;
      -webkit-position: sticky;
    }
    @media screen and (max-width: 680px) {
      .table-responsive {height: 70vh}
    }
    @media screen and (max-width: 480px) {
      .table-responsive {height: 60vh}
    }

    kbd {
        background-color: #D0D0D0;
        color: #000000;
    }
</style>
@endsection
@section('content')
<div class="row">
    <div class="col-12 grid-margin">
        <div class="card card-noborder b-radius">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h4 class="page-title">Laporan Stok 
                    <p id="tgl"></p>
                </h4>

                <div class="row">
                    <div class="col-2">
                        <div class="form-group">
                            <div class="input-group">
                                <input type="text" class="form-control form-control-lg" placeholder="Cari"
                                    aria-describedby="basic-addon2" id="cari" name="cari">
                            </div>
                        </div>
                    </div>
                    <div class="col-2">
                        <div class="form-group">
                            <div class="input-group">
                                <select class="form-control form-control-lg" name="pajak" id="pajak">
                                    <option value="">Semua</option>
                                    <option value="ppn">PPN</option>
                                    <option value="non_ppn">Non PPN</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="row">
                            <div class="col-6">
                                <div class="input-group">
                                    <input type="date" class="form-control form-control-lg" placeholder="Tanggal"
                                        aria-label="Search" aria-describedby="basic-addon2" id="tgl_awal"
                                        name="tgl_awal">
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="input-group">
                                    <input type="date" class="form-control form-control-lg" placeholder="Tanggal"
                                        aria-label="Search" aria-describedby="basic-addon2" id="tgl_akhir"
                                        name="tgl_akhir">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="row">
                            <div class="form-group mr-2">
                                <button class="btn btn-primary" id="btn-search" type="submit">
                                    <i class="mdi mdi-find-replace"></i>
                                </button>
                            </div>
                             <div class="form-group mr-2">
                                <form action="{{url('report/laporan_stok_awal/export')}}" target="_blank" method="get">
                                    @csrf
                                    <input type="hidden" name="cari" id="cari1">
                                    <input type="hidden" name="tgl_awal" id="input_tgl_awal1">
                                    <input type="hidden" name="tgl_akhir" id="input_tgl_akhir1">
                                    <input type="hidden" name="pajak" id="pajak1">
                                    <button class="btn btn-success" id="btn-export" type="submit">
                                        <i class="mdi mdi-file-excel"></i>
                                    </button>
                                </form>
                            </div>
                            <div class="form-group">
                                <form action="{{url('report/laporan_stok_awal/print')}}" target="_blank" method="get">
                                    @csrf
                                    <input type="hidden" name="cari" id="cari2">
                                    <input type="hidden" name="tgl_awal" id="input_tgl_awal2">
                                    <input type="hidden" name="tgl_akhir" id="input_tgl_akhir2">
                                    <input type="hidden" name="pajak" id="pajak2">
                                    <button class="btn btn-secondary " id="btn-export" type="submit">
                                        <i class="mdi mdi-eye"></i>
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-2">
                        <kbd>Total Item</kbd><br> ppn : <span id="jumlah_ppn"></span><br>non ppn : <span
                            id="jumlah_non_ppn"></span> <br>Total : <span id="jumlah_barang"></span>
                    </div>
                    {{-- <div class="col-1">
                        <p>Item (status pajak) : </p> PPN : <span id="jumlah_ppn"></span><br>NonPPN : <span
                            id="jumlah_non_ppn"></span>
                    </div> --}}
                    <div class="col-2">
                        <kbd>Total Awal</kbd> <br>besar : <span id="awal_besar"></span><br>kecil : <span
                            id="awal_kecil"></span>
                    </div>
                    <div class="col-2">
                        <kbd>Total Masuk</kbd> <br>besar : <span id="masuk_besar"></span><br>kecil : <span
                            id="masuk_kecil"></span>
                    </div>
                    <div class="col-2">
                        <kbd>Total Keluar</kbd><br>besar : <span id="keluar_besar"></span><br>kecil : <span
                            id="keluar_kecil"></span>
                    </div>
                    <div class="col-2">
                        <kbd>Total Akhir</kbd><br>besar : <span id="akhir_besar"></span><br>kecil : <span
                            id="akhir_kecil"></span>
                    </div>
                    <div class="col-2">
                        <kbd>Nilai Akhir</kbd><br>besar : <span id="nilai_besar"></span><br>kecil : <span
                            id="nilai_kecil"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-12 grid-margin">
        <div class="card card-noborder b-radius">
            <div class="card-body">
                <div class="col-12">
                    <div class="table-responsive">
                        <div class="col-12 dis-none mb-3" id="loading">
                            <center>
                                <img src="https://i.gifer.com/ZKZx.gif" width="20px" alt="">
                            </center>
                        </div>
                        <table class="table table-custom">
                            <thead>
                                <tr>
                                    <th scope="row">Nama Barang</th>
                                    <th scope="col">Stok Awal<br>(besar)</th>
                                    <th scope="col">Stok Awal<br>(kecil)</th>

                                    <th scope="col">Stok Masuk<br>(besar)</th>
                                    <th scope="col">Harga Beli<br>(besar)</th>
                                    <th scope="col">Total Nilai Masuk<br>(besar)</th>
                                    <th scope="col">Stok Masuk<br>(kecil)</th>
                                    <th scope="col">Harga Beli<br>(kecil)</th>
                                    <th scope="col">Total Nilai Masuk<br>(kecil)</th>

                                    <th scope="col">Stok Keluar<br>(besar)</th>
                                    <th scope="col">Harga Jual<br>(besar)</th>
                                    <th scope="col">Total Nilai Keluar<br>(besar)</th>
                                    <th scope="col">Stok Keluar<br>(kecil)</th>
                                    <th scope="col">Harga Jual<br>(kecil)</th>
                                    <th scope="col">Total Nilai keluar<br>(kecil)</th>

                                    <th scope="col">Stok Akhir<br>(besar)</th>
                                    <th scope="col">Stok Akhir<br>(kecil)</th>

                                    <th scope="col">Stok Dalam Rupiah<br>(besar)</th>
                                    <th scope="col">Stok Dalam Rupiah<br>(kecil)</th>

                                    <th>Status Pajak</th>
                                </tr>
                            </thead>
                            <tbody id="data_tr"></tbody>
                            <tfoot id="data_tf"></tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('script')
<script src="{{ asset('plugins/js/datedropper.js') }}"></script>
<script src="{{ asset('js/report/report_transaction/script.js') }}"></script>
<script>
    $(document).ready(function () {
        $.ajax({
            url: "{{url('report/getLaporan_stok')}}",
            type: "GET",
            beforeSend: function () {
                $('#loading').removeClass('dis-none');
            },
            success: function (data) {
                $('#loading').addClass('dis-none');
                $('#tgl').text(data.tgl);
                var laporan = data.data;
                var html = '';
                laporan.forEach(function (item) {
                    var tgl = new Date(item.created_at).toLocaleDateString('id-ID', {
                        weekday: 'long',
                        day: '2-digit',
                        month: 'long',
                        year: 'numeric',
                    });
                    
                    html += '<tr>' +
                        '<th scope="row" style="color: #292929"> <span>' + item.nama_barang+'</span><span class="d-block mt-2 txt-light">' + item.kode_barang + '</span></th>' +
                        '<td scope="row">' + item.stok_awal_besar + '</td>' +
                        '<td scope="row">' + item.stok_awal_kecil + '</td>' +

                        '<td scope="row" style="color: #4CDB4C"> <i class="mdi mdi-arrow-down"></i>' + item.stok_masuk_besar + '</td>' +
                        '<td scope="row">' + item.harga_beli_besar + '</td>' +
                        '<td scope="row" style="color: #292929"> - ' + item.total_nilai_besar + '</td>' +
                        '<td scope="row" style="color: #4CDB4C"> <i class="mdi mdi-arrow-down"></i>' + item.stok_masuk_kecil + '</td>' +
                        '<td scope="row">' + item.harga_beli_kecil + '</td>' +
                        '<td scope="row" style="color: #292929"> - ' + item.total_nilai_kecil + '</td>' +

                        '<td scope="row" style="color: #0d6efd"> <i class="mdi mdi-arrow-up"></i>' + item.stok_keluar_besar + '</td>' +
                        '<td scope="row">' + item.harga_jual_besar + '</td>' +
                        '<td scope="row" style="color: #292929"> + ' + item.total_nilai_jual_besar + '</td>' +
                        '<td scope="row" style="color: #0d6efd"> <i class="mdi mdi-arrow-up"></i>' + item.stok_keluar_kecil + '</td>' +
                        '<td scope="row">' + item.harga_jual_kecil + '</td>' +
                        '<td scope="row" style="color: #292929"> + ' + item.total_nilai_jual_kecil + '</td>' +

                        '<td scope="row">' + item.stok_akhir_besar + '</td>' +
                        '<td scope="row">' + item.stok_akhir_kecil + '</td>' +

                        '<td scope="row">' + item.stok_rupiah_besar + '</td>' +
                        '<td scope="row">' + item.stok_rupiah_kecil + '</td>' +

                        '<td scope="row">' + item.status_pajak + '</td>' +
                        '</tr>';
                });
                $('#data_tr').html(html);
                $('#jumlah_barang').text(data.total_barang);
                $('#jumlah_ppn').text(data.ppn);
                $('#jumlah_non_ppn').text(data.nonppn);
                $('#awal_besar').text(data.stok_awal_besar);
                $('#awal_kecil').text(data.stok_awal_kecil);
                $('#masuk_besar').text(data.stok_masuk_besar);
                $('#masuk_kecil').text(data.stok_masuk_kecil);
                $('#keluar_besar').text(data.stok_keluar_besar);
                $('#keluar_kecil').text(data.stok_keluar_kecil);
                $('#akhir_besar').text(data.stok_akhir_besar);
                $('#akhir_kecil').text(data.stok_akhir_kecil);
                $('#nilai_besar').text(data.nilai_akhir_besar);
                $('#nilai_kecil').text(data.nilai_akhir_kecil);
            }
        })

        $('#btn-search').on('click', function(){
            var tgl_awal = $('#tgl_awal').val();
            var tgl_akhir = $('#tgl_akhir').val();
            var cari = $('#cari').val();
            var pajak = $('#pajak').val();
            console.log(pajak);
            $('#cari1').val(cari);
            $('#input_tgl_awal1').val(tgl_awal);
            $('#input_tgl_akhir1').val(tgl_akhir);
            $('#pajak1').val(pajak);

            $('#cari2').val(cari);
            $('#input_tgl_awal2').val(tgl_awal);
            $('#input_tgl_akhir2').val(tgl_akhir);
            $('#pajak2').val(pajak);

            $.ajax({
            url: "{{url('/report/getLaporan_stok_awal/search')}}",
            type: "GET",
            beforeSend: function () {
                $('#btn-search').addClass('disabled');
                $('#btn-export').addClass('disabled');
                $('#loading').removeClass('dis-none');
            },
            data: {
                tgl_awal: tgl_awal,
                tgl_akhir: tgl_akhir,
                cari: cari,
                pajak: pajak
            },
            success: function (data) {
                $('#loading').addClass('dis-none');
                $('#btn-search').removeClass('disabled');
                $('#btn-export').removeClass('disabled');
                $('#tgl').text(data.tgl);
                var laporan = data.data;
                var html = '';
                laporan.forEach(function (item) {
                    var tgl = new Date(item.created_at).toLocaleDateString('id-ID', {
                        weekday: 'long',
                        day: '2-digit',
                        month: 'long',
                        year: 'numeric',
                    });
                    
                    html += '<tr>' +
                    '<th scope="row" style="color: #292929"> <span>' + item.nama_barang+'</span><span class="d-block mt-2 txt-light">' + item.kode_barang + '</span></th>' +
                    '<td scope="row">' + item.stok_awal_besar + '</td>' +
                    '<td scope="row">' + item.stok_awal_kecil + '</td>' +

                    '<td scope="row" style="color: #4CDB4C"> <i class="mdi mdi-arrow-down"></i>' + item.stok_masuk_besar + '</td>' +
                    '<td scope="row">' + item.harga_beli_besar + '</td>' +
                    '<td scope="row" style="color: #292929"> - ' + item.total_nilai_besar + '</td>' +
                    '<td scope="row" style="color: #4CDB4C"> <i class="mdi mdi-arrow-down"></i>' + item.stok_masuk_kecil + '</td>' +
                    '<td scope="row">' + item.harga_beli_kecil + '</td>' +
                    '<td scope="row" style="color: #292929"> - ' + item.total_nilai_kecil + '</td>' +

                    '<td scope="row" style="color: #0d6efd"> <i class="mdi mdi-arrow-up"></i>' + item.stok_keluar_besar + '</td>' +
                    '<td scope="row">' + item.harga_jual_besar + '</td>' +
                    '<td scope="row" style="color: #292929"> + ' + item.total_nilai_jual_besar + '</td>' +
                    '<td scope="row" style="color: #0d6efd"> <i class="mdi mdi-arrow-up"></i>' + item.stok_keluar_kecil + '</td>' +
                    '<td scope="row">' + item.harga_jual_kecil + '</td>' +
                    '<td scope="row" style="color: #292929"> + ' + item.total_nilai_jual_kecil + '</td>' +


                    '<td scope="row">' + item.stok_akhir_besar + '</td>' +
                    '<td scope="row">' + item.stok_akhir_kecil + '</td>' +

                    '<td scope="row">' + item.stok_rupiah_besar + '</td>' +
                    '<td scope="row">' + item.stok_rupiah_kecil + '</td>' +

                    '<td scope="row">' + item.status_pajak + '</td>' +
                    '</tr>';
                });
                $('#data_tr').html(html);

                $('#jumlah_barang').text(data.total_barang);
                $('#jumlah_ppn').text(data.ppn);
                $('#jumlah_non_ppn').text(data.nonppn);
                $('#awal_besar').text(data.stok_awal_besar);
                $('#awal_kecil').text(data.stok_awal_kecil);
                $('#masuk_besar').text(data.stok_masuk_besar);
                $('#masuk_kecil').text(data.stok_masuk_kecil);
                $('#keluar_besar').text(data.stok_keluar_besar);
                $('#keluar_kecil').text(data.stok_keluar_kecil);
                $('#akhir_besar').text(data.stok_akhir_besar);
                $('#akhir_kecil').text(data.stok_akhir_kecil);
                $('#nilai_besar').text(data.nilai_akhir_besar);
                $('#nilai_kecil').text(data.nilai_akhir_kecil);

                $('#btn-export').removeClass('dis-none');
            

            }
        });
        // }
    });

});
</script>

@endsection