@extends('backpack::layout')

@section('content')
    
    <div class="row">
        <div class="col-md-12 col-sm-4 col-xs-12">
            
            <div class="x_panel">
                <div class="x_title">
                    <h2>Invoice Payments</h2>

                    <div class="btn-group" style="margin-left: 10px">
                        <form class="example" action="{{ URL::to('/admin/invoice-payments') }}">
                            <input type="text" name="dateRange" class="date_range" id="dateRange">
                            <button type="submit"><i class="fa fa-search"></i></button>
                        </form>
                    </div>
                    <!-- <div class="btn-group" style="margin-left: 10px">
                        <a href="{{ URL::to('/admin/invoice-payments/download') }}" style="margin-left: 10px">
                            <button class="btn btn-success">Download
                                <i class="glyphicon glyphicon-download-alt"></i>
                            </button>
                        </a>
                    </div> -->

                    <ul class="nav navbar-right panel_toolbox">
                        <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                        </li>
                    </ul>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content" style="display: block">
                    <table id="datatable-responsive"
                           class="table table-striped table-bordered dt-responsive nowrap" cellspacing="1"
                           width="100%" height="auto">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>Invoice Title</th>
                            <th>User Name</th>
                            <th>Client Name</th>
                            <th>Invoice Amount</th>
                            <th>Received Amount</th>
                            <th>Invoice TAP ID</th>
                            <th>Payment Status</th>
                            <th>Transferred</th>
                        </tr>
                        </thead>
                        <tbody>
                        @if(count($invoices) > 0 )
                            @foreach($invoices as $key => $invoice)
                                @php
                                    $per = ($invoice->amount_paid * 2.75) / 100;
                                    $receivedAmnt = $invoice->amount_paid - $per - 1;
                                @endphp
                                <tr>
                                    <td style="text-align: center; vertical-align: middle; color:#00A65A;">{{ $invoice->invoices->invoice_id ? str_pad($invoice->invoices->invoice_id, 4, '0', STR_PAD_LEFT) : '-' }}</td>
                                    <td>{{ ucfirst($invoice->invoices->title) }}</td>
                                    <td>
                                        @if($invoice->invoices->freelancer->user)
                                            {{ ucfirst($invoice->invoices->freelancer->user->first_name).' '.ucfirst($invoice->invoices->freelancer->user->last_name) }}
                                        @else
                                            Unknown User
                                        @endif
                                    </td>
                                    <td>
                                        @if($invoice->invoices->client->user)
                                            {{ ucfirst($invoice->invoices->client->user->first_name).' '.ucfirst($invoice->invoices->client->user->last_name) }}
                                        @else
                                            Unknown Client
                                        @endif
                                    </td>
                                    <td>{{ $invoice->currency }} {{ $invoice->amount_paid }}</td>
                                    <td>{{ $invoice->currency }} {{ $receivedAmnt }}</td>
                                    <td>{{ $invoice->tap_invoice_id ? $invoice->tap_invoice_id : '-' }}</td>
                                    <td>
                                        @if($invoice->payment_status == 1)
                                            <strong style="color: #00A65A;">PAID</strong>
                                        @else
                                            <strong style="color: #FFC300;">PENDING</strong>
                                        @endif
                                    </td>
                                    <td>
                                        <select class="form-control updateTransferred" data-invoice="{{ $invoice->id }}" {{ $invoice->payment_status != 1 ? 'disabled' : '' }}>
                                            <option value="0" {{ $invoice->transfer_status == 0 ? 'selected' : '' }} >No</option>
                                            <option value="1" {{ $invoice->transfer_status == 1 ? 'selected' : '' }}>Yes</option>
                                        </select>
                                    </td>
                                </tr>
                            @endforeach
                        @else
                            <tr>
                                <td colspan="9">
                                    No result found.
                                </td>
                            </tr>
                        @endif
                        </tbody>
                    </table>
                    {{ $invoices->render() }}
                </div>
            </div>

        </div>
    </div>
@endsection
@section('after_scripts')
    <script>
        (function ($) {
            $(".updateTransferred").on('change', function(){
                var status = $(this).val();
                var invoice_id = $(this).data('invoice');
                
                if(confirm("Are you sure? You want to update transfer status. ")){
                    $.ajax({
                        url: '/admin/invoice-payments/update-status',
                        method: 'POST',
                        data: { id: invoice_id, status: status },
                        dataType: 'json',
                        success: function (data) {
                            alert('Status updated successfully');
                            location.reload();
                        },
                        error: function (data) {
                            alert('something went wrong');
                            location.reload();
                        }
                    });
                }
            });


        
            var today = "@php echo \Carbon\Carbon::now() @endphp";
            // $('#startDate').daterangepicker({
            //     singleDatePicker: true,
            //     showDropdowns: true,
            //     locale: {
            //         format: 'YYYY-MM-DD'
            //     },
            //     startDate: today,
            // });

            // $('#endDate').daterangepicker({
            //     singleDatePicker: true,
            //     showDropdowns: true,
            //     locale: {
            //         format: 'YYYY-MM-DD'
            //     },
            //     startDate: today,
            //     onSelect: function(dateText){
            //         var start_date = new Date($('#startDate').val()),
            //             end_date = new Date(dateText),
            //             diff  = new Date(end_date - start_date),
            //             days  = parseInt(diff/(1000*60*60*24), 10);
            //         if(days < 1){
            //             alert('End date should be greater than start date!')
            //             $(this).val('');
            //             return false;
            //         }
            //         $("#startDate").datetimepicker('option', 'maxDate', dateText);
            //     }
            // });

            $('input[name="dateRange"]').daterangepicker({
                // autoUpdateInput: false,
                showDropdowns: true,
                locale: {
                    cancelLabel: 'Clear',
                    format: 'YYYY-MM-DD'
                },
                startDate: new Date(),
                endDate: new Date()
            });

            // $('input[name="start_date"]').on('apply.daterangepicker', function(ev, picker) {
            //     $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
            // });

            // $('input[name="start_date"]').on('cancel.daterangepicker', function(ev, picker) {
            //     $(this).val('');
            // });
            
            $('.tttt').click(function(){
                alert($('.date_range').val());
            })
        })(jQuery);
    </script>
@endsection