@extends('layouts.master')

@push('css')
@endpush

@section('content')
<style type="text/css">
    .tborder {border: 1px solid black !important;}
    table.customtble tbody tr td{
        padding: 0px 5px 0px 5px;
        /*border:1px solid #000;*/
        font-size: 13px;
        color: gray;

    }
    table.customtble thead tr th{
        padding: 0px 5px 0px 5px;
        /*border:1px solid #000;*/
        font-size: 14px;
        font-weight: bold;
    }
    @media print{
        table.customtble thead tr th{
            font-size: 11px;
        }
        table.customtble tbody tr td{
            font-size: 10px;
        }
        body * { visibility: hidden; margin-top: 0px !important;}
        .printableArea, .printableArea *{ visibility: visible !important; }
        table{ border-collapse: collapse;}
        @page {size: landscape}
    }
</style>
<div class="container-fluid">
    <div class="printableArea" id="printableArea">  
        <form id="FormId" class="form-horizontal" method="POST" action="{{ route('itemLedger') }}">   
            {{ csrf_field() }}
            <div class="form-horizontal form-body hidden-print">
                <div class="row">
                    <div class="col-md-12">
                        <div class="panel panel-default">

                            <div class="panel-body">
                                <div class="row">
                                    <div class="col-md-5">
                                        <div class="form-group">
                                            <label for="product_id" class="col-sm-3 control-label">Product Name</label>
                                            <div class="col-sm-8">
                                                <select id="product_id" name="product_id" class="form-control" >
                                                    <option value=""></option>
                                                </select>
                                            </div>
                                        </div> 
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="fromdate" class="col-sm-4 control-label">From Date</label>
                                            <div class="col-sm-7">
                                                <input type="text" name="fromdate" id="fromdate" class="form-control" autocomplete="false" placeholder="dd/mm/yyyy" value="01-01-1970" />
                                            </div>

                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="fromdate" class="col-sm-4 control-label">To Date</label>
                                            <div class="col-sm-7">
                                                <input type="text" name="todate" id="todate" class="form-control" autocomplete="false" placeholder="dd/mm/yyyy" value="01-01-1970" />
                                            </div>

                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-11 col-lg-11 col-sm-11 col-xs-12 text-right">
                                        <span class="spin-loader"></span>
                                    </div>
                                    <div class="col-md-1  text-right">
                                        <button id="submitbutton" type="button" class="btn btn-primary"><i class="fa fa-search"></i> Run</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">

                    <div class="panel-body">
                        <div class="clearfix">
                            <div class="pull-left ">
                                <!-- <h3 class="logo invoice-logo"><img src='{{asset('plugins/images/'.$business->business_logo)}}' width="200" alt='logo here' /></h3> -->
                            </div>
                        </div>
                        <hr class="hidden">
                        <div class="row">
                            <div class="col-md-12"><h3 class="text-center">Item Ledger</h3></div>
                        </div>
                        <div class="row hidden">
                            <div class="col-md-12">
                                <table style=" width: 100%;" cellspacing="0" id="podetailstbl" class="customtble">
                                    <tr>
                                        <td style="width: 50% ">
                                            <p><strong>From </strong>: <span id="fromdateshow">01-Jan-1970</span>
                                                <br>
                                                <strong>To </strong>: <span id="todateshow">01-Jan-1970</span>
                                                <br>
                                                <strong></strong> <span id="mode">&nbsp;</span>
                                            </p>

                                        </td>
                                        <td style="width: 0.5%; border-bottom: none !important; border-top: none !important;"></td>
                                        <td style="width: 50%">
                                            <p><strong>Statement Date: </strong> 02-Aug-2025                                                <br>
                                                <strong></strong> <span id="mode">&nbsp;</span>
                                                <br>
                                                <strong></strong> <span id="mode">&nbsp;</span>
                                            </p>

                                        </td>
                                    </tr>
                                </table>

                            </div><!-- end col -->
                        </div>
                        <!-- end row -->

                        <div class="m-h-50">&nbsp;</div>
                        <div class="row hidden">
                            <div class="col-md-12">
                                <div class="btn-group m-r-10">
                                    <button data-toggle="dropdown" class="btn btn-default btn-outline dropdown-toggle waves-effect waves-light" type="button">
                                        Show/Hide Columns <span class="caret"></span>
                                    </button>
                                    <ul role="menu" id="shCol" class="dropdown-menu animated lightSpeedIn icheck-list">
                                        
                                        <li>
                                            <div class="ckbox ckbox-primary">
                                                <input class="check" data-checkbox="icheckbox_square-red" type="checkbox" checked="checked" id="checkserial" value="0" >
                                                <label for="checkserial">#</label>
                                            </div>
                                        </li>

                                        <li>
                                            <div class="ckbox ckbox-primary">
                                                <input class="check" data-checkbox="icheckbox_square-red" type="checkbox" checked="checked" id="checktrans" value="1">
                                                <label for="checktrans">Trans#</label>
                                            </div>
                                        </li>
                                        
                                        <li>
                                            <div class="ckbox ckbox-primary">
                                                <input class="check" data-checkbox="icheckbox_square-red" type="checkbox" checked="checked" id="checkdate" value="2">
                                                <label for="checkdate">Date</label>
                                            </div>
                                        </li>

                                         <li>
                                            <div class="ckbox ckbox-primary">
                                                <input class="check" data-checkbox="icheckbox_square-red" type="checkbox" checked="checked" id="checkparticular" value="3">
                                                <label for="checkparticular">Particular</label>
                                            </div>
                                        </li>

                                        <li>
                                            <div class="ckbox ckbox-primary">
                                                <input class="check" data-checkbox="icheckbox_square-red" type="checkbox" checked="checked" id="checktype" value="4">
                                                <label for="checktype">Type</label>
                                            </div>
                                        </li>
                                        
                                        <li>
                                            <div class="ckbox ckbox-primary">
                                                <input class="check" data-checkbox="icheckbox_square-red" type="checkbox" checked="checked" id="checkqtyreceipt" value="5">
                                                <label for="checkqtyreceipt">Qty Receipt</label>
                                            </div>
                                        </li>
                                        
                                        <li>
                                            <div class="ckbox ckbox-primary">
                                                <input class="check" data-checkbox="icheckbox_square-red" type="checkbox" checked="checked" id="checkqtyissue" value="6">
                                                <label for="checkqtyissue">Qty Issue</label>
                                            </div>
                                        </li>
                                        
                                        <li>
                                            <div class="ckbox ckbox-primary">
                                                <input class="check" data-checkbox="icheckbox_square-red" type="checkbox" checked="checked" id="checkbatch" value="7">
                                                <label for="checkbatch">Batch#</label>
                                            </div>
                                        </li>
                                        
                                        <li>
                                            <div class="ckbox ckbox-primary">
                                                <input class="check" data-checkbox="icheckbox_square-red" type="checkbox" checked="checked" id="checkrate" value="8">
                                                <label for="checkrate">Rate</label>
                                            </div>
                                        </li>
                                        
                                        <li>
                                            <div class="ckbox ckbox-primary">
                                                <input class="check" data-checkbox="icheckbox_square-red" type="checkbox" checked="checked" id="checkamount" value="9">
                                                <label for="checkamount">Amount</label>
                                            </div>
                                        </li>
                                        
                                        <li>
                                            <div class="ckbox ckbox-primary">
                                                <input class="check" data-checkbox="icheckbox_square-red" type="checkbox" checked="checked" id="checkbalance" value="10">
                                                <label for="checkbalance">Balance</label>
                                            </div>
                                        </li>
                                        
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="m-h-50">&nbsp;</div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="table-responsive">
                                    <!-- <table class="table table-bordered m-t-30" id="tblproducts"> -->
                                    <table id="tblreport" class="display nowrap table-bordered " style="width: 100%;">
                                        <thead>
                                            <tr>
                                                <th>#</th>
                                                <th class="text-center">Sale Order#</th>
                                                <th class="text-center">Date</th>
                                                <th class="text-center">Customer</th>
                                                <th class="text-center">Type</th>
                                                <th class="text-center">Qty Receipt</th>
                                                <th class="text-center">Qty Issue</th>
                                                <th class="text-center">Batch</th>
                                                <th class="text-center">Rate</th>
                                                <th class="text-center">Amount</th>
                                                <th class="text-center">Balance</th>
                                            </tr>
                                        </thead>
                                        <tbody><tr><td>Data not found</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <hr>
                        <div class="hidden-print">
                            <div class="pull-right">
                                <a id="printbutton" href="#" class="btn btn-inverse waves-effect waves-light hidden" onclick='window.print();'  ><i class="fa fa-print"></i></a>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>    
    <!-- end row -->
</div>
<script>
    $(document).ready(function(){
        $('#fromdate').datepicker({
                autoclose: true,
                todayHighlight: true,
                format: "dd-mm-yyyy",
//                viewMode: "months", 
//                minViewMode: "months"
        });

        $('#todate').datepicker({
            autoclose: true,
            todayHighlight: true,
            format: "dd-mm-yyyy",
        });
        
        var shTable;
        $('#submitbutton').click(function(){
            if($('#product_id option:selected').val() === ""){
                swal({
                    title: "Product & Date Should not be empty!",
                    type: "info",
                    confirmButtonText: 'OK!'
                });
                return;
            }
            $('.spin-loader').addClass('fa fa-spin fa-spinner');
            $('#fromdateshow').html('').html($('#fromdate').val());
            $('#todateshow').html('').html($('#todate').val());
            var product_name = $('#product_id option:selected').text();
                product_name = product_name.split('|');
            $.ajax({
                type: 'POST',
                url: $('#FormId').attr('action'),
                data: {fromdate: $('#fromdate').val(), todate: $('#todate').val(), product_id: $('#product_id option:selected').val()},
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': '