@extends('adminlte::page')

@section('content')
<?php Fun::lang() ?>
<div class="title-page">
    <div class="page-bar">
        <ul class="page-breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> Dashboard</a></li>
            <li><a href="#">Report Accounting</a></li>
            <li><a href="#">Payable Note (PO)</a></li>
        </ul>
    </div>
</div>
<div class="page">
    <div class="top-content">
        <div class="row">
            <div class="col-sm-12 col-xs-12">
                <div class="title-add">
                    <div class="pull-left">
                        <h3>Payable Note (PO)</h3>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12 col-xs-12">
            <form action="{{url('realty/get-payable-note-print-po')}}" method="POST">
                @csrf
                <div class="form-search">
                    <div class="row">
                        <div class="col-xs-12 col-sm-3 col-md-3">
                            <div class="form-group">
                                <strong>Project</strong>
                                {!! Form::select('projects', $projects, null, ['class' => 'form-control select2 form-control projects']) !!}
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-12 col-md-12 text-right">
                            <button type="button" class="button_primary btn-sm search" onclick="searching()">
                                <span class="fa fa-search"> Search</span></button>&nbsp
                            @can('Accounting-Report-PayableNote-Project-Print')
                            <button type="submit" class="button_primary btn-sm search"><span class="fa fa-print"> Print</span></button>
                            @endcan
                        </div>

                    </div>
                </div>
                {!! Form::close() !!}
        </div>
    </div>
    <div class="box-body table-responsive">
        <table id="payablenote-report" class="table table-striped table-bordered table-hover nowrap">
            <thead>
                <tr>
                    <th>No</th>
                    <th>Deposit Date</th>
                    <th>Client Name</th>
                    <th>Client Phone</th>
                    <th>Client Address</th>
                    <th>Project Name</th>
                    <th>Category</th>
                    <th>Street No</th>
                    <th>House No</th>
                    <th>Zone</th>
                    <th>Item Code</th>
                    <th>House Size</th>
                    <th>Land Size</th>
                    <th>Sale Price</th>
                    <th>Deposite</th>
                </tr>
            </thead>
            <tbody class="tbody">
            </tbody>
            <tfoot class="tfoot">
                <tr>
                    <td colspan="13" style="text-align:right;">Total :</td>
                    <td></td>
                    <td></td>
                </tr>
            </tfoot>
        </table>
    </div>
</div>

@endsection
@section('js')
<script type="text/javascript" src="{{asset('assets/controller/report-payable-note-administrator-po.js')}}"></script>

<script type="text/javascript">
    function searching() {

        var projects = $('.projects').val();
        var table = '';
        var i = 0;
        var total_sale_receive = 0;
        var total_sale_price = 0;
        $('.tbody').empty();
        $('.tfoot').empty();
        $.ajax({
            method: 'POST',
            dataType: 'json',
            url: '/realty/get-payable-note-po-data',
            async: false,
            data: {

                _token: '{{ csrf_token() }}',
                projects: projects,
            },
            success: function(response) {
                $.each(response, function(index, val) {
                    var dateTimeSplit = val.sale_date.split(' ');
                    st2 = dateTimeSplit[0].split('-');


                    yr = st2[0];
                    mo = st2[1];
                    dy = st2[2];
                    var sale_date = dy + '-' + mo + '-' + yr;
                    var sh = val.item_size_house == null ? '' : val.item_size_house + ' m<sup>2</sup>';
                    i++;
                    table += "<tr class='remove'>" +
                        "<td style='text-align: center;'>" + i + "</td>" +
                        "<td style='text-align: center;'>" + sale_date + "</td>" +
                        "<td>" + val.client_fullname + "</td>" +
                        "<td>" + val.client_phone1 + "</td>" +
                        "<td>" + val.client_address + "</td>" +
                        "<td>" + val.project_name + "</td>" +
                        "<td>" + val.category_name + "</td>" +
                        "<td>" + val.item_street + "</td>" +
                        "<td>" + val.item_house + "</td>" +
                        "<td>" + val.item_zone + "</td>" +
                        "<td>" + val.item_name + "</td>" +
                        "<td>" + sh + "</td>" +
                        "<td>" + val.item_size_land + ' m<sup>2</sup>' + "</td>" +
                        "<td style='text-align: right;'>$" + parseFloat(val.item_price).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,') + "</td>" +
                        "<td style='text-align: right;'>$" + parseFloat(val.sale_receive).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,') + "</td>" +
                        "</tr>";

                    total_sale_receive += parseFloat(val.sale_receive);
                    total_sale_price += parseFloat(val.item_price);
                });

                $('.dataTables_filter').hide();
                $('.dataTables_info').hide();
                $('.pagination').hide();
                $('.dataTables_length').hide();
                var tfoot = `<tr>
                            <td colspan="13" class="text-right">Total : </td>
                                <td style='text-align: right;'>$${parseFloat(total_sale_price).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,')}</td>
                                <td style='text-align: right;'>$${parseFloat(total_sale_receive).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,')}</td>
                            </tr>`;

                $('.tbody').append(table);
                $('.tfoot').append(tfoot);

            },

        });
    }
</script>
@endsection