@extends('layouts.app')
@section('styles')
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link href="{{asset('assets/css/skins/square/grey.css')}}" rel="stylesheet">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="{{asset('assets/css/dataTables.bootstrap.min.js')}}">

    <style>
        #statement-table {
            min-width: 45rem;
        }

        @media (min-width: 1200px)
        {
            #statement-table {
                min-width: 57rem;
            }
        }
        .box_style_1{
            -webkit-border-radius: 0 0 3px 3px;
            padding: 20px 10px;
            -moz-border-radius:0 0 3px 3px;
            border-radius: 0 0 3px 3px;
            margin-top: -27px;
        }
        .pagination>li>a{
            color:#AE996E !important;
            outline: 0;
            box-shadow: none;
        }
        .pagination>.active>a, .pagination>.active>a:focus,
        .pagination>.active>a:hover, .pagination>.active>span,
        .pagination>.active>span:focus,
        .pagination>.active>span:hover{
            background-color:#AE996E !important;
            border-color:#AE996E !important;
            color:#fff !important;
        }
        input[type=search]
        {
            height:35px;
        }
    </style>
@endsection

@section('main-content')
    @include('layouts.account_banner',['title'=>"Statement","image"=>asset('assets/img/statement.jpg')])
    <!-- Content ================================================== -->
    <div class="container margin_60_35">
        <!-- <p>Date: <input type="text" id="datepicker"></p> -->
        <div class="row" id="order-summary">
            <div class="col-md-4" id="sidebar2">
                <div class="theiaStickySidebar">
                    <p><a href="list_page.html" style="text-align: left; background: #AE996E;" class="btn_side">Filter</a></p>
                    <div class="box_style_1">
                       <form id="statement-form" action="{{route('statement')}}" method="POST" autocomplete="off">
                           @csrf
                           @if(count($errors->all())>0)
                           <span class="text-danger">Invalid date range</span>
                           @endif
                           <div class="dropdown">
                               <input id="datepicker"
                                      type="text" class="form-control" placeholder="From Date"
                                      required
                                      autocomplete="off"
                                      value="{{old('from_date')}}"
                                      name="from_date"
                                      aria-label="From Date" aria-describedby="basic-addon1">

                           </div><br>
                           <div class="dropdown">
                               <input id="datepicker2" type="text" class="form-control"
                                      required
                                      autocomplete="off"
                                      value="{{old('to_date')}}"
                                      name="to_date"
                                      placeholder="To Date" aria-label="To Date" aria-describedby="basic-addon1">

                           </div><br>
                           <button style="font-size: 15px; background:  #332C20;" class="btn_full5" >
                               Submit &#8594;</button>
                       </form>
                    </div><!-- End box_style_1 -->

                </div><!-- End col-md-3 -->
            </div>
            <div class="col-md-7">
                <div class="box_style_2" id="order_process">
                    <h2 style="background:  #332C20;" class="inner2">Statement</h2>
                    <div class="table table-striped table-responsive-sm" style="border:none;">
                        <table class=" cart-list" id="statement-table" >
                            <hr>
                            .                <thead>
                            <tr>
                                <td>
                                    <h6>Date</h6>
                                </td>
                                <td>
                                    <h6>Transaction Type</h6>
                                </td>
                                <td>
                                    <h6>Description</h6>
                                </td>
                                <td>
                                    <h6>Points Used</h6>
                                </td>
                                <td>
                                    <h6>Points gained</h6>
                                </td>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($transactions as $transaction)
                                <tr>
                                    <td>
                                        <p class="settlement-table">{{date("Y-m-d",strtotime($transaction->Transaction_date))}}</p>
                                    </td>
                                    <td>
                                        <p class="settlement-table">{{$transaction->Transaction_type}}</p>
                                    </td>
                                    <td>
                                        <p class="settlement-table">{{$transaction->Description}}</p>
                                    </td>
                                    <td>
                                        <p class="settlement-table">{{$transaction->Points_used}}</p>
                                    </td>
                                    <td>
                                        <p class="settlement-table">{{$transaction->Points_gained}}</p>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>


            </div><!-- End box_style_1 -->
        </div><!-- End col-md-6 -->

    </div><!-- End row -->
    </div>
@endsection

@section('scripts')
    <script src="{{asset('assets/js/theia-sticky-sidebar.js')}}"></script>
    <script>
        jQuery('#sidebar2').theiaStickySidebar({
            additionalMarginTop: 80
        });
    </script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="{{asset('assets/js/jquery.dataTables.min.js')}}"></script>
    <script src="{{asset('assets/js/dataTables.bootstrap.min.js')}}"></script>
    <script type="text/javascript">
        $( function() {
            $('#statement-table').DataTable({
                responsive: true
            })
            $( "#datepicker" ).datepicker();
            $( "#datepicker2" ).datepicker();
        } );

        $('#statement-form').submit(function(e){

            if ($("#datepicker").val() > $("#datepicker2").val()) {
                alert('Invalid date range, the to date must be greater than the from date');
                e.preventDefault()
            }
        })
    </script>
@endsection