@extends('adminlte::page')

@section('title', 'Costs')

@section('content_header')
@stop

@section('content')
<div class="col-12  col-lg-12">
    <div class="card">
        <div class="card-header">
            <h3 class="card-title"><b>Fuel provider invoices</b> </h3>
        </div>
    </div>
    <!-- general form elements -->
    <div class="card card-default card-tabs">
        <div class="card-header p-2 pt-1">
            <ul class="nav nav-tabs" id="custom-tabs" role="tablist">
                <li class="nav-item" fuel-provider="pilot">
                    <a class="nav-link @if($fuel_provider == 'pilot') active @endif" id="pilot-tab" data-toggle="pill" href="#pilot-tab-wrapper" role="tab" aria-controls="pilot-tab-wrapper" aria-selected="false">Pilot</a>
                </li>
                <li class="nav-item" fuel-provider="pilotcan">
                    <a class="nav-link @if($fuel_provider == 'pilotcan') active @endif" id="pilotcan-tab" data-toggle="pill" href="#pilotcan-tab-wrapper" role="tab" aria-controls="pilotcan-tab-wrapper" aria-selected="false">Pilot CAN</a>
                </li>
                <li class="nav-item" fuel-provider="loves">
                    <a class="nav-link @if($fuel_provider == 'loves') active @endif" id="loves-tab" data-toggle="pill" href="#loves-tab-wrapper" role="tab" aria-controls="loves-tab-wrapper" aria-selected="false">Loves</a>
                </li>
                <li class="nav-item" fuel-provider="roadrangers">
                    <a class="nav-link @if($fuel_provider == 'roadrangers') active @endif" id="roadrangers-tab" data-toggle="pill" href="#roadrangers-tab-wrapper" role="tab" aria-controls="roadrangers-tab-wrapper" aria-selected="false">Road Rangers</a>
                </li>

                <li class="nav-item" fuel-provider="tapetro">
                    <a class="nav-link @if($fuel_provider == 'tapetro') active @endif" id="tapetro-tab" data-toggle="pill" href="#tapetro-tab-wrapper" role="tab" aria-controls="tapetro-tab-wrapper" aria-selected="false">TA Petro</a>
                </li>


                <li class="nav-item" fuel-provider="petrocanada">
                    <a class="nav-link @if($fuel_provider == 'petrocanada') active @endif" id="petrocanada-tab" data-toggle="pill" href="#petrocanada-tab-wrapper" role="tab" aria-controls="petrocanada-tab-wrapper" aria-selected="false">Petro Canada</a>
                </li>

                <li class="nav-item" fuel-provider="quikq">
                    <a class="nav-link @if($fuel_provider == 'quikq') active @endif" id="quikq-tab" data-toggle="pill" href="#quikq-tab-wrapper" role="tab" aria-controls="quikq-tab-wrapper" aria-selected="false">QuikQ</a>
                </li>

            </ul>
        </div>

        <!-- /.card-header -->
        <!-- form start -->
        <!--<form role="form" action="/costs" method="get">

            <div class="form-group form-inline" style="margin:10px">
                <label for="fuel_provider">Fuel provider</label>
                <select name="fuel_provider" class="form-control" style="width:150px" id="fuel_provider">
                    <option value="pilot" @if(Request()->fuel_provider=='pilot') selected @endif>Pilot</option>
                    <option value="loves" @if(Request()->fuel_provider=='loves') selected @endif>Loves</option>
                    <option value="road_rangers" @if(Request()->fuel_provider=='road_rangers') selected @endif>Road Rangers</option>
                </select>
                <input type="submit" class="btn btn-sm btn-success" value="Filter">
            </div>
        </form> -->


        <div class="col-lg-12 card-body">
            <div class="tab-content">
            @if($fuel_provider == 'petrocanada')
             <button type="button" class="btn btn-sm btn-success" data-toggle="modal" data-target="#add-statement"
                style="margin-left: 5px;float:right">
                <i class="fa fa-plus"></i> Add statement
            </button>
            <br/>
            <br/>
            @endif

            @if($fuel_provider == 'quikq')
             <button type="button" class="btn btn-sm btn-success" data-toggle="modal" data-target="#import-statement"
                style="margin-left: 5px;float:right">
                <i class="fa fa-plus"></i> Import Statement
            </button>
            <br/>
            <br/>
            @endif
                @foreach($statements as $key => $tabs)
                <div class="tab-pane active fade show" id="{{$key}}-tab-wrapper" role="tabpanel" aria-labelledby="{{$key}}-tab">
                    <table class="table table-bordered table-hover table-stripped datatables">
                        <thead>
                            @if(in_array($fuel_provider,array('quikq')))
                                <th>Period</th>
                            @else
                                <th>Date</th>
                            @endif
                            <th>Invoice#</th>
                            <th>Country</th>
                            <th>Statement total</th>
                            <th>Cost for Carriers</th>
                            <th>Cost for Fulger</th>
                            <th>Cost for Fulger USA</th>
                            <th>Difference</th>
                            @if(in_array($fuel_provider,array('quikq')))
                                <th>Actions</th>
                            @endif
                        </thead>
                        <tbody class="tbody-{{$key}}">
                            @foreach ($tabs as $statement)
                                <tr>
                                    <td>{{$statement['date']}}</td>
                                    <td>{{$statement['invoice_no']}}</td>
                                    <td>{{$statement['country']}}</td>
                                    <td class="text-right">{{number_format($statement['statement_total'],2)}}</td>
                                    <td class="text-right">@if(isset($statement['carriers_cost'])) {{number_format($statement['carriers_cost'],2)}} @else - @endif</td>
                                    <td class="text-right">@if(isset($statement['fulger_cost'])){{number_format($statement['fulger_cost'],2)}} @else - @endif</td>
                                    <td class="text-right">@if(isset($statement['fulger_usa_cost'])){{number_format($statement['fulger_usa_cost'],2)}} @else - @endif</td>
                                    <td class="text-right">{{number_format($statement['statement_total']-($statement['carriers_cost']+$statement['fulger_cost']+$statement['fulger_usa_cost']),2)}}</td>
                                    @if(in_array($fuel_provider,array('quikq')))
                                        <td>
                                            <a href="/costs/{{$statement['id']}}/edit/?provider={{$fuel_provider}}" class="btn btn-sm btn-warning"><i class="fa fa-edit"></i> Edit</a>
                                        </td>
                                    @endif
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                    {{-- @if($key!='petrocanada') --}}
                    {{-- {{$entity->appends(request()->input())->links()}} --}}
                    {{-- @endif --}}
                </div>
                @endforeach
            </div>
        </div>

    </div>
</div>


 <div class="modal fade" id="add-statement">
        <div class="modal-dialog">
            <div class="modal-content">
                <form action="/petro-canada/save-statement" method="post">
                    @csrf
                    <div class="modal-header">
                        <h4 class="modal-title">Add statement</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <label for="merchant">Week ID</label>
                        <input type="text" name="week_id" id="week_id" class="form-control" />

                        <label for="total">Total</label>
                        <input type="text" name="total" id="total" class="form-control" />

                        <label for="ttp">Date</label>
                        <input type="date" name="date" id="date" class="form-control" />

                        <label for="invoice_no">Invoice#</label>
                        <input type="text" name="invoice_no" id="invoice_no" class="form-control" />
                        <br/>
                        <br/>

                        <input type="submit" class="btn btn-success" value="Save" />
                    </div>
                </form>

            </div>
        </div>
        <!-- /.modal-content -->
    </div>
<!-- /.card -->

<div class="modal fade" id="import-statement">
    <div class="modal-dialog">
        <div class="modal-content">
            <form action="/import" method="post" enctype="multipart/form-data">
                @csrf
                <div class="modal-header">
                    <h4 class="modal-title">Import statement</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">

                    <input type="hidden" name="report_type" value="quickq-statements">
                    <label for="merchant">Invoice Nr.</label>
                    <input type="text" name="invoice_no" id="invoice_no" class="form-control" />
                    <label for="report">Report</label>
                    <input type="file" id="report" name="reports[]" multiple="multiple" class="form-control"> <br />

                    <br/>
                    <br/>

                    <input type="submit" class="btn btn-success" value="Import" />
                </div>
            </form>

        </div>
    </div>
    <!-- /.modal-content -->
</div>

@endsection

@section('css')

@stop

@section('js')
<script>
$(document).ready(function() {
  $(".datatables").DataTable({
      "bAutoWidth": false,
      "paging": true,
      "bPaginate":false,
      "lengthChange":false,
      "pagingType":'first_last_numbers',
      "pageLength":20,
      "searching": false,
      "bInfo": false,
      @if($fuel_provider == 'petrocanada') "order": [[ 0, "desc" ]] @else   "ordering": false @endif
  });
    $('#custom-tabs .nav-item').click(function() {
        window.location.href = "/costs/?provider="+ $(this).attr('fuel-provider');
    });
});
</script>
@stop