@extends('adminlte::page')


@section('content')

    @if ($message = Session::get('success'))
        <div class="alert alert-success">
            <p>{{ $message }}</p>
        </div>
    @endif

            <div class="card card-primary card-outline card-outline-tabs">
              <div class="card-header p-0 border-bottom-0">
                <ul class="nav nav-tabs" id="custom-tabs-three-tab" role="tablist">
                  <li class="nav-item">
                    <a class="nav-link active" id="custom-tabs-three-home-tab" data-toggle="pill" href="#custom-tabs-three-home" role="tab" aria-controls="custom-tabs-three-home" aria-selected="true">Cards </a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" id="petro-canada-savings-tab" data-toggle="pill" href="#petro-canada-savings" role="tab" aria-controls="petro-canada-savings" aria-selected="false">Saving Statistics</a>
                  </li>
                </ul>
              </div>
              <div class="card-body">
                <div class="tab-content" id="custom-tabs-three-tabContent">
                  <div class="tab-pane fade show active" id="custom-tabs-three-home" role="tabpanel" aria-labelledby="custom-tabs-three-home-tab">

            <a href="/settings/petro-canada-cards/create" class="btn btn-sm btn-success" style="float:right"><i class="fa fa-plus"></i> Create</a>

            <button type="button" class="btn btn-sm btn-success" data-toggle="modal" data-target="#verification"
                style="margin-right: 5px;float:right">
                <i class="fa fa-download"></i> Verification
            </button>

            @if($cards->count()>0)
                <table class="table datatables table-bordered table-striped" >
                <thead>
                    <td style="width:100px">Card</td>
                    <td>Carrier</td>
                    <td>Driver</td>
                    <td>Unit Nr</td>
                    <td style="width:200px">Edit</td>
                    <td style="width:200px">Delete</td>
                </thead>
                    <tbody>
                    @foreach($cards as $card)
                        <tr>
                            <td>{{$card->card}}</td>
                            <td>{{$card->carrier->name}}</td>
                            <td>{{$card->driver}}</td>
                            <td>{{$card->unit_nr}}</td>
                            <td><a href="/settings/petro-canada-cards/{{$card->id}}/edit" class="btn btn-warning">Edit</a></td>
                            <td>
                                <form action="{{ route('petro-canada-cards.destroy',$card->id) }}" method="POST">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" onclick="return confirm('Are you sure?')" class="btn btn-danger">Delete</button>
                                </form>
                            </td>
                        </tr>
                    @endforeach
                    </tbody>

                </table>



            @else
                <p class="callout callout-info">There are no cards defined yet!</p>
            @endif

                  </div>
                  <div class="tab-pane fade" id="petro-canada-savings" role="tabpanel" aria-labelledby="petro-canada-savings">
                            <button type="button" class="btn btn-sm btn-success" data-toggle="modal" data-target="#compass-reports"
                style="margin-left: 5px;float:right">Create
            </button>
                @if(count($petro_canada_savings)>0)

                    <table class="table datatables table-bordered table-striped" style="width:1000px">
                        <thead>
                            <td>Date from</td>
                            <td>Date to</td>
                            <td>Savings</td>
                            <td>Edit</td>
                            <td>Delete</td>
                        </thead>
                        <tbody>
                            @foreach($petro_canada_savings as $savings)
                            <tr>
                                <td>{{$savings->date_from}}</td>
                                <td>{{$savings->date_to}}</td>
                                <td>{{$savings->savings}}</td>
                                 <td><a href="/petro-canada-savings/{{$savings->id}}/edit" class="btn btn-sm btn-warning"><i
                                            class="fa fa-edit"></i> Edit</a></td>
                                 <td>
                                <form action="/petro-canada-savings/{{$savings->id}}" method="POST">
                                    @csrf

                                    @method('DELETE')

                                    <button type="submit" class="btn btn-danger" onclick="return confirm('Are you sure?')">Delete</button>
                                </form>

                                </form>
                                 </td>
                            @endforeach
                        </tbody>

                    </table>

                    @else
                    <p class="callout callout-info">There are no savings created!</p>
                    @endif


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



             <div class="modal fade" id="compass-reports">
        <div class="modal-dialog">
            <div class="modal-content">
                <form action="/petro-canada-savings" method="post">
                    @csrf
                    <div class="modal-header">
                        <h4 class="modal-title">Create</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="from">Date from</label>
                        <input type='date' id="from" name="date_from" class="form-control"/>

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

                        <label for="savings">Savings</label>
                        <input type='text' id="savings" name="savings" class="form-control"/> <br/>

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

                    </div>
                </form>

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


    <div class="modal fade" id="verification">
        <div class="modal-dialog">
            <div class="modal-content">
                <form action="/settings/petro-canada-cards/verification" method="post" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-header">
                        <h4 class="modal-title">Verification</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="report">Report</label>
                        <input type="file" id="report" name="report" class="form-control" /> <br />
                        <input type="submit" class="btn btn-success" value="Import" />
                    </div>
                </form>

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

@stop
@section('css')
    <link rel="stylesheet" href="//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
@stop


@section('js')
    <script> $(function () {
        $(".datatables").DataTable({"bAutoWidth": false,"paging":false,"searching":false,"bInfo" : false});
            var url = new URL(window.location.href);
        var tabId = url.searchParams.get("tab");

        if(typeof tabId === 'string' && tabId.length > 0) {
            $('#'+tabId).trigger('click');
        }
        $('.nav-tabs .nav-link').click(function() {
            history.pushState({}, null, window.location.pathname+'?tab='+$(this).attr('id'));
        });
    });</script>
@stop