@extends('../layout/' . $layout)

@section('subhead')
    <title>Atarud MIS - Tax List</title>
    <link href="{{ asset('dist/css/dataTables.min.css') }}" rel="stylesheet">
@endsection
<link rel="stylesheet" href="{{ asset('dist/persianDatepicker/css/persianDatepicker-default.css') }}" />

@section('subcontent')
    <div class="flex items-center mt-8">

    </div>

    <div class="flex items-center mt-8">
        <h2 class="intro-y text-lg font-medium mr-auto">Tax List</h2>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-12 table-responsive">
                <table class="table table-bordered tax_datatable" id="">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Start Date</th>
                            <th>End Date</th>
                            <th>Amount</th>
                            <th>Payment</th>
                            <th>Status</th>
                            <th width="100px">Action</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
    @include('../pages/transactions/create')
    @include('../pages/transactions/addPayment')
@endsection

@section('script')
    <script src="{{ asset('dist/js/jquery.js') }}"></script>
    <script src="{{ asset('dist/js/dataTables.min.js') }}"></script>
<script src="{{ asset('dist/persianDatepicker/js/persianDatepicker.js') }}"></script>
<script>
        $(function () {

            $(".pdpF2").persianDatepicker({
                months: ["حمل", "ثور", "جوزا", "سرطان", "اسد", "سنبله", "میزان", "عقرب", "قوس", "جدی", "دلو", "حوت"],
                dowTitle: ["شنبه", "یکشنبه", "دوشنبه", "سه شنبه", "چهارشنبه", "پنج شنبه", "جمعه"],
                shortDowTitle: ["ش", "ی", "د", "س", "چ", "پ", "ج"],
                showGregorianDate: !1,
                persianNumbers: !0,
                formatDate: "YYYY/MM/DD",
                selectedBefore: !1,
                selectedDate: null,
                startDate: null,
                endDate: null,
                prevArrow: '\u25c4',
                nextArrow: '\u25ba',
                theme: 'default',
                alwaysShow: !1,
                selectableYears: null,
                selectableMonths: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
                cellWidth: 25, // by px
                cellHeight: 20, // by px
                fontSize: 13, // by px
                isRTL: !1,
                calendarPosition: {
                    x: 0,
                    y: 0,
                },
                onShow: function () {},
                onHide: function () {},
                onSelect: function () {},
                onRender: function () {}
        });


        });
    </script>
    <script type="text/javascript">

        function addPayment(id,amount,payment){
            var toPay = amount - payment;
            $('#transaction_id').val(id);
            $('#amount').val(amount);
            var html =  `<label for="modal-form-3" class="form-label">Payment</label>
            <input id="modal-form-3"  max="${toPay}" value="${toPay}" type="number" name="payment" class="form-control" >`;
            $('#transactionPayment').html(html);

        }

        $('#accountType').on('change',function(){
            var account = $(this).val();
                $.ajax({
                method: 'GET',
                url: "{{ url('/account/getaccounts') }}",
                data: {
                    accountType: account,
                },
                success: function(response) {
                    jQuery('#accounts').html(response);
                    console.log(response);
                }
            });
        })

        $(function() {
            var table = $('.tax_datatable').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('tax') }}",
                },
                columns: [
                    {data: 'id', name: 'id'},
                    {data: 'start_date', name: 'start_date'},
                    {data: 'end_date', name: 'end_date'},
                    {data: 'amount', name: 'amount'},
                    {data: 'payment', name: 'payment'},
                    {data: 'status', name: 'status'},
                    {data: 'action', name: 'action', orderable: false, searchable: false},
                ]
            });
        });

    </script>
@endsection