@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>


                                            @if (auth()->user()->hasRole('super_admin') == 'true')

                                                <div class="col-md-4" style="float: {{ app()->getLocale() == 'ar' ? 'right' : 'left' }}">
                                                    <div class="form-group">
                                                        <label for="payment_type">@lang('admin.tagers')</label>
                                                        <select name="user_id" form="print_form" class="form-control" id="user_id">
                                                            <option value="">@lang('admin.all')</option>
                                                            @foreach (\App\Models\User::whereRoleIs(['Tager'])->get() as $user)
                                                                <option value="{{ $user->id }}">{{ $user->name }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>

                                            @endif






                                            <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>
                                                                        </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('tager_summary') }}",
                 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')' }
             ],

             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 user_id = $("#user_id").val();
             var add_money = $("#add_money").val();


             console.log(add_money , user_id);
             $.ajax({
                 url: "{{route('add_transaction')}}",
                 method: "post",
                 data: {
                     total:total,
                     user_id:user_id,
                     add_money:add_money,
                     summary:'summary',
                 },
                 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