@extends('admin.layouts.master')
@section('title', 'Customer')
@section('content')
    <style>
        .some-text {
            color: red;
            font-style: italic;
            font-size: 15px;
        }

        .help-block {
            color: red;
            font-size: 13px;
            font-weight: normal;
        }

        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
    </style>

    <!-- Page Wrapper -->
    <div class="page-wrapper">
        <div class="content container-fluid">

            <div class="row">

                <div class="col-md-12">


                    @include('admin.includes.msg')


                    <div class="card">
                        <div class="card-header">
                            Filter
                        </div>
                        <div class="card-body">
                            <form action="" method="get" id="filter">
                                <div class="row">
                                    <div class="col-md-3">
                                        <label>Date Range</label>
                                        <input type="text" name="date" @if(isset($_GET['date'])) value="{{$_GET['date']}}" @else value="{{ date('Y-m-d', strtotime(' -1 day')) }} - {{ date('Y-m-d') }}"
                                               @endif placeholder="Filter Time" class="form-control" id="daterange">
                                    </div>

                                    <div class="col-md-3">
                                        <label>Search</label>
                                        <input type="text" id="gsearch" placeholder="Search Product" class="form-control">
                                    </div>
                                    
                                </div>
                            </form>
                        </div>
                    </div>


                    <div class="card card-table">
                        <div class="card-body">

                            @csrf
                            <div class="card-header">
                                <h4 class="card-title">Customer Achievement (Total Sales: Rs {{number_format($total,2)}})</h4>
                                <a href="javascript:" onclick="printDiv('printableArea')" class="btn-info btn  fr" style="margin-right: 15px;margin-top: -25px"> Print </a> &nbsp; &nbsp; &nbsp;

                            </div>

                            <style>
                                .select2 {
                                    width: 100% !important;
                                }

                                .td {
                                    width: 5%;
                                }

                                .td2 {
                                    width: 10%;
                                }

                                .select2-selection--single {
                                    height: 36px !important;
                                    width: 100%;
                                }

                                .select2-container--default .select2-selection--single .select2-selection__rendered {
                                    height: 36px !important;
                                    line-height: 36px !important;
                                }

                                @if(Auth::user()->role<4)
                                    .retailerhide {
                                    display: none
                                }
                                @endif
                            </style>

                            <div class="before_mystocktable " id="printableArea">
                                <style type="text/css" media="print">
                                    @media print {
                                        @page {
                                            margin-top: 0;
                                            margin-bottom: 0;
                                        }

                                        body {
                                            padding-top: 72px;
                                            padding-bottom: 72px;
                                        }
                                    }
                                </style>
                              <div class="table-responsive">
                                    <table class="mystocktable" id="mytable">
                                        <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Customer Name</th>
                                            <th>City</th>
                                            <th>Locality</th>
                                            <th>Mobile No</th>
                                            <th class="td2">Purchased</th>

                                        </tr>
                                        </thead>
                                        <tbody>
                                        @php $xx=1; @endphp


                                        @foreach($users as $p)
                                            <tr>
                                                <td>{{$xx}}</td>
                                                <td>
                                                    <a href="/customerorderreport/{{$p->id}}" style="color: #333"> 
                                                    {{$p->name}} @if($p->user_type==3) echo (Agent) @endif
                                                    </a>
                                                </td>
                                                <td>@php $city=json_decode($p->cityId); echo @$all_city[$city[0]]; @endphp</td>
                                                <td>@if(!empty($p->localityId) && isset($p->localityId) && $p->localityId>0)  {{$all_locality[$p->localityId]}}  @endif</td>
                                                <td>{{$p->phone}}</td>
                                                <td>{{ sprintf("%.2f", $p->total) }}</td>
                                            </tr>
                                            @php $xx++; @endphp
                                        @endforeach
                                        </tbody>
                                    </table>
                                </div>

                            </div>


                        </div>

                    </div>
                </div>

            </div>
        </div>
    </div>
    </div>
    <!-- /Main Wrapper -->
    </div>

    <style>
        .form-control {
            min-width: 60px;
        }
    </style>
    <script>
        $(document).ready(function () {
            $("#gsearch").on("keyup blur", function () {
                var value = $(this).val().toLowerCase();
                $("#mytable tbody tr").filter(function () {
                    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
                });
            });
        });


    </script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css"/>


    <script>
        $(function () {
            $('#daterange').daterangepicker({
                timePicker: false,

                locale: {
                    format: 'Y-M-D',
                }
            }, function (start, end, label) {
                setTimeout(function () {
                    $("#filter").submit();
                }, 500);

            });
        });

    </script>
    <script>
        $(document).ready(function () {
            $("#gsearch").on("keyup blur", function () {
                var value = $(this).val().toLowerCase();
                $("#mytable tbody tr").filter(function () {
                    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
                });
            });
        });



        $('th').click(function(){
            var table = $(this).parents('table').eq(0)
            var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index()))
            this.asc = !this.asc
            if (!this.asc){rows = rows.reverse()}
            for (var i = 0; i < rows.length; i++){table.append(rows[i])}
        })
        function comparer(index) {
            return function(a, b) {
                var valA = getCellValue(a, index), valB = getCellValue(b, index)
                return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.toString().localeCompare(valB)
            }
        }
        function getCellValue(row, index){ return $(row).children('td').eq(index).text() }
    </script>
@endsection