@extends('mattine.layouts.app')

@section('content')
<!-- ============================================================== -->
<!-- main wrapper -->
<!-- ============================================================== -->

<div class="container-fluid dashboard-content">
    <div class="row justify-content-between">
        <div class="col">
            <h3 class="section-title mb-0"> <i class="fa fa-chart-line"></i> Rapport-Z</h3>
        </div>

    </div>
    <hr>
    <div class="row justify-content-md-center">
        <div class="col-xl-8 col-lg-8 col-md-8 col-sm-8 col-8">
            <div class="card p-0">
                <h4 class="card-header text-light bg-primary">Filter:</h4>
                <div class="card-body p-1">
                    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                        <form id="frm-type" action="#">

                            <div class="row">
                                <div class="col">
                                    <div class="form-group row">
                                        <label for="fromdate" class="col-sm-2 col-form-label">De :</label>
                                        <div class="col-sm-10">
                                            <input class="form-control" id="fromdate" name="fromdate" value="{{request('fromdate')}}" type="datetime-local">
                                        </div>
                                    </div>
                                </div>

                                <div class="col">
                                    <div class="form-group row">
                                        <label for="todate" class="col-sm-2 col-form-label">A :</label>
                                        <div class="col-sm-10">
                                            <input class="form-control" id="todate"  name="todate" value="{{request('todate')}}" type="datetime-local">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">

                                <div class="col">
                                    <div class="form-group row">
                                        <label for="bytype" class="col-sm-2 col-form-label">Type :</label>
                                        <div class="col-sm-10">
                                            <select class="form-control" id="bytype" name="bytype">
                                                <option value="Ticket" {{ request('bytype') == 'Ticket' ? "selected" : "" }}>TICKET</option>
                                                <option value="tous" {{ request('bytype') == 'tous' ? "selected" : "" }}>Tous</option>
                                                <option value="Recu" {{ request('bytype') == 'Recu' ? "selected" : "" }}>RECU</option>
                                                <option value="Facture" {{ request('bytype') == 'Facture' ? "selected" : "" }}>FACTURE</option>
                                                <option value="Bon Livraison" {{ request('bytype') == 'Bon Livraison' ? "selected" : "" }}>BON LIVERISON </option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">

                                <div class="col">

                                    <label for="bytype" class="col-sm-3 col-form-label text-light bg-success float-right">Prix Total : {{$total_price}} DH</label>



                                </div>
                            </div>

                            <button id="btnsbt" class="btn btn-green mb-2" type="button">
                                <i class="fa fa-search"></i> Search
                            </button>

                        </form>

                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-10 col-lg-12 col-md-6 col-sm-12 col-12">
            <div class="card">
                <div class="col-xl-6 col-lg-4 col-md-3 col-sm-12 col-6">


                </div>
                <h5 class="card-header"></h5>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table">

                            <thead class="bg-warning">
                                <tr class="border-0">
                                    <th class="border-0">MAT</th>
                                    <th class="border-0">Produit</th>
                                    <th class="border-0">Quantité</th>
                                    <th class="border-0">PrixTTC</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($ventes as $items)
                                <tr>
                                    <td>{{$items['key']}}</td>
                                    <td>{{$items['Name']}}</td>
                                    <td>{{$items['Qte']}}</td>
                                    <td>{{$items['prixTTC']}} Dh</td>


                                </tr>
                                @endforeach

                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="card-footer">
                    {{$ventes->appends(request()->query())->links()}}

                </div>
            </div>
        </div>


    </div>
</div>







@endsection

@section('javascript')
<script type="text/javascript">


    function zeroPadded(val) {
        if (val >= 10)
            return val;
        else
            return '0' + val;
    }


    d = new Date();
    //initialize two datestimes
    date_1 = d.getFullYear() + "-" + zeroPadded(d.getMonth()) + "-" + zeroPadded(d.getDate()) + "T" + d.getHours() + ":" + zeroPadded(d.getMinutes());
    date_2 = d.getFullYear() + "-" + zeroPadded(d.getMonth() + 1) + "-" + zeroPadded(d.getDate()) + "T" + d.getHours() + ":" + zeroPadded(d.getMinutes());
    $("#todate").val(date_2);
    $("#fromdate").val(date_1);

    $("#btnsbt").click(function () {
        todate = $('#todate').val();
        fromdate = $("#fromdate").val();

        flag = CompareDate(fromdate, todate);
        if (!flag)
            alert("Date debut doi etre superieur que date fin");
        else
            $("#frm-type").submit();
    });

    function CompareDate(fromdate, todate) {
        //Note: 00 is month i.e. January
        var dateOne = new Date(fromdate); //Year, Month, Date
        var dateTwo = new Date(todate); //Year, Month, Date
        if (dateOne > dateTwo) {
            //alert("Date One is greater than Date Two.");
            return false;
        } else {
            //alert("Date Two is greater than Date One.");
            return true;
        }
    }
</script>
@endsection