@extends('layouts.master')

@section('title', 'Balance Sheet')

@section('content')

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0 text-dark">Balance Sheet</h1>
                    </div><!-- /.col -->

                    <div class="col-sm-6">
                        <span class="btn btn-primary float-right" data-toggle="modal" data-target="#NewTeamModal"><i class="fa fa-plus-circle mr-2"></i>New Record</span>
                    </div>
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->

        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">

                <!-- /.row -->

                <!-- Main row -->
                <div class="row">
                    <!-- Left col -->
                    <div class="col-md-12">

                        <!-- /.card -->

                        <!-- TABLE: LATEST ORDERS -->
                        <div class="card">

                            <!-- /.card-header -->
                            <div class="card-body p-10">
                                <div class="table-responsive">
                                    <table id="dataTable" class="display compact" style="width:100%">
                                        <thead>
                                            <tr>
                                                <th>Date</th>
                                                <th>PayPal</th>
                                                <th>Stripe</th>
                                                <th>Refunds</th>
                                                <th>Withdrawal</th>
                                                <th>Balance</th>
                                                <th>Actions</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @if(!empty($balances))
                                                                                                

                                                @foreach($balances as $balance)
                                                   <tr>
                                                        <td>{{$balance->date}}</td>
                                                        <td>{{"$".$balance->paypal}}</td>
                                                        <td>{{"$".$balance->stripe}}</td>
                                                        <td>{{"$".$balance->refunds}}</td>
                                                        <td>{{"$".$balance->withdrawal}}</td>
                                                        <td>{{"$".$balance->balance}}</td>
                                                        <td>
                                                            @if($counter == 0)
                                                                <button type="button" class="btn btn-danger"  data-toggle="modal" data-target="#DeleteTeamModal" team-id="{{$balance->id}}">Delete</button>
                                                                <button type="button" class="btn btn-primary"  data-toggle="modal" data-target="#EditModal" team-id="{{$balance->id}}" record-refunds ={{$balance->refunds}} record-date="{{$balance->date}}" record-paypal="{{$balance->paypal}}" record-stripe="{{$balance->stripe}}" record-withdrawal="{{$balance->withdrawal}}">Edit</button>
                                                            @else
                                                                <button type="button" class="btn btn-danger disabled">Delete</button>
                                                            @endif
                                                            
                                                        </td>
                                                    </tr>
                                                                                                    @endforeach
                                            @endif
                                        </tbody>
                                        
                                        <tfoot>
                                            <tr>
                                                <th>Total</th>
                                                <td>{{"$".$totalPayPal}}</td>
                                                <td>{{"$".$totalStripe}}</td>
                                                <td>{{"$".$totalRefunds}}</td>
                                                <td>{{"$".$totalWithdrawal}}</td>
                                                <td>
                                                    @if($balances->count()>0)
                                                        {{"$".$balances[0]->balance}}
                                                    @else
                                                        {{"$0"}}
                                                    @endif
                                                    
                                                </td>
                                                <th>{{"Actions"}}</th>
                                            </tr>
                                        </tfoot>
                                    </table>
                                </div>
                                <!-- /.table-responsive -->
                            </div>

                            <!-- /.card-footer -->
                        </div>
                        <!-- /.card -->
                    </div>
                    <!-- /.col -->

                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </div><!--/. container-fluid -->
        </section>
        <!-- /.content -->
    </div>

    <div id="NewTeamModal" class="modal fade" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Add New Record</h4>
                </div>
                <form method="post" role="form" action="{{route('newBalance')}}">
                    {{ csrf_field() }}
                    <div class="modal-body">
                        <label class="mt-2" for="title">Date</label>
                        <input id="title" name="date" type="date" placeholder="Enter Date" class="form-control" required>
                        <label class="mt-2" for="title">PayPal</label>
                        <input id="title" name="paypal" type="number" placeholder="Enter PayPal balance" class="form-control" step="0.01" value = "0" required>
                        <label class="mt-2" for="title">Stripe</label>
                        <input id="title" name="stripe" type="number" placeholder="Enter Stripe balance" class="form-control" step="0.01" value = "0" required>
                        <label class="mt-2" for="title">Refunds</label>
                        <input id="title" name="refunds" type="number" placeholder="Enter refunds amount" class="form-control" step="0.01" value = "0" required>
                        <label class="mt-2" for="title">Withdrawal</label>
                        <input id="title" name="withdrawal" type="number" placeholder="Enter amount withdrawn" class="form-control" step="0.01" value = "0" required>
                        
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </div>
                </form>

            </div>

        </div>
    </div>
    
    
    <div id="EditModal" class="modal fade" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Edit Record</h4>
                </div>
                <form id="EditForm" method="post" role="form" action="{{route('editBalance')}}">
                    {{ csrf_field() }}
                    <div class="modal-body">
                        <input name="id" type="hidden" placeholder="Enter Channel Name" class="form-control" required>
                        <label class="mt-2" for="title">Date</label>
                        <input id="title" name="date" type="date" placeholder="Enter Date" class="form-control" required>
                        <label class="mt-2" for="title">PayPal</label>
                        <input id="title" name="paypal" type="number" placeholder="Enter PayPal balance" class="form-control" step="0.01" value = "0" required>
                        <label class="mt-2" for="title">Stripe</label>
                        <input id="title" name="stripe" type="number" placeholder="Enter Stripe balance" class="form-control" step="0.01" value = "0" required>
                        <label class="mt-2" for="title">Refunds</label>
                        <input id="title" name="refunds" type="number" placeholder="Enter refunds amount" class="form-control" step="0.01" value = "0" required>
                        <label class="mt-2" for="title">Withdrawal</label>
                        <input id="title" name="withdrawal" type="number" placeholder="Enter amount withdrawn" class="form-control" step="0.01" value = "0" required>
                        
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </div>
                </form>

            </div>

        </div>
    </div>

    <div id="DeleteTeamModal" class="modal fade" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Delete Balance</h4>
                </div>
                <form id="DeleteForm" method="post" role="form" action="{{route('deleteBalance')}}" >
                    {{ csrf_field() }}
                    <div class="modal-body">
                        <input name="id" type="hidden" placeholder="Enter Channel Name" class="form-control" required>
                        <p>Are you sure you want to delete this record?</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-warning">Yes!</button>
                    </div>
                </form>

            </div>

        </div>
    </div>

    <!-- /.content-wrapper -->
@endsection

@section('javascript')
    <!-- jQuery -->
    <script src="/public/dist/plugins/jquery/jquery.min.js"></script>
    <!-- jQuery UI 1.11.4 -->
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <!-- Bootstrap 4 -->
    <script src="/public/dist/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    <!-- Sparkline -->
    <script src="/public/dist/plugins/sparkline/jquery.sparkline.min.js"></script>
    <!-- jvectormap -->
    <script src="/public/dist/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
    <script src="/public/dist/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
    <!-- Slimscroll -->
    <script src="/public/dist/plugins/slimScroll/jquery.slimscroll.min.js"></script>
    <!-- ChartJS 1.0.2 -->
    <script src="/public/dist/plugins/chartjs-old/Chart.min.js"></script>
    <!-- AdminLTE App -->
    <script src="/public/dist/js/adminlte.js"></script>
    <!-- AdminLTE dashboard demo (This is only for demo purposes) -->
    <script src="/public/dist/js/pages/dashboard2.js"></script>
    <!-- AdminLTE for demo purposes -->
    <script src="/public/dist/js/demo.js"></script>
    
    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

    <script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>
    
    <script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>


    <script>
    
        $(document).ready(function() {
            $('#dataTable').DataTable({
                order: [[ 0, "desc" ]],
                dom: 'Bfrtip',
                buttons: [
                    {
                        extend: 'print',
                        exportOptions: { columns: [ 0, 1, 2, 3, 4, 5 ]} ,
                        footer: true
                    }
                ]
            } );
        });

        $('#DeleteTeamModal').on('show.bs.modal', function (e) {
            // get information to update quickly to modal view as loading begins
            var opener=e.relatedTarget;//this holds the element who called the modal

            //we get details from attributes
            var channelid=$(opener).attr('team-id');

            $('#DeleteForm').find('[name="id"]').val(channelid);
        });
        
        $('#EditModal').on('show.bs.modal', function (e) {
            // get information to update quickly to modal view as loading begins
            var opener=e.relatedTarget;//this holds the element who called the modal

            //we get details from attributes
            var channelid=$(opener).attr('team-id');
            var date=$(opener).attr('record-date');
            var paypal=$(opener).attr('record-paypal');
            var stripe=$(opener).attr('record-stripe');
            var withdrawal=$(opener).attr('record-withdrawal');
            var refunds=$(opener).attr('record-refunds');


            $('#EditForm').find('[name="id"]').val(channelid);
            $('#EditForm').find('[name="date"]').val(date);
            $('#EditForm').find('[name="paypal"]').val(paypal);
            $('#EditForm').find('[name="stripe"]').val(stripe);
            $('#EditForm').find('[name="withdrawal"]').val(withdrawal);
            $('#EditForm').find('[name="refunds"]').val(refunds);
        });
    

    </script>


@stop