@extends('admin.layout.master')
@push('css')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.2/css/buttons.dataTables.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

    <style>
        /* General icon styling */
        .transaction {
            display: flex;
            align-items: center;
            margin: 10px 0;
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
        }

        /* Styling for Deposit */
        .deposit {
            color: green; /* Green for deposit */
        }

        .deposit i {
            margin-right: 8px; /* Spacing between icon and text */
            color: green;
            transition: transform 0.3s ease; /* Transition effect */
        }

        .deposit:hover i {
            transform: translateY(-3px); /* Lift the icon on hover */
        }

        /* Styling for Withdrawal */
        .withdrawal {
            color: red; /* Red for withdrawal */
        }

        .withdrawal i {
            margin-right: 8px;
            color: red;
            transition: transform 0.3s ease;
        }

        .withdrawal:hover i {
            transform: translateY(3px); /* Drop the icon on hover */
        }
        .footer-totals th {
            font-weight: bold;
            font-size: 16px;
            text-align: right;
        }

        .footer-totals #totalIn {
            color: green;
            font-size: 20px;
        }

        .footer-totals #totalOut {
            color: red;
            font-size: 20px;

        }

    </style>

@endpush
@section('content')

    <div class="content-body">
        <!-- Column selectors with Export Options and print table -->
        <section id="column-selectors">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                        </div>
                        <div class="card-content">
                            <div class="card-body card-dashboard">

                                <div class="table-responsive">

                                    <div class="widget-body">


                                        {{--                                        <div class="text-danger">--}}
                                        {{--                                            <div>@lang('admin.order_moadal') :--}}
                                        {{--                                                <span id="order_moadal">0</span>--}}
                                        {{--                                            </div>--}}
                                        {{--                                        </div>--}}
                                        <div class="row">
                                            <form action="{{ route('orders_report_print') }}" method="get" id="print_form" target="_blank">
                                                @csrf
                                            </form>
                                            <div class="col-md-4" >

                                                <div class="form-group">
                                                    <label for="from_date">@lang('admin.from_date')</label>

                                                    <div class="input-group date" id="datetimepicker1">
                                                        <input type="datetime-local" form="print_form" class="form-control" id="from_date"
                                                               name="from_date"
                                                               value="">

                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-md-4" >
                                                <div class="form-group">
                                                    <label for="to_date">@lang('admin.to_date')</label>

                                                    <div class="input-group date" id="datetimepicker2">
                                                        <input type="datetime-local" form="print_form" class="form-control" id="to_date" name="to_date"
                                                               value="">
                                                    </div>
                                                </div>
                                            </div>




                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <button type="button" id="btnFiterSubmitSearch"
                                                            class="btn btn-info"
                                                            style="margin-top:20px;width: 100%">@lang('admin.filter')</button>
                                                </div>
                                            </div>


                                            <div class="col-md-4" >

                                                <div class="form-group" id="ssss" style="margin: 10px">
                                                    <label for="from_date">@lang('admin.AddTransaction')</label>
                                                    <input type="number"  class="form-control" id="add_money" value="">

                                                </div>
                                                <button class="btn btn-success  btn-sm" style="    float: left;" id="add_transaction">@lang('admin.AddTransaction')</button>

                                            </div>

                                        </div>

                                        <div class="table-responsive">

                                            <div class="row">
                                                <div class="col-md-12">

                                                    <div>
                                                        <div class="col-md-12">
                                                            <div class="widget">

                                                                <div class="widget-body">
                                                                    {{--                                                                    <div id="totalDifference"></div>--}}

                                                                    <table id="orders" class="table table-striped table-bordered" style="width:100%">
                                                                        <thead>
                                                                        <tr>
                                                                            <th>ID</th>
                                                                            <th>@lang('admin.in')</th>
                                                                            <th>@lang('admin.out')</th>
                                                                            <th>@lang('admin.order_number')</th>
                                                                            <th>@lang('admin.order_date')</th>
                                                                            <th>@lang('admin.action')</th>
                                                                        </tr>
                                                                        </thead>
                                                                        <tfoot class="footer-totals">
                                                                        <tr>
                                                                            <th>@lang('admin.total_price')</th>
                                                                            <th id="totalIn"></th>
                                                                            <th id="totalOut"></th>
                                                                            <th></th>
                                                                            <th></th>
                                                                        </tr>
                                                                        <tr>
                                                                            <th>@lang('admin.totalDifference')</th>
                                                                            <th id="totalDifference" style="color: blue;font-size: 24px;"></th>
                                                                            <th></th>
                                                                            <th></th>
                                                                            <th></th>
                                                                        </tr>
                                                                        </tfoot>
                                                                    </table>
                                                                </div>
                                                            </div><!-- .widget-body -->
                                                        </div><!-- .widget -->
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- Column selectors with Export Options and print table -->

    </div>


@endsection
@push('js')
    <script>
        $('#btnFiterSubmitSearch').click(function () {
            $('#orders').DataTable().draw(true);
        });

        // setInterval(function(){
        //     $('#orders').DataTable().draw(true);
        //     ; }, 10000);

        $(document).ready(function() {

            function formatCurrency(amount, currencySymbol) {
                return  parseFloat(amount).toFixed(3) ;
            }
            var table = $('#orders').DataTable({
                responsive: true,
                processing: true,
                serverSide: true,
                bStateSave: true,
                stateSave: true,
                bSortable: false,
                bRetrieve: false,
                order: [[ 4, "ASC" ]],
                ordering: false,

                ajax: {
                    url: "{{ route('reports_famouse' , request()->id) }}",
                    type: 'GET',
                    data: function (d) {
                        d.from_date = $('#from_date').val();
                        d.to_date = $('#to_date').val();
                        d.user_id = $('#user_id').val();
                    }
                },
                dom: 'Blfrtip',
                buttons: [
                    {
                        extend: 'copy',
                        footer: true
                    },
                    {
                        extend: 'csv',
                        footer: true
                    },
                    {
                        extend: 'excel',
                        footer: true
                    },
                    {
                        extend: 'print',
                        footer: true,
                        customize: function (win) {
                            var totalIn = 0;
                            var totalOut = 0;

                            // Calculate total across the entire dataset for printing
                            table.rows().every(function () {
                                var row = this.data();
                                totalIn += parseFloat($(row.in).text() || 0);
                                totalOut += parseFloat($(row.out).text() || 0);
                            });

                            var totalDifference = totalIn - totalOut;

                            // Append styled totals, including Total Difference, to the print document
                            $(win.document.body).append(
                                '<div style="margin-top: 20px; font-size: 16px; font-weight: bold; text-align: right;">' +
                                '<span style="color: green;">Total In: ' + totalIn.toFixed(2) + '</span><br>' +
                                '<span style="color: red;">Total Out: ' + totalOut.toFixed(2) + '</span><br>' +
                                '<span style="color: blue;">Total Difference (In - Out): ' + totalDifference.toFixed(2) + '</span>' +
                                '</div>'
                            );
                        }
                    }
                ],
                lengthMenu: [
                    [10, 25, 50, -1], [10, 25, 50, "All"]
                ],
                columns: [
                    {
                        data: null,
                        name: 'id',
                        title: "@lang('admin.ID')",
                        render: function (data, type, row, meta) {
                            return meta.row + meta.settings._iDisplayStart + 1;
                        }
                    },
                    { data: 'in', name: 'in', title: "@lang('admin.in')" },
                    { data: 'out', name: 'out', title: "@lang('admin.out')" },
                    { data: 'order_id', name: 'order_id', title: '@lang('admin.order_number')' },
                    { data: 'date', name: 'date', title: '@lang('admin.order_date')' },
                    { data: 'action', name: 'action', title: '@lang('admin.action')' }
                ],

                footerCallback: function (row, data, start, end, display) {
                    var api = this.api();

                    // Calculate total for 'in' column (current page)
                    var pageTotalIn = api
                        .column(1, { page: 'current' })
                        .data()
                        .reduce(function (a, b) {
                            return parseFloat(a) + parseFloat($(b).text() || 0);
                        }, 0);

                    // Calculate total for 'out' column (current page)
                    var pageTotalOut = api
                        .column(2, { page: 'current' })
                        .data()
                        .reduce(function (a, b) {
                            return parseFloat(a) + parseFloat($(b).text() || 0);
                        }, 0);

                    // Calculate the difference
                    var pageTotalDifference = pageTotalIn - pageTotalOut;

                    // Insert formatted totals with currency
                    $('#totalIn').html(formatCurrency(pageTotalIn, '  @lang('admin.KD') '));
                    $('#totalOut').html(formatCurrency(pageTotalOut, '  @lang('admin.KD') '));
                    $('#totalDifference').html(formatCurrency(pageTotalDifference, '  @lang('admin.KD') '));
                }
            });
            $('body').on('click','#add_transaction',function (e) {
                e.preventDefault();
                var total  = $("#tager_Total").html();
                var code = "{{request()->id}}";
                var add_money = $("#add_money").val();


                $.ajax({
                    url: "{{route('add_transaction')}}",
                    method: "post",
                    data: {
                        total:total,
                        code:code,
                        add_money:add_money,
                        famouse:'famouse',
                    },
                    dataType: 'json',


                    success: function (response) {
                        if (response.status == 'success') {
                            new Noty({
                                type: 'success',
                                layout: 'topRight',
                                text: "@lang('admin.addedsuccessfly')",
                                timeout: 2000,
                                killer: true
                            }).show();
                        }else{
                            new Noty({
                                type: 'error',
                                layout: 'topRight',
                                text: "@lang('admin.NotFoundUser')",
                                timeout: 2000,
                                killer: true
                            }).show();
                        }
                        table.ajax.reload();

                    },

                });




            });

        });
    </script>
@endpush