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

@section('subhead')
    <title>Atarud MIS - Book Transactions List</title>
@endsection
<link rel="stylesheet" href="{{ asset('dist/persianDatepicker/css/persianDatepicker-default.css') }}" />
@section('subcontent')
    <div class="flex items-center mt-8">
        <h2 class="intro-y text-lg font-medium mr-auto">Book Transaction List</h2>
    </div>

    <div class="grid grid-cols-12 gap-6 mt-5">
        <div class="intro-y col-span-12 flex flex-wrap sm:flex-nowrap items-center mt-2">
            <a href="javascript:;" data-tw-toggle="modal" data-tw-target="#new-transaction" class="btn btn-primary">New Transaction</a>
        </div>
        <!-- BEGIN: Data List -->
        <div class="intro-y col-span-12 overflow-auto lg:overflow-visible">

            <div class="overflow-x-auto">
                <table class="table table-report -mt-2 table-responsive book_datatable">
                    <thead>
                        <tr class="" >
                            <th class="whitespace-nowrap">#</th>
                            <th class="whitespace-nowrap">Book</th>
                            <th class="whitespace-nowrap">Quantity</th>
                            <th class="whitespace-nowrap">Date</th>
                            <th class="whitespace-nowrap">Transaction Type</th>
                            <th class="whitespace-nowrap">Status</th>
                            <th class="whitespace-nowrap" style="text-align: center">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
        <!-- END: Data List -->
    </div>
    @include('../pages/book_transactions/create')
@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 () {}
    });


    });

    function calculateAmount(){

        var quantity = $('#quantity').val();
        var priceToSell = $('#price_to_sell').val();
        if(quantity != null && priceToSell != null){
            var amount = quantity * priceToSell;
            $('#amount').val(amount);
        }
    }
</script>

    <script>
        $('#type_id').on('change', function(){
            var typeId = $(this).val();
            $.ajax({
                method: 'GET',
                url: "{{ route('book.transaction') }}",
                data: {
                    type_id: typeId,
                },
                success: function(response) {
                    console.log(response);
                    jQuery('#item_id').html(response);
                }
            });
        });
    </script>

    <script type="text/javascript">
        $(function() {
            var table = $('.book_datatable').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('book.transaction') }}",
                columns: [{
                        data: 'id',
                        name: 'id'
                    },
                    {
                        data: 'book_id',
                        name: 'book_id'
                    },
                    {
                        data: 'quantity',
                        name: 'quantity'
                    },
                    {
                        data: 'date',
                        name: 'date'
                    },
                    {
                        data: 'transaction_type',
                        name: 'transaction_type'
                    },
                    {
                        data: 'status',
                        name: 'status'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    },
                ]
            });
        });
    </script>
@endsection