@extends('layout.master')
@section('content')
    <section class="content pb-5">
        <div class="container-fluid">
            <div class="row pt-4">
                <div class="col-md-12">
                    <div class="title-section">
                        <p>Customers</p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4" id="datePickerClick1">
                    <div class="form-group custom-form-group">
                        <label class="form-label" for="customer">Date range</label>
                        {{-- <input type="" id="datePickerClick1" class="form-control" name="birthday"> --}}
                        {{-- <select class="form-control">
                        <option value=""></option>
                        </select> --}}
                        <div id="reportrange" class="form-control">
                            <i class="fa fa-calendar"></i>&nbsp;
                            <span></span> <i class="fa fa-caret-down"></i>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group custom-form-group">
                        <label class="form-label" for="customer">Zone</label>
                        <select class="form-control">
                            <option value="">Select Zone</option>
                            @foreach ($zones as $zone)
                                <option value="{{ $zone->id }}">
                                    {{ $zone->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group custom-form-group">
                        <label class="form-label" for="customer">LSP</label>
                        <select class="form-control">
                            <option value="">Select Lsp</option>
                            @foreach ($lsps as $lsp)
                                <option value="{{ $lsp->id }}">
                                    {{ $lsp->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>
                {{-- <div class="col-md-2">
                <div class="form-group custom-form-group">
                    <label class="form-label" for="customer">Payment mode</label>
                    <select class="form-control">
                        <option value=""></option>
                    </select>
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group custom-form-group">
                    <label class="form-label" for="customer">Shipment mode</label>
                    <select class="form-control">
                        <option value=""></option>
                    </select>
                </div>
            </div> --}}
                <div class="col-md-2">
                    <div class="form-group custom-form-group">
                        <label class="form-label" for="customer">&nbsp;</label>
                        <button type="button" class="btn btn-danger btn-block">Search</button>
                    </div>
                </div>
            </div>
            {{-- <div class="row py-4 pt-sm-4 pb-sm-5">
            <div class="col-md-12">
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th scope="col">Customer Name</th>
                                <th scope="col">Email</th>
                                <th scope="col">RTO</th>
                                <th scope="col">Cancel</th>
                                <th scope="col"> Payment Mode </th>
                                <th scope="col">Shipping Mode </th>
                                <th scope="col">Lost/Damaged</th>
                                <th scope="col">Total Shipment</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Sanjeev Kumar</td>
                                <td>sanjeev.kumar@gmail.com</td>
                                <td>10</td>
                                <td>3</td>
                                <td>PrePaid</td>
                                <td>By Road</td>
                                <td>5</td>
                                <td>25</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div class="pagination_rounded">
                    <ul>
                        <li>
                            <a href="#" class="prev"> <i class="fa fa-chevron-left" aria-hidden="true"></i> </a>
                        </li>
                        <li><a href="#" class="active">1</a> </li>
                        <li class="hidden-xs"><a href="#">2</a> </li>
                        <li class="hidden-xs"><a href="#">3</a> </li>
                        <li class="hidden-xs"><a href="#">4</a> </li>
                        <li>
                            <a href="#" class="next"> <i class="fa fa-chevron-right" aria-hidden="true"></i></a>
                        </li>
                    </ul>
                </div>

            </div>
        </div> --}}

            <div class="row py-4 pt-sm-4 pb-sm-5">
                <div class="col-md-12">
                    <div class="table-responsive">
                        <table class="table table-striped" id="customerList">
                            <thead>
                                <tr>
                                    <th scope="col">Sr. No.</th>
                                    <th scope="col">Customer Name</th>
                                    <th scope="col">Mobile Number</th>
                                    <th scope="col">Website Name</th>
                                    <th scope="col">Email</th>
                                    <th scope="col">Gender</th>
                                    <th scope="col">Company Name</th>
                                    <th scope="col">City </th>
                                    <th scope="col">Pincode</th>
                                    <th scope="col">Dob</th>
                                    <th scope="col">Type</th>
                                    <th scope="col">Spoc Employee</th>
                                    <th scope="col">Spoc Employee Id</th>
                                    <th scope="col">Google Id</th>
                                    <th scope="col">Facebook Id</th>
                                    <th scope="col">Status</th>
                                    <th scope="col">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                    {{-- {{ $customers->appends(request()->except('page'))->links('layouts.pagination') }} --}}
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="title-section">
                        <p>Customers Count</p>
                    </div>
                    <div class="zone-box">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th scope="col">Name</th>
                                    <th scope="col">RTO Count</th>
                                    <th scope="col">Percentage</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Ram Kapoor</td>
                                    <td>10</td>
                                    <td>12%</td>
                                </tr>
                                <tr>
                                    <td>Ram Kapoor</td>
                                    <td>10</td>
                                    <td>12%</td>
                                </tr>
                                <tr>
                                    <td>Ram Kapoor</td>
                                    <td>10</td>
                                    <td>12%</td>
                                </tr>
                                <tr>
                                    <td>Ram Kapoor</td>
                                    <td>10</td>
                                    <td>12%</td>
                                </tr>
                                <tr>
                                    <td>Ram Kapoor</td>
                                    <td>10</td>
                                    <td>12%</td>
                                </tr>
                                <tr>
                                    <td>Ram Kapoor</td>
                                    <td>10</td>
                                    <td>12%</td>
                                </tr>
                                <tr>
                                    <td>Ram Kapoor</td>
                                    <td>10</td>
                                    <td>12%</td>
                                </tr>
                                <tr>
                                    <td>Ram Kapoor</td>
                                    <td>10</td>
                                    <td>12%</td>
                                </tr>
                                <tr>
                                    <td>Ram Kapoor</td>
                                    <td>10</td>
                                    <td>12%</td>
                                </tr>
                                <tr>
                                    <td>Ram Kapoor</td>
                                    <td>10</td>
                                    <td>12%</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="row">
                        <div class="col-md-7 col-5">
                            <div class="title-section">
                                <p>Top 10 Customer</p>
                            </div>
                        </div>

                        <div class="col-md-5 col-7">
                            <div class="mb-3">
                                <select class="form-control">
                                    <option value="">June-Dec-2022</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="zone-box">
                        <div class="row">
                            <div class="col-md-8 col-12">
                                <h6 class="mb-2">Customer June - Dec 2021</h6>

                                <canvas id="customerChart" height="170px"></canvas>
                            </div>

                            <div class="col-md-4 col-12">
                                <div class="row">
                                    <div class="col-md-10 col-10">
                                        <h6>48285</h6>
                                    </div>
                                    <div class="col-md-2 col-2">
                                        <div class="dropdown float-right">
                                            <a class="admintabledrop" data-toggle="dropdown" href="#"
                                                aria-expanded="false">
                                                <i class="fa fa-ellipsis-v"></i>
                                            </a>
                                            <div class="dropdown-menu dropdown-menu-md tableaction dropdown-menu-right">
                                                <ul>
                                                    <li><a href="discount-view.html">View &amp; Edit</a></li>
                                                    <li><a href="#">Delete</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-3 col-2">
                                        <div class="icon-box">
                                            <img src="{{ asset('assets/images/img-3.svg') }}" alt="">
                                        </div>
                                    </div>
                                    <div class="col-md-9 col-6">
                                        <div class="icon-box-content">
                                            <h5 class="mb-0">38453</h5>
                                            <p>Total Profit</p>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-3 col-2">
                                        <div class="icon-box bg-secondary">
                                            <img src="{{ asset('assets/images/img-1.svg') }}" alt="">
                                        </div>
                                    </div>
                                    <div class="col-md-9 col-6">
                                        <div class="icon-box-content">
                                            <h5 class="mb-0">38453</h5>
                                            <p>Total Profit</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-3 col-2">
                                        <div class="icon-box bg-secondary">
                                            <img src="{{ asset('assets/images/img-2.svg') }}" alt="">
                                        </div>
                                    </div>
                                    <div class="col-md-9 col-6">
                                        <div class="icon-box-content">
                                            <h5 class="mb-0">38453</h5>
                                            <p>Total Profit</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- <script>
        var e = document.getElementById('customerChart').getContext('2d');
        var customerChart = new Chart(e, {
            type: 'bar',
            data: {
                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                datasets: [{
                    label: '# of Votes',
                    data: [65, 59, 80, 81, 56, 55, 40],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(255, 159, 64, 0.2)',
                        'rgba(255, 205, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(201, 203, 207, 0.2)'
                    ],
                    borderColor: [
                        'rgb(255, 99, 132)',
                        'rgb(255, 159, 64)',
                        'rgb(255, 205, 86)',
                        'rgb(75, 192, 192)',
                        'rgb(54, 162, 235)',
                        'rgb(153, 102, 255)',
                        'rgb(201, 203, 207)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    </script> --}}
    <script>
        $("#customerList").DataTable({
            "language": {
                "zeroRecords": "No record(s) found."
            },
            processing: true,
            serverSide: true,
            lengthChange: true,
            order: [0, 'asc'],
            searchable: true,
            bStateSave: false,

            ajax: {
                url: "{{ url('/customers/table') }}",
                data: function(d) {}
            },

            columns: [

                {
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    sortable: false
                },

                {
                    data: 'first_name',
                    name: 'first_name',
                    searchable: true,
                    orderable: true,
                    defaultContent: 'NA'
                },
                {
                    data: 'mobile_number',
                    name: 'mobile_number',
                    searchable: true,
                    orderable: true,
                    defaultContent: 'NA'
                },
                {
                    data: 'website_name',
                    name: 'website_name',
                    searchable: true,
                    orderable: true,
                    defaultContent: 'NA'
                },
                {
                    data: 'email',
                    name: 'email',
                    searchable: true,
                    orderable: true,
                    defaultContent: 'NA'
                },
                {
                    data: 'gender',
                    name: 'gender',
                    searchable: true,
                    orderable: true,
                    defaultContent: 'NA'
                },
                {
                    data: 'company_name',
                    name: 'company_name',
                    searchable: true,
                    orderable: true,
                    defaultContent: 'NA'
                },
                {
                    data: 'city',
                    name: 'city',
                    searchable: true,
                    orderable: true,
                    defaultContent: 'NA'
                },
                {
                    data: 'pincode',
                    name: 'pincode',
                    searchable: true,
                    orderable: true,
                    defaultContent: 'NA'
                },
                {
                    data: 'dob',
                    name: 'dob',
                    searchable: true,
                    orderable: true,
                    defaultContent: 'NA'
                },
                {
                    data: 'type',
                    name: 'type',
                    searchable: true,
                    orderable: true,
                    defaultContent: 'NA'
                },
                {
                    data: 'spoc_employee',
                    name: 'spoc_employee',
                    searchable: true,
                    orderable: true,
                    defaultContent: 'NA'
                },
                {
                    data: 'spoc_employee_id',
                    name: 'spoc_employee_id',
                    searchable: true,
                    orderable: true,
                    defaultContent: 'NA'
                },
                {
                    data: 'google_id',
                    name: 'google_id',
                    searchable: true,
                    orderable: true,
                    defaultContent: 'NA'
                },
                {
                    data: 'facebook_id',
                    name: 'facebook_id',
                    searchable: true,
                    orderable: true,
                    defaultContent: 'NA'
                },
                {
                    data: 'status',
                    name: 'status',
                    searchable: true,
                    orderable: true
                },
                {
                    data: 'action',
                    name: 'action',
                    searchable: true,
                    orderable: true
                }
            ]
        });

        $('#datePickerClick1').on("click", function(e) {

            var start = moment().subtract(29, 'days');
            var end = moment();

            function cb(start, end) {

                $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
            }

            $('#reportrange').daterangepicker({
                startDate: start,
                endDate: end,
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1,
                        'month').endOf('month')]
                }
            }, cb);

            cb(start, end);

        });
    </script>
@endsection