@extends('layouts.app')
@push('styles')
    <!-- JQuery DataTable Css -->
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
@endpush
@push('scripts')
    <script>
        $(document).ready(function() {
            $(document).on('keyup', '.bs-searchbox input', function(e) {
                var searchData = e.target.value;


                $.ajax({
                    type: 'GET',
                    url: 'https://alamat.thecloudalert.com/api/cari/index/?keyword=' + searchData,
                    success: function(data) {
                        // $('.kecamatan-wrapper select #kecamatan_pelanggan').empty();
                        var uniqueKecamatan = [];
                        var uniqueKabkota = [];
                        var uniqueProvinsi = [];

                        for (var i = 0; i < data.result.length; i++) {
                            var kecamatan = data.result[i].kecamatan;
                            var kabkota = data.result[i].kabkota;
                            var provinsi = data.result[i].provinsi;


                            if (uniqueKecamatan.indexOf(kecamatan) === -1) {
                                uniqueKecamatan.push(kecamatan);
                                uniqueProvinsi.push(provinsi);
                                uniqueKabkota.push(kabkota);

                            }
                        }

                        $('#kecamatan_pelanggan').empty();
                        for (var j = 0; j < uniqueKecamatan.length; j++) {
                            $('#kecamatan_pelanggan').append('<option value="' +
                                uniqueKecamatan[
                                    j] + '">' + uniqueProvinsi[j] + ' , ' + uniqueKabkota[
                                    j] + ' , ' + uniqueKecamatan[j] + '</option>');
                        }

                        $('#kecamatan_pelanggan').selectpicker('refresh');


                    },
                    error: function(error) {

                        console.log(error);
                    }
                });
            });

        });
    </script>
@endpush
@push('scripts')
    {{-- <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>
    <script>
        $(function() {
             $('#daterange').daterangepicker({
                opens: 'right',
                locale: {
                    format: 'DD/MM/YYYY'
                },
                showCustomRangeLabel: true,
                alwaysShowCalendars: true,
                ranges: {
                    'Hari Ini': [moment(), moment()],
                    'Kemarin': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    '7 Hari Terakhir': [moment().subtract(6, 'days'), moment()],
                    '1 Bulan Terakhir': [moment().subtract(29, 'days'), moment()],
                    'Bulan Ini': [moment().startOf('month'), moment().endOf('month')],
                    'Bulan Terakhir': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1,
                        'month').endOf('month')]
                }
            }, function(start, end, label) {

                console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end
                    .format('YYYY-MM-DD'));
                var delayInMilliseconds = 500; //1 second

                setTimeout(function() {
                    $("#filter-form").submit();
                }, delayInMilliseconds);

            });
        });
    </script> --}}
@endpush

@section('content')
    <div class="container-fluid">
        <div class="block-header">
            <h2>Data Pelanggan</h2>
        </div>


        <div class="row clearfix">
            <!-- Task Info -->
            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="card">

                    <div class="body">

                        <form action="" id="filter-form">
                            <div class="row">
                                {{-- <div class="col-lg-2 col-md-3">
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <i class="material-icons">date_range</i>
                                        </span>
                                        <div class="form-line">

                                            <input type="text" class="form-control" name="periode" id="daterange"
                                                value="@if (isset($periode)) {{ $periode[0] }} - {{ $periode[1] }} @endif">
                                        </div>
                                    </div>
                                </div> --}}
                                <div class="col-lg-3 col-md-3">
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <i class="material-icons">person</i>
                                        </span>
                                        <div class="form-line">
                                            <input class="form-control" placeholder="Nama/No Telp" name="nama_pelanggan"
                                                value="{{ $request->nama_pelanggan }}">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-3 col-md-3">
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <i class="material-icons">home</i>
                                        </span>
                                        <div class="form-line">

                                            <select class="form-control" id="kecamatan_pelanggan" name="kecamatan_pelanggan"
                                                class="selectpicker" data-live-search="true">
                                                @if (isset($data))
                                                    <option value="{{ $data->kecamantan_pelanggan }}">
                                                        {{ $data->kecamatan_pelanggan }}</option>
                                                @endif
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-2 col-md-3">
                                    <div class="input-group">
                                        <button class="btn btn-primary">Cari</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                        @if (\Helper::hakAkses('cetak_laporan', 'laporan_pelanggan'))
                            <form action="{{ route('laporan.pelanggan.print') }}" target="_blank"
                                class="row flex-column-reverse">
                                <div class="col-md-6">

                                    <input type="hidden" class="form-control" name="nama_pelanggan"
                                        value="{{ $request->nama_pelanggan }}">
                                    <input type="hidden" class="form-control" name="kecamatan_pelanggan"
                                        value="{{ $request->kecamatan_pelanggan }}">
                                    <input type="hidden" class="form-control" name="excel" value="0">

                                </div>
                                <div class="col-md-6 text-right">
                                    <button type="submit" class="btn bg-light-green waves-effect">
                                        <i class="material-icons">print</i>
                                        <span>Cetak</span>
                                    </button>

                                </div>
                            </form>
                            <form action="{{ route('laporan.pelanggan.print') }}" target="_blank"
                                class="row flex-column-reverse">
                                <div class="col-md-6">
                                    <input type="hidden" class="form-control" name="nama_pelanggan"
                                        value="{{ $request->nama_pelanggan }}">
                                    <input type="hidden" class="form-control" name="kecamatan_pelanggan"
                                        value="{{ $request->kecamatan_pelanggan }}">
                                    <input type="hidden" class="form-control" name="excel" value="1">

                                </div>
                                <div class="col-md-6 text-right">
                                    <button type="submit" class="btn bg-green waves-effect">
                                        <i class="material-icons">print</i>
                                        <span>Cetak Excel</span>
                                    </button>

                                </div>
                            </form>
                        @endif
                        <div class="row">
                            
                            
                            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                                <div class="card">
                                    <div class="header  text-center">
                                        <div>
                                            <h4><i class="material-icons col-indigo ">person</i>Jumlah Pelanggan
                                            </h4>
                                        </div>
                                    </div>
                                    <div class="body  text-center" style="padding-top:0">
                                        <div style="margin-bottom:0px;margin-top:0">
                                            <h4> @if (isset($jumlahPelanggan))
                                                    {{ $jumlahPelanggan}}
                                                @else
                                                    0
                                                @endif
                                            </h4>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-hover dashboard-task-infos">
                                <thead>
                                    <tr>
                                        <th>Nama</th>
                                        <th>No. Telepon</th>
                                        <th>Alamat</th>
                                        <th>Kecamatan</th>
                                        <th>Total Transaksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($datas as $data)
                                        <tr>
                                            <td>{{ $data->nama_pelanggan }}</td>
                                            <td>{{ $data->telp_pelanggan }}</td>
                                            <td>{{ $data->alamat_pelanggan }}</td>
                                            <td>{{ $data->kecamatan_pelanggan }}</td>
                                            <td>
                                                Rp. {{ number_format($data->total_nominal) }}
                                            </td>
                                    @endforeach
                                </tbody>

                                <tfoot>
                                    <tr>
                                        <td colspan="5">
                                            @include('layouts.includes.pagination')
                                        </td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <!-- #END# Task Info -->
        </div>
    </div>
@endsection